:root {
      --green: #2d8653;
      --green-l: #e8f5ee;
      --green-d: #1e6b3f;
      --amber: #f59e0b;
      --amber-l: #fef3c7;
      --amber-d: #92400e;
      --red: #ef4444;
      --red-l: #fee2e2;
      --red-d: #991b1b;
      --blue: #3b82f6;
      --blue-l: #eff6ff;
      --blue-d: #1d4ed8;
      --purple: #7c3aed;
      --purple-l: #f3e8ff;
      --g50: #f9fafb;
      --g100: #f3f4f6;
      --g200: #e5e7eb;
      --g300: #d1d5db;
      --g400: #9ca3af;
      --g500: #6b7280;
      --g600: #4b5563;
      --g700: #374151;
      --g800: #1f2937;
      --g900: #111827;
      --white: #ffffff;
      --sidebar-w: 230px;
      --font: 'DM Sans', system-ui, sans-serif;
      --mono: 'DM Mono', monospace;
  }

  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  body {
      font-family: var(--font);
      background: var(--g50);
      color: var(--g800);
      height: 100vh;
      overflow: hidden;
  }

  /* ── LAYOUT ── */
  #app-wrapper {
      display: flex;
      flex-direction: column;
      height: 100vh;
  }

  #staff-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fef2f2;
      border-bottom: 1px solid #fecaca;
      padding: 7px 20px;
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 600;
      color: #b91c1c;
  }

  #staff-banner a {
      color: #b91c1c;
      font-weight: 700;
      text-decoration: none;
      background: #fee2e2;
      padding: 4px 12px;
      border-radius: 6px;
      border: 1px solid #fecaca;
  }

  #staff-banner a:hover {
      background: #fecaca;
  }

  #app {
      display: flex;
      flex: 1;
      min-height: 0;
  }

  #sidebar {
      width: var(--sidebar-w);
      background: var(--white);
      border-right: 1px solid var(--g200);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: background .2s;
  }

  #sidebar.admin {
      background: var(--g800);
      border-right-color: var(--g700);
  }

  #main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }

  #topbar {
      height: 58px;
      background: var(--white);
      border-bottom: 1px solid var(--g200);
      display: flex;
      align-items: center;
      padding: 0 22px;
      gap: 14px;
      flex-shrink: 0;
      position: relative;
  }

  #content {
      flex: 1;
      overflow-y: auto;
      padding: 18px 24px 24px;
  }

  /* ── SIDEBAR BRAND ── */
  .brand {
      padding: 18px 16px;
      border-bottom: 1px solid var(--g200);
      display: flex;
      align-items: center;
      gap: 9px;
  }

  .admin .brand {
      border-bottom-color: var(--g700);
  }

  .brand-icon {
      width: 30px;
      height: 30px;
      background: var(--green);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
  }

  .brand-text {
      font-size: 15px;
      font-weight: 800;
      color: var(--g800);
      line-height: 1;
  }

  .admin .brand-text {
      color: var(--white);
  }

  .brand-text span {
      color: var(--green);
  }

  .brand-sub {
      font-size: 10px;
      color: var(--g400);
  }

  .admin-badge {
      margin-left: 4px;
      background: rgba(239, 68, 68, .15);
      color: #f87171;
      padding: 1px 7px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 700;
  }

  /* ── NAV ── */
  nav {
      flex: 1;
      padding: 10px 8px;
      overflow-y: auto;
  }

  .nav-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 9px 12px;
      border-radius: 8px;
      border: none;
      margin-bottom: 2px;
      background: transparent;
      color: var(--g600);
      font-weight: 500;
      font-size: 13.5px;
      cursor: pointer;
      font-family: var(--font);
      text-align: left;
      transition: background .12s, color .12s;
  }

  .nav-btn:hover {
      background: var(--g50);
  }

  .admin .nav-btn {
      color: #9ca3af;
  }

  .admin .nav-btn:hover {
      background: var(--g700);
  }

  .nav-btn.active {
      background: var(--green-l);
      color: var(--green);
      font-weight: 700;
  }

  .admin .nav-btn.active {
      background: var(--green);
      color: var(--white);
  }

  /* ── nav-btn inner row — flex so icon & text stay vertically centred ── */
  .nav-btn > div,
  .nav-btn-submenu > div {
      display: flex;
      align-items: center;
      gap: 0;
  }

  .nav-icon {
      font-size: 16px;
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      flex-shrink: 0;
      line-height: 1;
  }

  .nav-badge {
      background: var(--red);
      color: var(--white);
      font-size: 10px;
      font-weight: 800;
      padding: 1px 7px;
      border-radius: 10px;
  }

  .sidebar-footer {
      padding: 10px 8px;
      border-top: 1px solid var(--g200);
  }

  .admin .sidebar-footer {
      border-top-color: var(--g700);
  }

  /* ── Nav group (parent + collapsible submenu) ── */
  .nav-group-toggle {
      justify-content: space-between !important;
  }
  .nav-chevron {
      font-size: 11px;
      opacity: .45;
      transition: transform .22s ease;
      flex-shrink: 0;
      line-height: 1;
  }
  .nav-group.open > .nav-group-toggle .nav-chevron {
      transform: rotate(90deg);
      opacity: .75;
  }
  .nav-sub {
      display: none;
      overflow: hidden;
      padding-left: 8px;
      margin-top: 1px;
      margin-bottom: 2px;
  }
  .nav-group.open > .nav-sub {
      display: block;
  }
  .nav-sub .nav-btn {
      font-size: 13px;
      padding: 7px 10px;
      margin-bottom: 1px;
  }
  /* subtle left accent on the open sub-items */
  .admin .nav-sub {
      border-left: 2px solid rgba(255,255,255,.1);
      margin-left: 14px;
      padding-left: 6px;
  }

  .switch-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 12px;
      border-radius: 8px;
      border: none;
      background: var(--green-l);
      color: var(--green);
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      font-family: var(--font);
      text-align: left;
      margin-top: 4px;
  }

  .admin .switch-btn {
      background: var(--g700);
      color: var(--white);
  }

  /* ── TOPBAR ── */
  .co-switcher {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid var(--g200);
      background: var(--white);
      cursor: pointer;
      font-family: var(--font);
      font-weight: 600;
      font-size: 13.5px;
      color: var(--g800);
      position: relative;
  }

  .co-dot {
      width: 20px;
      height: 20px;
      background: var(--green);
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      color: var(--white);
      font-weight: 800;
      flex-shrink: 0;
  }

  .topbar-spacer {
      flex: 1;
  }

  .profile-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: var(--font);
  }

  .avatar {
      width: 34px;
      height: 34px;
      background: var(--green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-weight: 800;
      font-size: 13px;
      flex-shrink: 0;
  }

  .profile-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--g800);
      text-align: left;
  }

  .profile-role {
      font-size: 11px;
      color: var(--g400);
  }

  /* ── DROPDOWN ── */
  .dropdown {
      position: absolute;
      top: calc(100% + 6px);
      background: var(--white);
      border: 1px solid var(--g200);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
      z-index: 500;
      min-width: 240px;
      padding: 8px;
  }

  .dd-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      color: var(--g800);
      text-align: left;
      margin-bottom: 2px;
  }

  .dd-item:hover,
  .dd-item.active {
      background: var(--green-l);
      color: var(--green);
  }

  .dd-item.danger {
      color: var(--red);
  }

  .dd-item.danger:hover {
      background: var(--red-l);
  }

  .dd-sep {
      height: 1px;
      background: var(--g100);
      margin: 6px 0;
  }

  .dd-header {
      padding: 10px 12px;
      border-bottom: 1px solid var(--g100);
      margin-bottom: 6px;
  }

  /* ── PAGE HEADER ── */
  .page-header {
      margin-bottom: 16px;
  }

  .page-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--g800);
      line-height: 1.2;
  }
  .page-title {
    padding: 0 !important;
    position: static !important;
}

  .page-sub {
      font-size: 12px;
      color: var(--g400);
      margin-top: 1px;
  }

  /* ── CARDS ── */
  .card {
      background: var(--white);
      border-radius: 12px;
      border: 1px solid var(--g200);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
      padding: 20px;
      transition: box-shadow .15s;
  }

  .card.hover:hover,
  .card.clickable:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
      cursor: pointer;
  }

  .card.pad-0 {
      padding: 0;
  }

  /* ── STAT CARDS ── */
  .stat-grid {
      display: flex;
      gap: 14px;
      margin-bottom: 20px;
      flex-wrap: wrap;
  }

  .stat-card {
      flex: 1;
      min-width: 140px;
      background: var(--white);
      border-radius: 12px;
      border: 1px solid var(--g200);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
      padding: 18px;
  }

  .stat-label {
      font-size: 11px;
      color: var(--g500);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  .stat-value {
      font-size: 26px;
      font-weight: 800;
      color: var(--g800);
      line-height: 1;
  }

  .stat-sub {
      font-size: 11px;
      color: var(--g400);
      margin-top: 3px;
  }

  .stat-bar {
      height: 3px;
      background: var(--g100);
      border-radius: 2px;
      margin-top: 12px;
  }

  .stat-fill {
      height: 3px;
      border-radius: 2px;
      width: 55%;
  }

  /* ── BADGES ── */
  .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 9px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
  }

  .badge.green {
      background: var(--green-l);
      color: var(--green-d);
  }

  .badge.amber {
      background: var(--amber-l);
      color: var(--amber-d);
  }

  .badge.red {
      background: var(--red-l);
      color: var(--red-d);
  }

  .badge.blue {
      background: var(--blue-l);
      color: var(--blue-d);
  }

  .badge.purple {
      background: var(--purple-l);
      color: var(--purple);
  }

  .badge.gray {
      background: var(--g100);
      color: var(--g600);
  }

  .badge-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
  }

  /* ── BUTTONS ── */
  .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 8px;
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font);
      border: none;
      transition: opacity .15s;
  }

  .btn:hover {
      opacity: .82;
  }

  .btn:disabled {
      opacity: .5;
      cursor: not-allowed;
  }

  .btn.sm {
      padding: 5px 12px;
      font-size: 11.5px;
  }

  .btn.full {
      width: 100%;
      justify-content: center;
  }

  .btn.primary {
      background: var(--green);
      color: var(--white);
  }

  .btn.secondary {
      background: var(--white);
      color: var(--g700);
      border: 1px solid var(--g200);
  }

  .btn.danger {
      background: var(--red);
      color: var(--white);
  }

  .btn.ghost {
      background: transparent;
      color: var(--green);
      border: 1px solid var(--green);
  }

  .btn.amber {
      background: var(--amber);
      color: var(--white);
  }

  .btn.dark {
      background: var(--g800);
      color: var(--white);
  }

  /* ── TABLES ── */
  .tbl-wrap {
      overflow-x: auto;
  }

  table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
  }

  thead tr {
      background: rgb(249, 250, 251);
  }

  th {
      padding: 9px 14px;
      text-align: left;
      color: var(--g500);
      font-weight: 700;
      font-size: 12px;
      text-transform: none;
      letter-spacing: .02em;
      border-bottom: 1px solid var(--g200);
      white-space: nowrap;
  }

  td {
      padding: 11px 14px;
      border-bottom: 1px solid var(--g100);
      color: var(--g600);
  }

  td.bold {
      color: var(--g800);
      font-weight: 600;
  }

  tbody tr:hover {
      background: var(--g50);
  }

  .empty-row {
      text-align: center;
      padding: 32px;
      color: var(--g400);
  }

  /* ── FORMS ── */
  .field {
      margin-bottom: 14px;
  }

  .field label {
      display: block;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--g600);
      margin-bottom: 4px;
  }

  .field label .req {
      color: var(--red);
  }

  .field input,
  .field select,
  .field textarea {
      width: 100%;
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--g300);
      font-size: 13.5px;
      font-family: var(--font);
      color: var(--g800);
      background: var(--white);
      outline: none;
      transition: border-color .15s;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
      border-color: var(--green);
  }

  .field input[readonly] {
      background: var(--g50);
  }

  .field textarea {
      resize: vertical;
  }

  .field-row {
      display: grid;
      gap: 12px;
  }

  .field-row.cols-2 {
      grid-template-columns: 1fr 1fr;
  }

  .field-row.span-2 {
      grid-column: 1 / -1;
  }

  /* ── TOGGLE ── */
 .toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--g100);
}

  .toggle-info .toggle-label {
      font-size: 13.5px;
      color: var(--g800);
      font-weight: 600;
  }

  .toggle-info .toggle-sub {
      font-size: 11.5px;
      color: var(--g500);
      margin-top: 1px;
  }

  .toggle-switch {
      width: 44px;
      height: 24px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      position: relative;
      transition: background .2s;
      flex-shrink: 0;
  }

  .toggle-switch.on {
      background: var(--green);
  }

  .toggle-switch.off {
      background: var(--g300);
  }

  .toggle-knob {
      position: absolute;
      top: 3px;
      width: 18px;
      height: 18px;
      border-radius: 9px;
      background: var(--white);
      transition: left .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  }

  .toggle-switch.on .toggle-knob {
      left: 23px;
  }

  .toggle-switch.off .toggle-knob {
      left: 3px;
  }

  /* ── TABS ── */
  .tabs {
      display: flex;
      border-bottom: 1px solid var(--g200);
      margin-bottom: 20px;
      overflow-x: auto;
  }

  .tab-btn {
      padding: 10px 18px;
      border: none;
      background: none;
      font-weight: 600;
      font-size: 13px;
      cursor: pointer;
      font-family: var(--font);
      white-space: nowrap;
      color: var(--g500);
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color .12s, border-color .12s;
  }

  .tab-btn.active {
      color: var(--green);
      border-bottom-color: var(--green);
  }

  /* ── SECTION HEADER ── */
  .sh {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
  }

  .sh h3 {
      margin: 0;
      font-size: 14.5px;
      font-weight: 700;
      color: var(--g800);
  }

  /* ── INFO ROW ── */
  .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid var(--g100);
  }

  .info-row .ir-label {
      font-size: 13px;
      color: var(--g500);
  }

  .info-row .ir-value {
      font-size: 13px;
      font-weight: 600;
      color: var(--g800);
  }

  /* ── DROP ZONE ── */
  .dropzone {
      border: 2px dashed var(--g300);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      background: var(--g50);
      cursor: pointer;
      margin-bottom: 16px;
      transition: all .2s;
  }

  .dropzone:hover,
  .dropzone.drag {
      border-color: var(--green);
      background: var(--green-l);
  }

  .dropzone .dz-icon {
      font-size: 20px;
      margin-bottom: 6px;
  }

  .dropzone .dz-text {
      color: var(--g600);
      font-weight: 600;
      font-size: 13px;
  }

  .dropzone .dz-sub {
      color: var(--g400);
      font-size: 12px;
      margin-top: 3px;
  }

  .dz-link {
      color: var(--green);
  }

  /* ── MODAL ── */
  .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 3000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
  }

  .modal-box {
      background: var(--white);
      border-radius: 16px;
      width: 480px;
      max-width: 100%;
      max-height: 92vh;
      overflow: auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
  }

  .modal-box.wide {
      width: 660px;
  }

  .modal-header {
      padding: 18px 24px;
      border-bottom: 1px solid var(--g200);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      background: var(--white);
      z-index: 1;
  }

  .modal-header h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: var(--g800);
  }

  .modal-close {
      background: var(--g100);
      border: none;
      border-radius: 8px;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 18px;
      color: var(--g500);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .modal-body {
      padding: 24px;
  }

  /* ── DRAWER ── */
  .drawer-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .4);
      z-index: 2500;
      display: flex;
      justify-content: flex-end;
  }

  .drawer-box {
      background: var(--white);
      width: 500px;
      height: 100%;
      overflow: auto;
      box-shadow: -8px 0 32px rgba(0, 0, 0, .15);
      display: flex;
      flex-direction: column;
  }

  .drawer-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--g200);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
  }

  .drawer-title {
      font-size: 17px;
      font-weight: 700;
      color: var(--g800);
  }

  .drawer-sub {
      font-size: 12.5px;
      color: var(--g500);
      margin-top: 3px;
  }

  .drawer-body {
      flex: 1;
      overflow: auto;
      padding: 24px;
  }

  /* ── LOGIN ── */
  #login-screen {
      min-height: 100vh;
      background: linear-gradient(160deg, #1e293b 0%, #1e3a2a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }

  .login-box {
      background: var(--white);
      border-radius: 20px;
      width: 420px;
      padding: 44px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  }

  .login-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      margin-bottom: 18px;
  }

  .login-logo-icon {
      width: 42px;
      height: 42px;
      background: var(--green);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
  }

  .login-logo-name {
      font-size: 20px;
      font-weight: 800;
      color: var(--g800);
  }

  .login-logo-name span {
      color: var(--green);
  }

  .login-logo-url {
      font-size: 11px;
      color: var(--g400);
  }

  .login-title {
      text-align: center;
      font-size: 19px;
      font-weight: 800;
      color: var(--g800);
      margin-bottom: 4px;
  }

  .demo-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--g500);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 8px;
      margin-top: 4px;
  }

  .demo-btns {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
  }

  .demo-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      font-size: 13px;
      font-family: var(--font);
  }

  .demo-btn.client {
      border: 1px solid var(--green);
      background: var(--green-l);
      color: var(--green);
  }

  .demo-btn.admin {
      border: none;
      background: var(--g800);
      color: var(--white);
  }

  /* ── SELECT COMPANY ── */
  #select-screen {
      min-height: 100vh;
      background: linear-gradient(160deg, #1e293b 0%, #1e3a2a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
  }

  .select-box {
      background: var(--white);
      border-radius: 20px;
      width: 520px;
      padding: 40px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  }

  .co-option {
      padding: 16px;
      border-radius: 10px;
      border: 1px solid var(--g200);
      margin-bottom: 10px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all .15s;
  }

  .co-option:hover {
      border-color: var(--green);
      background: var(--green-l);
  }

  .co-option-icon {
      width: 42px;
      height: 42px;
      background: var(--green);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-weight: 800;
      font-size: 17px;
      flex-shrink: 0;
  }

  .co-option-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--g800);
  }

  .co-option-sub {
      font-size: 12px;
      color: var(--g500);
  }

  .add-co-btn {
      width: 100%;
      padding: 13px;
      border-radius: 10px;
      border: 2px dashed var(--g300);
      background: transparent;
      color: var(--g500);
      font-weight: 600;
      cursor: pointer;
      font-size: 13px;
      margin-top: 4px;
      font-family: var(--font);
  }

  .add-co-btn:hover {
      border-color: var(--green);
      color: var(--green);
  }

  /* ── DASHBOARD ── */
  .compliance-banner {
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .compliance-banner.green {
      background: var(--green-l);
      border: 1px solid rgba(45, 134, 83, .2);
  }

  .compliance-banner.amber {
      background: var(--amber-l);
      border: 1px solid rgba(245, 158, 11, .2);
  }

  .compliance-banner.red {
      background: var(--red-l);
      border: 1px solid rgba(239, 68, 68, .2);
  }

  .cb-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      flex-shrink: 0;
  }

  .cb-title {
      font-weight: 700;
      font-size: 15px;
  }

  .cb-sub {
      font-size: 12.5px;
      color: var(--g600);
      margin-top: 2px;
  }

  .dash-grid {
      display: grid;
      grid-template-columns: 1fr 300px;
      gap: 18px;
  }

  .dash-left {}

  .inner-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 16px;
  }

  .task-row {
      padding: 9px 0;
      border-bottom: 1px solid var(--g100);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
  }

  .task-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--g800);
      margin-bottom: 2px;
  }

  .task-meta {
      font-size: 11px;
      font-weight: 700;
  }

  .task-meta.client {
      color: var(--amber);
  }

  .task-meta.staff {
      color: var(--blue);
  }

  .quick-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 10px;
  }

  .quick-btn {
      background: var(--g50);
      border: 1px solid var(--g200);
      border-radius: 10px;
      padding: 14px 10px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 600;
      color: var(--g700);
      font-family: var(--font);
      transition: all .15s;
  }

  .quick-btn:hover {
      background: var(--green-l);
      border-color: var(--green);
      color: var(--green);
  }

  .snapshot-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      border-bottom: 1px solid var(--g50);
  }

  .snapshot-row .k {
      font-size: 12px;
      color: var(--g500);
  }

  .snapshot-row .v {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--g800);
  }

  .fin-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
  }

  .fin-card {
      border-radius: 10px;
      padding: 12px 14px;
  }

  .fin-card.red {
      background: var(--red-l);
      border: 1px solid rgba(239, 68, 68, .15);
  }

  .fin-card.amber {
      background: var(--amber-l);
      border: 1px solid rgba(245, 158, 11, .15);
  }

  .fin-title {
      font-weight: 700;
      font-size: 13px;
      margin-bottom: 2px;
  }

  .fin-card.red .fin-title {
      color: var(--red-d);
  }

  .fin-card.amber .fin-title {
      color: var(--amber-d);
  }

  .fin-desc {
      font-size: 12px;
      color: var(--g600);
      margin-bottom: 8px;
  }

  /* ── GAUGE ── */
  .gauge-wrap {
      text-align: center;
      cursor: pointer;
  }

  /* ── ACTIVITY FEED ── */
  .filter-pills {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
  }

  .pill {
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid var(--g200);
      background: var(--white);
      color: var(--g500);
      font-weight: 500;
      font-size: 12px;
      cursor: pointer;
      font-family: var(--font);
      transition: all .15s;
  }

  .pill.active {
      border-color: var(--green);
      background: var(--green-l);
      color: var(--green);
      font-weight: 700;
  }

  .act-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 11px 0;
      border-bottom: 1px solid var(--g100);
  }

  .act-icon {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
  }

  .act-action {
      font-size: 13px;
      font-weight: 600;
      color: var(--g800);
  }

  .act-detail {
      font-size: 13px;
      color: var(--g600);
  }

  .act-user {
      font-size: 11.5px;
      color: var(--g400);
      margin-top: 3px;
  }

  .act-time {
      font-size: 11px;
      color: var(--g400);
      white-space: nowrap;
      flex-shrink: 0;
  }

  /* ── TASKS PAGE ── */
  .board-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
  }

  .board-col-header {
      font-weight: 700;
      font-size: 11px;
      color: var(--g600);
      text-transform: uppercase;
      letter-spacing: .5px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
  }

  .board-count {
      background: var(--g100);
      color: var(--g600);
      font-size: 10px;
      font-weight: 700;
      padding: 1px 8px;
      border-radius: 10px;
  }

  .board-card {
      margin-bottom: 10px;
      padding: 14px;
      cursor: pointer;
      border-left-width: 3px;
      border-left-style: solid;
  }

  .board-card.pending {
      border-left-color: var(--red);
  }

  .board-card.in-progress {
      border-left-color: var(--amber);
  }

  .board-card.completed {
      border-left-color: var(--green);
  }

  .task-detail-badge {
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      display: inline-block;
  }

  /* ── DEADLINES ── */
  .deadline-detail {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
  }

  .dd-box {
      border-radius: 8px;
      padding: 12px;
  }

  .dd-box.red {
      background: var(--red-l);
  }

  .dd-box.gray {
      background: var(--g50);
      border: 1px solid var(--g200);
  }

  .dd-box-title {
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 6px;
  }

  .dd-box.red .dd-box-title {
      color: var(--red-d);
  }

  .dd-box.gray .dd-box-title {
      color: var(--g600);
  }

  /* ── DOCS ── */
  .folder-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
  }

  .folder-card {
      padding: 12px;
      cursor: pointer;
  }

  .folder-icon-wrap {
      width: 30px;
      height: 30px;
      background: var(--g100);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
  }

  .folder-name {
      font-weight: 700;
      color: var(--g800);
      font-size: 12px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }

  .folder-count {
      font-size: 11px;
      color: var(--g400);
      margin-top: 1px;
  }

  .folder-bar {
      height: 2px;
      background: var(--g100);
      border-radius: 2px;
      margin-top: 8px;
  }

  .folder-fill {
      height: 2px;
      border-radius: 2px;
  }

  .doc-card {
      margin-bottom: 10px;
      padding: 14px;
  }

  .doc-file-icon {
      width: 40px;
      height: 40px;
      background: var(--blue-l);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
  }

  /* ── SERVICES ── */
  .services-search {
      background: var(--white);
      border: 1px solid var(--g200);
      border-radius: 10px;
      padding: 9px 14px;
      margin-bottom: 20px;
      display: flex;
      gap: 8px;
      align-items: center;
  }

  .services-search input {
      border: none;
      background: transparent;
      flex: 1;
      font-size: 14px;
      outline: none;
      font-family: var(--font);
  }

  .svc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
  }

  .svc-cat-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      margin-top: 8px;
  }

  .svc-cat-title {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--g800);
  }

  .svc-divider {
      height: 1px;
      background: var(--g200);
      flex: 1;
      border-radius: 1px;
  }

  .svc-card {
      transition: box-shadow .15s;
  }

  .svc-price {
      font-weight: 800;
      color: var(--green);
      font-size: 15px;
  }

  .svc-price-per {
      font-size: 11px;
      color: var(--g400);
      font-weight: 400;
  }

  .svc-cart-bar {
      background: var(--green-l);
      border: 1px solid rgba(45, 134, 83, .25);
      border-radius: 10px;
      padding: 12px 18px;
      margin-bottom: 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  /* ── COMPANY DETAILS ── */
  .cd-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
  }

  .cd-grid.full {
      grid-column: 1 / -1;
  }

  .warn-box {
      background: var(--amber-l);
      border-radius: 7px;
      padding: 8px 12px;
      font-size: 12px;
      color: var(--amber-d);
      margin-bottom: 10px;
  }

  .info-box {
      background: var(--blue-l);
      border-radius: 7px;
      padding: 10px 14px;
      font-size: 12.5px;
      color: var(--blue-d);
      margin-bottom: 14px;
  }

  .next-due-box {
      background: var(--green-l);
      border-radius: 7px;
      padding: 8px 10px;
      margin-top: 2px;
  }

  .nd-label {
      font-size: 10.5px;
      font-weight: 700;
      color: var(--g500);
      text-transform: uppercase;
      letter-spacing: .4px;
      margin-bottom: 3px;
  }

  .nd-value {
      font-size: 15px;
      font-weight: 800;
      color: var(--green);
  }

  .person-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 0;
      border-bottom: 1px solid var(--g100);
  }

  .person-av {
      width: 30px;
      height: 30px;
      background: var(--green);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--white);
      font-weight: 800;
      flex-shrink: 0;
  }

  .person-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--g800);
  }

  .person-sub {
      font-size: 11px;
      color: var(--g400);
  }

  .location-card {
      border: 2px dashed var(--g300);
      background: var(--g50);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 130px;
      cursor: pointer;
  }

  .location-card:hover {
      border-color: var(--green);
      background: var(--green-l);
  }

  /* ── BILLING ── */
  .sub-detail-box {
      background: var(--g50);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
  }

  .sub-detail-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 6px;
  }

  .sub-detail-row .k {
      font-size: 12.5px;
      color: var(--g500);
  }

  .sub-detail-row .v {
      font-weight: 700;
      color: var(--g800);
  }

  .include-item {
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 7px 0;
      border-bottom: 1px solid var(--g100);
  }

  .include-check {
      color: var(--green);
      font-weight: 700;
  }

  /* ── SUPPORT ── */
  .support-hero {
      text-align: center;
      padding: 28px 0 36px;
  }

  .support-cards {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-bottom: 28px;
  }

  .support-card {
      background: var(--g50);
      border: 1px solid var(--g200);
      border-radius: 12px;
      padding: 16px 24px;
      text-align: center;
      min-width: 140px;
      cursor: pointer;
      transition: background .15s;
  }

  .support-card:hover {
      background: var(--green-l);
  }

  .ticket-step-bar {
      display: flex;
      gap: 6px;
      margin-bottom: 24px;
  }

  .step-bar {
      flex: 1;
      height: 4px;
      border-radius: 2px;
  }

  .urgency-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
  }

  .urgency-opt {
      padding: 14px 8px;
      border-radius: 10px;
      border: 2px solid var(--g200);
      background: var(--white);
      cursor: pointer;
      font-family: var(--font);
      text-align: center;
      transition: all .15s;
  }

  .urgency-opt.active.low {
      border-color: var(--green);
      background: rgba(45, 134, 83, .08);
  }

  .urgency-opt.active.medium {
      border-color: var(--amber);
      background: rgba(245, 158, 11, .08);
  }

  .urgency-opt.active.high {
      border-color: var(--red);
      background: rgba(239, 68, 68, .08);
  }

  /* ── ADMIN ── */
  .admin-info-box {
      background: var(--blue-l);
      border: 1px solid rgba(59, 130, 246, .15);
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 18px;
      font-size: 13px;
      color: var(--blue-d);
  }

  .inline-select {
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--g200);
      font-size: 12px;
      font-family: var(--font);
      background: var(--white);
  }

  .perm-table th,
  .perm-table td {
      padding: 10px 14px;
  }

  .perm-table thead th {
      background: var(--g50);
      color: var(--g500);
      font-weight: 700;
      font-size: 11px;
      border-bottom: 1px solid var(--g200);
  }

  .perm-table tbody tr {
      border-bottom: 1px solid var(--g100);
  }

  /* ── STEP PROGRESS ── */
  .step-circle {
      width: 28px;
      height: 28px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--white);
      font-weight: 700;
      flex-shrink: 0;
  }

  .step-circle.done {
      background: var(--green);
  }

  .step-circle.pending {
      background: var(--g200);
      color: var(--g500);
  }

  .step-row {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--g100);
  }

  /* ── MISC ── */
  .back-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--green);
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font);
  }

  .wallet-credit {
      color: var(--green);
      font-weight: 700;
  }

  .wallet-debit {
      color: var(--red);
      font-weight: 700;
  }

  .overdue-banner {
      background: var(--red-l);
      border: 1px solid rgba(239, 68, 68, .3);
      border-radius: 12px;
      padding: 13px 18px;
      margin-bottom: 16px;
      display: flex;
      gap: 12px;
      align-items: center;
  }

  .auto-info-box {
      background: var(--blue-l);
      border: 1px solid rgba(59, 130, 246, .15);
      border-radius: 10px;
      padding: 11px 16px;
      margin-bottom: 16px;
      font-size: 13px;
      color: var(--blue-d);
  }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar {
      width: 6px;
  }

  ::-webkit-scrollbar-track {
      background: transparent;
  }

  ::-webkit-scrollbar-thumb {
      background: var(--g200);
      border-radius: 3px;
  }

  /* ── HIDDEN / VISIBLE ── */
  .hidden {
      display: none !important;
  }

  .flex {
      display: flex;
  }

  .gap-8 {
      gap: 8px;
  }

  .gap-10 {
      gap: 10px;
  }

  .gap-12 {
      gap: 12px;
  }

  .mb-8 {
      margin-bottom: 8px;
  }

  .mb-12 {
      margin-bottom: 12px;
  }

  .mb-16 {
      margin-bottom: 16px;
  }

  .mb-18 {
      margin-bottom: 18px;
  }

  .mb-20 {
      margin-bottom: 20px;
  }

  .text-right {
      text-align: right;
  }

  .fw {
      width: 100%;
  }

  /* ── Noty override — new design ── */
.noty_theme__limitless.noty_bar {
    border-radius: 10px !important;
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    border: none !important;
    padding: 0 !important;
}
.noty_theme__limitless .noty_body {
    padding: 12px 16px 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.5 !important;
}

/* Add icon before text using content */
.noty_theme__limitless .noty_body::before {
    font-family: 'Phosphor' !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Close button */
.noty_theme__limitless .noty_close_button {
    background: none !important;
    font-size: 16px !important;
    opacity: .5 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px !important;
    color: inherit !important;
}
.noty_theme__limitless .noty_close_button:hover { opacity: 1 !important; }

/* Progress bar */
.noty_theme__limitless .noty_progressbar {
    height: 3px !important;
    border-radius: 0 0 10px 10px !important;
    opacity: .4 !important;
}

/* ── Type: success ── */
.noty_theme__limitless.noty_type__success {
    background: var(--green-l) !important;
    color: var(--green-d) !important;
    border: 1px solid rgba(45,134,83,.2) !important;
}
.noty_theme__limitless.noty_type__success .noty_progressbar {
    background: var(--green) !important;
}
.noty_theme__limitless.noty_type__success .noty_body::before {
    content: '\e174' !important; /* ph-check-circle */
    color: var(--green) !important;
}

/* ── Type: error ── */
.noty_theme__limitless.noty_type__error {
    background: var(--red-l) !important;
    color: var(--red-d) !important;
    border: 1px solid rgba(239,68,68,.2) !important;
}
.noty_theme__limitless.noty_type__error .noty_progressbar {
    background: var(--red) !important;
}
.noty_theme__limitless.noty_type__error .noty_body::before {
    content: '\e5f1' !important; /* ph-warning-circle */
    color: var(--red) !important;
}

/* ── Type: warning ── */
.noty_theme__limitless.noty_type__warning {
    background: var(--amber-l) !important;
    color: var(--amber-d) !important;
    border: 1px solid rgba(245,158,11,.2) !important;
}
.noty_theme__limitless.noty_type__warning .noty_progressbar {
    background: var(--amber) !important;
}
.noty_theme__limitless.noty_type__warning .noty_body::before {
    content: '\e5ef' !important; /* ph-warning */
    color: var(--amber) !important;
}

/* ── Type: info ── */
.noty_theme__limitless.noty_type__info {
    background: var(--blue-l) !important;
    color: var(--blue-d) !important;
    border: 1px solid rgba(59,130,246,.2) !important;
}
.noty_theme__limitless.noty_type__info .noty_progressbar {
    background: var(--blue) !important;
}
.noty_theme__limitless.noty_type__info .noty_body::before {
    content: '\e290' !important; /* ph-info */
    color: var(--blue) !important;
}

/* ── Type: alert / notice (fallback) ── */
.noty_theme__limitless.noty_type__alert,
.noty_theme__limitless.noty_type__notice {
    background: var(--g100) !important;
    color: var(--g700) !important;
    border: 1px solid var(--g200) !important;
}
.noty_theme__limitless.noty_type__alert .noty_progressbar,
.noty_theme__limitless.noty_type__notice .noty_progressbar {
    background: var(--g400) !important;
}

/* ── Layout: topRight position fine-tune ── */
.noty_layout__topRight {
    top: 20px !important;
    right: 20px !important;
    width: 360px !important;
}

/* ════════════════════════════════════════════════════════
   SweetAlert2 — themed to match Opsus360 design system
   ════════════════════════════════════════════════════════ */

/* Popup container */
.swal2-popup {
    font-family: var(--font) !important;
    border-radius: 16px !important;
    padding: 36px 32px 28px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
    border: 1px solid var(--g200) !important;
    max-width: 400px !important;
}

/* Title */
.swal2-title {
    font-family: var(--font) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--g800) !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
}

/* Body text */
.swal2-html-container,
.swal2-content {
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    color: var(--g500) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Button row */
.swal2-actions {
    gap: 8px !important;
    margin-top: 24px !important;
    padding: 0 !important;
}

/* All buttons */
.swal2-confirm,
.swal2-cancel,
.swal2-deny {
    font-family: var(--font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 22px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Confirm button (danger: red) */
.swal2-confirm {
    background: var(--red) !important;
    color: #fff !important;
    border: none !important;
}
.swal2-confirm:hover { background: var(--red-d) !important; }
.swal2-confirm:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.25) !important; }

/* Cancel button (secondary ghost) */
.swal2-cancel {
    background: var(--white) !important;
    color: var(--g700) !important;
    border: 1px solid var(--g200) !important;
}
.swal2-cancel:hover {
    background: var(--g50) !important;
    border-color: var(--g300) !important;
}

/* Icon — warning */
.swal2-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 20px !important;
    border-width: 2px !important;
}
.swal2-icon.swal2-warning {
    border-color: var(--amber) !important;
    color: var(--amber) !important;
}
.swal2-icon.swal2-warning .swal2-icon-content {
    font-size: 26px !important;
    color: var(--amber) !important;
}
/* Icon — error */
.swal2-icon.swal2-error {
    border-color: var(--red) !important;
}
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--red) !important;
}
/* Icon — success */
.swal2-icon.swal2-success {
    border-color: var(--green) !important;
    color: var(--green) !important;
}
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(45,134,83,.3) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background: var(--green) !important; }
/* Icon — info */
.swal2-icon.swal2-info {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}
/* Icon — question */
.swal2-icon.swal2-question {
    border-color: var(--green) !important;
    color: var(--green) !important;
}

/* Overlay backdrop */
.swal2-backdrop-show { background: rgba(17,24,39,.45) !important; }

/* Hide animated circles on icon */
.swal2-icon::before { display: none !important; }

/* Progress bar */
.swal2-timer-progress-bar {
    background: var(--green) !important;
    height: 3px !important;
}

/* ── Topbar components ── */
.topbar-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--green-l);
    color: var(--white);
    font-size: 11.5px;
    font-weight: 700;
    cursor: default;
}
.online-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.topbar-icon-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--g200);
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--g600);
    position: relative;
    transition: background .12s, border-color .12s;
}
.topbar-icon-btn:hover {
    background: var(--g50);
    border-color: var(--g300);
    color: var(--g800);
}

.topbar-notif-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 17px; height: 17px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--white);
}

.topbar-profile-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 10px 5px 5px;
    border-radius: 10px;
    border: 1px solid var(--g200);
    background: var(--white);
    cursor: pointer;
    font-family: var(--font);
    transition: background .12s, border-color .12s;
}
.topbar-profile-btn:hover {
    background: var(--g50);
    border-color: var(--g300);
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--g200);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 500;
    min-width: 220px;
    padding: 6px;
    display: none;
}
.topbar-dropdown.open { display: block; }

.topbar-dd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--g700);
    text-decoration: none;
    transition: background .1s, color .1s;
    margin-bottom: 2px;
}
.topbar-dd-item:hover { background: var(--green-l); color: var(--green); }
.topbar-dd-item i { font-size: 15px; color: var(--g400); }
.topbar-dd-item:hover i { color: var(--green); }

.topbar-dd-danger { color: var(--red); }
.topbar-dd-danger:hover { background: var(--red-l); color: var(--red-d); }
.topbar-dd-danger i { color: var(--red-l); }
.topbar-dd-danger:hover i { color: var(--red); }

/* ── Notifications offcanvas ── */
.notif-offcanvas {
    width: 380px !important;
    border-left: 1px solid var(--g200) !important;
}
.notif-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--g200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.notif-body {
    flex: 1;
    overflow-y: auto;
}
.notif-mark-bar {
    padding: 10px 14px;
    background: var(--g50);
    border-bottom: 1px solid var(--g200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.notif-card {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--g200);
    background: var(--white);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.notif-card:hover {
    background: var(--green-l);
    border-color: rgba(45,134,83,.2);
}

.perm-item .form-check-input,
.permission-toggle {
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background-color: var(--g300) !important;
    border: none !important;
    position: relative;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: none !important;
}

/* checked state */
.perm-item .form-check-input:checked,
.permission-toggle:checked {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

/* remove bootstrap blue focus */
.perm-item .form-check-input:focus,
.permission-toggle:focus {
    box-shadow: 0 0 0 0.15rem rgba(45,134,83,.18) !important;
}

/* toggle knob */
.perm-item .form-check-input::before,
.permission-toggle::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: all .2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* move knob when checked */
.perm-item .form-check-input:checked::before,
.permission-toggle:checked::before {
    transform: translateX(20px);
}

.form-check-input {
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background-color: #d1d5db !important;
    border: none !important;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: none !important;
    background-image: none !important;
    position: relative;
}

.form-check-input:checked {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem rgba(45,134,83,.18) !important;
}

/* custom white knob */
.form-check-input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}

.form-check-input:checked::after {
    transform: translateX(20px);
}