/* Use the app font that is actually loaded (Urbanist via crm-theme.css).
       The previous 'Montserrat' was never imported, so the whole login page
       silently fell back to a system font with synthesized (faux-bold)
       weights — which is why every text looked bold. */
    #adminLoginOverlay {
      font-family: var(--crm-font, 'Urbanist', sans-serif);
      /* Pin the login as a full-screen takeover. Without position:fixed it
         sat in normal flow, so on mobile the whole BODY scrolled (the login
         "moved" / wasn't stuck) and the overlay's own overflow-y had no effect.
         Fixed + inset:0 gives it a real viewport height, so it stays put and
         only scrolls INTERNALLY on short screens — the page behind never moves.
         overscroll-behavior:contain stops scroll-chaining / rubber-band. */
      position: fixed;
      inset: 0;
      z-index: 4000;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    /* While the login takeover is on screen, fully hide the app behind it and
       lock the page. Without this the (empty) dashboard chrome shows through
       and the body scrolls behind the overlay — and it flashes for a frame on
       refresh — because the not-authenticated path removes is-app-loading.
       Excludes .is-unlocking so the split-exit animation still reveals the app
       as the two halves slide away. :has() is supported on all current
       mobile browsers; where it isn't, behaviour simply falls back unchanged. */
    body:has(#adminLoginOverlay[style*="flex"]:not(.is-unlocking)) {
      overflow: hidden;
    }
    body:has(#adminLoginOverlay[style*="flex"]:not(.is-unlocking)) .admin-topbar,
    body:has(#adminLoginOverlay[style*="flex"]:not(.is-unlocking)) .admin-nav,
    body:has(#adminLoginOverlay[style*="flex"]:not(.is-unlocking)) .tab-content {
      display: none !important;
    }

    .admin-app-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 14px;
      padding: 14px 16px;
      border: 1px solid rgba(219, 229, 238, 0.92);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
      backdrop-filter: blur(16px);
    }

    .admin-brand-area {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .admin-brand-logo {
      width: 152px;
      height: auto;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .admin-brand-meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .admin-brand-meta span:first-child {
      color: #667085;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    #clientNameBadge.admin-client-badge {
      width: fit-content;
      max-width: 260px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #2563eb;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 500;
    }

    .admin-logout-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 40px;
      padding: 10px 14px;
      border: 1px solid #e4e7ec;
      border-radius: 10px;
      background: #fff;
      color: #344054;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .admin-logout-btn:hover {
      background: #fef3f2;
      color: #b42318;
      border-color: #fecdca;
      transform: translateY(-1px);
    }

    .admin-logout-btn svg {
      width: 16px;
      height: 16px;
    }

    .agent-limit-note {
      flex-basis: 100%;
      display: none;
      align-items: center;
      gap: 10px;
      padding: 11px 13px;
      border-radius: 12px;
      border: 1px solid #e4e7ec;
      background: #f8fafc;
      color: #475467;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.45;
    }

    .agent-limit-note::before {
      content: '';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #98a2b3;
      flex: 0 0 auto;
    }

    .agent-limit-note.is-full {
      border-color: #fed7aa;
      background: #fff7ed;
      color: #9a3412;
    }

    .agent-limit-note.is-full::before {
      background: #f97316;
    }

    .logout-confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 12000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(8px);
    }

    .logout-confirm-card {
      width: min(420px, 100%);
      padding: 26px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(214, 224, 235, 0.96);
      box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
      text-align: center;
    }

    .logout-confirm-icon {
      width: 52px;
      height: 52px;
      margin: 0 auto 16px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      color: #111827;
      border: 1px solid #e4e7ec;
    }

    .logout-confirm-icon svg {
      width: 24px;
      height: 24px;
    }

    .logout-confirm-card h3 {
      margin: 0;
      color: #101828;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.4px;
    }

    .logout-confirm-card p {
      margin: 10px 0 22px;
      color: #667085;
      font-size: 14px;
      line-height: 1.55;
      font-weight: 400;
    }

    .logout-confirm-actions {
      display: flex;
      gap: 10px;
    }

    .logout-confirm-actions button {
      flex: 1;
      min-height: 44px;
      border-radius: 11px;
      border: 1px solid #d0d5dd;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    }

    .logout-confirm-cancel {
      background: #fff;
      color: #344054;
    }

    .logout-confirm-cancel:hover {
      background: #f8fafc;
      transform: translateY(-1px);
    }

    .logout-confirm-submit {
      background: #111827;
      border-color: #111827 !important;
      color: #fff;
    }

    .logout-confirm-submit:hover {
      background: #0b1220;
      transform: translateY(-1px);
    }

    .tabs.admin-nav {
      position: sticky;
      top: 12px;
      z-index: 20;
      display: flex;
      align-items: center;
      gap: 5px !important;
      margin: 0 0 22px !important;
      padding: 7px !important;
      overflow-x: auto;
      border: 1px solid rgba(219, 229, 238, 0.94) !important;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
      backdrop-filter: blur(18px);
    }

    .tabs.admin-nav .tab-btn {
      flex: 0 0 auto;
      min-height: 42px;
      padding: 10px 14px !important;
      border-radius: 10px !important;
      color: #667085 !important;
      background: transparent !important;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0;
      box-shadow: none !important;
    }

    .tabs.admin-nav .tab-btn:hover {
      color: #101828 !important;
      background: #f3f6fa !important;
    }

    .tabs.admin-nav .tab-btn.active {
      color: #fff !important;
      background: #111827 !important;
      box-shadow: 0 8px 18px rgba(17, 24, 39, 0.16) !important;
    }

    /* Notification badge for nav tabs — used when a customer signs an order
       and the Quotes tab needs to flag the new conversion. Sits on the
       top-right of the tab button. Hidden when count is 0. */
    .tabs.admin-nav .tab-btn { position: relative; }
    .nav-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: #ef4444;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(239, 68, 68, 0.35);
      pointer-events: none;
      animation: navBadgePop 0.22s ease-out;
    }
    @keyframes navBadgePop {
      0%   { transform: scale(0.5); opacity: 0; }
      80%  { transform: scale(1.15); opacity: 1; }
      100% { transform: scale(1); }
    }
    /* Flash a freshly-arrived row (live push) so it's noticeable when the user
       is already on that tab. Animates a tinted background back to normal. */
    tr.row-flash > td { animation: rowFlash 2.2s ease-out; }
    @keyframes rowFlash {
      0%   { background: #dbeafe; }
      15%  { background: #dbeafe; }
      100% { background: transparent; }
    }

    @media (max-width: 760px) {
      .admin-app-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .admin-logout-btn {
        width: 100%;
      }
    }

    .admin-login-shell {
      width: 100%;
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1.05fr);
      background:
        radial-gradient(circle at 18% 18%, rgba(96, 165, 250, 0.24), transparent 30%),
        radial-gradient(circle at 92% 12%, rgba(22, 163, 74, 0.16), transparent 34%),
        linear-gradient(135deg, #f8fafc 0%, #eef3f7 100%);
    }

    .admin-login-visual {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 56px;
      color: #fff;
      background: linear-gradient(145deg, #061a2f 0%, #123e3a 48%, #16a34a 100%);
    }

    .admin-login-visual::before,
    .admin-login-visual::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .admin-login-visual::before {
      width: 620px;
      height: 620px;
      right: -190px;
      top: -180px;
      background: rgba(255, 255, 255, 0.08);
    }

    .admin-login-visual::after {
      width: 420px;
      height: 420px;
      left: -150px;
      bottom: -130px;
      background: rgba(255, 255, 255, 0.06);
    }

    .admin-login-brand {
      position: relative;
      z-index: 1;
      width: min(430px, 80%);
      display: grid;
      gap: 26px;
    }

    .admin-login-logo {
      width: min(360px, 100%);
      height: auto;
      filter: drop-shadow(0 24px 46px rgba(0, 0, 0, 0.22));
    }

    .admin-login-copy {
      max-width: 440px;
    }

    .admin-login-copy span {
      display: block;
      color: rgba(255, 255, 255, 0.68);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .admin-login-copy h1 {
      margin: 0;
      color: #fff;
      font-size: 38px;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .admin-login-copy p {
      margin: 16px 0 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 14.5px;
      line-height: 1.7;
      font-weight: 400;
    }

    .admin-login-form-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 56px;
    }

    .admin-login-panel {
      width: 100%;
      max-width: 468px;
      padding: 38px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid rgba(214, 224, 235, 0.96);
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.11);
    }

    .admin-login-panel-top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 34px;
    }

    .admin-login-mark {
      width: 154px;
      height: auto;
      object-fit: contain;
    }

    .admin-login-panel h2 {
      margin: 0;
      color: #101828;
      font-size: 32px;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: -0.5px;
    }

    .admin-login-subtitle {
      margin: 10px 0 28px;
      color: #667085;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.55;
    }

    .admin-login-field {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }

    .admin-login-field label {
      color: #344054;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .admin-login-input {
      position: relative;
    }

    .admin-login-input svg {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      color: #98a2b3;
      pointer-events: none;
    }

    .admin-login-input input {
      width: 100%;
      min-height: 54px;
      padding: 14px 16px 14px 48px;
      border: 1.5px solid #d8e0ea;
      border-radius: 13px;
      background: #fff;
      color: #101828;
      font-family: inherit;
      font-size: 14px;
      font-weight: 400;
      outline: none;
      box-sizing: border-box;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .admin-login-input input::placeholder {
      color: #b7c0cf;
      font-weight: 400;
    }

    .admin-login-input input:focus {
      border-color: #1570ef;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(21, 112, 239, 0.1);
    }

    /* Show/hide password toggle on the login form. Overrides the generic
       .admin-login-input svg rule (which pins icons to the LEFT) so the
       eye sits on the right and stays clickable. */
    .admin-login-input.has-eye input { padding-right: 46px; }
    .admin-login-eye {
      position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; padding: 7px;
      line-height: 0; border-radius: 8px; color: #98a2b3;
    }
    .admin-login-eye:hover { color: #475467; }
    .admin-login-eye svg {
      position: static; left: auto; top: auto; transform: none;
      pointer-events: auto; width: 17px; height: 17px;
      color: inherit; stroke: currentColor;
    }

    #loginErr.admin-login-error {
      color: #b42318;
      font-size: 13px;
      font-weight: 500;
      margin: 0 0 15px;
      padding: 11px 13px;
      display: none;
      background: #fef3f2;
      border: 1px solid #fecdca;
      border-radius: 12px;
    }

    .admin-login-submit {
      width: 100%;
      min-height: 54px;
      margin-top: 2px;
      border: none;
      border-radius: 13px;
      background: #111827;
      color: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 14px 28px rgba(17, 24, 39, 0.18);
      transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    }

    .admin-login-submit:hover {
      transform: translateY(-1px);
      background: #0b1220;
      box-shadow: 0 18px 34px rgba(17, 24, 39, 0.24);
    }

    /* ─── Login exit animation ───
       On successful sign-in the two halves split apart: the brand panel
       slides off to the left, the form panel slides off to the right,
       while the overlay fades — revealing the app underneath. JS adds
       .is-unlocking, waits for the transition, then hides the overlay. */
    .admin-login-visual,
    .admin-login-form-wrap {
      transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.55s ease;
      will-change: transform;
    }
    #adminLoginOverlay {
      transition: background 0.55s ease;
    }
    #adminLoginOverlay.is-unlocking {
      background: transparent;
      pointer-events: none;
    }
    #adminLoginOverlay.is-unlocking .admin-login-visual {
      transform: translateX(-104%);
      opacity: 0.4;
    }
    #adminLoginOverlay.is-unlocking .admin-login-form-wrap {
      transform: translateX(104%);
      opacity: 0.4;
    }

    /* ─── Mobile / small screens ─── */
    @media (max-width: 920px) {
      #adminLoginOverlay {
        overflow-y: auto;          /* short viewports can scroll the form */
        -webkit-overflow-scrolling: touch;
      }

      .admin-login-shell {
        grid-template-columns: 1fr;
        min-height: 100dvh;        /* dvh: stable under mobile URL bars */
      }

      /* Brand half becomes a compact header strip — logo + tagline only */
      .admin-login-visual {
        min-height: 0;
        padding: 26px 22px;
      }

      .admin-login-brand {
        justify-items: center;
        gap: 12px;
        width: 100%;
      }

      .admin-login-logo {
        width: min(220px, 70%);
      }

      .admin-login-copy {
        text-align: center;
      }

      .admin-login-copy span { display: none; }

      .admin-login-copy h1 {
        font-size: 20px;
        letter-spacing: -0.2px;
      }

      .admin-login-copy p { display: none; }

      .admin-login-form-wrap {
        padding: 26px 16px 44px;
        align-items: flex-start;
      }

      /* 16px inputs across the whole stacked layout stop iOS Safari from
         auto-zooming the page on focus (not just the ≤560px range below). */
      .admin-login-input input { font-size: 16px; }

      /* Stacked layout: split vertically instead of horizontally */
      #adminLoginOverlay.is-unlocking .admin-login-visual {
        transform: translateY(-120%);
      }
      #adminLoginOverlay.is-unlocking .admin-login-form-wrap {
        transform: translateY(40%);
      }
    }

    @media (max-width: 560px) {
      .admin-login-panel {
        padding: 26px 18px;
        border-radius: 16px;
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
      }

      .admin-login-panel-top {
        margin-bottom: 22px;
      }

      .admin-login-mark { width: 128px; }

      .admin-login-panel h2 {
        font-size: 25px;
        text-align: center;
      }

      .admin-login-subtitle {
        font-size: 13px;
        text-align: center;
        margin-bottom: 22px;
      }

      /* 16px stops iOS Safari from auto-zooming the page on focus */
      .admin-login-input input {
        font-size: 16px;
        min-height: 50px;
        border-radius: 11px;
      }

      .admin-login-submit {
        min-height: 50px;
        border-radius: 11px;
        font-size: 15px;
      }
    }

    /* Final admin workspace layout. This sits after the old inline styles so the dashboard actually changes. */
    body.crm-app {
      padding: 0 !important;
      background:
        radial-gradient(circle at 18% 16%, rgba(53, 109, 255, 0.08), transparent 25%),
        linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%) !important;
    }

    .admin-app-header {
      position: fixed !important;
      top: 18px !important;
      right: 24px !important;
      left: 306px !important;
      z-index: 45 !important;
      width: auto !important;
      height: 74px !important;
      margin: 0 !important;
      padding: 14px 18px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 18px !important;
      border: 1px solid #dde6f1 !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.96) !important;
      box-shadow: 0 12px 30px rgba(31, 41, 55, 0.06) !important;
      backdrop-filter: blur(14px);
    }

    .admin-topbar-title {
      min-width: 0;
    }

    .admin-topbar-title > span:first-child {
      display: block;
      margin-bottom: 3px;
      color: #667085;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .admin-topbar-title h1 {
      margin: 0;
      color: #111827;
      font-size: 22px;
      line-height: 1.1;
      font-weight: 620;
      letter-spacing: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #clientNameBadge.admin-client-badge {
      display: none !important;
    }

    .admin-logout-btn {
      position: static !important;
      flex: 0 0 auto !important;
      min-height: 38px !important;
      padding: 9px 12px !important;
      border-radius: 8px !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      box-shadow: none !important;
    }

    .tabs.admin-nav {
      position: fixed !important;
      top: 18px !important;
      left: 18px !important;
      bottom: 18px !important;
      z-index: 40 !important;
      width: 258px !important;
      margin: 0 !important;
      padding: 14px 10px 10px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 5px !important;
      overflow: visible !important;
      border: 1px solid #dde6f1 !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.94) !important;
      box-shadow: 0 18px 38px rgba(31, 41, 55, 0.07) !important;
      backdrop-filter: blur(14px);
    }

    .admin-nav-logo {
      display: flex;
      align-items: center;
      height: 58px;
      margin: 0 2px 12px;
      padding: 0 10px 14px;
      border-bottom: 1px solid #edf2f7;
    }

    .admin-nav-logo img {
      width: 146px;
      height: auto;
      object-fit: contain;
    }

    .tabs.admin-nav .tab-btn {
      width: 100% !important;
      min-height: 38px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: 9px 11px !important;
      border: 1px solid transparent !important;
      border-radius: 8px !important;
      color: #667085 !important;
      background: transparent !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 500 !important;
    }

    .tabs.admin-nav .tab-btn::before {
      content: '';
      width: 6px;
      height: 6px;
      margin-right: 10px;
      border-radius: 999px;
      background: #c8d3e2;
      transition: background 0.18s ease, transform 0.18s ease;
    }

    .tabs.admin-nav .tab-btn:hover {
      color: #1f2937 !important;
      border-color: #e5edf6 !important;
      background: #f8fafc !important;
    }

    .tabs.admin-nav .tab-btn.active {
      color: #fff !important;
      border-color: transparent !important;
      background: linear-gradient(135deg, #1f2937, #356dff) !important;
      box-shadow: 0 10px 22px rgba(53, 109, 255, 0.18) !important;
    }

    .tabs.admin-nav .tab-btn.active::before {
      background: #fff !important;
      transform: scale(1.15);
    }

    .tab-content {
      margin: 0 0 0 292px !important;
      padding: 108px 24px 28px 14px !important;
      min-height: 100vh !important;
    }

    .tab-content:not(.active) {
      display: none !important;
    }

    .admin-dashboard-shell {
      max-width: 1480px !important;
      gap: 10px !important;
    }

    .dash-hero {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 0.32fr) !important;
      gap: 12px !important;
      padding: 14px !important;
      border: 1px solid #e2e9f3 !important;
      border-radius: 8px !important;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96)) !important;
      box-shadow: 0 12px 28px rgba(31, 41, 55, 0.06) !important;
    }

    .dash-hero-copy h2 {
      font-size: 22px !important;
      font-weight: 600 !important;
    }

    .dash-hero-copy p {
      max-width: 700px !important;
      font-size: 13px !important;
      font-weight: 400 !important;
    }

    .dash-hero-actions {
      margin-top: 11px !important;
    }

    .dash-hero-actions button,
    .dash-range-control {
      min-height: 32px !important;
      font-weight: 500 !important;
    }

    .dash-hero-metric {
      min-height: 104px !important;
      border-radius: 8px !important;
    }

    .dash-hero-metric strong {
      font-size: 30px !important;
      font-weight: 620 !important;
    }

    .dash-hero-strip {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      border: 0 !important;
      background: transparent !important;
    }

    .dash-hero-strip div {
      border: 1px solid #e7edf5 !important;
      border-radius: 8px !important;
      background: #fff !important;
    }

    .dash-kpi-grid {
      grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
      gap: 10px !important;
    }

    .dash-kpi-card {
      min-height: 118px !important;
      padding: 13px !important;
      border-radius: 8px !important;
      box-shadow: 0 10px 24px rgba(31, 41, 55, 0.055) !important;
    }

    .dash-kpi-card strong {
      font-size: 25px !important;
      font-weight: 620 !important;
    }

    .dash-main-grid {
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.62fr) !important;
      gap: 10px !important;
    }

    .dash-main-grid-secondary,
    .dash-insight-grid {
      gap: 10px !important;
    }

    .dash-panel {
      border-radius: 8px !important;
      box-shadow: 0 10px 24px rgba(31, 41, 55, 0.055) !important;
    }

    .dash-panel-head h3 {
      font-size: 15px !important;
      font-weight: 600 !important;
    }

    .dash-chart-wrap {
      height: 198px !important;
    }

    .dash-chart-tall {
      height: 224px !important;
    }

    .dash-donut-wrap {
      height: 148px !important;
    }

    @media (max-width: 1020px) {
      .admin-app-header,
      .tabs.admin-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 14px !important;
      }

      .admin-app-header {
        flex-direction: row !important;
        align-items: center !important;
      }

      .admin-logout-btn {
        position: static !important;
        margin-left: auto !important;
      }

      .tabs.admin-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
      }

      .tabs.admin-nav .tab-btn {
        width: auto !important;
        flex: 0 0 auto !important;
      }

      .tab-content {
        margin-left: 0 !important;
        padding: 14px !important;
      }
    }

    @media (max-width: 720px) {
      .dash-kpi-grid,
      .dash-hero,
      .dash-main-grid,
      .dash-main-grid-secondary,
      .dash-insight-grid,
      .dash-hero-strip {
        grid-template-columns: 1fr !important;
      }
    }

    /* Enlink inspired admin skin */
    body.crm-app {
      background: #f9fbfd !important;
      color: #53535f !important;
      font-family: Poppins, Inter, "Segoe UI", system-ui, sans-serif !important;
    }

    .admin-app-header {
      top: 0 !important;
      right: 0 !important;
      left: 280px !important;
      height: 70px !important;
      padding: 0 24px !important;
      border: 0 !important;
      border-bottom: 1px solid #edf2f9 !important;
      border-radius: 0 !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    .admin-topbar-left,
    .admin-topbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .admin-icon-btn {
      width: 42px;
      height: 42px;
      min-height: 42px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 6px;
      color: #53535f;
      background: transparent;
      box-shadow: none;
      transition: color 0.2s ease, background 0.2s ease;
    }

    .admin-icon-btn svg {
      width: 21px;
      height: 21px;
    }

    .admin-icon-btn:hover {
      color: #3f87f5;
      background: rgba(63, 135, 245, 0.1);
    }

    .admin-topbar-title {
      margin-left: 10px;
      padding-left: 18px;
      border-left: 1px solid #edf2f9;
    }

    .admin-topbar-title > span:first-child {
      margin: 0 0 2px;
      color: #72849a;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.06em;
    }

    .admin-topbar-title h1 {
      color: #2a2a2a;
      font-size: 17px;
      font-weight: 500;
      line-height: 1.2;
    }

    .admin-profile-mark {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: #3f87f5;
      background: rgba(63, 135, 245, 0.12);
      font-size: 14px;
      font-weight: 500;
    }

    .admin-logout-btn {
      min-height: 38px !important;
      padding: 0 15px !important;
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      color: #53535f !important;
      background: #fff !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
    }

    .admin-logout-btn:hover {
      color: #3f87f5 !important;
      border-color: rgba(63, 135, 245, 0.32) !important;
      background: rgba(63, 135, 245, 0.08) !important;
      transform: none !important;
    }

    .tabs.admin-nav {
      top: 0 !important;
      left: 0 !important;
      bottom: 0 !important;
      width: 280px !important;
      padding: 0 !important;
      gap: 0 !important;
      overflow-y: auto !important;
      border: 0 !important;
      border-right: 1px solid #edf2f9 !important;
      border-radius: 0 !important;
      background: #fff !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }

    .admin-nav-logo {
      height: 70px;
      margin: 0;
      padding: 0 32px;
      border-bottom: 1px solid #edf2f9;
    }

    .admin-nav-logo img {
      width: 150px;
    }

    .tabs.admin-nav .tab-btn {
      position: relative;
      min-height: 54px !important;
      padding: 0 28px !important;
      border: 0 !important;
      border-radius: 0 !important;
      color: #53535f !important;
      background: transparent !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      box-shadow: none !important;
    }

    .tabs.admin-nav .tab-btn::before {
      content: attr(data-icon);
      width: 25px;
      height: 25px;
      margin-right: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      color: #72849a;
      background: transparent;
      font-size: 17px;
      line-height: 1;
    }

    .tabs.admin-nav .tab-btn::after {
      content: '';
      position: absolute;
      inset: 0 0 0 auto;
      width: 3px;
      background: #3f87f5;
      opacity: 0;
      transform: scaleY(0.2);
      transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .tabs.admin-nav .tab-btn:hover {
      color: #2a2a2a !important;
      background: #f9fbfd !important;
    }

    .tabs.admin-nav .tab-btn.active {
      color: #3f87f5 !important;
      background: rgba(63, 135, 245, 0.12) !important;
      box-shadow: none !important;
    }

    .tabs.admin-nav .tab-btn.active::before {
      color: #3f87f5 !important;
      background: transparent !important;
      transform: none;
    }

    .tabs.admin-nav .tab-btn.active::after {
      opacity: 1;
      transform: scaleY(1);
    }

    .tab-content {
      margin-left: 280px !important;
      padding: 95px 25px 25px !important;
    }

    .admin-dashboard-shell {
      max-width: none !important;
      gap: 20px !important;
    }

    .dash-hero,
    .dash-panel,
    .dash-kpi-card {
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    .dash-hero {
      grid-template-columns: minmax(0, 1fr) 330px !important;
      gap: 18px !important;
      padding: 24px 28px !important;
    }

    .dash-hero::before {
      display: none !important;
    }

    .dash-eyebrow,
    .dash-hero .dash-eyebrow {
      color: #3f87f5 !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      letter-spacing: 0.04em !important;
    }

    .dash-hero-copy h2 {
      margin-top: 6px !important;
      color: #2a2a2a !important;
      font-size: 26px !important;
      font-weight: 500 !important;
    }

    .dash-hero-copy p {
      color: #72849a !important;
      font-size: 14px !important;
    }

    .dash-hero-actions button,
    .dash-range-control {
      min-height: 40px !important;
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      color: #53535f !important;
      background: #fff !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 400 !important;
    }

    .dash-hero-actions .dash-action-primary,
    .dash-hero-actions button:first-child {
      border-color: #3f87f5 !important;
      color: #fff !important;
      background: #3f87f5 !important;
      box-shadow: none !important;
    }

    .dash-hero-actions button:hover,
    .dash-hero-actions .dash-action-primary:hover {
      border-color: #3f87f5 !important;
      color: #3f87f5 !important;
      background: rgba(63, 135, 245, 0.08) !important;
      transform: none !important;
      box-shadow: none !important;
    }

    .dash-hero-actions .dash-action-primary:hover,
    .dash-hero-actions button:first-child:hover {
      color: #fff !important;
      background: #2f74df !important;
    }

    .dash-hero-metric {
      min-height: 132px !important;
      padding: 24px 28px !important;
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      background: #fff !important;
    }

    .dash-hero-metric span,
    .dash-hero-metric small {
      color: #72849a !important;
      font-size: 14px !important;
      font-weight: 400 !important;
    }

    .dash-hero-metric strong {
      color: #2a2a2a !important;
      font-size: 31px !important;
      font-weight: 500 !important;
    }

    .dash-hero-strip {
      gap: 0 !important;
      border-top: 1px solid #edf2f9 !important;
      grid-column: 1 / -1;
    }

    .dash-hero-strip div {
      padding: 16px 18px !important;
      border: 0 !important;
      border-right: 1px solid #edf2f9 !important;
      border-radius: 0 !important;
    }

    .dash-hero-strip div:last-child {
      border-right: 0 !important;
    }

    .dash-kpi-grid {
      gap: 20px !important;
    }

    .dash-kpi-card {
      min-height: 138px !important;
      padding: 26px 26px 20px !important;
    }

    .dash-kpi-top {
      color: #72849a !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
    }

    .dash-icon {
      width: 56px !important;
      height: 56px !important;
      border-radius: 50% !important;
      font-size: 18px !important;
      font-weight: 500 !important;
    }

    .tone-green .dash-icon { color: #00c9a7 !important; background: rgba(0, 201, 167, 0.1) !important; }
    .tone-blue .dash-icon { color: #3f87f5 !important; background: rgba(63, 135, 245, 0.1) !important; }
    .tone-purple .dash-icon { color: #886cff !important; background: rgba(136, 108, 255, 0.1) !important; }
    .tone-orange .dash-icon { color: #fa8c16 !important; background: rgba(250, 140, 22, 0.12) !important; }

    .dash-kpi-card strong {
      margin-top: 18px !important;
      color: #2a2a2a !important;
      font-size: 30px !important;
      font-weight: 500 !important;
    }

    .dash-kpi-card p {
      color: #72849a !important;
      font-size: 13px !important;
      font-weight: 400 !important;
    }

    .dash-meter {
      height: 4px !important;
      background: #f1f2f3 !important;
    }

    .dash-panel {
      padding: 25px !important;
    }

    .dash-panel-head h3 {
      color: #2a2a2a !important;
      font-size: 17px !important;
      font-weight: 500 !important;
    }

    .dash-chip {
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      color: #3f87f5 !important;
      background: #fff !important;
      font-weight: 400 !important;
    }

    .dash-main-grid,
    .dash-main-grid-secondary,
    .dash-insight-grid {
      gap: 20px !important;
    }

    .dash-chart-wrap {
      height: 260px !important;
    }

    .dash-chart-tall {
      height: 318px !important;
    }

    .dash-donut-wrap {
      height: 260px !important;
    }

    @media (max-width: 1020px) {
      .admin-app-header {
        left: 0 !important;
        position: sticky !important;
      }

      .tabs.admin-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        border-right: 0 !important;
        border-bottom: 1px solid #edf2f9 !important;
      }

      .admin-nav-logo {
        display: none !important;
      }

      .tab-content {
        margin-left: 0 !important;
        padding: 24px !important;
      }
    }

    body.crm-app .tabs.admin-nav button.tab-btn.active {
      color: #3f87f5 !important;
      background: rgba(63, 135, 245, 0.13) !important;
      box-shadow: none !important;
    }

    body.crm-app .tabs.admin-nav button.tab-btn.active::before {
      color: #3f87f5 !important;
      background: transparent !important;
    }

    body.crm-app button:focus {
      outline: none !important;
    }

    body.crm-app button:focus-visible {
      box-shadow: 0 0 0 3px rgba(63, 135, 245, 0.12) !important;
    }

    body.crm-app .tabs.admin-nav .tab-btn:focus-visible {
      box-shadow: inset 3px 0 0 rgba(63, 135, 245, 0.7) !important;
    }

    #tab-dashboard .dash-hero-copy p,
    #tab-dashboard .dash-kpi-card p,
    #tab-dashboard .dash-hero-metric span,
    #tab-dashboard .dash-hero-metric small,
    #tab-dashboard .dash-hero-strip small,
    #tab-dashboard .dash-panel,
    #tab-dashboard .dash-status-item,
    #tab-dashboard .dash-source-item,
    #tab-dashboard .dash-route-sub,
    #tab-dashboard .dash-activity-sub,
    #tab-dashboard .dash-agent-sub {
      font-weight: 400 !important;
    }

    /* Enlink workspace polish for every admin tab */
    html,
    body.crm-app {
      overflow-x: hidden !important;
    }

    .tab-content {
      width: calc(100vw - 280px) !important;
      max-width: calc(100vw - 280px) !important;
      overflow-x: hidden !important;
    }

    .tab-content.active {
      display: block !important;
    }

    .panel,
    .kpi-card,
    .dashboard-grid,
    .kpi-grid,
    .toolbar,
    .filters {
      min-width: 0 !important;
      max-width: 100% !important;
    }

    body.crm-app .panel,
    body.crm-app .kpi-card {
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      background: #fff !important;
      box-shadow: none !important;
    }

    body.crm-app .panel {
      padding: 24px !important;
      margin-bottom: 24px !important;
    }

    body.crm-app .panel h3 {
      margin: 0 0 18px !important;
      padding: 0 0 16px !important;
      border-bottom: 1px solid #edf2f9 !important;
      color: #2a2a2a !important;
      font-size: 17px !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app .kpi-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
      gap: 20px !important;
      margin-bottom: 24px !important;
    }

    body.crm-app .kpi-card {
      min-height: 112px;
      padding: 24px !important;
    }

    body.crm-app .kpi-card::before {
      display: none !important;
    }

    body.crm-app .kpi-card:hover {
      transform: none !important;
      border-color: #edf2f9 !important;
      box-shadow: none !important;
    }

    body.crm-app .kpi-title {
      color: #72849a !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }

    body.crm-app .kpi-value {
      margin-top: 8px;
      color: #2a2a2a !important;
      font-size: 30px !important;
      font-weight: 500 !important;
    }

    body.crm-app .toolbar,
    body.crm-app .filters {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 12px !important;
    }

    body.crm-app .toolbar {
      justify-content: space-between !important;
      margin-bottom: 18px !important;
    }

    body.crm-app .filters {
      flex: 1 1 640px !important;
    }

    body.crm-app .input-box,
    body.crm-app .portal-input,
    body.crm-app .status-select,
    body.crm-app .notes-area {
      min-height: 40px !important;
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      color: #53535f !important;
      background-color: #fff !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      box-shadow: none !important;
    }

    body.crm-app .input-box:focus,
    body.crm-app .portal-input:focus,
    body.crm-app .status-select:focus,
    body.crm-app .notes-area:focus {
      border-color: #3f87f5 !important;
      box-shadow: 0 0 0 3px rgba(63, 135, 245, 0.08) !important;
      outline: none !important;
    }

    body.crm-app .btn-primary,
    body.crm-app .btn-action,
    body.crm-app .btn-danger {
      min-height: 40px !important;
      border-radius: 4px !important;
      box-shadow: none !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      transform: none !important;
    }

    body.crm-app .btn-primary {
      border: 1px solid #3f87f5 !important;
      color: #fff !important;
      background: #3f87f5 !important;
    }

    body.crm-app .btn-primary:hover {
      background: #2f74df !important;
      border-color: #2f74df !important;
    }

    body.crm-app .btn-action {
      border: 1px solid #edf2f9 !important;
      color: #53535f !important;
      background: #fff !important;
    }

    body.crm-app .btn-action:hover {
      color: #3f87f5 !important;
      border-color: rgba(63, 135, 245, 0.3) !important;
      background: rgba(63, 135, 245, 0.08) !important;
    }

    body.crm-app .btn-danger {
      border: 1px solid rgba(222, 68, 54, 0.2) !important;
      color: #de4436 !important;
      background: rgba(222, 68, 54, 0.08) !important;
    }

    body.crm-app .table-responsive {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      border: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
      background: #fff !important;
      box-shadow: none !important;
      overscroll-behavior-x: contain;
    }

    body.crm-app .table-responsive table {
      width: max-content !important;
      min-width: 100% !important;
      border-collapse: collapse !important;
    }

    body.crm-app th {
      position: static !important;
      padding: 14px 16px !important;
      border-bottom: 1px solid #edf2f9 !important;
      color: #72849a !important;
      background: #fff !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      white-space: nowrap !important;
    }

    body.crm-app td {
      padding: 14px 16px !important;
      border-bottom: 1px solid #edf2f9 !important;
      color: #53535f !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      vertical-align: middle !important;
    }

    /* Carrier Dispatch is a read-only data table with many columns — keep cells
       on one line so the row scrolls horizontally (like Orders) instead of
       wrapping into a cramped block. */
    body.crm-app #tab-carriers td,
    body.crm-app #tab-carriers th { white-space: nowrap !important; }
    body.crm-app #tab-carriers .dispatch-row { cursor: pointer; }

    /* Orders → Carrier column when no carrier is assigned yet: show key
       carrier/payment info instead of a dispatch action button. */
    .order-carrier-meta { font-size: 11.5px; line-height: 1.5; color: #2d3748; }
    .order-carrier-meta .ocm-label {
      display: inline-block; min-width: 64px; color: #94a3b8; font-weight: 600;
      font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em;
    }
    .order-carrier-meta .ocm-empty { color: #a0aec0; font-style: italic; font-size: 11.5px; }

    /* ── Carrier Dispatch advanced filters ──────────────────────────────── */
    /* Toolbar: search + two matching pill buttons */
    .df-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .df-toolbar .df-search { flex: 1; min-width: 220px; }
    .df-tbtn {
      display: inline-flex; align-items: center; gap: 7px;
      height: 40px; padding: 0 15px; border-radius: 9px;
      border: 1px solid #d8e0ea; background: #fff; color: #334155;
      font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
      transition: background .14s, border-color .14s, color .14s, box-shadow .14s;
    }
    .df-tbtn svg { flex: none; }
    .df-tbtn:hover { background: #f5f8fc; border-color: #c4d2e3; }
    .df-tbtn-filter { color: #1a3a6b; border-color: #c9d8ee; }
    .df-tbtn-filter:hover { background: #eef3fb; border-color: #1a3a6b; }
    .df-count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 19px; height: 19px; padding: 0 5px; margin-left: 1px;
      background: #1a3a6b; color: #fff; border-radius: 10px;
      font-size: 11px; font-weight: 700; line-height: 19px;
    }

    /* Active filter chips */
    .df-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 10px 0 0; }
    .df-chip {
      display: inline-flex; align-items: center; gap: 7px;
      background: #eef3fb; border: 1px solid #d3e0f2; color: #1a3a6b;
      border-radius: 16px; padding: 5px 7px 5px 12px; font-size: 12px; font-weight: 600;
    }
    .df-chip .df-chip-x {
      flex: none; display: inline-flex; align-items: center; justify-content: center;
      width: 18px; height: 18px; border-radius: 50%; border: none; box-sizing: border-box;
      background: #d3e0f2; color: #1a3a6b; cursor: pointer; padding: 0;
      font-size: 14px; line-height: 18px; font-weight: 400;
      transition: background .12s, color .12s;
    }
    .df-chip .df-chip-x:hover { background: #1a3a6b; color: #fff; }
    .df-chip-clear {
      background: transparent; border: none; color: #b42318;
      font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px;
    }
    .df-chip-clear:hover { text-decoration: underline; }

    /* Popup modal */
    .df-modal {
      position: fixed; inset: 0; z-index: 1400;
      background: rgba(15, 23, 42, .44);
      display: none; align-items: flex-start; justify-content: center;
      padding: 56px 16px; overflow-y: auto;
      animation: dfFade .15s ease both;
    }
    @keyframes dfFade { from { opacity: 0; } to { opacity: 1; } }
    .df-modal-card {
      width: 100%; max-width: 640px; background: #fff;
      border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
      display: flex; flex-direction: column; overflow: hidden;
      animation: dfPop .18s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes dfPop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
    .df-modal-head {
      display: flex; align-items: flex-start; gap: 12px;
      padding: 18px 20px; border-bottom: 1px solid #eef1f5;
    }
    .df-modal-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; color: #0f1f3a; letter-spacing: -.01em; }
    .df-modal-head p { margin: 3px 0 0; font-size: 12.5px; color: #64748b; line-height: 1.4; }
    .df-modal-x {
      flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 8px;
      border: none; background: #f1f4f8; color: #64748b; cursor: pointer;
      display: flex; align-items: center; justify-content: center; transition: background .14s, color .14s;
    }
    .df-modal-x:hover { background: #e7ecf3; color: #1a3a6b; }
    .df-modal-body { padding: 8px 20px; overflow-y: auto; }
    /* Accordion sections */
    .df-sec { border: 1px solid #e9edf3; border-radius: 11px; margin-bottom: 9px; overflow: hidden; background: #fff; }
    .df-sec:last-child { margin-bottom: 2px; }
    .df-sec-head {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      width: 100%; padding: 12px 14px; border: none; background: #fff; cursor: pointer;
      font-size: 13.5px; font-weight: 600; color: #1f2a3d; text-align: left;
      transition: background .12s;
    }
    .df-sec-head:hover { background: #f7f9fc; }
    .df-sec.is-open .df-sec-head { background: #f7f9fc; border-bottom: 1px solid #eef1f5; }
    .df-sec-title { display: inline-flex; align-items: center; gap: 8px; }
    .df-sec-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px;
      background: #1a3a6b; color: #fff; border-radius: 9px; font-size: 10.5px; font-weight: 700;
    }
    .df-sec-badge[hidden] { display: none; }
    .df-chev { color: #94a3b8; flex: none; transition: transform .18s ease; }
    .df-sec.is-open .df-chev { transform: rotate(180deg); }
    .df-sec-body { display: none; padding: 14px; }
    .df-sec.is-open .df-sec-body { display: block; }
    .df-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 14px;
    }
    .df-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .df-field label { font-size: 12px; font-weight: 600; color: #475569; }
    .df-field .input-box { width: 100%; box-sizing: border-box; font-size: 13px; height: 38px; }
    select.input-box {
      appearance: none; -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; cursor: pointer;
    }
    .df-modal-foot {
      display: flex; align-items: center; gap: 10px;
      padding: 14px 20px; border-top: 1px solid #eef1f5; background: #fafbfd;
    }
    .df-result { font-size: 12.5px; color: #64748b; font-weight: 500; }
    .df-btn-ghost {
      height: 38px; padding: 0 16px; border-radius: 9px; cursor: pointer;
      border: 1px solid #d8e0ea; background: #fff; color: #475569; font-size: 13px; font-weight: 600;
      transition: background .14s, border-color .14s;
    }
    .df-btn-ghost:hover { background: #f5f8fc; border-color: #c4d2e3; }
    .df-btn-apply {
      height: 38px; padding: 0 20px; border-radius: 9px; cursor: pointer; border: none;
      background: #1a3a6b; color: #fff; font-size: 13px; font-weight: 600;
      transition: background .14s, box-shadow .14s;
    }
    .df-btn-apply:hover { background: #16335f; box-shadow: 0 4px 12px rgba(26, 58, 107, .26); }
    @media (max-width: 600px) { .df-grid { grid-template-columns: 1fr 1fr; } }

    /* Email preview modal */
    .ep-label { display: block; font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 5px; }
    .ep-frame-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
    .ep-frame {
      width: 100%; height: 360px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px;
      background: #eef1f5; padding: 16px; box-sizing: border-box;
    }
    /* The email template carries its own inline styles + white 600px card; the
       grey backdrop here makes it read like an email, not a web page. */
    .ep-frame > div { box-shadow: 0 2px 10px rgba(15,23,42,.08); }
    .ep-frame.ep-frame-editing { border-color: #1a3a6b; box-shadow: 0 0 0 3px rgba(26,58,107,.12); }
    .ep-frame.ep-frame-editing:focus { outline: none; }
    .ep-hint { margin: 8px 0 0; font-size: 12px; color: #1a3a6b; }

    /* Zebra striping for admin tables (Leads, Quotes, Order Pipeline,
       Carriers, Customers, Agents). Scoped to .table-responsive so the
       dashboard leaderboard and modal-internal tables stay unstriped. */
    body.crm-app .table-responsive tbody tr:nth-child(even) {
      background: #f3f5f8 !important;
    }

    /* No hover color change — zebra striping is the only row distinction.
       Setting tr:hover to transparent makes odd rows stay white. The zebra
       rule above has higher specificity than this, so even rows naturally
       keep their gray on hover. Status-row td colors also win because they
       paint cells directly. */
    body.crm-app tbody tr:hover {
      background: transparent !important;
    }

    #tab-dashboard .dash-hero {
      border: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }

    #tab-dashboard .dash-hero-metric,
    #tab-dashboard .dash-hero-strip div {
      border: 1px solid #edf2f9 !important;
      background: #fff !important;
    }

    #tab-dashboard .dash-hero-strip {
      border-top: 0 !important;
      gap: 20px !important;
    }

    #tab-dashboard .dash-hero-strip div {
      border-right: 1px solid #edf2f9 !important;
      border-radius: 4px !important;
    }

    #tab-leads::before { content: none; display: none; }
    #tab-quotes::before { content: "Quotes"; }
    #tab-orders::before { content: "Orders"; }
    #tab-carriers::before { content: "Carrier Dispatch"; }
    #tab-customers::before { content: "Customer Directory"; }
    #tab-agents::before { content: "Agent Management"; }
    /* Settings has its own dark hero strip; suppress the auto title. */
    #tab-settings::before { content: none; display: none; }

    #tab-quotes::before,
    #tab-orders::before,
    #tab-carriers::before,
    #tab-customers::before,
    #tab-agents::before {
      display: block;
      margin-bottom: 18px;
      color: #2a2a2a;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.25;
    }

    #tab-leads .panel > div[style*="grid-template-columns"],
    #tab-settings .dashboard-grid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
      gap: 14px !important;
    }

    #tab-carriers > .panel:first-child,
    #tab-agents > .panel:first-child {
      flex-wrap: wrap !important;
      align-items: stretch !important;
    }

    #tab-carriers > .panel:first-child .input-box,
    #tab-agents > .panel:first-child .input-box {
      flex: 1 1 220px !important;
    }

    /* ─── Agent Management — card grid + profile modal ─── */
    #tab-agents .agents-toolbar {
      display: flex !important;
      flex-direction: column;
      gap: 16px;
    }
    #tab-agents .agents-toolbar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    #tab-agents .agents-toolbar-copy {
      flex: 1 1 auto;
      min-width: 220px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    #tab-agents .agents-toolbar-copy strong {
      font-size: 15px;
      color: #1f2937;
      font-weight: 600;
    }
    #tab-agents .agents-toolbar-copy span {
      font-size: 12px;
      color: #667085;
      line-height: 1.45;
    }
    #tab-agents .btn-create-agent {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 22px;
      border: none;
      border-radius: 10px;
      background: #0A2540;
      color: #fff;
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;
      flex: 0 0 auto;
      box-shadow: 0 8px 18px rgba(10, 37, 64, 0.18);
      transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    #tab-agents .btn-create-agent:hover {
      background: #0d2f52;
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(10, 37, 64, 0.26);
    }
    #tab-agents .btn-create-agent:active { transform: translateY(0); }
    #tab-agents .btn-create-agent svg { width: 17px; height: 17px; }
    .agents-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
      gap: 16px;
    }
    .agents-empty {
      grid-column: 1 / -1;
      text-align: center;
      padding: 36px 16px;
      color: #8896a8;
      font-size: 13px;
      background: #fff;
      border: 1px dashed #d8dee8;
      border-radius: 10px;
    }
    .agent-card {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 20px;
      background: #fff;
      border: 1px solid #e7edf5;
      border-radius: 12px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    }
    .agent-card:hover {
      border-color: #b9c8ff;
      transform: translateY(-1px);
      box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    }
    .agent-card .agent-profile-avatar {
      width: 54px;
      height: 54px;
      font-size: 18px;
      flex: 0 0 auto;
    }
    .agent-card-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .agent-card-meta strong {
      font-size: 15px;
      color: #1f2937;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .agent-card-meta span {
      font-size: 12px;
      color: #667085;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .agent-profile-modal {
      max-width: 600px;
      width: 100%;
      padding: 0 !important;
      overflow: hidden;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      max-height: 90vh;
    }
    .agent-profile-modal-head { flex: 0 0 auto; }
    .agent-profile-modal-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 20px 22px;
      background: #1a202c;
      color: #fff;
      position: relative;
    }
    .agent-profile-modal-head .agent-profile-avatar {
      width: 58px;
      height: 58px;
      font-size: 20px;
      flex: 0 0 auto;
      border: 2px solid rgba(255, 255, 255, 0.25);
    }
    .agent-profile-modal-id {
      min-width: 0;
      flex: 1;
    }
    .agent-profile-modal-id h2 {
      margin: 0 0 2px;
      font-size: 18px;
      color: #fff;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .agent-profile-modal-id span {
      font-size: 12.5px;
      color: rgba(255, 255, 255, 0.65);
    }
    .agent-profile-modal-head .aq-close {
      position: absolute;
      top: 12px;
      right: 12px;
      color: rgba(255, 255, 255, 0.7);
    }
    .agent-profile-modal-body {
      padding: 20px 22px 22px;
      overflow-y: auto;
      flex: 1 1 auto;
    }
    .agent-profile-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 16px;
      margin-bottom: 20px;
    }
    .agent-profile-detail label {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      color: #8896a8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 3px;
    }
    .agent-profile-detail span {
      font-size: 13.5px;
      color: #1f2937;
      font-weight: 500;
      word-break: break-word;
    }
    .agent-profile-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border-top: 1px solid #eef2f7;
      padding-top: 16px;
    }
    .agent-profile-actions .upload-button,
    .agent-profile-actions .btn-action,
    .agent-profile-actions .btn-danger {
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
    }

    /* ── Per-agent sender email card ──────────────────────────────────── */
    .agent-email-card {
      border: 1px solid #e6ebf2;
      border-radius: 10px;
      background: #f8fafc;
      padding: 14px 16px;
      margin: 16px 0 4px;
    }
    .agent-email-head {
      display: flex;
      align-items: center;
      gap: 12px;
      justify-content: space-between;
    }
    .agent-email-head-text h4 {
      margin: 0 0 3px;
      font-size: 13.5px;
      font-weight: 700;
      color: #0A2540;
    }
    .agent-email-status {
      margin: 0;
      font-size: 12px;
      color: #64748b;
    }
    .agent-email-status.is-own { color: #15803d; font-weight: 600; }
    .agent-email-status.is-warn { color: #c2410c; font-weight: 600; }
    .agent-email-head .btn-action {
      flex: none;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
    }
    .agent-email-form {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #e6ebf2;
    }
    .agent-email-modes {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 16px;
    }
    .ae-radio {
      display: flex;
      align-items: center;
      gap: 10px;
      text-align: left;
      font-size: 13px;
      color: #1e293b;
      cursor: pointer;
      padding: 11px 14px;
      border: 1px solid #e6ebf2;
      border-radius: 9px;
      background: #fff;
      transition: border-color .15s, background .15s;
    }
    /* Override admin-base's `.modal input { width:100%; margin-bottom:15px }`
       which would otherwise stretch the radio to full width and push the
       label text out of the card. */
    .ae-radio input { flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; margin: 0; box-sizing: border-box; }
    .ae-radio > span { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
    .ae-radio small { display: block; color: #94a3b8; font-weight: 400; margin-top: 1px; }
    .ae-radio:has(input:checked) { border-color: #0A2540; background: #f1f5fb; }
    .ae-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 16px;
    }
    .ae-field { display: flex; flex-direction: column; gap: 4px; }
    .ae-field.full { grid-column: 1 / -1; }
    .ae-field > label {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      text-transform: none;
    }
    /* Neutralize admin-base's `.modal input/select { margin-bottom:15px }` so
       the grid's own gap controls spacing (no doubled gaps). */
    .ae-field .input-box { width: 100%; margin-bottom: 0; }
    .agent-email-form input, .agent-email-form select { margin-bottom: 0; }
    .agent-email-hint {
      margin: 10px 0 0;
      font-size: 11.5px;
      color: #94a3b8;
    }
    .agent-email-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 14px;
    }
    .agent-email-spacer { flex: 1; }
    @media (max-width: 560px) {
      .ae-grid { grid-template-columns: 1fr; }
    }

    /* ── Delivery & Driver Info tab ────────────────────────────────────── */
    .eo-dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .eo-dd-card { border: 1px solid #e6ebf2; border-radius: 10px; background: #fbfcfe; padding: 14px 16px; }
    .eo-dd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
    .eo-dd-card-head > span { font-size: 13px; font-weight: 700; color: #0A2540; }
    .eo-dd-summary { display: flex; flex-direction: column; gap: 7px; }
    .eo-dd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .eo-dd-k { font-size: 11.5px; color: #64748b; font-weight: 600; }
    .eo-dd-v { font-size: 13px; color: #1f2937; font-weight: 600; text-align: right; }
    .eo-dd-empty { font-size: 12.5px; color: #94a3b8; font-style: italic; }
    @media (max-width: 640px) { .eo-dd-grid { grid-template-columns: 1fr; } }

    /* ── Invoice preview / send modal ──────────────────────────────────── */
    .inv-overlay { position: fixed; inset: 0; z-index: 10060; background: rgba(15,23,42,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
    .inv-modal { background: #fff; border-radius: 12px; width: 100%; max-width: 760px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.35); }
    .inv-modal-head { background: #1a202c; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .inv-modal-head h3 { margin: 0; color: #fff; font-size: 14px; font-weight: 700; }
    .inv-head-actions { display: flex; align-items: center; gap: 10px; }
    .inv-edit-btn { background: #fff; border: 1px solid #cbd5e0; color: #334155; border-radius: 6px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .inv-edit-btn.is-on { background: #0A2540; color: #fff; border-color: #0A2540; }
    .inv-x { background: none; border: none; color: #a0aec0; font-size: 22px; cursor: pointer; line-height: 1; padding: 0; }
    .inv-sendbar { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid #eef2f7; flex-shrink: 0; flex-wrap: wrap; }
    .inv-sendbar label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
    .inv-sb-input { flex: 1; min-width: 160px; border: 1px solid #cbd5e0; border-radius: 6px; padding: 7px 10px; font-size: 13px; color: #0f172a; font-family: inherit; }
    .inv-scroll { flex: 1; overflow: auto; min-height: 0; background: #eef1f5; padding: 18px; }
    .inv-doc { background: #fff; max-width: 640px; margin: 0 auto; padding: 28px 30px; box-shadow: 0 1px 6px rgba(15,23,42,0.08); border-radius: 4px; font-family: Arial, Helvetica, sans-serif; color: #1f2937; }

    /* Fields read as plain text in preview, framed when editing. */
    .inv-f { border: 1px solid transparent; background: transparent; font-family: inherit; color: inherit; font-size: 13px; padding: 2px 4px; border-radius: 4px; width: 100%; box-sizing: border-box; }
    .inv-editing .inv-f { border-color: #cbd5e0; background: #fff; }
    .inv-editing .inv-f:focus { border-color: #0A2540; outline: none; }
    .inv-right { text-align: right; }

    .inv-doc-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
    .inv-doc-co { flex: 1; }
    .inv-co-name { font-size: 17px; font-weight: 700; color: #0A2540; }
    .inv-co-line { font-size: 11.5px; color: #64748b; }
    .inv-doc-meta { width: 230px; flex-shrink: 0; }
    .inv-doc-title { font-size: 24px; font-weight: 800; color: #0A2540; text-align: right; letter-spacing: 0.02em; }
    .inv-meta-row { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 3px; }
    .inv-meta-row span { font-size: 11px; color: #94a3b8; font-weight: 600; }
    .inv-meta-row .inv-f { width: 130px; font-size: 12px; }
    .inv-rule { height: 1px; background: #cbd5e1; margin: 14px 0; }
    .inv-billrow { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
    .inv-billto { flex: 1; }
    .inv-amtbox { width: 220px; flex-shrink: 0; }
    .inv-cap { font-size: 10px; font-weight: 700; color: #64748b; letter-spacing: 0.08em; }
    .inv-right-cap { text-align: right; }
    .inv-cust-name { font-size: 14px; font-weight: 700; color: #1f2937; margin-top: 3px; }
    .inv-cust-line { font-size: 12px; color: #64748b; }
    .inv-amtdue { font-size: 20px; font-weight: 800; color: #0A2540; text-align: right; }

    /* Read-only shipment / delivery / vehicle blocks in the invoice preview */
    .inv-detrow { display: flex; gap: 28px; margin: 4px 0 16px; }
    .inv-detcol { flex: 1; min-width: 0; }
    .inv-detcol .inv-cap { margin-bottom: 6px; }
    .inv-kv { display: flex; gap: 10px; font-size: 12px; line-height: 1.5; padding: 1px 0; }
    .inv-kv > span { flex: 0 0 84px; color: #64748b; font-weight: 600; }
    .inv-kv > b { flex: 1; min-width: 0; color: #1f2937; font-weight: 600; word-break: break-word; }
    .inv-empty-kv { color: #94a3b8; }
    .inv-veh-list { margin-bottom: 16px; }
    .inv-veh { padding: 5px 0; border-bottom: 1px solid #eef2f7; }
    .inv-veh:last-child { border-bottom: none; }
    .inv-veh-title { font-size: 12.5px; font-weight: 700; color: #1f2937; }
    .inv-veh-tag { font-size: 9px; font-weight: 800; color: #0d9488; letter-spacing: 0.05em; margin-left: 6px; }
    .inv-veh-det { font-size: 11.5px; color: #64748b; margin: 1px 0 0 16px; word-break: break-word; }
    .inv-veh-note { font-style: italic; }

    .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
    .inv-table th { background: #0A2540; color: #fff; font-size: 10px; font-weight: 700; text-align: left; padding: 6px 8px; letter-spacing: 0.03em; }
    .inv-table th.inv-right { text-align: right; }
    .inv-table td { border-bottom: 1px solid #e2e8f0; padding: 2px 4px; font-size: 12px; }
    .inv-table tbody tr:nth-child(even) td { background: #f8fafc; }
    .inv-table .inv-f { font-size: 12px; }
    .inv-empty { color: #94a3b8; font-style: italic; text-align: center; padding: 10px; font-size: 12px; }
    .inv-rm-col { width: 26px; }
    .inv-rm-cell { text-align: center; }
    .inv-row-rm { display: none; background: none; border: none; color: #dc2626; font-size: 16px; cursor: pointer; line-height: 1; }
    .inv-editing .inv-row-rm { display: inline; }
    .inv-addrow { display: none; align-items: center; gap: 6px; background: #f1f5fb; border: 1px dashed #b8c4d6; color: #0A2540; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; margin-top: 6px; }

    .inv-totals { margin: 16px 0 0 auto; width: 280px; }
    .inv-trow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
    .inv-trow span { font-size: 12.5px; color: #64748b; }
    .inv-tval { font-size: 13px; font-weight: 600; color: #1f2937; }
    .inv-tariff { width: 120px; text-align: right; font-size: 13px; }
    .inv-trow-carrier { align-items: flex-start; }
    .inv-carrier-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
    .inv-carrier-term { border: none; background: transparent; padding: 0; font-size: 11px; font-style: italic; color: #94a3b8; width: 140px; max-width: 100%; }
    .inv-editing .inv-carrier-term { border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; padding: 1px 5px; font-style: normal; color: #1f2937; }
    .inv-trule { height: 1px; background: #cbd5e1; margin: 6px 0; }
    .inv-trow-big span { font-size: 14px; font-weight: 700; color: #0A2540; }
    .inv-tval-big { font-size: 17px; font-weight: 800; color: #0A2540; }
    .inv-opt { color: #94a3b8; font-weight: 400; }
    .inv-notes { font-size: 12px; resize: vertical; min-height: 42px; margin-top: 4px; }

    .inv-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; border-top: 1px solid #e2e8f0; flex-shrink: 0; flex-wrap: wrap; }
    .inv-hint { font-size: 11px; color: #94a3b8; }
    .inv-foot-btns { display: flex; gap: 10px; margin-left: auto; }
    .inv-btn-cancel { background: #fff; border: 1px solid #cbd5e0; color: #475569; border-radius: 6px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .inv-btn-send { background: #16a34a; border: 1px solid #16a34a; color: #fff; border-radius: 6px; padding: 9px 22px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
    @media (max-width: 560px) {
      .inv-doc-head { flex-direction: column; }
      .inv-doc-meta { width: 100%; }
      .inv-billrow { flex-direction: column; }
      .inv-amtbox { width: 100%; }
      .inv-detrow { flex-direction: column; gap: 14px; }
    }

    @media (max-width: 1320px) {
      .tabs.admin-nav {
        width: 230px !important;
      }

      .admin-app-header {
        left: 230px !important;
      }

      .tab-content {
        width: calc(100vw - 230px) !important;
        max-width: calc(100vw - 230px) !important;
        margin-left: 230px !important;
      }

      .tabs.admin-nav .tab-btn {
        padding: 0 20px !important;
        font-size: 14px !important;
      }

      .admin-nav-logo {
        padding: 0 24px !important;
      }

      .admin-nav-logo img {
        width: 136px !important;
      }
    }

    @media (max-width: 1020px) {
      html,
      body.crm-app {
        overflow-x: hidden !important;
      }

      .tab-content {
        width: 100% !important;
        max-width: 100vw !important;
      }

      body.crm-app .kpi-grid,
      .dash-kpi-grid,
      .dash-main-grid,
      .dash-main-grid-secondary,
      .dash-insight-grid,
      .dash-hero,
      .dash-hero-strip {
        grid-template-columns: 1fr !important;
      }
    }

    /* Header navigation mode: same Enlink feel, no left sidebar */
    body.crm-app {
      padding: 0 !important;
      overflow-x: hidden !important;
    }

    body.crm-app .admin-app-header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 70px !important;
      z-index: 60 !important;
      padding: 0 24px !important;
      display: grid !important;
      grid-template-columns: minmax(170px, 1fr) minmax(260px, auto) minmax(170px, 1fr) !important;
      align-items: center !important;
      gap: 18px !important;
      border-bottom: 1px solid #edf2f9 !important;
      background: #fff !important;
    }

    body.crm-app .admin-topbar-left {
      justify-content: flex-start !important;
    }

    body.crm-app .admin-topbar-center {
      min-width: 0;
      display: flex;
      justify-content: center;
      text-align: center;
    }

    body.crm-app .admin-topbar-actions {
      justify-content: flex-end !important;
    }

    body.crm-app .admin-header-logo {
      width: 150px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    body.crm-app .admin-topbar-title {
      margin-left: 0 !important;
      padding-left: 0 !important;
      border-left: 0 !important;
    }

    body.crm-app .admin-topbar-title > span:first-child {
      display: none !important;
    }

    body.crm-app .admin-topbar-title h1 {
      font-size: 19px !important;
      font-weight: 500 !important;
    }

    body.crm-app .admin-access-label {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      padding: 0 14px;
      border: 1px solid #edf2f9;
      border-radius: 4px;
      color: #53535f;
      background: #fff;
      font-size: 13px;
      font-weight: 400;
      white-space: nowrap;
    }

    body.crm-app .tabs.admin-nav {
      position: fixed !important;
      top: 70px !important;
      left: 0 !important;
      right: 0 !important;
      bottom: auto !important;
      z-index: 55 !important;
      width: 100% !important;
      height: 58px !important;
      margin: 0 !important;
      padding: 0 20px !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 2px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      border: 0 !important;
      border-bottom: 1px solid #edf2f9 !important;
      background: #fff !important;
      box-shadow: none !important;
      scrollbar-width: thin;
    }

    body.crm-app .admin-nav-logo {
      display: none !important;
    }

    body.crm-app .admin-nav-logo img {
      width: 132px !important;
    }

    body.crm-app .tabs.admin-nav .tab-btn {
      flex: 0 0 auto !important;
      width: auto !important;
      min-height: 42px !important;
      padding: 0 10px !important;
      border-radius: 4px !important;
      font-size: 13px !important;
      white-space: nowrap !important;
    }

    body.crm-app .tabs.admin-nav .tab-btn::before {
      display: none !important;
    }

    body.crm-app .tabs.admin-nav .tab-btn::after {
      inset: auto 10px 0 10px !important;
      width: auto !important;
      height: 2px !important;
      transform: scaleX(0.2) !important;
    }

    body.crm-app .tabs.admin-nav .tab-btn.active::after {
      transform: scaleX(1) !important;
    }

    body.crm-app .tab-content {
      width: 100% !important;
      max-width: 100vw !important;
      margin-left: 0 !important;
      padding: 153px 25px 25px !important;
      overflow-x: hidden !important;
    }

    @media (max-width: 760px) {
      body.crm-app .admin-app-header {
        height: auto !important;
        min-height: 70px !important;
        grid-template-columns: 1fr auto !important;
        padding: 10px 14px !important;
      }

      body.crm-app .admin-topbar-center {
        display: none !important;
      }

      body.crm-app .admin-header-logo {
        width: 128px;
      }

      body.crm-app .tabs.admin-nav {
        top: 70px !important;
        padding: 0 12px !important;
        justify-content: flex-start !important;
      }

      body.crm-app .admin-nav-logo {
        flex-basis: 150px !important;
        width: 150px !important;
      }

      body.crm-app .admin-nav-logo img {
        width: 126px !important;
      }

      body.crm-app .tab-content {
        padding: 150px 14px 18px !important;
      }
    }

    /* Full-width data panels: keep CRM tables inside the screen on desktop */
    /* NOTE: #tab-leads, #tab-quotes, #tab-orders, #tab-carriers are exempted */
    /* — they have many columns and use horizontal scroll instead.           */
    @media (min-width: 901px) {
      #tab-customers .table-responsive,
      #tab-agents .table-responsive {
        overflow-x: hidden !important;
      }

      #tab-customers .table-responsive table,
      #tab-agents .table-responsive table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
      }

      #tab-customers th,
      #tab-customers td,
      #tab-agents th,
      #tab-agents td {
        padding: 10px 8px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
      }

      #tab-leads td .input-box,
      #tab-leads td .notes-area,
      #tab-quotes td .input-box,
      #tab-quotes td .notes-area,
      #tab-orders td .input-box,
      #tab-orders td .notes-area,
      #tab-customers td .input-box,
      #tab-agents td .input-box,
      #tab-carriers td .input-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 6px 7px !important;
        font-size: 12px !important;
      }

      #tab-leads td .btn-primary,
      #tab-leads td .btn-action,
      #tab-leads td .btn-danger,
      #tab-quotes td .btn-primary,
      #tab-quotes td .btn-action,
      #tab-quotes td .btn-danger,
      #tab-orders td .btn-primary,
      #tab-orders td .btn-action,
      #tab-orders td .btn-danger,
      #tab-agents td .btn-action,
      #tab-agents td .btn-danger,
      #tab-carriers td .btn-danger {
        width: 100% !important;
        min-height: 32px !important;
        padding: 6px 7px !important;
        font-size: 11px !important;
      }

      #tab-leads .notes-area,
      #tab-quotes .notes-area {
        min-height: 56px !important;
        resize: vertical;
      }

      /* #tab-leads, #tab-quotes, #tab-orders column widths intentionally
         omitted — they use horizontal scroll + natural cell widths. */
    }

    @media (max-width: 900px) {
      body.crm-app .table-responsive {
        overflow-x: auto !important;
      }

      body.crm-app .table-responsive table {
        min-width: 780px !important;
      }
    }

    /* Dashboard v4: compact Enlink-inspired analytics view */
    body.crm-app #tab-dashboard {
      --dash-ink: #243044;
      --dash-muted: #7b8798;
      --dash-line: #e8edf5;
      --dash-blue: #3f7df6;
      --dash-cyan: #18b7c8;
      --dash-mint: #25c48f;
      --dash-purple: #7f63f4;
      --dash-amber: #ffb22c;
      --dash-coral: #f06f7f;
      --dash-card: #ffffff;
      background: #f6f8fc !important;
    }

    body.crm-app #tab-dashboard .admin-dashboard-shell {
      display: grid !important;
      gap: 18px !important;
      max-width: none !important;
      color: var(--dash-ink) !important;
    }

    body.crm-app #tab-dashboard .dash-hero,
    body.crm-app #tab-dashboard .dash-panel,
    body.crm-app #tab-dashboard .dash-kpi-card,
    body.crm-app #tab-dashboard .dash-pulse-card {
      border: 1px solid var(--dash-line) !important;
      border-radius: 6px !important;
      background: var(--dash-card) !important;
      box-shadow: 0 14px 34px rgba(36, 48, 68, 0.055) !important;
    }

    body.crm-app #tab-dashboard .dash-hero-compact {
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: minmax(280px, 1fr) minmax(360px, 520px) !important;
      gap: 22px !important;
      align-items: center !important;
      padding: 24px 26px !important;
      overflow: hidden !important;
      position: relative !important;
      background:
        linear-gradient(135deg, rgba(63, 125, 246, 0.08), rgba(37, 196, 143, 0.04) 46%, rgba(255, 255, 255, 0.98)) !important;
    }

    body.crm-app #tab-dashboard .dash-hero-compact::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      width: 4px !important;
      background: linear-gradient(180deg, var(--dash-blue), var(--dash-mint), var(--dash-coral)) !important;
      border-radius: 6px 0 0 6px !important;
    }

    body.crm-app #tab-dashboard .dash-eyebrow {
      color: var(--dash-blue) !important;
      font-size: 11px !important;
      letter-spacing: 0 !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
    }

    body.crm-app #tab-dashboard .dash-hero-copy h2 {
      margin: 6px 0 6px !important;
      font-size: 28px !important;
      line-height: 1.15 !important;
      letter-spacing: 0 !important;
      font-weight: 600 !important;
      color: var(--dash-ink) !important;
    }

    body.crm-app #tab-dashboard .dash-hero-copy p {
      max-width: 650px !important;
      margin: 0 !important;
      font-size: 14px !important;
      line-height: 1.7 !important;
      color: var(--dash-muted) !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .dash-hero-meta {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      margin-top: 18px !important;
    }

    body.crm-app #tab-dashboard .dash-range-control {
      height: 42px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 5px 6px 5px 14px !important;
      border: 1px solid var(--dash-line) !important;
      border-radius: 6px !important;
      background: #fff !important;
      color: var(--dash-muted) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      box-shadow: none !important;
    }

    body.crm-app #tab-dashboard .dash-range-control select {
      height: 30px !important;
      min-width: 138px !important;
      padding: 0 28px 0 10px !important;
      border: 1px solid #dbe3ef !important;
      border-radius: 5px !important;
      background: #f8fafc !important;
      color: var(--dash-ink) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .dash-live-pill,
    body.crm-app #tab-dashboard .dash-chip {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 30px !important;
      padding: 0 11px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(63, 125, 246, 0.18) !important;
      background: rgba(63, 125, 246, 0.08) !important;
      color: var(--dash-blue) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .dash-hero-visual {
      display: grid !important;
      grid-template-columns: 190px 1fr !important;
      align-items: center !important;
      gap: 16px !important;
      border: 1px solid #dfe7f3 !important;
      border-radius: 6px !important;
      background: rgba(255, 255, 255, 0.74) !important;
      padding: 14px !important;
    }

    body.crm-app #tab-dashboard .dash-hero-visual img {
      width: 100% !important;
      max-width: 190px !important;
      display: block !important;
      filter: drop-shadow(0 18px 22px rgba(36, 48, 68, 0.12)) !important;
    }

    body.crm-app #tab-dashboard .dash-hero-metric {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-hero-metric span,
    body.crm-app #tab-dashboard .dash-hero-metric small {
      color: var(--dash-muted) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .dash-hero-metric strong {
      display: block !important;
      margin: 5px 0 4px !important;
      color: #1d2738 !important;
      font-size: 31px !important;
      line-height: 1 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-grid {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 14px !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-card,
    body.crm-app #tab-dashboard .dash-kpi-card {
      min-height: 0 !important;
      padding: 16px !important;
      overflow: hidden !important;
      position: relative !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-card {
      display: grid !important;
      grid-template-columns: 54px 1fr !important;
      gap: 12px !important;
      align-items: center !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-icon {
      width: 54px !important;
      height: 54px !important;
      border-radius: 6px !important;
      display: grid !important;
      place-items: center !important;
      grid-row: 1 / span 3 !important;
      overflow: hidden !important;
      background: #f3f7ff !important;
      color: var(--dash-blue) !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-icon img {
      width: 30px !important;
      height: 30px !important;
      object-fit: contain !important;
      display: block !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-card > span,
    body.crm-app #tab-dashboard .dash-pulse-card > strong,
    body.crm-app #tab-dashboard .dash-pulse-card > small {
      grid-column: 2 !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-card span,
    body.crm-app #tab-dashboard .dash-kpi-top span:last-child {
      color: var(--dash-muted) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-card strong {
      display: block !important;
      margin: 2px 0 !important;
      color: var(--dash-ink) !important;
      font-size: 24px !important;
      line-height: 1.12 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-pulse-card small {
      color: var(--dash-muted) !important;
      font-size: 11px !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .accent-blue { border-top: 3px solid var(--dash-blue) !important; }
    body.crm-app #tab-dashboard .accent-mint { border-top: 3px solid var(--dash-mint) !important; }
    body.crm-app #tab-dashboard .accent-amber { border-top: 3px solid var(--dash-amber) !important; }
    body.crm-app #tab-dashboard .accent-coral { border-top: 3px solid var(--dash-coral) !important; }

    body.crm-app #tab-dashboard .dash-kpi-grid-modern {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 14px !important;
    }

    body.crm-app #tab-dashboard .dash-kpi-top {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      margin-bottom: 14px !important;
      gap: 10px !important;
    }

    body.crm-app #tab-dashboard .dash-icon {
      width: 36px !important;
      height: 36px !important;
      border-radius: 6px !important;
      display: grid !important;
      place-items: center !important;
      flex: 0 0 auto !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      background: rgba(63, 125, 246, 0.1) !important;
      color: var(--dash-blue) !important;
    }

    body.crm-app #tab-dashboard .dash-svg-icon svg {
      width: 22px !important;
      height: 22px !important;
    }

    body.crm-app #tab-dashboard .dash-avatar-icon img {
      width: 22px !important;
      height: 22px !important;
      object-fit: contain !important;
      border-radius: inherit !important;
    }

    body.crm-app #tab-dashboard .tone-green .dash-icon { background: rgba(37, 196, 143, 0.12) !important; color: var(--dash-mint) !important; }
    body.crm-app #tab-dashboard .tone-blue .dash-icon { background: rgba(63, 125, 246, 0.12) !important; color: var(--dash-blue) !important; }
    body.crm-app #tab-dashboard .tone-purple .dash-icon { background: rgba(127, 99, 244, 0.12) !important; color: var(--dash-purple) !important; }
    body.crm-app #tab-dashboard .tone-orange .dash-icon { background: rgba(240, 111, 127, 0.13) !important; color: var(--dash-coral) !important; }

    body.crm-app #tab-dashboard .dash-kpi-card strong {
      color: #1d2738 !important;
      font-size: 25px !important;
      line-height: 1.12 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-kpi-card p {
      margin: 5px 0 13px !important;
      color: var(--dash-muted) !important;
      font-size: 12px !important;
      line-height: 1.45 !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .dash-meter {
      height: 5px !important;
      border-radius: 999px !important;
      background: #eef3f8 !important;
      overflow: hidden !important;
    }

    body.crm-app #tab-dashboard .dash-meter span {
      display: block !important;
      height: 100% !important;
      border-radius: inherit !important;
    }

    body.crm-app #tab-dashboard .tone-green .dash-meter span { background: linear-gradient(90deg, var(--dash-mint), #8ee6c8) !important; }
    body.crm-app #tab-dashboard .tone-blue .dash-meter span { background: linear-gradient(90deg, var(--dash-blue), #8eb2ff) !important; }
    body.crm-app #tab-dashboard .tone-purple .dash-meter span { background: linear-gradient(90deg, var(--dash-purple), #b5a5ff) !important; }
    body.crm-app #tab-dashboard .tone-orange .dash-meter span { background: linear-gradient(90deg, var(--dash-coral), #f6a5ad) !important; }

    body.crm-app #tab-dashboard .dash-main-grid {
      display: grid !important;
      grid-template-columns: minmax(0, 1.8fr) minmax(320px, 0.9fr) !important;
      gap: 16px !important;
    }

    body.crm-app #tab-dashboard .dash-main-grid-secondary,
    body.crm-app #tab-dashboard .dash-insight-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 16px !important;
    }

    body.crm-app #tab-dashboard .dash-panel {
      padding: 18px 20px !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-panel-head {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      gap: 12px !important;
      margin-bottom: 14px !important;
    }

    body.crm-app #tab-dashboard .dash-panel-head h3 {
      margin: 3px 0 0 !important;
      color: var(--dash-ink) !important;
      font-size: 17px !important;
      line-height: 1.2 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .dash-chart-wrap {
      min-height: 238px !important;
      height: 238px !important;
    }

    body.crm-app #tab-dashboard .dash-chart-tall {
      min-height: 300px !important;
      height: 300px !important;
    }

    body.crm-app #tab-dashboard .dash-donut-wrap {
      min-height: 220px !important;
      height: 220px !important;
    }

    body.crm-app #tab-dashboard .dash-status-legend,
    body.crm-app #tab-dashboard .dash-source-list,
    body.crm-app #tab-dashboard .dash-route-list,
    body.crm-app #tab-dashboard .dash-activity-list,
    body.crm-app #tab-dashboard .dash-table-wrap {
      overscroll-behavior: auto !important;
    }

    body.crm-app #tab-dashboard .dash-status-item,
    body.crm-app #tab-dashboard .dash-source-item,
    body.crm-app #tab-dashboard .dash-route-item,
    body.crm-app #tab-dashboard .dash-activity-item {
      border-radius: 6px !important;
      border: 1px solid #edf2f7 !important;
      background: #fbfcff !important;
      color: var(--dash-muted) !important;
    }

    body.crm-app #tab-dashboard .dash-source-bar span {
      background: linear-gradient(90deg, var(--dash-blue), var(--dash-mint)) !important;
    }

    body.crm-app #tab-dashboard .dash-route-badge {
      border: 1px solid rgba(63, 125, 246, 0.16) !important;
      background: rgba(63, 125, 246, 0.08) !important;
      color: var(--dash-blue) !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .dash-agent-avatar {
      background: transparent !important;
      box-shadow: none !important;
    }

    body.crm-app #tab-dashboard .dash-photo-avatar {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      border-radius: 50% !important;
      display: inline-grid !important;
      place-items: center !important;
      padding: 0 !important;
      overflow: hidden !important;
      background: #eef3ff !important;
      border: 2px solid #ffffff !important;
      box-shadow: 0 7px 16px rgba(36, 48, 68, 0.16) !important;
    }

    body.crm-app #tab-dashboard .dash-photo-avatar::before,
    body.crm-app #tab-dashboard .dash-photo-avatar .dash-avatar-hair,
    body.crm-app #tab-dashboard .dash-photo-avatar .dash-avatar-face {
      display: none !important;
    }

    body.crm-app #tab-dashboard .dash-photo-avatar img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    body.crm-app #tab-dashboard .dash-money,
    body.crm-app #tab-dashboard .dash-activity-amount {
      color: var(--dash-blue) !important;
      font-weight: 600 !important;
    }

    body.crm-app #tab-dashboard .dash-rank {
      background: #f4f7ff !important;
      color: var(--dash-blue) !important;
      border-radius: 6px !important;
      font-weight: 600 !important;
    }

    @media (max-width: 1180px) {
      body.crm-app #tab-dashboard .dash-hero-compact,
      body.crm-app #tab-dashboard .dash-main-grid,
      body.crm-app #tab-dashboard .dash-main-grid-secondary,
      body.crm-app #tab-dashboard .dash-insight-grid {
        grid-template-columns: 1fr !important;
      }

      body.crm-app #tab-dashboard .dash-pulse-grid,
      body.crm-app #tab-dashboard .dash-kpi-grid-modern {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 680px) {
      body.crm-app #tab-dashboard .dash-hero-compact {
        padding: 20px !important;
      }

      body.crm-app #tab-dashboard .dash-hero-visual {
        grid-template-columns: 1fr !important;
      }

      body.crm-app #tab-dashboard .dash-pulse-grid,
      body.crm-app #tab-dashboard .dash-kpi-grid-modern {
        grid-template-columns: 1fr !important;
      }

      body.crm-app #tab-dashboard .dash-hero-copy h2 {
        font-size: 24px !important;
      }
    }

    /* Dashboard rebuild: new structure, no dependency on the previous dashboard cards */
    body.crm-app #tab-dashboard {
      background: #eef3f8 !important;
      color: #253044 !important;
    }

    body.crm-app #tab-dashboard .nd-dashboard-shell {
      --nd-ink: #253044;
      --nd-muted: #7a8699;
      --nd-line: #e4ebf4;
      --nd-panel: #ffffff;
      --nd-blue: #4f7cff;
      --nd-teal: #22c3a6;
      --nd-violet: #7d64f2;
      --nd-amber: #f4a62a;
      --nd-coral: #ef6b7d;
      display: grid !important;
      gap: 18px !important;
      max-width: none !important;
    }

    body.crm-app #tab-dashboard .nd-command {
      display: grid !important;
      grid-template-columns: minmax(320px, 1fr) minmax(360px, 520px) !important;
      gap: 22px !important;
      min-height: 238px !important;
      padding: 30px !important;
      border-radius: 8px !important;
      position: relative !important;
      overflow: hidden !important;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(135deg, #111827 0%, #183247 52%, #203d38 100%) !important;
      background-size: 28px 28px, 28px 28px, auto !important;
      box-shadow: 0 22px 52px rgba(17, 24, 39, 0.18) !important;
    }

    body.crm-app #tab-dashboard .nd-command::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      border-top: 4px solid var(--nd-teal) !important;
      pointer-events: none !important;
    }

    body.crm-app #tab-dashboard .nd-command-copy,
    body.crm-app #tab-dashboard .nd-revenue-panel {
      position: relative !important;
      z-index: 1 !important;
    }

    body.crm-app #tab-dashboard .nd-kicker,
    body.crm-app #tab-dashboard .nd-panel-head span,
    body.crm-app #tab-dashboard .nd-metric > span,
    body.crm-app #tab-dashboard .nd-pulse span,
    body.crm-app #tab-dashboard .nd-revenue-top span {
      font-size: 11px !important;
      letter-spacing: 0 !important;
      text-transform: uppercase !important;
      font-weight: 600 !important;
    }

    body.crm-app #tab-dashboard .nd-kicker {
      color: #8ee6d4 !important;
    }

    body.crm-app #tab-dashboard .nd-command h2 {
      margin: 10px 0 10px !important;
      color: #ffffff !important;
      font-size: 34px !important;
      line-height: 1.1 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-command p {
      max-width: 640px !important;
      margin: 0 !important;
      color: rgba(255, 255, 255, 0.72) !important;
      font-size: 14px !important;
      line-height: 1.75 !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .nd-toolbar {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      margin-top: 24px !important;
    }

    body.crm-app #tab-dashboard .nd-select-wrap {
      height: 44px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 5px 6px 5px 14px !important;
      border-radius: 6px !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      background: rgba(255, 255, 255, 0.1) !important;
      color: rgba(255, 255, 255, 0.72) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .nd-select-wrap select {
      height: 32px !important;
      min-width: 140px !important;
      border: 0 !important;
      border-radius: 5px !important;
      padding: 0 28px 0 11px !important;
      background: #ffffff !important;
      color: var(--nd-ink) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .nd-live-dot {
      min-height: 34px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 0 13px !important;
      border-radius: 999px !important;
      color: #cbfff2 !important;
      background: rgba(34, 195, 166, 0.14) !important;
      border: 1px solid rgba(34, 195, 166, 0.26) !important;
      font-size: 12px !important;
      font-weight: 500 !important;
    }

    body.crm-app #tab-dashboard .nd-live-dot::before {
      content: "" !important;
      width: 7px !important;
      height: 7px !important;
      border-radius: 50% !important;
      background: var(--nd-teal) !important;
      box-shadow: 0 0 0 4px rgba(34, 195, 166, 0.16) !important;
    }

    body.crm-app #tab-dashboard .nd-revenue-panel {
      align-self: stretch !important;
      border-radius: 8px !important;
      padding: 22px !important;
      color: #ffffff !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      backdrop-filter: blur(10px) !important;
    }

    body.crm-app #tab-dashboard .nd-revenue-top {
      display: flex !important;
      justify-content: space-between !important;
      gap: 12px !important;
      align-items: center !important;
      color: rgba(255, 255, 255, 0.7) !important;
    }

    body.crm-app #tab-dashboard .nd-revenue-top img {
      width: 40px !important;
      height: 40px !important;
      padding: 8px !important;
      border-radius: 8px !important;
      background: rgba(255, 255, 255, 0.14) !important;
      object-fit: contain !important;
    }

    body.crm-app #tab-dashboard .nd-revenue-panel > strong {
      display: block !important;
      margin: 16px 0 4px !important;
      color: #ffffff !important;
      font-size: 42px !important;
      line-height: 1 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-mini-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin-top: 22px !important;
    }

    body.crm-app #tab-dashboard .nd-mini-grid div {
      padding: 12px !important;
      border-radius: 6px !important;
      background: rgba(255, 255, 255, 0.1) !important;
      border: 1px solid rgba(255, 255, 255, 0.11) !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-mini-grid span {
      display: block !important;
      color: rgba(255, 255, 255, 0.62) !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      margin-bottom: 4px !important;
    }

    body.crm-app #tab-dashboard .nd-mini-grid strong {
      color: #ffffff !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      line-height: 1.2 !important;
      display: block !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    body.crm-app #tab-dashboard .nd-pulse-board,
    body.crm-app #tab-dashboard .nd-metric-row,
    body.crm-app #tab-dashboard .nd-chart-board,
    body.crm-app #tab-dashboard .nd-intel-grid,
    body.crm-app #tab-dashboard .nd-work-grid {
      display: grid !important;
      gap: 16px !important;
    }

    body.crm-app #tab-dashboard .nd-pulse-board {
      grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)) !important;
      margin-top: -38px !important;
      position: relative !important;
      z-index: 2 !important;
    }

    body.crm-app #tab-dashboard .nd-pulse,
    body.crm-app #tab-dashboard .nd-metric,
    body.crm-app #tab-dashboard .nd-panel {
      background: var(--nd-panel) !important;
      border: 1px solid var(--nd-line) !important;
      border-radius: 8px !important;
      box-shadow: 0 14px 34px rgba(37, 48, 68, 0.055) !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-pulse {
      min-height: 104px !important;
      display: grid !important;
      grid-template-columns: 54px 1fr !important;
      gap: 13px !important;
      align-items: center !important;
      padding: 16px !important;
      border-top: 3px solid var(--nd-blue) !important;
    }

    body.crm-app #tab-dashboard .nd-pulse:nth-child(2) { border-top-color: var(--nd-teal) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(3) { border-top-color: var(--nd-amber) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(4) { border-top-color: var(--nd-coral) !important; }

    body.crm-app #tab-dashboard .nd-pulse img,
    body.crm-app #tab-dashboard .nd-icon {
      width: 52px !important;
      height: 52px !important;
      border-radius: 8px !important;
      background: #f3f7ff !important;
      display: grid !important;
      place-items: center !important;
      object-fit: contain !important;
      padding: 13px !important;
      color: var(--nd-blue) !important;
    }

    body.crm-app #tab-dashboard .nd-icon svg {
      width: 23px !important;
      height: 23px !important;
    }

    body.crm-app #tab-dashboard .nd-pulse span {
      color: var(--nd-muted) !important;
      display: block !important;
      margin-bottom: 5px !important;
    }

    body.crm-app #tab-dashboard .nd-pulse strong {
      display: block !important;
      color: var(--nd-ink) !important;
      font-size: 24px !important;
      line-height: 1 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-pulse p {
      margin: 6px 0 0 !important;
      color: var(--nd-muted) !important;
      font-size: 11px !important;
      line-height: 1.35 !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .nd-metric-row {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.crm-app #tab-dashboard .nd-metric {
      padding: 16px !important;
      border-left: 3px solid var(--nd-teal) !important;
    }

    body.crm-app #tab-dashboard .nd-metric:nth-child(2) { border-left-color: var(--nd-blue) !important; }
    body.crm-app #tab-dashboard .nd-metric:nth-child(3) { border-left-color: var(--nd-violet) !important; }
    body.crm-app #tab-dashboard .nd-metric:nth-child(4) { border-left-color: var(--nd-coral) !important; }

    body.crm-app #tab-dashboard .nd-metric > span {
      color: var(--nd-muted) !important;
    }

    body.crm-app #tab-dashboard .nd-metric strong {
      display: block !important;
      margin: 10px 0 5px !important;
      color: var(--nd-ink) !important;
      font-size: 27px !important;
      line-height: 1 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-metric p {
      margin: 0 0 14px !important;
      color: var(--nd-muted) !important;
      font-size: 12px !important;
      line-height: 1.45 !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .nd-metric p b {
      font-weight: 500 !important;
      color: var(--nd-ink) !important;
    }

    body.crm-app #tab-dashboard .nd-meter {
      height: 5px !important;
      border-radius: 999px !important;
      overflow: hidden !important;
      background: #edf2f7 !important;
    }

    body.crm-app #tab-dashboard .nd-meter i {
      display: block !important;
      height: 100% !important;
      border-radius: inherit !important;
      background: linear-gradient(90deg, var(--nd-blue), var(--nd-teal)) !important;
    }

    body.crm-app #tab-dashboard .nd-chart-board {
      grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr) !important;
    }

    body.crm-app #tab-dashboard .nd-intel-grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.8fr) minmax(280px, 0.8fr) !important;
    }

    body.crm-app #tab-dashboard .nd-work-grid {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
    }

    body.crm-app #tab-dashboard .nd-panel {
      padding: 18px !important;
      overflow: hidden !important;
    }

    body.crm-app #tab-dashboard .nd-panel-head {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      gap: 12px !important;
      margin-bottom: 14px !important;
    }

    body.crm-app #tab-dashboard .nd-panel-head span {
      display: block !important;
      color: var(--nd-blue) !important;
      margin-bottom: 4px !important;
    }

    body.crm-app #tab-dashboard .nd-panel-head h3 {
      margin: 0 !important;
      color: var(--nd-ink) !important;
      font-size: 18px !important;
      line-height: 1.2 !important;
      font-weight: 600 !important;
      letter-spacing: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-panel-head small {
      border-radius: 999px !important;
      padding: 7px 11px !important;
      color: var(--nd-blue) !important;
      background: #f2f6ff !important;
      border: 1px solid #dbe6ff !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
    }

    body.crm-app #tab-dashboard .nd-chart {
      min-height: 260px !important;
      height: 260px !important;
      position: relative !important;
    }

    body.crm-app #tab-dashboard .nd-chart-flow {
      height: 310px !important;
      min-height: 310px !important;
    }

    body.crm-app #tab-dashboard .nd-chart-agent {
      height: 278px !important;
      min-height: 278px !important;
    }

    body.crm-app #tab-dashboard .nd-chart-donut {
      height: 220px !important;
      min-height: 220px !important;
    }

    body.crm-app #tab-dashboard .nd-status-list,
    body.crm-app #tab-dashboard .nd-source-list,
    body.crm-app #tab-dashboard .nd-route-list,
    body.crm-app #tab-dashboard .nd-log-list,
    body.crm-app #tab-dashboard .nd-table-wrap {
      max-height: 290px !important;
      overflow-y: auto !important;
      overscroll-behavior: auto !important;
      padding-right: 3px !important;
    }

    body.crm-app #tab-dashboard .nd-status-row,
    body.crm-app #tab-dashboard .nd-source-row,
    body.crm-app #tab-dashboard .nd-route-row,
    body.crm-app #tab-dashboard .nd-log-item {
      display: grid !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 11px !important;
      border: 1px solid #edf2f7 !important;
      border-radius: 7px !important;
      background: #fbfdff !important;
      color: var(--nd-muted) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
    }

    body.crm-app #tab-dashboard .nd-status-row,
    body.crm-app #tab-dashboard .nd-source-row,
    body.crm-app #tab-dashboard .nd-route-row,
    body.crm-app #tab-dashboard .nd-log-item + .nd-log-item,
    body.crm-app #tab-dashboard .nd-route-row + .nd-route-row,
    body.crm-app #tab-dashboard .nd-source-row + .nd-source-row,
    body.crm-app #tab-dashboard .nd-status-row + .nd-status-row {
      margin-top: 9px !important;
    }

    body.crm-app #tab-dashboard .nd-status-row {
      grid-template-columns: 10px 1fr auto !important;
    }

    body.crm-app #tab-dashboard .nd-source-row {
      grid-template-columns: minmax(80px, 0.7fr) minmax(100px, 1fr) auto !important;
    }

    body.crm-app #tab-dashboard .nd-route-row {
      grid-template-columns: 1fr auto !important;
    }

    body.crm-app #tab-dashboard .nd-log-item {
      grid-template-columns: 42px 1fr auto !important;
    }

    body.crm-app #tab-dashboard .nd-dot {
      width: 9px !important;
      height: 9px !important;
      border-radius: 50% !important;
      display: inline-block !important;
    }

    body.crm-app #tab-dashboard .nd-source-bar {
      height: 7px !important;
      border-radius: 999px !important;
      overflow: hidden !important;
      background: #edf2f7 !important;
    }

    body.crm-app #tab-dashboard .nd-source-bar i {
      height: 100% !important;
      display: block !important;
      border-radius: inherit !important;
      background: linear-gradient(90deg, var(--nd-blue), var(--nd-teal)) !important;
    }

    body.crm-app #tab-dashboard .nd-route-name,
    body.crm-app #tab-dashboard .nd-log-title,
    body.crm-app #tab-dashboard .nd-agent-name {
      color: var(--nd-ink) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      line-height: 1.35 !important;
    }

    body.crm-app #tab-dashboard .nd-route-sub,
    body.crm-app #tab-dashboard .nd-log-sub,
    body.crm-app #tab-dashboard .nd-agent-sub {
      margin-top: 2px !important;
      color: var(--nd-muted) !important;
      font-size: 11px !important;
      font-weight: 400 !important;
      line-height: 1.35 !important;
    }

    body.crm-app #tab-dashboard .nd-route-row > span,
    body.crm-app #tab-dashboard .nd-log-action {
      justify-self: end !important;
      border-radius: 999px !important;
      padding: 6px 9px !important;
      color: var(--nd-blue) !important;
      background: #f2f6ff !important;
      border: 1px solid #dbe6ff !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
    }

    body.crm-app #tab-dashboard .nd-empty {
      min-height: 92px !important;
      display: grid !important;
      place-items: center !important;
      border: 1px dashed #dce5f0 !important;
      border-radius: 8px !important;
      color: var(--nd-muted) !important;
      background: #fbfdff !important;
      font-size: 12px !important;
      text-align: center !important;
      padding: 16px !important;
    }

    body.crm-app #tab-dashboard .nd-avatar {
      width: 38px !important;
      height: 38px !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      display: inline-grid !important;
      place-items: center !important;
      background: #edf2f7 !important;
      border: 2px solid #ffffff !important;
      box-shadow: 0 8px 18px rgba(37, 48, 68, 0.14) !important;
      flex: 0 0 auto !important;
    }

    body.crm-app #tab-dashboard .nd-avatar img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
    }

    body.crm-app #tab-dashboard .nd-agent-line {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-table-wrap table {
      width: 100% !important;
      border-collapse: collapse !important;
      min-width: 0 !important;
    }

    body.crm-app #tab-dashboard .nd-table-wrap th,
    body.crm-app #tab-dashboard .nd-table-wrap td {
      padding: 12px 10px !important;
      border-bottom: 1px solid #edf2f7 !important;
      color: var(--nd-muted) !important;
      font-size: 12px !important;
      text-align: left !important;
      vertical-align: middle !important;
    }

    body.crm-app #tab-dashboard .nd-table-wrap th {
      color: #8490a2 !important;
      font-weight: 600 !important;
      text-transform: uppercase !important;
    }

    body.crm-app #tab-dashboard .nd-rank {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 34px !important;
      height: 28px !important;
      border-radius: 7px !important;
      color: var(--nd-blue) !important;
      background: #f2f6ff !important;
      font-size: 12px !important;
      font-weight: 600 !important;
    }

    body.crm-app #tab-dashboard .nd-money {
      color: var(--nd-blue) !important;
      font-weight: 600 !important;
      white-space: nowrap !important;
    }

    @media (max-width: 1180px) {
      body.crm-app #tab-dashboard .nd-command,
      body.crm-app #tab-dashboard .nd-chart-board,
      body.crm-app #tab-dashboard .nd-intel-grid,
      body.crm-app #tab-dashboard .nd-work-grid {
        grid-template-columns: 1fr !important;
      }

      body.crm-app #tab-dashboard .nd-pulse-board,
      body.crm-app #tab-dashboard .nd-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 0 !important;
      }
    }

    @media (max-width: 680px) {
      body.crm-app #tab-dashboard .nd-command {
        padding: 22px !important;
      }

      body.crm-app #tab-dashboard .nd-command h2 {
        font-size: 28px !important;
      }

      body.crm-app #tab-dashboard .nd-pulse-board,
      body.crm-app #tab-dashboard .nd-metric-row,
      body.crm-app #tab-dashboard .nd-mini-grid {
        grid-template-columns: 1fr !important;
      }

      body.crm-app #tab-dashboard .nd-log-item {
        grid-template-columns: 42px 1fr !important;
      }

      body.crm-app #tab-dashboard .nd-log-action {
        grid-column: 2 !important;
        justify-self: start !important;
      }
    }

    /* ─── Dashboard Premium Polish ─────────────────────────────────────── */
    body.crm-app #tab-dashboard {
      background: #f4f6fa !important;
    }

    body.crm-app #tab-dashboard .nd-dashboard-shell {
      gap: 20px !important;
      padding-bottom: 32px !important;
    }

    /* Hero: clean dark with no grid lines */
    body.crm-app #tab-dashboard .nd-command {
      background: linear-gradient(135deg, #111827 0%, #1e293b 100%) !important;
      background-size: auto !important;
      border-radius: 14px !important;
      box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18) !important;
      min-height: 210px !important;
      padding: 28px 30px !important;
    }

    body.crm-app #tab-dashboard .nd-command::before {
      border-top: none !important;
    }

    body.crm-app #tab-dashboard .nd-command h2 {
      font-size: 28px !important;
      font-weight: 700 !important;
      letter-spacing: -0.3px !important;
    }

    body.crm-app #tab-dashboard .nd-command p {
      font-size: 13px !important;
      line-height: 1.6 !important;
      max-width: 480px !important;
      color: rgba(255,255,255,0.55) !important;
    }

    /* Revenue panel: clean glass */
    body.crm-app #tab-dashboard .nd-revenue-panel {
      border-radius: 12px !important;
      background: rgba(255,255,255,0.06) !important;
      backdrop-filter: blur(12px) !important;
      border: 1px solid rgba(255,255,255,0.1) !important;
    }

    body.crm-app #tab-dashboard .nd-revenue-panel > strong {
      font-size: 36px !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
      background: none !important;
    }

    body.crm-app #tab-dashboard .nd-mini-grid div {
      border-radius: 10px !important;
      background: rgba(255,255,255,0.06) !important;
      border: 1px solid rgba(255,255,255,0.08) !important;
    }

    /* Live dot + toolbar: subtle */
    body.crm-app #tab-dashboard .nd-live-dot {
      background: rgba(255,255,255,0.08) !important;
      border: 1px solid rgba(255,255,255,0.12) !important;
      color: rgba(255,255,255,0.7) !important;
    }

    body.crm-app #tab-dashboard .nd-live-dot::before {
      background: #34d399 !important;
      box-shadow: 0 0 0 3px rgba(52,211,153,0.2) !important;
    }

    /* Pulse cards: REMOVE colored top borders, clean white */
    body.crm-app #tab-dashboard .nd-pulse {
      border-radius: 12px !important;
      border-top: none !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    }

    body.crm-app #tab-dashboard .nd-pulse:nth-child(1),
    body.crm-app #tab-dashboard .nd-pulse:nth-child(2),
    body.crm-app #tab-dashboard .nd-pulse:nth-child(3),
    body.crm-app #tab-dashboard .nd-pulse:nth-child(4) {
      border-top: none !important;
    }

    body.crm-app #tab-dashboard .nd-pulse:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    }

    body.crm-app #tab-dashboard .nd-pulse strong {
      font-size: 26px !important;
      color: #111827 !important;
    }

    /* Metric cards: REMOVE colored left borders */
    body.crm-app #tab-dashboard .nd-metric {
      border-radius: 12px !important;
      border-left: none !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease !important;
      padding: 18px !important;
    }

    body.crm-app #tab-dashboard .nd-metric:nth-child(1),
    body.crm-app #tab-dashboard .nd-metric:nth-child(2),
    body.crm-app #tab-dashboard .nd-metric:nth-child(3),
    body.crm-app #tab-dashboard .nd-metric:nth-child(4) {
      border-left: none !important;
    }

    body.crm-app #tab-dashboard .nd-metric:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    }

    body.crm-app #tab-dashboard .nd-metric strong {
      font-size: 26px !important;
      color: #111827 !important;
      letter-spacing: -0.3px !important;
    }

    /* Progress bars: consistent neutral blue */
    body.crm-app #tab-dashboard .nd-meter {
      height: 5px !important;
      border-radius: 999px !important;
      background: #e5e7eb !important;
    }

    body.crm-app #tab-dashboard .nd-meter i {
      background: #3b82f6 !important;
      transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    /* Panels: clean white */
    body.crm-app #tab-dashboard .nd-panel {
      border-radius: 14px !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
      padding: 22px !important;
      border: 1px solid #e5e7eb !important;
      transition: box-shadow 0.18s ease !important;
    }

    body.crm-app #tab-dashboard .nd-panel:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
    }

    body.crm-app #tab-dashboard .nd-panel-head h3 {
      font-size: 15px !important;
      font-weight: 700 !important;
      color: #111827 !important;
    }

    body.crm-app #tab-dashboard .nd-panel-head small {
      border-radius: 8px !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      background: #f1f5f9 !important;
      border: 1px solid #e2e8f0 !important;
      color: #475569 !important;
    }

    /* Data rows: subtle hover */
    body.crm-app #tab-dashboard .nd-status-row,
    body.crm-app #tab-dashboard .nd-source-row,
    body.crm-app #tab-dashboard .nd-route-row,
    body.crm-app #tab-dashboard .nd-log-item {
      border-radius: 10px !important;
      border: 1px solid #f1f5f9 !important;
      background: #fafbfc !important;
      transition: background 0.12s ease !important;
    }

    body.crm-app #tab-dashboard .nd-status-row:hover,
    body.crm-app #tab-dashboard .nd-source-row:hover,
    body.crm-app #tab-dashboard .nd-route-row:hover,
    body.crm-app #tab-dashboard .nd-log-item:hover {
      background: #f1f5f9 !important;
    }

    /* Leaderboard table */
    body.crm-app #tab-dashboard .nd-table-wrap th {
      font-size: 11px !important;
      background: #f8fafc !important;
      border-bottom: 1px solid #e5e7eb !important;
    }

    body.crm-app #tab-dashboard .nd-table-wrap tr:hover td {
      background: #f8fafc !important;
    }

    /* Source bar: neutral blue */
    body.crm-app #tab-dashboard .nd-source-bar {
      height: 6px !important;
      background: #e5e7eb !important;
    }

    body.crm-app #tab-dashboard .nd-source-bar i {
      background: #3b82f6 !important;
    }

    /* Scrollbar */
    body.crm-app #tab-dashboard .nd-status-list::-webkit-scrollbar,
    body.crm-app #tab-dashboard .nd-source-list::-webkit-scrollbar,
    body.crm-app #tab-dashboard .nd-route-list::-webkit-scrollbar,
    body.crm-app #tab-dashboard .nd-log-list::-webkit-scrollbar,
    body.crm-app #tab-dashboard .nd-table-wrap::-webkit-scrollbar {
      width: 4px !important;
    }

    body.crm-app #tab-dashboard .nd-status-list::-webkit-scrollbar-thumb,
    body.crm-app #tab-dashboard .nd-source-list::-webkit-scrollbar-thumb,
    body.crm-app #tab-dashboard .nd-route-list::-webkit-scrollbar-thumb,
    body.crm-app #tab-dashboard .nd-log-list::-webkit-scrollbar-thumb,
    body.crm-app #tab-dashboard .nd-table-wrap::-webkit-scrollbar-thumb {
      background: #cbd5e1 !important;
      border-radius: 999px !important;
    }

    .settings-media-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin-bottom: 24px;
    }

    #tab-settings .settings-shell {
      max-width: none !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    #tab-settings .settings-page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    #tab-settings .settings-page-head h2 {
      margin: 0 0 6px;
      color: #1f2937;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: 0;
    }

    #tab-settings .settings-page-head p {
      margin: 0;
      color: #667085;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 400;
      max-width: 720px;
    }

    #tab-settings .settings-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(330px, 0.7fr);
      gap: 18px;
      align-items: start;
    }

    #tab-settings .settings-stack {
      display: grid;
      gap: 18px;
      min-width: 0;
    }

    #tab-settings .settings-card {
      background: #fff;
      border: 1px solid #e7edf5;
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
      overflow: hidden;
    }

    /* Dark heading bar — matches .aq2-card-header from Add Quote / Edit Order
       so every form-style surface in the app reads the same visual language. */
    #tab-settings .settings-card-head {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 10px 14px;
      background: #1a202c;
      color: #ffffff;
      border-bottom: 0;
    }

    /* !important needed: body.crm-app .panel h3 forces #2a2a2a with !important
       — that wins on cascade without these overrides. */
    #tab-settings .settings-card-head h3 {
      margin: 0 !important;
      color: #ffffff !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
      font-weight: 700 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase !important;
      border: 0 !important;
      padding: 0 !important;
    }

    #tab-settings .settings-card-head p {
      margin: 2px 0 0 !important;
      color: rgba(255, 255, 255, 0.65) !important;
      font-size: 10.5px !important;
      line-height: 1.4 !important;
      font-weight: 500 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
    }

    #tab-settings .settings-icon {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: inline-grid;
      place-items: center;
      color: #ffffff;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      flex: 0 0 auto;
    }

    #tab-settings .settings-icon svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #tab-settings .settings-card-body {
      padding: 18px 20px 20px;
    }

    #tab-settings .settings-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
    }

    /* ─── Terms & Conditions rich-text editor (Quill) ─── */
    /* Sized to fit the narrow right-column aside. The toolbar wraps cleanly
       to 2 short rows; the editor itself is 200px tall by default and
       drag-resizable via our custom handle below it. */
    #settTermsEditor {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 0 0 0 0;
      border-top: none;
      position: relative;
      min-height: 200px;
      height: 200px;
      max-height: 75vh;
      font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
      font-size: 12px;
      line-height: 1.55;
    }
    #settTermsEditor .ql-editor { 
      padding: 10px 12px; 
      height: 100%;
      overflow-y: auto;
    }
    /* Compact Quill toolbar tuned for the narrow column. Smaller buttons,
       tighter gaps, lets the toolbar wrap into 2 short rows when needed. */
    .ql-toolbar.ql-snow {
      border: 1px solid #cbd5e1;
      border-radius: 4px 4px 0 0;
      background: #f7f8fa;
      padding: 4px 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      align-items: center;
    }
    .ql-toolbar.ql-snow + .ql-container.ql-snow { border-top: 0; }
    .ql-toolbar.ql-snow .ql-formats { margin-right: 6px !important; }
    .ql-toolbar.ql-snow button {
      width: 22px !important;
      height: 22px !important;
      padding: 2px !important;
    }
    .ql-toolbar.ql-snow button svg { width: 14px; height: 14px; }
    .ql-toolbar.ql-snow .ql-picker { font-size: 11px; }
    .ql-toolbar.ql-snow .ql-picker-label { padding: 0 4px; }

    /* Custom drag-to-resize handle below the editor. JS-driven (.terms-drag-handle
       listens for mousedown / mousemove / mouseup and adjusts editor height).
       This replaces the unreliable browser-native resize: vertical handle. */
    .terms-drag-handle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 6px 8px;
      background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
      border: 1px solid #94a3b8;
      border-top: none;
      border-radius: 0 0 6px 6px;
      cursor: ns-resize;
      user-select: none;
      font-size: 10px;
      color: #475569;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      transition: background 0.15s, color 0.15s;
    }
    .terms-drag-handle:hover {
      background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
      color: #1e293b;
    }
    .terms-drag-handle.is-dragging {
      background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
      color: #ffffff;
    }
    .terms-drag-grip {
      display: inline-block;
      width: 26px;
      height: 4px;
      background: repeating-linear-gradient(90deg, #64748b 0 3px, transparent 3px 5px);
      border-radius: 2px;
      opacity: 0.7;
    }
    .terms-drag-label { white-space: nowrap; }

    #tab-settings .settings-field {
      min-width: 0;
    }

    #tab-settings .settings-field.full {
      grid-column: 1 / -1;
    }

    #tab-settings .settings-field label {
      font-size: 11px;
      font-weight: 700;
      display: block;
      margin-bottom: 4px;
      color: #4a5568;
    }

    #tab-settings .settings-field .input-box {
      width: 100%;
      box-sizing: border-box;
    }

    #tab-settings .settings-subnote {
      display: block;
      margin-top: 6px;
      color: #718096;
      font-size: 10px;
      line-height: 1.45;
      font-weight: 400;
    }

    #tab-settings .settings-note {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 8px;
      padding: 12px;
      color: #475569;
      font-size: 11px;
      line-height: 1.5;
      font-weight: 400;
    }

    #tab-settings .settings-note strong {
      font-size: 12px;
      color: #1e293b;
      font-weight: 700;
    }

    #tab-settings .settings-note .settings-note-icon {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: #e2e8f0;
      color: #475569;
      border: 1px solid #cbd5e1;
      flex: 0 0 auto;
      font-size: 12px;
      font-weight: 700;
    }

    #tab-settings .settings-note + .settings-field .btn-action {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 6px;
    }

    #tab-settings .settings-note + .settings-field .btn-action:hover {
      background: #e2e8f0;
    }

    #tab-settings .settings-actions {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: wrap;
    }

    #tab-settings .settings-actions .btn-primary,
    #tab-settings .settings-actions .btn-action {
      width: auto;
      min-height: 42px;
      padding: 0 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    #tab-settings .settings-actions .btn-action {
      background: #111827;
      color: #fff;
      border: 1px solid #111827;
    }

    #tab-settings .settings-actions .btn-action:hover {
      background: #0b1220;
      color: #fff;
    }

    #tab-settings aside .settings-media-grid {
      grid-template-columns: 1fr;
      margin-bottom: 0;
    }

    #tab-settings .settings-status-line {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      font-size: 13px;
      font-weight: 400;
    }

    #tab-settings .brand-color-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    #tab-settings .brand-color-row input[type="color"] {
      width: 50px;
      height: 38px;
      border: 1px solid #d6e0ea;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      padding: 3px;
    }

    /* ─── Sub-tab nav inside Settings */
    #tab-settings .settings-subtabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 18px;
      padding: 4px;
      background: #f3f5f9;
      border: 1px solid #e7edf5;
      border-radius: 10px;
    }
    #tab-settings .settings-subtab {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border: 0;
      background: transparent;
      color: #53535f;
      font-size: 13px;
      font-weight: 500;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    #tab-settings .settings-subtab:hover {
      background: #e8edf4;
      color: #1f2937;
    }
    #tab-settings .settings-subtab.active {
      background: #111827;
      color: #ffffff;
    }
    #tab-settings .settings-subtab svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: 0 0 auto;
    }

    /* ─── Sub-panes: only the active one is visible */
    #tab-settings .settings-subpane { display: none; }
    #tab-settings .settings-subpane.active { display: block; }
    #tab-settings .settings-subpane .settings-stack {
      display: grid;
      gap: 18px;
      min-width: 0;
    }

    /* Sub-tabs replace the old 2-column layout; force single column */
    #tab-settings .settings-layout {
      display: block;
    }

    /* Toolbar: sub-tabs on the left, single Save button on the right.
       Always visible at the top of the Settings page. */
    #tab-settings .settings-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    #tab-settings .settings-toolbar .settings-subtabs {
      flex: 1 1 auto;
      margin-bottom: 0;
    }
    #tab-settings .settings-toolbar-save {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
    }
    #tab-settings .settings-toolbar-save .btn-primary {
      min-height: 42px;
      padding: 0 22px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }
    /* Security sub-tab uses its own "Update password" button; hide the
       global Save action when Security is active. */
    #tab-settings.settings-pane-security-active .settings-toolbar-save {
      display: none;
    }

    .settings-upload-panel {
      background: #fff;
      border: 1px solid #e7edf5;
      border-radius: 10px;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
    }

    .settings-upload-panel h4 {
      margin: 0 0 6px;
      color: #1f2937;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .settings-upload-panel p {
      margin: 0 0 16px;
      color: #6b7280;
      font-size: 12px;
      line-height: 1.55;
      font-weight: 400;
    }

    .image-upload-row {
      display: flex;
      gap: 14px;
      align-items: center;
    }

    .profile-preview {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      border: 1px solid #dbe5f0;
      background: linear-gradient(135deg, #eef4ff, #f8fafc);
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #4169e1;
      font-size: 22px;
      font-weight: 600;
      flex: 0 0 auto;
    }

    .company-logo-preview {
      width: 126px;
      height: 74px;
      border-radius: 9px;
      border: 1px dashed #cbd5e1;
      background: linear-gradient(135deg, #f8fafc, #eef4ff);
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #64748b;
      font-size: 11px;
      font-weight: 500;
      text-align: center;
      padding: 8px;
      flex: 0 0 auto;
    }

    .profile-preview img,
    .company-logo-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .profile-preview img {
      object-fit: cover;
    }

    .image-upload-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }

    .upload-note,
    .upload-status {
      color: #64748b;
      font-size: 11px;
      line-height: 1.45;
      font-weight: 400;
    }

    .upload-status.is-good {
      color: #16a34a;
    }

    .upload-status.is-bad {
      color: #dc2626;
    }

    .image-adjuster-overlay {
      position: fixed;
      inset: 0;
      z-index: 13000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      background: rgba(15, 23, 42, 0.46);
      backdrop-filter: blur(8px);
    }

    .image-adjuster-card {
      width: min(520px, 100%);
      background: #fff;
      border: 1px solid #e7edf5;
      border-radius: 14px;
      box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
      padding: 22px;
    }

    .image-adjuster-card h3 {
      margin: 0 0 6px;
      color: #1f2937;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 600;
      border: 0;
      padding: 0;
    }

    .image-adjuster-card p {
      margin: 0 0 16px;
      color: #667085;
      font-size: 12px;
      line-height: 1.5;
      font-weight: 400;
    }

    .image-adjuster-preview {
      display: grid;
      place-items: center;
      min-height: 230px;
      margin-bottom: 16px;
      border: 1px solid #e6edf5;
      border-radius: 12px;
      background:
        linear-gradient(45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f8fafc 75%),
        linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
      background-color: #fff;
      background-position: 0 0, 0 8px, 8px -8px, -8px 0;
      background-size: 16px 16px;
    }

    .image-adjuster-preview canvas {
      max-width: 100%;
      max-height: 260px;
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    }

    .image-adjuster-controls {
      display: grid;
      gap: 11px;
    }

    .image-adjuster-control {
      display: grid;
      grid-template-columns: 78px 1fr;
      gap: 12px;
      align-items: center;
      color: #4a5568;
      font-size: 12px;
      font-weight: 600;
    }

    .image-adjuster-control input {
      width: 100%;
    }

    .image-adjuster-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }

    .image-adjuster-actions button {
      min-height: 40px;
      padding: 0 16px;
      border-radius: 9px;
      border: 1px solid #d6e0ea;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    .image-adjuster-cancel {
      background: #fff;
      color: #344054;
    }

    .image-adjuster-apply {
      background: #111827;
      border-color: #111827 !important;
      color: #fff;
    }

    #tab-leads .lead-console {
      display: grid;
      gap: 12px;
      margin-bottom: 16px;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid #e7edf5;
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
    }

    #tab-leads .leads-topbar {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
      gap: 16px;
      margin-bottom: 20px;
    }

    #tab-leads .leads-topbar h2 {
      margin: 0;
      color: #2a2a2a;
      font-size: 24px;
      font-weight: 500;
      line-height: 1.25;
    }

    #tab-leads .lead-console-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    #tab-leads .lead-console-title {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 190px;
    }

    #tab-leads .lead-console-icon {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      display: inline-grid;
      place-items: center;
      color: #4169e1;
      background: #eef4ff;
      border: 1px solid #dce6ff;
      flex: 0 0 auto;
    }

    #tab-leads .lead-console-icon svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #tab-leads .lead-console-title h3,
    #tab-leads .lead-console-title button {
      margin: 0;
      color: #1f2937;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 600;
      border: 0;
      padding: 0;
    }

    #tab-leads .lead-console-title button {
      background: transparent;
      border: 0;
      padding: 0;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
    }

    #tab-leads .lead-console-title button:hover {
      color: #4169e1;
    }

    #tab-leads .lead-stat-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      width: 100%;
    }

    #tab-leads .lead-stat {
      min-height: 96px;
      padding: 20px;
      border: 1px solid #edf2f7;
      border-radius: 10px;
      background: #fff;
      display: block;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    }

    #tab-leads .lead-stat span {
      display: block;
      margin-bottom: 5px;
      color: #a0aec0;
      font-size: 11px;
      line-height: 1.25;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    #tab-leads .lead-stat strong {
      color: #1f2937;
      font-size: 28px;
      line-height: 1.1;
      font-weight: 800;
    }

    /* All four lead KPI values share the same neutral text color (default #1f2937). */

    #tab-leads .lead-quick-form {
      display: grid;
      grid-template-columns: repeat(6, minmax(120px, 1fr));
      gap: 10px;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid #eef2f7;
    }

    #tab-leads .lead-quick-form.is-collapsed {
      display: none;
    }

    #tab-leads .lead-toggle-btn {
      min-height: 40px;
      padding: 0 16px;
      border-radius: 8px;
      border: 1px solid #4169e1;
      background: #4169e1;
      color: #fff;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }

    #tab-leads .lead-toggle-btn:hover {
      background: #3458d7;
      border-color: #3458d7;
    }

    #tab-leads .lead-quick-form .input-box {
      width: 100%;
      min-height: 42px;
      box-sizing: border-box;
    }

    body.crm-app .crm-menu-select {
      position: relative;
      width: 100%;
      min-width: 0;
    }

    body.crm-app .crm-menu-button {
      width: 100%;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 14px;
      border: 1px solid #e3eaf3;
      border-radius: 8px;
      background: #fff;
      color: #1f2937;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    body.crm-app .crm-menu-button:hover {
      border-color: #cbd7e8;
      background: #fbfdff;
    }

    body.crm-app .crm-menu-select.is-open .crm-menu-button {
      border-color: #4169e1;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.10);
    }

    body.crm-app .crm-menu-chevron {
      width: 7px;
      height: 7px;
      border-right: 1.5px solid #111827;
      border-bottom: 1.5px solid #111827;
      transform: rotate(45deg);
      margin-top: -4px;
      flex: 0 0 auto;
      transition: transform 0.16s ease;
    }

    body.crm-app .crm-menu-select.is-open .crm-menu-chevron {
      transform: rotate(225deg);
      margin-top: 4px;
    }

    body.crm-app .crm-menu-panel {
      position: fixed;
      left: 0;
      top: 0;
      width: var(--crm-menu-width, 180px);
      min-width: 180px;
      /* Allow more vertical room — the Order Pipeline status has 13 options;
         even at ~36px each that's only ~470px. Capped at viewport-24px so
         we never overflow the screen. */
      max-height: min(540px, calc(100vh - 24px));
      overflow-y: auto;
      padding: 6px;
      border: 1px solid #e3eaf3;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
      display: none;
      z-index: 24000;
    }

    body.crm-app .crm-menu-select.is-open .crm-menu-panel {
      display: grid;
      gap: 2px;
    }

    body.crm-app .crm-menu-option {
      min-height: 34px;
      padding: 8px 10px;
      border: 0;
      border-radius: 7px;
      background: #fff;
      color: #111827;
      font-family: inherit;
      font-size: 13px;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
      /* Don't wrap long option labels — let them push the panel wider. */
      white-space: nowrap;
    }

    body.crm-app .crm-menu-option:hover,
    body.crm-app .crm-menu-option.is-selected {
      background: #eef4ff;
      color: #4169e1;
    }

    body.crm-app .crm-menu-select.is-compact {
      min-width: 116px;
    }

    body.crm-app .crm-menu-select.is-compact .crm-menu-button {
      min-height: 42px;
      font-size: 12px;
    }

    body.crm-app .crm-menu-select.is-compact .crm-menu-panel {
      min-width: 150px;
    }

    body.crm-app .crm-menu-select.is-inline-menu .crm-menu-panel {
      position: static;
      width: 100%;
      min-width: 0;
      max-height: none;
      margin-top: 7px;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
    }

    body.crm-app .crm-menu-select.is-inline-menu.is-open {
      margin-bottom: 10px;
    }

    #tab-leads select.input-box,
    #tab-leads select.status-select {
      appearance: none;
      -webkit-appearance: none;
      min-height: 42px !important;
      padding: 0 38px 0 14px !important;
      border: 1px solid #e3eaf3 !important;
      border-radius: 8px !important;
      color: #1f2937 !important;
      background-color: #fff !important;
      background-image:
        linear-gradient(45deg, transparent 50%, #111827 50%),
        linear-gradient(135deg, #111827 50%, transparent 50%);
      background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      font-size: 13px !important;
      font-weight: 400 !important;
      cursor: pointer;
    }

    #tab-leads select.input-box option,
    #tab-leads select.status-select option {
      color: #111827;
      background: #fff;
      font-size: 13px;
      font-weight: 400;
    }

    #tab-leads select.input-box:focus,
    #tab-leads select.status-select:focus {
      border-color: #4169e1 !important;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.10) !important;
    }

    #tab-leads .lead-quick-form .btn-primary {
      min-height: 42px;
      width: 100%;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
    }

    #tab-leads .lead-table-panel {
      padding: 16px 18px;
    }

    /* ─── Leads table — Order ID badge in first cell ──────────────────────── */
    #tab-leads .lead-row-orderid {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 5px;
      background: #2d3748;
      color: #edf2f7;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    }
    #tab-leads .lead-row-orderid.is-empty {
      background: transparent;
      color: #a0aec0;
      border: 1px dashed #cfd6e0;
      font-weight: 500;
      letter-spacing: 0;
    }

    /* Inline notes textarea inside the Notes column */
    /* Styled to match #tab-orders .order-notes-inline so Leads notes blend into
       the row (short, transparent, border only on hover/focus) instead of being
       a tall white box that reads as a separate row. */
    #tab-leads .lead-notes-inline {
      width: 100%;
      max-width: 220px;
      min-width: 140px;
      height: 44px;
      min-height: 44px;
      resize: vertical;
      padding: 6px 8px;
      border: 1px solid transparent;
      border-radius: 4px;
      background: transparent;
      font-family: inherit;
      font-size: 12px;
      line-height: 1.4;
      color: #1f2937;
      white-space: pre-wrap;
      box-sizing: border-box;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    #tab-leads .lead-notes-inline::placeholder { color: #cbd2dc; }
    #tab-leads .lead-notes-inline:hover {
      border-color: #e2e8f0;
      background: #fafbfc;
    }
    #tab-leads .lead-notes-inline:focus {
      outline: none;
      border-color: #1a202c;
      background: #ffffff;
      box-shadow: 0 0 0 2px rgba(26, 32, 44, 0.08);
    }

    /* ─── Horizontal-scroll table layout (option A) ───────────────────────── */
    body.crm-app #tab-leads .table-responsive {
      overflow-x: auto !important;
      overflow-y: visible !important;
      max-width: 100% !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    #tab-leads .table-responsive::-webkit-scrollbar { height: 10px; }
    #tab-leads .table-responsive::-webkit-scrollbar-track { background: #f4f7fb; border-radius: 5px; }
    #tab-leads .table-responsive::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 5px; }
    #tab-leads .table-responsive::-webkit-scrollbar-thumb:hover { background: #98a2b3; }
    /* Use separate borders so sticky cells render their background cleanly */
    body.crm-app #tab-leads .table-responsive table {
      width: max-content !important;
      min-width: 100% !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }

    /* Every cell gets its natural width with no wrapping */
    body.crm-app #tab-leads .table-responsive th,
    body.crm-app #tab-leads .table-responsive td {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      padding: 12px 14px;
      vertical-align: middle;
    }
    /* Allow vehicle/route cell to stack two lines (vehicle on top, route below)
       without each line wrapping internally. */
    #tab-leads .table-responsive td > div {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }
    /* Header row */
    #tab-leads .table-responsive thead th {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border-bottom: 1px solid #edf2f7;
      font-size: 12px;
      color: #4a5568;
      text-align: left;
    }
    /* Data rows — transparent so the tr's zebra stripe shows through.
       Status-row rules below paint cells directly, so they still override. */
    #tab-leads .table-responsive tbody td {
      border-bottom: 1px solid #f0f3f8;
      background: transparent;
    }

    /* Follow-Up input keeps a fixed width */
    #tab-leads .lead-followup-input {
      width: 140px;
      padding: 6px 28px 6px 10px;
      font-size: 12px;
    }

    /* Sticky Actions column (always visible while scrolling horizontally) */
    body.crm-app #tab-leads .table-responsive thead th:last-child,
    body.crm-app #tab-leads .table-responsive tbody td.lead-actions-cell,
    body.crm-app #tab-leads .table-responsive tbody td:last-child {
      position: sticky !important;
      right: 0 !important;
      z-index: 3 !important;
      background: #ffffff !important;
      box-shadow: -8px 0 12px -6px rgba(15, 23, 42, 0.08);
      min-width: 160px;
    }
    body.crm-app #tab-leads .table-responsive thead th:last-child {
      z-index: 4 !important;
    }

    /* ─── #tab-quotes & #tab-orders: same horizontal-scroll treatment ──────── */
    body.crm-app #tab-quotes .table-responsive,
    body.crm-app #tab-orders .table-responsive {
      overflow-x: auto !important;
      overflow-y: visible !important;
      max-width: 100% !important;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    #tab-quotes .table-responsive::-webkit-scrollbar,
    #tab-orders .table-responsive::-webkit-scrollbar { height: 10px; }
    #tab-quotes .table-responsive::-webkit-scrollbar-track,
    #tab-orders .table-responsive::-webkit-scrollbar-track { background: #f4f7fb; border-radius: 5px; }
    #tab-quotes .table-responsive::-webkit-scrollbar-thumb,
    #tab-orders .table-responsive::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 5px; }
    #tab-quotes .table-responsive::-webkit-scrollbar-thumb:hover,
    #tab-orders .table-responsive::-webkit-scrollbar-thumb:hover { background: #98a2b3; }

    body.crm-app #tab-quotes .table-responsive table,
    body.crm-app #tab-orders .table-responsive table {
      width: max-content !important;
      min-width: 100% !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }

    /* Natural cell widths, nowrap so nothing breaks */
    body.crm-app #tab-quotes .table-responsive th,
    body.crm-app #tab-quotes .table-responsive td,
    body.crm-app #tab-orders .table-responsive th,
    body.crm-app #tab-orders .table-responsive td {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
      padding: 12px 14px;
      vertical-align: middle;
    }
    #tab-quotes .table-responsive td > div,
    #tab-orders .table-responsive td > div {
      white-space: nowrap !important;
      overflow-wrap: normal !important;
      word-break: normal !important;
    }
    /* Header row */
    #tab-quotes .table-responsive thead th,
    #tab-orders .table-responsive thead th {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border-bottom: 1px solid #edf2f7;
      font-size: 12px;
      color: #4a5568;
      text-align: left;
    }
    /* Data rows — transparent so the tr's zebra stripe shows through.
       Status-row rules below paint cells directly, so they still override. */
    #tab-quotes .table-responsive tbody td,
    #tab-orders .table-responsive tbody td {
      border-bottom: 1px solid #f0f3f8;
      background: transparent;
    }

    /* Order ID badges */
    #tab-quotes .quote-row-orderid,
    #tab-orders .order-row-orderid {
      display: inline-block;
      padding: 4px 9px;
      border-radius: 5px;
      background: #2d3748;
      color: #edf2f7;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    }
    #tab-quotes .quote-row-orderid.is-empty {
      background: transparent;
      color: #a0aec0;
      border: 1px dashed #cfd6e0;
      font-weight: 500;
      letter-spacing: 0;
    }

    /* Inline notes textarea (orders) — matches the Quotes notes style:
       borderless and blended into the row by default, subtle hover bg,
       full border + glow on focus. Fluid width fits the column. */
    #tab-orders .order-notes-inline {
      width: 100%;
      max-width: 220px;
      min-width: 140px;
      height: 44px;
      min-height: 44px;
      resize: vertical;
      padding: 6px 8px;
      border: 1px solid transparent;
      border-radius: 4px;
      background: transparent;
      font-family: inherit;
      font-size: 12px;
      line-height: 1.4;
      color: #1f2937;
      white-space: pre-wrap;
      box-sizing: border-box;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    #tab-orders .order-notes-inline::placeholder { color: #cbd2dc; }
    #tab-orders .order-notes-inline:hover {
      border-color: #e2e8f0;
      background: #fafbfc;
    }
    #tab-orders .order-notes-inline:focus {
      outline: none;
      border-color: #1a202c;
      background: #ffffff;
      box-shadow: 0 0 0 2px rgba(26, 32, 44, 0.08);
    }
    /* Notes column width — caps it so it doesn't dominate the row */
    #tab-orders .table-responsive tbody td.order-notes-col,
    #tab-orders .table-responsive thead th.order-notes-col {
      max-width: 240px;
      width: 220px;
    }

    /* Inline notes textarea (quotes) — compact + blends into the row.
       Borderless by default; subtle background on hover; full border on focus. */
    #tab-quotes .quote-notes-inline {
      width: 100%;
      max-width: 220px;
      min-width: 140px;
      height: 44px;
      min-height: 44px;
      resize: vertical;
      padding: 6px 8px;
      border: 1px solid transparent;
      border-radius: 4px;
      background: transparent;
      font-family: inherit;
      font-size: 12px;
      line-height: 1.4;
      color: #1f2937;
      white-space: pre-wrap;
      box-sizing: border-box;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    #tab-quotes .quote-notes-inline::placeholder { color: #cbd2dc; }
    #tab-quotes .quote-notes-inline:hover {
      border-color: #e2e8f0;
      background: #fafbfc;
    }
    #tab-quotes .quote-notes-inline:focus {
      outline: none;
      border-color: #1a202c;
      background: #ffffff;
      box-shadow: 0 0 0 2px rgba(26, 32, 44, 0.08);
    }
    /* Notes column width — keeps it from dominating the table */
    #tab-quotes .table-responsive tbody td:last-child,
    #tab-quotes .table-responsive thead th:last-child {
      max-width: 240px;
      width: 220px;
    }

    /* ─── Quote row action buttons (matches leads style) ──────────────────── */
    #tab-quotes .btn-quote-send,
    #tab-quotes .btn-quote-order-email,
    #tab-quotes .btn-quote-link,
    #tab-quotes .btn-row-edit-q,
    #tab-quotes .btn-row-delete-q,
    #tab-orders .btn-order-bol,
    #tab-orders .btn-order-dispatch,
    #tab-orders .btn-order-contract,
    #tab-orders .btn-row-edit-o,
    #tab-orders .btn-row-delete-o {
      display: block;
      width: 100%;
      padding: 7px 11px;
      margin-bottom: 5px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0.2px;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      box-sizing: border-box;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    }
    /* Send Quote: solid charcoal (primary email action) */
    #tab-quotes .btn-quote-send {
      background: #1f2937;
      border: 1px solid #1f2937;
      color: #ffffff;
    }
    #tab-quotes .btn-quote-send:hover { background: #111827; border-color: #111827; }

    /* Send Order: white outline charcoal (secondary email action) */
    #tab-quotes .btn-quote-order-email {
      background: #ffffff;
      border: 1px solid #1f2937;
      color: #1f2937;
    }
    #tab-quotes .btn-quote-order-email:hover { background: #1f2937; color: #ffffff; }

    /* Order Link: dark olive (conversion CTA — only shown when status = Sent) */
    #tab-quotes .btn-quote-link {
      background: #4a5d23;
      border: 1px solid #3d4a1c;
      color: #ffffff;
    }
    #tab-quotes .btn-quote-link:hover { background: #3d4a1c; border-color: #2f3a16; }

    /* Edit: subtle white with dotted-feel border (matches leads) */
    #tab-quotes .btn-row-edit-q {
      background: #ffffff;
      border: 1px solid #2d3748;
      color: #2d3748;
    }
    #tab-quotes .btn-row-edit-q:hover { background: #2d3748; color: #ffffff; }

    /* Delete: solid black (destructive) */
    #tab-quotes .btn-row-delete-q {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
    }
    #tab-quotes .btn-row-delete-q:hover { background: #1f1f1f; }

    /* Converted pill: olive (success state when status = Converted) */
    #tab-quotes .quote-converted-pill {
      display: block;
      width: 100%;
      padding: 7px 10px;
      margin-bottom: 5px;
      border-radius: 4px;
      background: #4a5d23;
      border: 1px solid #3d4a23;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      letter-spacing: 0.2px;
    }

    /* ─── Order row action / inline buttons ──────────────────────────────── */
    #tab-orders .btn-order-bol {
      background: #ffffff;
      border: 1px solid #2d3748;
      color: #2d3748;
      margin-top: 4px;
    }
    #tab-orders .btn-order-bol:hover { background: #2d3748; color: #ffffff; }
    #tab-orders .btn-order-dispatch {
      background: #4a5d23;
      border: 1px solid #3d4a23;
      color: #ffffff;
    }
    #tab-orders .btn-order-dispatch:hover { background: #3d4a1c; }
    #tab-orders .btn-order-contract {
      background: #ffffff;
      border: 1px solid #2d3748;
      color: #2d3748;
    }
    #tab-orders .btn-order-contract:hover { background: #2d3748; color: #ffffff; }
    #tab-orders .btn-row-edit-o {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
    }
    #tab-orders .btn-row-edit-o:hover { background: #1f1f1f; }

    #tab-orders .btn-row-delete-o {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
    }
    #tab-orders .btn-row-delete-o:hover { background: #1f1f1f; }

    #tab-quotes .btn-quote-send:active,
    #tab-quotes .btn-quote-order-email:active,
    #tab-quotes .btn-quote-link:active,
    #tab-quotes .btn-row-edit-q:active,
    #tab-quotes .btn-row-delete-q:active,
    #tab-orders .btn-order-bol:active,
    #tab-orders .btn-order-dispatch:active,
    #tab-orders .btn-order-contract:active,
    #tab-orders .btn-row-edit-o:active,
    #tab-orders .btn-row-delete-o:active { transform: translateY(1px); }

    /* Lead/Quote row state tinting + status badges */
    #tab-leads .lead-overdue-row td { background: linear-gradient(90deg, #fff7ed 0%, #ffffff 240px); }
    #tab-leads .lead-stale-row td   { background: linear-gradient(90deg, #fef3c7 0%, #ffffff 240px); }
    #tab-leads .lead-lost-row td    { background: #fef2f2; opacity: 0.78; }
    #tab-leads .lead-won-row td     { background: #f0fdf4; }
    #tab-quotes .quote-stale-row td    { background: linear-gradient(90deg, #fef3c7 0%, #ffffff 240px); }
    #tab-quotes .quote-lost-row td     { background: #fef2f2; opacity: 0.78; }
    #tab-quotes .quote-expired-row td  { background: #f1f5f9; opacity: 0.75; }
    #tab-quotes .quote-won-row td      { background: #f0fdf4; }
    .lead-row-badge {
      display: inline-block;
      margin-left: 8px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.3px;
      vertical-align: middle;
    }
    .lead-row-badge.is-overdue { background: #fed7aa; color: #9a3412; }
    .lead-row-badge.is-stale   { background: #fef3c7; color: #92400e; }
    .lead-row-badge.is-lost    { background: #fee2e2; color: #b91c1c; }
    .lead-row-badge.is-won     { background: #dcfce7; color: #166534; }
    .lead-row-badge.is-expired { background: #e2e8f0; color: #475569; }

    /* Drawer row (notes-only) sits flush under the data row */
    /* Match the Orders table: middle-align cells + consistent padding so the
       inline Notes textarea sits inside its row instead of looking separate. */
    #tab-leads .lead-data-row td { border-bottom: 1px solid #f0f3f8; vertical-align: middle; padding: 12px 14px; }
    #tab-leads .lead-drawer-row .lead-drawer-td {
      padding: 0 !important;
      background: #f7faff;
      border-bottom: 1px solid #e7ecf3 !important;
      box-shadow: none;
    }
    /* The drawer panel itself stays pinned to the left while the row scrolls.
       This keeps the Notes textarea always visible in the viewport. */
    #tab-leads .lead-drawer {
      position: sticky;
      left: 0;
      width: min(720px, calc(100vw - 60px));
      padding: 14px 22px 16px;
      background: #f7faff;
      box-sizing: border-box;
    }
    #tab-leads .lead-drawer .lead-drawer-label {
      display: block;
      margin-bottom: 6px;
      font-size: 10px;
      font-weight: 700;
      color: #8896a8;
      text-transform: uppercase;
      letter-spacing: 0.55px;
    }
    #tab-leads .lead-drawer .lead-drawer-textarea {
      width: min(640px, 100%);
      min-height: 70px;
      resize: vertical;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #d9dfe7;
      background: #ffffff;
      font-family: inherit;
      font-size: 13px;
      color: #1f2937;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }
    #tab-leads .lead-drawer .lead-drawer-textarea:focus {
      outline: none;
      border-color: #4169e1;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12);
    }

    /* ─── Leads row action buttons (Quote / Edit / Delete) ─────────────────── */
    /* Quote: dark olive green, white text, professional square-ish */
    #tab-leads .btn-quote-green {
      display: block;
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 5px;
      border-radius: 4px;
      border: 1px solid #3d4a23;
      background: #4a5d23;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.08s ease;
    }
    #tab-leads .btn-quote-green:hover { background: #3d4a1c; }
    #tab-leads .btn-quote-green:active { transform: translateY(1px); }

    /* Edit: clean white with subtle border, professional */
    #tab-leads .btn-row-edit {
      display: block;
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 5px;
      border-radius: 4px;
      border: 1px solid #2d3748;
      background: #ffffff;
      color: #2d3748;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
    }
    #tab-leads .btn-row-edit:hover { background: #2d3748; color: #ffffff; }
    #tab-leads .btn-row-edit:active { transform: translateY(1px); }

    /* Delete: solid BLACK with white text, square corners, simple/professional */
    #tab-leads .btn-row-delete {
      display: block;
      width: 100%;
      padding: 8px 12px;
      margin-bottom: 0;
      border-radius: 4px;
      border: 1px solid #000000;
      background: #000000;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      font-family: inherit;
      letter-spacing: 0.2px;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.08s ease;
    }
    #tab-leads .btn-row-delete:hover { background: #1f1f1f; }
    #tab-leads .btn-row-delete:active { transform: translateY(1px); }

    /* "✓ Quoted" pill for converted leads */
    #tab-leads .lead-quoted-pill {
      display: block;
      width: 100%;
      padding: 8px 10px;
      margin-bottom: 5px;
      border-radius: 4px;
      background: #4a5d23;
      border: 1px solid #3d4a23;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      letter-spacing: 0.2px;
    }

    /* ─── Edit Lead modal (redesigned v2) ──────────────────────────────────── */
    .modal.lead-edit-v2 {
      background: #ffffff;
      padding: 0;
      width: min(720px, calc(100vw - 32px));
      max-width: 720px;
      max-height: 92vh;
      overflow-y: auto;
      overflow-x: hidden;
      border-radius: 14px;
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
      position: relative;
    }
    /* Smooth scrollbar on the modal */
    .modal.lead-edit-v2::-webkit-scrollbar { width: 10px; }
    .modal.lead-edit-v2::-webkit-scrollbar-track { background: transparent; }
    .modal.lead-edit-v2::-webkit-scrollbar-thumb { background: #cfd6e0; border-radius: 5px; border: 2px solid #ffffff; }
    .modal.lead-edit-v2::-webkit-scrollbar-thumb:hover { background: #98a2b3; }
    .lead-edit-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid #e3eaf3;
      background: #ffffff;
      color: #4a5568;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
      font-family: inherit;
      z-index: 2;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .lead-edit-close:hover { background: #f4f7fb; color: #1f2937; }
    .lead-edit-header {
      padding: 26px 28px 18px;
      border-bottom: 1px solid #f0f3f8;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 24px;
      background: #fafbfd;
    }
    .lead-edit-title {
      margin: 0 0 4px;
      font-size: 20px;
      font-weight: 700;
      color: #1f2937;
      letter-spacing: -0.1px;
    }
    .lead-edit-subtitle {
      margin: 0;
      font-size: 13px;
      color: #677685;
      line-height: 1.45;
    }
    .lead-edit-id {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 140px;
    }
    .lead-edit-id-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.6px;
      color: #8896a8;
    }
    .lead-edit-id-input {
      padding: 7px 10px;
      border: 1px solid #d9dfe7;
      border-radius: 6px;
      background: #ffffff;
      color: #1f2937;
      font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-align: center;
      cursor: default;
    }
    .lead-edit-section {
      padding: 16px 28px 4px;
    }
    .lead-edit-section:not(:last-of-type) { padding-bottom: 12px; }
    .lead-edit-section-title {
      font-size: 11px;
      font-weight: 700;
      color: #8896a8;
      text-transform: uppercase;
      letter-spacing: 0.7px;
      margin: 0 0 12px;
    }
    .lead-edit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    /* 3-up variant for the Year/Make/Model vehicle trio */
    .lead-edit-grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    @media (max-width: 640px) {
      .lead-edit-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .lead-edit-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }
    .lead-edit-field-wide { grid-column: 1 / -1; }
    .lead-edit-field label {
      font-size: 12px;
      font-weight: 600;
      color: #4a5568;
      letter-spacing: 0.1px;
    }
    .lead-edit-req { color: #dc2626; margin-left: 2px; }
    .lead-edit-field .input-box {
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #d9dfe7;
      background: #ffffff;
      color: #1f2937;
      font-size: 13px;
      font-family: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .lead-edit-field .input-box:focus {
      outline: none;
      border-color: #4169e1;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12);
    }
    .lead-edit-textarea {
      width: 100%;
      min-height: 78px;
      resize: vertical;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #d9dfe7;
      background: #ffffff;
      font-family: inherit;
      font-size: 13px;
      color: #1f2937;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
      box-sizing: border-box;
    }
    .lead-edit-textarea:focus {
      outline: none;
      border-color: #4169e1;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12);
    }
    .lead-edit-actions {
      padding: 18px 28px 22px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      border-top: 1px solid #f0f3f8;
      background: #fafbfd;
    }
    .lead-edit-btn {
      padding: 10px 22px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      letter-spacing: 0.2px;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
    }
    .lead-edit-cancel {
      background: #ffffff;
      border: 1px solid #2d3748;
      color: #2d3748;
    }
    .lead-edit-cancel:hover { background: #2d3748; color: #ffffff; }
    .lead-edit-save {
      background: #000000;
      border: 1px solid #000000;
      color: #ffffff;
    }
    .lead-edit-save:hover { background: #1f1f1f; }
    .lead-edit-save:disabled {
      background: #6b7280;
      border-color: #6b7280;
      cursor: not-allowed;
    }
    /* Footer extras: Delete (left, danger outline) + → Quote (green) */
    .lead-edit-delete {
      background: #ffffff;
      border: 1px solid #fecaca;
      color: #b91c1c;
    }
    .lead-edit-delete:hover { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }
    .lead-edit-quote {
      background: #16a34a;
      border: 1px solid #16a34a;
      color: #ffffff;
    }
    .lead-edit-quote:hover { background: #15803d; }
    .lead-edit-btn:active { transform: translateY(1px); }
    @media (max-width: 640px) {
      .lead-edit-header { flex-direction: column; gap: 14px; padding: 22px 22px 16px; }
      .lead-edit-section { padding-left: 22px; padding-right: 22px; }
      .lead-edit-actions { padding: 16px 22px 18px; }
      .lead-edit-grid { grid-template-columns: 1fr; }
    }

    /* Expanded lead drawer — clean grid layout */
    #tab-leads .lead-drawer-row td { background: #f7faff !important; }
    #tab-leads .lead-drawer {
      padding: 16px 22px 18px;
      border-top: 1px solid #e7ecf3;
      background: #f7faff;
    }
    #tab-leads .lead-drawer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 14px 22px;
      margin-bottom: 14px;
    }
    #tab-leads .lead-drawer-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    #tab-leads .lead-drawer-label {
      font-size: 10px;
      font-weight: 700;
      color: #8896a8;
      text-transform: uppercase;
      letter-spacing: 0.55px;
    }
    #tab-leads .lead-drawer-value {
      font-size: 13px;
      color: #1f2937;
      font-weight: 500;
      overflow-wrap: anywhere;
    }
    #tab-leads .lead-drawer-chip {
      display: inline-block;
      align-self: flex-start;
      padding: 4px 10px;
      border-radius: 6px;
      background: #2d3748;
      color: #edf2f7;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }
    #tab-leads .lead-drawer-chip.is-empty {
      background: transparent;
      color: #98a2b3;
      border: 1px dashed #cfd6e0;
      font-weight: 500;
      letter-spacing: 0.2px;
    }
    #tab-leads .lead-drawer-notes {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #tab-leads .lead-drawer-textarea {
      width: 100%;
      min-height: 68px;
      resize: vertical;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #d9dfe7;
      background: #ffffff;
      font-family: inherit;
      font-size: 13px;
      color: #1f2937;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    #tab-leads .lead-drawer-textarea:focus {
      outline: none;
      border-color: #4169e1;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.12);
    }

    #tab-leads .lead-table-panel .toolbar {
      margin-bottom: 14px;
    }

    #tab-leads #searchLeads {
      width: min(360px, 100%) !important;
    }

    @media (max-width: 1180px) {
      #tab-leads .lead-console-head {
        align-items: stretch;
        flex-direction: column;
      }

      #tab-leads .leads-topbar {
        grid-template-columns: 1fr;
      }

      #tab-leads .lead-stat-strip {
        max-width: none;
        justify-self: stretch;
      }

      #tab-leads .lead-quick-form {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
      }
    }

    @media (max-width: 760px) {
      #tab-leads .lead-stat-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 520px) {
      #tab-leads .lead-stat-strip {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 680px) {
      #tab-leads .lead-stat-strip,
      #tab-leads .lead-quick-form {
        grid-template-columns: 1fr;
      }
    }

    .upload-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 38px;
      padding: 0 14px;
      border-radius: 8px;
      border: 1px solid #d6e0ea;
      background: #fff;
      color: #1f2937;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    }

    .upload-button:hover {
      background: #f8fafc;
      border-color: #b9c6d7;
      transform: translateY(-1px);
    }

    .agent-profile-cell {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 190px;
    }

    .agent-profile-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid #dbe5f0;
      background: #eef4ff;
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #4169e1;
      font-size: 13px;
      font-weight: 600;
      flex: 0 0 auto;
    }

    .agent-profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    body.crm-app #tab-dashboard .nd-avatar .nd-avatar-initials {
      color: #4169e1;
      font-size: 12px;
      font-weight: 600;
    }

    @media (max-width: 840px) {
      .settings-media-grid {
        grid-template-columns: 1fr;
      }

      #tab-settings .settings-layout,
      #tab-settings .settings-grid {
        grid-template-columns: 1fr;
      }

      #tab-settings .settings-page-head {
        flex-direction: column;
      }
    }

    /* Anti-flicker classes for app loading state */
    body.is-app-loading .admin-topbar,
    body.is-app-loading .admin-nav,
    body.is-app-loading .tab-content {
      display: none !important;
    }

    /* Form-only mode — when admin.html is opened in a dedicated tab via
       ?editQuote=<id> or ?addQuote=1. Hides the full admin chrome and
       turns the quote form into a fullscreen single-purpose page. */
    body.is-form-only-mode .admin-topbar,
    body.is-form-only-mode .admin-nav,
    body.is-form-only-mode .tab-content {
      display: none !important;
    }
    body.is-form-only-mode {
      background: #f4f6fa !important;
    }
    body.is-form-only-mode .modal-overlay.is-aqv3-overlay {
      position: fixed !important;
      inset: 0 !important;
      padding: 0 !important;
      background: #f4f6fa !important;
      align-items: stretch !important;
      overflow-y: auto !important;
    }
    body.is-form-only-mode .modal.add-quote-modal-v3 {
      max-width: none !important;
      width: 100% !important;
      max-height: 100vh !important;
      height: 100vh !important;
      margin: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
    }
    /* Hide the close (×) button — Cancel/Save in the footer handle exits */
    body.is-form-only-mode .aq-close { display: none !important; }

    @keyframes crmGlobalSpin {
      100% { transform: rotate(360deg); }
    }

    /* ═══════════════════════════════════════════════════════════════════
       ADD QUOTE V3.1 — Compact 3-column card grid (black headers / white body)
       ═══════════════════════════════════════════════════════════════════ */
    .modal-overlay.is-aqv3-overlay {
      z-index: 1100;
      align-items: flex-start;
      padding: 16px;
      overflow-y: auto;
    }
    /* Carrier modal is opened from INSIDE the edit-order modal (z-index 1100),
       so it must stack above it — otherwise it renders behind and looks like
       the "+ Add Carrier" button does nothing. */
    #carrierModal { z-index: 1300; }
    .modal.add-quote-modal-v3 {
      max-width: 1300px;
      width: 100%;
      margin: 0 auto;
      padding: 0;
      border-radius: 8px;
      background: #ffffff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      max-height: calc(100vh - 32px);
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    }

    /* Header */
    .aq-header {
      background: #1a202c;
      color: #ffffff;
      padding: 12px 18px;
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .aq-header-text h2 {
      margin: 0;
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
    }
    .aq-header-text p {
      margin: 2px 0 0;
      font-size: 11px;
      color: rgba(255,255,255,0.65);
    }
    .aq-close {
      width: 26px;
      height: 26px;
      border-radius: 5px;
      border: 0;
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
    }
    .aq-close:hover { background: rgba(255,255,255,0.24); }

    /* Body */
    .aq-body {
      padding: 14px;
      overflow-y: auto;
      flex: 1;
      background: #f4f6fa;
    }

    /* Lookup bar (compact) */
    .aq2-lookup {
      background: #ffffff;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      padding: 10px 12px;
      margin-bottom: 12px;
      position: relative;
    }
    .aq2-lookup-title {
      font-weight: 700;
      font-size: 11px;
      color: #4a5568;
      margin-bottom: 6px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .aq2-lookup-title small {
      font-weight: 500;
      color: #a0aec0;
      text-transform: none;
      letter-spacing: 0;
      margin-left: 4px;
    }
    .aq2-lookup-search { position: relative; }
    .aq2-lookup-search .input-box {
      width: 100%;
      padding: 7px 12px 7px 32px;
      font-size: 12px;
      height: 30px;
    }
    .aq2-lookup-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #a0aec0;
      font-size: 13px;
      pointer-events: none;
    }
    .aq2-lookup-results {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15);
      max-height: 260px;
      overflow-y: auto;
      z-index: 30;
    }
    .aq2-lookup-result-item {
      padding: 8px 12px;
      border-bottom: 1px solid #f1f5f9;
      cursor: pointer;
    }
    .aq2-lookup-result-item:hover { background: #f7f8fa; }
    .aq2-lookup-result-item:last-child { border-bottom: 0; }
    .aq2-lookup-result-name {
      font-weight: 600;
      color: #1a202c;
      font-size: 12px;
    }
    .aq2-lookup-result-meta {
      font-size: 10px;
      color: #718096;
      margin-top: 1px;
    }
    .aq2-lookup-empty {
      padding: 12px;
      text-align: center;
      color: #a0aec0;
      font-size: 11px;
    }
    .aq2-selected {
      background: #f0fdf4;
      border: 1px solid #b7e0c2;
      border-radius: 5px;
      padding: 7px 10px;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .aq2-selected-info { color: #2f855a; font-size: 11px; font-weight: 600; }
    .aq2-selected-info small {
      display: block;
      font-weight: 500;
      color: #4a785e;
      font-size: 10px;
      margin-top: 1px;
    }
    .aq2-selected-clear {
      background: transparent;
      border: 1px solid #b7e0c2;
      color: #2f855a;
      padding: 3px 9px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
    }
    .aq2-selected-clear:hover { background: #d4f0dc; }

    /* 3-column card grid */
    .aq2-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .aq2-grid-2 { grid-template-columns: 2fr 1fr; }

    .aq2-card {
      background: #ffffff;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .aq2-card-header {
      background: #1a202c;
      color: #ffffff;
      padding: 8px 12px;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .aq2-card-header small {
      font-weight: 500;
      font-size: 10px;
      color: rgba(255,255,255,0.55);
      text-transform: none;
      letter-spacing: 0;
    }
    .aq2-card-body {
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    /* Stacked cards column */
    .aq2-col-stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Row: horizontal label + input */
    .aq2-row {
      display: grid;
      grid-template-columns: 95px 1fr;
      gap: 8px;
      align-items: center;
      min-height: 30px;
    }
    .aq2-row label {
      text-align: right;
      font-size: 11px;
      color: #4a5568;
      font-weight: 500;
      line-height: 1.2;
    }
    .aq2-row .input-box,
    .aq2-row textarea.input-box {
      font-size: 12px;
      padding: 6px 8px;
      height: 30px;
      border: 1px solid #d8dee8;
    }
    .aq2-row textarea.input-box {
      height: auto;
      min-height: 56px;
      resize: vertical;
      padding: 6px 8px;
    }
    .aq2-row .crm-menu-select { width: 100%; }
    .aq2-row .crm-menu-button {
      font-size: 12px;
      padding: 6px 10px;
      height: 30px;
      min-height: 30px;
      width: 100%;
    }
    .aq2-req { color: #e53e3e; margin-left: 2px; }

    /* Toggle */
    .aq2-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 30px;
    }
    .aq2-switch {
      position: relative;
      display: inline-block;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }
    .aq2-switch input { opacity: 0; width: 0; height: 0; }
    .aq2-switch span {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background: #cbd2dc;
      border-radius: 20px;
      transition: 0.18s;
    }
    .aq2-switch span:before {
      content: "";
      position: absolute;
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 3px;
      background: #fff;
      border-radius: 50%;
      transition: 0.18s;
      box-shadow: 0 1px 2px rgba(0,0,0,0.18);
    }
    .aq2-switch input:checked + span { background: #1a202c; }
    .aq2-switch input:checked + span:before { transform: translateX(16px); }
    .aq2-toggle-label {
      font-size: 11px;
      color: #4a5568;
      font-weight: 600;
    }

    /* Vehicles */
    .aq2-section-full {
      background: #ffffff;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .aq2-vehicles-list {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .aq2-vehicle-card {
      background: #f7f8fa;
      border: 1px solid #d8dee8;
      border-radius: 5px;
      padding: 10px 12px;
    }
    .aq2-vehicle-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .aq2-vehicle-title {
      font-weight: 700;
      color: #1a202c;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .aq2-vehicle-remove {
      background: #fff;
      color: #c53030;
      border: 1px solid #fecaca;
      border-radius: 4px;
      padding: 4px 9px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
    }
    .aq2-vehicle-remove:hover { background: #fef2f2; }
    .aq2-vehicle-remove:disabled { opacity: 0.4; cursor: not-allowed; }
    .aq2-vehicle-fields {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    .aq2-vfield {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .aq2-vfield label {
      text-align: left;
      font-size: 10px;
      text-transform: uppercase;
      font-weight: 600;
      color: #718096;
      letter-spacing: 0.04em;
    }
    .aq2-vfield .input-box,
    .aq2-vfield .crm-menu-button {
      font-size: 12px;
      padding: 6px 8px;
      height: 30px;
      min-height: 30px;
    }
    .aq2-add-vehicle {
      margin: 0 12px 12px;
      background: #1a202c;
      color: #fff;
      border: 0;
      padding: 7px 14px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .aq2-add-vehicle:hover { background: #2d3748; }

    /* Totals */
    .aq2-totals { padding: 0; }
    .aq2-total-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      font-size: 12px;
    }
    .aq2-total-row + .aq2-total-row { border-top: 1px solid #edf2f7; }
    .aq2-total-label { color: #4a5568; font-weight: 600; }
    .aq2-total-value { color: #1a202c; font-weight: 700; }
    .aq2-total-row.is-grand { background: #f7f8fa; }
    .aq2-total-row.is-grand .aq2-total-label { font-size: 13px; color: #1a202c; }
    .aq2-total-row.is-grand .aq2-total-value { font-size: 16px; }

    /* Footer (3 sections: left=delete, middle=actions, right=cancel/save) */
    .aq-footer {
      background: #ffffff;
      border-top: 1px solid #d8dee8;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-shrink: 0;
    }
    .aq-footer-left {
      flex: 1 1 0;
      display: flex;
      justify-content: flex-start;
    }
    .aq-footer-middle {
      flex: 0 0 auto;
      display: flex;
      gap: 8px;
      justify-content: center;
    }
    .aq-footer-right {
      flex: 1 1 0;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
    .aq-btn {
      padding: 8px 22px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      font-size: 12px;
      border: 0;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .aq-btn-cancel {
      background: #fff;
      border: 1px solid #cbd2dc;
      color: #4a5568;
    }
    .aq-btn-cancel:hover { background: #f7f8fa; }
    .aq-btn-save {
      background: #1a202c;
      color: #fff;
    }
    .aq-btn-save:hover { background: #2d3748; }
    .aq-btn-save:disabled { opacity: 0.6; cursor: wait; }
    /* Middle action buttons — outlined, less prominent than Save */
    .aq-btn-action {
      background: #ffffff;
      border: 1px solid #1a202c;
      color: #1a202c;
      padding: 8px 18px;
      transition: background 0.15s, color 0.15s;
    }
    .aq-btn-action:hover {
      background: #1a202c;
      color: #ffffff;
    }
    .aq-btn-action:disabled { opacity: 0.55; cursor: wait; }
    /* Delete — subtle plain text on the left, no border by default */
    .aq-btn-delete {
      background: transparent;
      border: 0;
      color: #1a202c;
      padding: 8px 12px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 5px;
      transition: background 0.15s, color 0.15s;
    }
    .aq-btn-delete:hover {
      background: #fef2f2;
      color: #c53030;
    }

    /* Clickable Quotes table rows */
    #tab-quotes .quote-data-row { cursor: pointer; }
    #tab-quotes .quote-data-row:hover {
      box-shadow: inset 3px 0 0 #1a202c;
    }
    #tab-quotes .quote-data-row:hover td:first-child {
      background: linear-gradient(90deg, #f7f8fa 0%, transparent 80%) !important;
    }

    /* ─── Map route modal — opens over the form, fade + scale animation ─── */
    .aq-map-overlay {
      position: fixed;
      inset: 0;
      z-index: 1200;
      background: rgba(15, 23, 42, 0);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      transition: background 0.28s ease, backdrop-filter 0.28s ease;
      backdrop-filter: blur(0px);
    }
    .aq-map-overlay.is-visible {
      display: flex;
    }
    .aq-map-overlay.is-open {
      background: rgba(15, 23, 42, 0.55);
      backdrop-filter: blur(4px);
    }
    .aq-map-modal {
      background: #ffffff;
      border-radius: 14px;
      width: 92%;
      max-width: 920px;
      max-height: 88vh;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(28px) scale(0.96);
      transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.2, 0.85, 0.3, 1);
      box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
    }
    .aq-map-overlay.is-open .aq-map-modal {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .aq-map-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 30px;
      height: 30px;
      border-radius: 6px;
      border: 0;
      background: rgba(0, 0, 0, 0.06);
      color: #1a202c;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      z-index: 10;
    }
    .aq-map-close:hover { background: rgba(0, 0, 0, 0.14); }
    .aq-map-header {
      padding: 18px 24px 14px;
      border-bottom: 1px solid #e2e8f0;
      flex-shrink: 0;
    }
    .aq-map-title {
      font-size: 13px;
      font-weight: 700;
      color: #1a202c;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .aq-map-route-info {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: #4a5568;
      flex-wrap: wrap;
    }
    .aq-map-from, .aq-map-to {
      font-weight: 600;
      color: #1a202c;
    }
    .aq-map-arrow {
      color: #a0aec0;
      font-weight: 700;
    }
    .aq-map-canvas-wrap {
      flex: 1;
      min-height: 380px;
      position: relative;
      background: #f4f6fa;
    }
    .aq-map-canvas {
      width: 100%;
      height: 100%;
      min-height: 380px;
    }
    .aq-map-canvas .leaflet-container { height: 100%; width: 100%; }
    .aq-map-loading {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: #4a5568;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      z-index: 5;
      background: #f4f6fa;
    }
    .aq-map-spinner {
      width: 36px;
      height: 36px;
      border: 3px solid #e2e8f0;
      border-top-color: #1a202c;
      border-radius: 50%;
      animation: crmGlobalSpin 0.85s linear infinite;
    }
    .aq-map-stats {
      display: flex;
      justify-content: space-around;
      padding: 16px 24px;
      border-top: 1px solid #e2e8f0;
      background: #fafbfc;
      flex-shrink: 0;
    }
    .aq-map-stat { text-align: center; }
    .aq-map-stat-label {
      font-size: 10px;
      font-weight: 700;
      color: #718096;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    .aq-map-stat-value {
      font-size: 22px;
      font-weight: 700;
      color: #1a202c;
    }
    @media (max-width: 700px) {
      .aq-map-overlay { padding: 0; }
      .aq-map-modal {
        border-radius: 0;
        width: 100%;
        max-width: none;
        max-height: 100vh;
        height: 100vh;
      }
    }

    /* ─── Skeleton loader — mimics the form layout while data is fetching ─── */
    .aq-body { position: relative; }
    .aq2-skeleton-overlay {
      position: absolute;
      inset: 0;
      background: #f4f6fa;
      z-index: 10;
      padding: 14px;
      overflow: hidden;
      opacity: 1;
      transition: opacity 0.25s ease;
    }
    .aq2-skeleton-overlay.is-fading {
      opacity: 0;
      pointer-events: none;
    }
    .aq2-skeleton-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 12px;
    }
    .aq2-skeleton-card {
      background: #ffffff;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      overflow: hidden;
      padding-bottom: 10px;
    }
    .aq2-skeleton-card-header {
      height: 30px;
      background: #1a202c;
    }
    .aq2-skeleton-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      margin-top: 10px;
    }
    .aq2-skeleton-label {
      width: 80px;
      height: 9px;
      border-radius: 2px;
      background: #e2e8f0;
      flex-shrink: 0;
    }
    .aq2-skeleton-input {
      flex: 1;
      height: 22px;
      border-radius: 4px;
      background: linear-gradient(90deg, #e8eaed 25%, #f4f6fa 50%, #e8eaed 75%);
      background-size: 400% 100%;
      animation: aqSkelShimmer 1.4s linear infinite;
    }
    @keyframes aqSkelShimmer {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }
    @media (max-width: 1100px) {
      .aq2-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 700px) {
      .aq2-skeleton-grid { grid-template-columns: 1fr; }
    }

    /* ═══ EDIT ORDER V4 — reuses aq2-* and aq-* styles + a few additions ═══ */

    /* — Light polish for the Order modal: more breathing room + softer
       action buttons. Scoped to #editOrderV4Modal so the Quote form's
       compact layout is unchanged. — */
    #editOrderV4Modal .aq2-card-body { padding: 14px; gap: 9px; }
    #editOrderV4Modal .aq2-row { min-height: 32px; }
    #editOrderV4Modal .aq2-grid { gap: 14px; margin-bottom: 14px; }
    #editOrderV4Modal .aq-body { padding: 16px; }

    /* Soften the prominent "Add" buttons (Add Vehicle, Add Task,
       Add Payment, Add Carrier) — make them feel like a secondary
       call-to-action rather than a primary one. */
    #editOrderV4Modal .aq2-add-vehicle,
    #editOrderV4Modal .eo-mini-add-btn {
      background: #ffffff;
      color: #1a202c;
      border: 1px solid #cbd2dc;
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    #editOrderV4Modal .aq2-add-vehicle:hover,
    #editOrderV4Modal .eo-mini-add-btn:hover {
      background: #f7f8fa;
      border-color: #a0aec0;
    }

    /* Route summary — minimal read-only quick reference. The right-arrow
       hint visually nods at the full Origin / Destination cards below. */
    #editOrderV4Modal .eo-route-row {
      position: relative;
      display: grid;
      grid-template-columns: 95px 1fr;
      align-items: center;
      gap: 8px;
      min-height: 32px;
    }
    #editOrderV4Modal .eo-route-row label {
      text-align: right;
      font-size: 11px;
      color: #4a5568;
      font-weight: 500;
    }
    #editOrderV4Modal .eo-route-summary {
      width: 100%;
      padding: 6px 28px 6px 10px;
      height: 30px;
      font-size: 12px;
      border: 1px solid #d8dee8;
      border-radius: 4px;
      background: #f4f6fa;
      color: #1a202c;
      box-sizing: border-box;
      cursor: default;
    }
    #editOrderV4Modal .eo-route-summary::placeholder { color: #a0aec0; }
    #editOrderV4Modal .eo-route-row::after {
      content: "›";
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-55%);
      color: #a0aec0;
      font-size: 16px;
      font-weight: 700;
      pointer-events: none;
    }

    /* Tabs panel at the bottom (On-Demand Messages / Change Logs / Payment History / Interested Carriers) */
    .eo-tabs {
      background: #ffffff;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .eo-tabs-nav {
      display: flex;
      background: #fafbfc;
      border-bottom: 1px solid #e2e8f0;
      padding: 0 14px;
      flex-wrap: wrap;
    }
    .eo-tab-btn {
      flex: 0 0 auto;
      padding: 12px 14px;
      background: transparent;
      color: #718096;
      border: 0;
      border-bottom: 2px solid transparent;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: color 0.15s, border-color 0.15s;
      margin-bottom: -1px;        /* align border with parent's border-bottom */
    }
    .eo-tab-btn:hover { color: #1a202c; }
    .eo-tab-btn.is-active {
      color: #1a202c;
      border-bottom-color: #1a202c;
      background: transparent;
    }
    .eo-tab-btn .eo-tab-count {
      color: #a0aec0;
      font-weight: 500;
      margin-left: 4px;
      font-size: 11px;
    }
    .eo-tab-btn.is-active .eo-tab-count { color: #4a5568; }
    .eo-tab-panel { display: none; padding: 14px; }
    .eo-tab-panel.is-active { display: block; }
    /* Small button row at the top of the Vehicles tab (Add / Import VIN) */
    .eo-tab-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    /* Mini-tables used inside the tabs (signature history, payment history, carriers) */
    .eo-mini-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .eo-mini-table th,
    .eo-mini-table td {
      text-align: left;
      padding: 7px 10px;
      border-bottom: 1px solid #edf2f7;
    }
    .eo-mini-table th {
      background: #f7f8fa;
      color: #4a5568;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-size: 10px;
    }
    .eo-mini-table tr:last-child td { border-bottom: 0; }
    .eo-mini-table .eo-mini-empty {
      text-align: center;
      color: #a0aec0;
      padding: 14px;
      font-size: 11px;
    }
    .eo-mini-link {
      background: none;
      border: 0;
      padding: 0;
      color: #1e3a8a;
      font-weight: 600;
      font-size: 11px;
      cursor: pointer;
      font-family: inherit;
      text-decoration: underline;
    }
    .eo-mini-link:hover { color: #15307a; }
    .eo-mini-muted { color: #cbd5e1; }
    .eo-mini-add-btn {
      background: #1a202c;
      color: #fff;
      border: 0;
      padding: 7px 14px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-top: 10px;
    }
    .eo-mini-add-btn:hover { background: #2d3748; }
    .eo-mini-delete {
      background: transparent;
      border: 1px solid #fecaca;
      color: #c53030;
      padding: 3px 8px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 600;
    }
    .eo-mini-delete:hover { background: #fef2f2; }

    /* File attachments grid */
    .eo-attach-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 10px;
      margin-bottom: 10px;
    }
    .eo-attach-card {
      background: #f7f8fa;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .eo-attach-name {
      font-weight: 600;
      color: #1a202c;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .eo-attach-meta {
      font-size: 11px;
      color: #718096;
    }
    .eo-attach-actions {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }
    .eo-attach-link {
      flex: 1;
      background: #fff;
      border: 1px solid #d8dee8;
      color: #1a202c;
      padding: 4px 10px;
      border-radius: 4px;
      text-align: center;
      text-decoration: none;
      font-size: 11px;
      font-weight: 600;
    }
    .eo-attach-link:hover { background: #f7f8fa; }
    .eo-upload-zone {
      display: block;          /* <label> is inline by default — force block so it fills the card width */
      border: 2px dashed #cbd2dc;
      border-radius: 6px;
      padding: 24px 18px;
      text-align: center;
      color: #4a5568;
      font-size: 13px;
      cursor: pointer;
      background: #fafbfc;
      transition: border-color 0.15s, background 0.15s;
    }
    .eo-upload-zone:hover { border-color: #1a202c; background: #f7f8fa; }
    .eo-upload-hint { color: #a0aec0; font-size: 11px; margin-top: 6px; }

    /* Mini-tables get internal horizontal scroll when they live inside a
       narrow card column so the empty-state text and headers stay readable. */
    .eo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .eo-table-wrap .eo-mini-table { min-width: 320px; }

    /* Read-only inputs — visually distinct so users know they can't edit.
       The dropdown/textarea aren't affected since they don't use [readonly]. */
    .modal.add-quote-modal-v3 .input-box[readonly] {
      background: #f4f6fa !important;
      color: #4a5568 !important;
      cursor: default;
      box-shadow: none !important;
      border-style: dashed;
    }
    .modal.add-quote-modal-v3 .input-box[readonly]:focus {
      outline: none;
      border-color: #cbd2dc;
      box-shadow: none !important;
    }

    /* Complex payment terms collapsible section */
    .eo-complex-terms {
      background: #fafbfc;
      border: 1px solid #d8dee8;
      border-radius: 6px;
      padding: 12px;
      margin-top: 10px;
    }
    .eo-complex-terms[hidden] { display: none; }
    /* Complex Terms — shared layout (order + quote forms) */
    .ct-remaining {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
    }
    .ct-rem-item {
      display: flex; flex-direction: column; gap: 2px;
      background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 10px;
    }
    .ct-rem-label { font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
    .ct-rem-val { font-size: 15px; font-weight: 700; color: #16a34a; font-variant-numeric: tabular-nums; }
    .ct-rem-item.ct-mismatch { border-color: #fca5a5; background: #fef2f2; }
    .ct-rem-item.ct-mismatch .ct-rem-val { color: #b42318; }
    .ct-hint { font-size: 11px; color: #64748b; margin: 0 0 10px; }
    .ct-hint.ct-mismatch { color: #b42318; font-weight: 600; }
    .ct-field { margin-bottom: 9px; }
    .ct-field > label { display: block; font-size: 11.5px; font-weight: 600; color: #334155; margin-bottom: 4px; }
    .ct-field > label small { font-weight: 400; color: #94a3b8; }
    .ct-inputs { display: flex; gap: 6px; align-items: center; }
    .ct-inputs .ct-amt { flex: 0 0 96px; max-width: 96px; }
    .ct-inputs .ct-sel { flex: 1 1 0; min-width: 0; }
    .ct-inputs .ct-sel-wide { flex: 1 1 0; }
    @media (max-width: 640px) {
      .ct-inputs { flex-wrap: wrap; }
      .ct-inputs .ct-amt { flex: 1 1 100%; max-width: none; }
      .ct-inputs .ct-sel { flex: 1 1 45%; }
    }

    /* Vehicle card — wider grid for the many fields */
    .eo-vehicle-fields {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    @media (max-width: 1100px) {
      .eo-vehicle-fields { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 700px) {
      .eo-vehicle-fields { grid-template-columns: repeat(2, 1fr); }
    }
    .eo-vehicle-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    .eo-vehicle-action-btn {
      background: #fff;
      border: 1px solid #d8dee8;
      color: #1a202c;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .eo-vehicle-action-btn:hover { background: #f7f8fa; }
    .eo-vehicle-action-btn.is-danger { color: #c53030; border-color: #fecaca; }
    .eo-vehicle-action-btn.is-danger:hover { background: #fef2f2; }
    .eo-vehicle-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

    /* Add Quote toolbar button */
    #tab-quotes .btn-add-quote {
      background: #1a202c;
      color: #fff;
      border: 0;
      padding: 8px 16px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-left: auto;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    #tab-quotes .btn-add-quote:hover { background: #2d3748; }
    #tab-quotes .toolbar { display: flex; align-items: center; gap: 10px; }

    /* Backfill toolbar button (admin tool) */
    #tab-quotes .btn-backfill {
      background: transparent;
      color: #4a5568;
      border: 1px solid #cbd2dc;
      padding: 7px 13px;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    #tab-quotes .btn-backfill:hover { background: #f7f8fa; }

    @media (max-width: 1100px) {
      .aq2-grid { grid-template-columns: repeat(2, 1fr); }
      .aq2-vehicle-fields { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 700px) {
      .aq2-grid { grid-template-columns: 1fr; }
      .aq2-vehicle-fields { grid-template-columns: repeat(2, 1fr); }
      .aq2-row { grid-template-columns: 1fr; gap: 3px; }
      .aq2-row label { text-align: left; }
      .modal.add-quote-modal-v3 { max-height: 100vh; border-radius: 0; }
      .modal-overlay.is-aqv3-overlay { padding: 0; }
    }
    body.agent-mode .tab-btn[onclick*="'dashboard'"],
    body.agent-mode .tab-btn[onclick*="'agents'"],
    body.agent-mode .tab-btn[onclick*="'settings'"] { display: none !important; }

    /* Email Hub is shared with agents but READ-ONLY: it shows their own sent
       history. Composing and deleting stay admin-only, so hide those controls
       (the matching endpoints aren't allowlisted for agents either). */
    body.agent-mode .gmail-compose-btn,
    body.agent-mode #emailDeleteBtn { display: none !important; }

    /* Carriers + customers are shared team lists — agents may view/add/edit
       but NOT delete (a removal hits the whole team). Hide the per-row Delete
       buttons; the /carriers/delete + /customers/delete endpoints are also
       blocked server-side for agents. */
    body.agent-mode [onclick^="deleteCarrier"],
    body.agent-mode [onclick^="deleteCustomer"] { display: none !important; }

    /* Deleting a whole lead / quote / order is admin-only too (the endpoints
       are blocked server-side for agents). Hide the record-level Delete
       buttons. NOTE: order sub-item deletes (tasks/payments/attachments/
       interested-carriers, class .eo-mini-delete) stay available — agents own
       those on their own orders. */
    body.agent-mode [onclick^="deleteLeadFromModal"],
    body.agent-mode [onclick^="aqDeleteFromForm"],
    body.agent-mode [onclick^="eoDeleteOrder"] { display: none !important; }

    /* Agents can't reassign work (the server strips agent_name on their
       edits), and they can't load the full agent list anyway — so the quote
       form's "Assigned To" dropdown is read-only for them: it still SHOWS the
       assigned agent, but isn't clickable. */
    body.agent-mode [data-crm-dropdown][data-target="aqAgentName"] { pointer-events: none; opacity: 0.7; }
    body.agent-mode [data-crm-dropdown][data-target="aqAgentName"] .crm-menu-chevron { display: none; }

    /* Elements that only exist for agents (e.g. their personal Dashboard tab).
       Hidden for admins, shown when the panel is in agent-mode. */
    /* Hidden for admins. The selector must out-specify `.tabs.admin-nav
       .tab-btn { display:flex !important }`, otherwise the agent-only nav
       buttons (Dashboard, Settings) leak onto the admin page as duplicates. */
    .agent-only { display: none !important; }
    .tabs.admin-nav .tab-btn.agent-only { display: none !important; }
    body.agent-mode .tabs.admin-nav .tab-btn.agent-only { display: flex !important; }

    /* ── Personal agent dashboard ─────────────────────────────────────── */
    .ad-shell { display: flex; flex-direction: column; gap: 20px; }
    .ad-hello { display: flex; flex-direction: column; gap: 4px; }
    .ad-hello h2 { margin: 0; font-size: 22px; font-weight: 700; color: #0A2540; }
    .ad-hello p { margin: 0; font-size: 13.5px; color: #64748b; }
    .ad-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .ad-kpi {
      background: #fff; border: 1px solid #e5edf6; border-radius: 12px;
      padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px;
    }
    .ad-kpi .ad-kpi-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; color: #64748b;
    }
    .ad-kpi .ad-kpi-value { font-size: 26px; font-weight: 700; color: #0A2540; line-height: 1; }
    .ad-kpi .ad-kpi-sub { font-size: 12px; color: #94a3b8; }
    .ad-kpi.ad-kpi-accent { background: #0A2540; border-color: #0A2540; }
    .ad-kpi.ad-kpi-accent .ad-kpi-label { color: #9fb3cc; }
    .ad-kpi.ad-kpi-accent .ad-kpi-value,
    .ad-kpi.ad-kpi-accent .ad-kpi-sub { color: #fff; }
    .ad-kpi.ad-kpi-accent .ad-kpi-sub { color: #9fb3cc; }
    .ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .ad-panel { background: #fff; border: 1px solid #e5edf6; border-radius: 12px; padding: 18px; }
    .ad-panel h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #0A2540; }
    .ad-stat-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px;
    }
    .ad-stat-row:last-child { border-bottom: 0; }
    .ad-stat-row span { color: #475569; }
    .ad-stat-row strong { color: #0A2540; font-weight: 600; }
    .ad-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
    .ad-empty { font-size: 13px; color: #94a3b8; padding: 8px 0; }
    /* Agent settings: avatar, upload status, save button */
    .ad-avatar {
      width: 72px; height: 72px; border-radius: 50%; background: #0A2540;
      color: #fff; display: flex; align-items: center; justify-content: center;
      font-size: 22px; font-weight: 700; overflow: hidden; flex-shrink: 0;
    }
    .ad-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .ad-upload-status { font-size: 12px; color: #64748b; margin-top: 8px; }
    .ad-upload-status.is-good { color: #16a34a; }
    .ad-upload-status.is-bad { color: #dc2626; }
    .ad-save-btn {
      background: #0A2540; color: #fff; border: none; border-radius: 8px;
      padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; justify-self: start;
    }
    .ad-save-btn:hover { background: #0d2f52; }
    .ad-pwd-err { color: #dc2626; font-size: 13px; display: none; }
    /* Dashboard top row + period selector */
    .ad-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
    .ad-period { display: inline-flex; background: #eef2f8; border: 1px solid #e2e9f3; border-radius: 10px; padding: 3px; gap: 2px; }
    .ad-period-btn {
      border: none; background: transparent; color: #64748b; font-family: inherit;
      font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer;
      transition: background .15s, color .15s;
    }
    .ad-period-btn:hover { color: #0A2540; }
    .ad-period-btn.is-active { background: #0A2540; color: #fff; box-shadow: 0 2px 6px rgba(10,37,64,0.18); }
    /* Charts */
    .ad-charts { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
    .ad-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .ad-panel-head h3 { margin: 0; }
    .ad-muted { font-size: 12px; color: #94a3b8; }
    .ad-chart-box { position: relative; height: 240px; }
    .ad-chart-box.ad-chart-sm { height: 200px; }
    /* Assigned-quotes table */
    .ad-table-wrap { overflow-x: auto; }
    .ad-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .ad-table thead th {
      text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
      text-transform: uppercase; color: #94a3b8; padding: 6px 12px 10px; border-bottom: 1px solid #eef2f8;
    }
    .ad-table tbody td { padding: 10px 12px; border-bottom: 1px solid #f4f7fb; color: #334155; }
    .ad-table tbody tr:last-child td { border-bottom: 0; }
    .ad-row-click { cursor: pointer; transition: background .12s; }
    .ad-row-click:hover td { background: #f8fafc; }
    .ad-new-badge {
      display: inline-block; margin-left: 6px; font-size: 9px; font-weight: 800;
      letter-spacing: 0.05em; color: #fff; background: #356dff; padding: 1px 6px;
      border-radius: 999px; vertical-align: middle;
    }
    /* Agent profile modal tabs (Settings / View Stats) */
    .apf-tabs { display: flex; margin-bottom: 18px; border-bottom: 1px solid #eef2f8; }
    .apf-tab {
      border: none; background: transparent; font-family: inherit; font-size: 14px;
      font-weight: 600; color: #94a3b8; padding: 9px 2px; margin-right: 22px;
      cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    }
    .apf-tab:hover { color: #0A2540; }
    .apf-tab.is-active { color: #0A2540; border-bottom-color: #356dff; }
    .apf-stats-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
    @media (max-width: 980px) {
      .ad-charts { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .ad-kpis { grid-template-columns: repeat(2, 1fr); }
      .ad-cols { grid-template-columns: 1fr; }
      .ad-period { flex-wrap: wrap; }
    }

    /* ============================================================
       Mobile refinements (2026-06-20) — header + dashboard hero.
       Appended last so they win the cascade over the scattered
       breakpoint rules above. Phones only; desktop is untouched.
       ============================================================ */
    @media (max-width: 760px) {
      /* Keep the header on ONE row (logo · workspace name · logout). The
         existing ≤760 rule made it a 2-column grid, which wrapped Logout onto
         a second line once we un-hid the workspace name. Flex row fixes it. */
      body.crm-app .admin-app-header {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        grid-template-columns: none !important;
      }
      body.crm-app .admin-topbar-left { flex: 0 0 auto; }
      body.crm-app .admin-topbar-actions { flex: 0 0 auto; }

      /* Header: show the WORKSPACE NAME (what the user actually needs to see)
         instead of hiding it. It was display:none on mobile while the boxed
         "Access: Admin" role label took the space — backwards. */
      body.crm-app .admin-topbar-center {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
        margin: 0 10px;
      }
      body.crm-app .admin-topbar-title { min-width: 0; }
      /* Drop the tiny "Company" kicker — redundant on a phone. */
      body.crm-app .admin-topbar-title > span:first-child { display: none !important; }
      /* Smaller logo + workspace-name type so the row breathes and the full
         company name fits (less truncation). */
      body.crm-app .admin-header-logo { width: 96px !important; }
      body.crm-app .admin-topbar-title h1 {
        font-size: 14px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* Trim the Logout button a touch to give the name more room. */
      body.crm-app .admin-logout-btn { padding: 0 12px !important; font-size: 12px !important; }
      /* The role label is low-value on a phone (the visible tabs already imply
         admin vs agent) — reclaim the space for the workspace name. */
      body.crm-app .admin-access-label { display: none !important; }

      /* Dashboard hero: compact it so the first real KPI (broker fee) sits near
         the top instead of a screen-and-a-half down. */
      body.crm-app #tab-dashboard .nd-command {
        padding: 20px 18px !important;
        min-height: 0 !important;
      }
      body.crm-app #tab-dashboard .nd-command h2 {
        font-size: 26px !important;
        margin: 6px 0 8px !important;
      }
      body.crm-app #tab-dashboard .nd-command p {
        font-size: 13px !important;
        line-height: 1.6 !important;
      }
      body.crm-app #tab-dashboard .nd-toolbar { margin-top: 16px !important; }
    }
    @media (max-width: 480px) {
      /* Narrowest phones: drop the hero's descriptive sentence — it's marketing
         copy that only pushes the KPIs further down. */
      body.crm-app #tab-dashboard .nd-command p { display: none !important; }
    }

    /* Fix the header/nav overlap ("header eating the tabs"). Earlier rules left
       the header FIXED and the nav FIXED with mismatched top offsets (nav
       top:70px, but the header actually ends ~99px because of its margin), so
       the higher z-index header painted over the top of the tab row. Force both
       into normal document flow so they stack cleanly: header → scrollable tab
       row → content. Last in the file, so it wins over the conflicting rules. */
    @media (max-width: 1020px) {
      body.crm-app .admin-app-header,
      body.crm-app .tabs.admin-nav {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
      }
      body.crm-app .tabs.admin-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
      }
      /* No fixed header to clear anymore — remove the big top padding gap. */
      body.crm-app .tab-content {
        margin-left: 0 !important;
        padding: 16px 14px 24px !important;
      }
    }

    /* Compact the KPI/stat cards on phones. They were stacking ONE huge
       full-width card per row (Leads, Quotes, Orders), so the top of every tab
       scrolled forever. Pack them 2-up with tighter padding. */
    @media (max-width: 760px) {
      /* Quotes / Orders — .kpi-grid > .kpi-card */
      body.crm-app .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
      }
      body.crm-app .kpi-card { min-height: 0 !important; padding: 14px !important; }
      body.crm-app .kpi-title { font-size: 12px !important; }
      body.crm-app .kpi-value { margin-top: 4px; font-size: 22px !important; }

      /* Leads — .lead-stat-strip > .lead-stat */
      #tab-leads .lead-stat-strip {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      #tab-leads .lead-stat { min-height: 0 !important; padding: 13px 14px !important; }
      #tab-leads .lead-stat span { margin-bottom: 3px; font-size: 10px !important; }
      #tab-leads .lead-stat strong { font-size: 22px !important; }

      /* Kill the huge empty gap above the Orders/Quotes tables. The .filters
         block has flex:1 1 640px; once the toolbar stacks to a column on mobile
         that 640px flex-BASIS becomes 640px of empty HEIGHT. Size to content. */
      body.crm-app .filters { flex: 0 1 auto !important; }
    }

    /* Floating "Back to CRM" button — only in form-only mode on touch devices.
       Forms open in-place on mobile (no new tab), so this gives a clear way
       back. Hidden everywhere else (desktop keeps the new-tab workflow). */
    #formBackBtn { display: none; }
    /* Form-only mode must hide ALL panel chrome. Two problems on mobile:
       (1) the stock rule targets .admin-topbar but the header is
       .admin-app-header (class mismatch — it only stayed hidden on desktop
       because the fullscreen form covered it); (2) the mobile nav rules above
       (body.crm-app .tabs.admin-nav) out-specify the stock form-only hide, so
       the nav leaked through. Pin all three with higher specificity. */
    body.crm-app.is-form-only-mode .admin-app-header,
    body.crm-app.is-form-only-mode .tabs.admin-nav,
    body.crm-app.is-form-only-mode .tab-content {
      display: none !important;
    }
    @media (pointer: coarse) {
      body.is-form-only-mode #formBackBtn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 100000;
        padding: 9px 15px 9px 11px;
        border: 0;
        border-radius: 999px;
        background: rgba(17, 24, 39, 0.92);
        color: #fff;
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
      }
      body.is-form-only-mode #formBackBtn svg { width: 16px; height: 16px; }

      /* Push the fullscreen form down 46px so its dark header clears the
         floating Back button. The Quote form, Edit-Order form and Convert-Lead
         form all share .is-aqv3-overlay, so this one offset covers them all. */
      body.is-form-only-mode .modal-overlay.is-aqv3-overlay { top: 46px !important; }
      body.is-form-only-mode .modal.add-quote-modal-v3 {
        height: auto !important;
        min-height: calc(100dvh - 46px) !important;
      }
    }

    /* ── Quote / Order form footer on mobile ──────────────────────────────
       The .aq-footer crammed Map Route + (on existing quotes) many send/
       convert actions + Cancel/Save into one row → cramped, "SAVE QUOTE"
       wrapped to two lines. Restack it professionally: a compact swipeable
       row of secondary actions, then a full-width Cancel + Save row with
       Save dominant (always reachable). Applies to both the Quote and Order
       forms (both use .aq-footer). */
    @media (max-width: 760px) {
      .aq-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 9px;
        padding: 10px 12px 14px;
      }
      .aq-footer-left,
      .aq-footer-middle,
      .aq-footer-right { width: 100%; flex: 0 0 auto; }
      /* Secondary actions → one compact horizontal-scroll strip (no vertical
         sprawl even when there are 8 of them on an existing quote). */
      .aq-footer-middle {
        order: 1;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .aq-footer-middle::-webkit-scrollbar { display: none; }
      .aq-footer-middle .aq-btn { flex: 0 0 auto; white-space: nowrap; }
      /* Primary actions → full-width row, Save the dominant button. */
      .aq-footer-right { order: 2; gap: 10px; }
      .aq-footer-right .aq-btn-cancel { flex: 1 1 0; }
      .aq-footer-right .aq-btn-save { flex: 2 1 0; white-space: nowrap; }
      /* Delete (existing quotes only) → subtle, full width, at the bottom. */
      .aq-footer-left { order: 3; }
      .aq-footer-left .aq-btn-delete { width: 100%; }
      /* Bigger, finger-friendly tap targets. */
      .aq-footer .aq-btn { padding: 12px 16px; font-size: 13px; }
    }
    /* Keep the floating AI mascot from covering the form's Save button. */
    body.is-form-only-mode #aiLauncher { display: none !important; }

    /* ─── Mobile dashboard: COMPACT pass ───────────────────────────────────
       Phones were showing one giant full-height hero + full-width stacked KPI
       cards (huge scrolling). Tighten padding/fonts and lay the KPI + metric
       cards out 2-up so the whole dashboard reads in far less scroll. Appended
       last so it wins over the earlier 680/1180px dashboard rules. */
    @media (max-width: 700px) {
      body.crm-app #tab-dashboard .nd-dashboard-shell {
        gap: 12px !important;
        padding-bottom: 20px !important;
      }

      /* Hero — much shorter */
      body.crm-app #tab-dashboard .nd-command {
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 12px !important;
        gap: 14px !important;
      }
      body.crm-app #tab-dashboard .nd-command h2 { font-size: 21px !important; margin: 2px 0 !important; }
      body.crm-app #tab-dashboard .nd-command p { display: none !important; }   /* drop the long blurb on phones */
      body.crm-app #tab-dashboard .nd-kicker { font-size: 10px !important; }
      body.crm-app #tab-dashboard .nd-toolbar { gap: 8px !important; }

      /* Revenue panel inside the hero */
      body.crm-app #tab-dashboard .nd-revenue-panel { padding: 14px !important; }
      body.crm-app #tab-dashboard .nd-revenue-panel > strong { font-size: 30px !important; }
      body.crm-app #tab-dashboard .nd-mini-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }
      body.crm-app #tab-dashboard .nd-mini-grid div { padding: 8px 6px !important; }
      body.crm-app #tab-dashboard .nd-mini-grid span { font-size: 9px !important; }
      body.crm-app #tab-dashboard .nd-mini-grid strong { font-size: 14px !important; }

      /* KPI pulse cards → 2 per row, tighter */
      body.crm-app #tab-dashboard .nd-pulse-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }
      body.crm-app #tab-dashboard .nd-pulse { padding: 12px !important; gap: 8px !important; }
      body.crm-app #tab-dashboard .nd-pulse strong { font-size: 20px !important; }
      body.crm-app #tab-dashboard .nd-pulse span { font-size: 10px !important; }
      body.crm-app #tab-dashboard .nd-pulse p { font-size: 10px !important; }
      body.crm-app #tab-dashboard .nd-pulse img,
      body.crm-app #tab-dashboard .nd-pulse .nd-icon {
        width: 30px !important; height: 30px !important; flex: 0 0 30px !important;
      }

      /* Today / 7-day / 30-day / best-performer → 2 per row, tighter */
      body.crm-app #tab-dashboard .nd-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }
      body.crm-app #tab-dashboard .nd-metric { padding: 12px !important; }
      body.crm-app #tab-dashboard .nd-metric strong { font-size: 20px !important; }
      body.crm-app #tab-dashboard .nd-metric > span { font-size: 10px !important; }
      body.crm-app #tab-dashboard .nd-metric p { font-size: 10px !important; margin-top: 2px !important; }
      body.crm-app #tab-dashboard .nd-meter { margin-top: 8px !important; }
    }

/* ============================================================
   DASHBOARD — MODERN REFRESH (2026-06-23)
   Appended last so it wins the cascade. Softer radius, soft
   "floating" shadows, tinted rounded icon chips, more breathing
   room, hover lift, pill controls. Flat-navy, no slop.
   ============================================================ */
    body.crm-app #tab-dashboard { background: #f5f7fc !important; }
    body.crm-app #tab-dashboard .nd-dashboard-shell { gap: 16px !important; }

    /* Cards — bigger radius + soft floating shadow + hover lift */
    body.crm-app #tab-dashboard .nd-pulse,
    body.crm-app #tab-dashboard .nd-metric,
    body.crm-app #tab-dashboard .nd-panel {
      border-radius: 18px !important;
      border-color: #eef2f8 !important;
      box-shadow: 0 16px 38px -16px rgba(31, 45, 71, 0.18), 0 2px 6px rgba(31, 45, 71, 0.04) !important;
      transition: transform .18s ease, box-shadow .18s ease !important;
    }
    body.crm-app #tab-dashboard .nd-pulse:hover,
    body.crm-app #tab-dashboard .nd-metric:hover,
    body.crm-app #tab-dashboard .nd-panel:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 26px 52px -16px rgba(31, 45, 71, 0.26), 0 3px 8px rgba(31, 45, 71, 0.05) !important;
    }
    body.crm-app #tab-dashboard .nd-command,
    body.crm-app #tab-dashboard .nd-revenue-panel { border-radius: 22px !important; }

    /* More air; drop the hard top/left accent stripes for a cleaner look */
    body.crm-app #tab-dashboard .nd-pulse { padding: 20px !important; border-top: 0 !important; }
    body.crm-app #tab-dashboard .nd-metric { padding: 20px !important; border-left: 0 !important; position: relative !important; }
    body.crm-app #tab-dashboard .nd-panel { padding: 22px !important; }

    /* Pulse cards → vibrant colored tiles, NO icons (like the reference device tiles) */
    body.crm-app #tab-dashboard .nd-pulse img,
    body.crm-app #tab-dashboard .nd-pulse .nd-icon { display: none !important; }
    body.crm-app #tab-dashboard .nd-pulse {
      grid-template-columns: 1fr !important;
      border: 0 !important;
      color: #fff !important;
      min-height: 116px !important;
    }
    body.crm-app #tab-dashboard .nd-pulse strong { color: #fff !important; font-size: 32px !important; margin-top: 4px !important; }
    body.crm-app #tab-dashboard .nd-pulse span { color: rgba(255,255,255,0.9) !important; font-weight: 600 !important; }
    body.crm-app #tab-dashboard .nd-pulse p { color: rgba(255,255,255,0.82) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(1) { background: linear-gradient(135deg,#5b7df6,#4a64ee) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(2) { background: linear-gradient(135deg,#21c7a8,#13ac92) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(3) { background: linear-gradient(135deg,#f9b042,#f09528) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(4) { background: linear-gradient(135deg,#f6788d,#ef6178) !important; }
    body.crm-app #tab-dashboard .nd-pulse:hover { box-shadow: 0 26px 52px -14px rgba(31,45,71,0.34) !important; }

    /* Metric cards — replace the left bar with a soft colored dot before the label */
    body.crm-app #tab-dashboard .nd-metric > span::before {
      content: "" !important; display: inline-block !important;
      width: 8px !important; height: 8px !important; border-radius: 50% !important;
      margin-right: 8px !important; vertical-align: middle !important;
      background: var(--nd-teal) !important;
    }
    body.crm-app #tab-dashboard .nd-metric:nth-child(2) > span::before { background: var(--nd-blue) !important; }
    body.crm-app #tab-dashboard .nd-metric:nth-child(3) > span::before { background: var(--nd-violet) !important; }
    body.crm-app #tab-dashboard .nd-metric:nth-child(4) > span::before { background: var(--nd-coral) !important; }

    /* Pill controls */
    body.crm-app #tab-dashboard .nd-select-wrap select,
    body.crm-app #tab-dashboard #dashRange { border-radius: 999px !important; }

    /* Panel chart area + route/source rows get the rounded treatment too */
    body.crm-app #tab-dashboard .nd-route-row,
    body.crm-app #tab-dashboard .nd-source-list > * { border-radius: 12px !important; }

/* ============================================================
   DASHBOARD — GLASS / PREMIUM PASS (2026-06-23)
   Soft tinted gradient backdrop so frosted glass actually reads,
   then frosted-glass supporting cards. Restrained, not loud.
   ============================================================ */
    body.crm-app #tab-dashboard {
      background:
        radial-gradient(900px 520px at 10% -8%, rgba(91,125,246,0.11), transparent 60%),
        radial-gradient(820px 480px at 96% -2%, rgba(33,199,168,0.10), transparent 55%),
        radial-gradient(760px 620px at 62% 118%, rgba(125,100,242,0.09), transparent 60%),
        #edf0fa !important;
    }

    /* Frosted glass for the supporting cards (metric cards + panels).
       The colored KPI tiles stay solid so they remain the focal point. */
    body.crm-app #tab-dashboard .nd-metric,
    body.crm-app #tab-dashboard .nd-panel {
      background: rgba(255,255,255,0.60) !important;
      -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
      backdrop-filter: blur(18px) saturate(160%) !important;
      border: 1px solid rgba(255,255,255,0.72) !important;
      box-shadow: 0 18px 40px -18px rgba(31,45,71,0.22), inset 0 1px 0 rgba(255,255,255,0.65) !important;
    }
    body.crm-app #tab-dashboard .nd-metric:hover,
    body.crm-app #tab-dashboard .nd-panel:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 28px 56px -18px rgba(31,45,71,0.30), inset 0 1px 0 rgba(255,255,255,0.65) !important;
    }

    /* Subtle top-light sheen on the colored KPI tiles for glassy depth */
    body.crm-app #tab-dashboard .nd-pulse { position: relative !important; overflow: hidden !important; }
    body.crm-app #tab-dashboard .nd-pulse::after {
      content: "" !important; position: absolute !important; inset: 0 !important;
      background: linear-gradient(157deg, rgba(255,255,255,0.24), rgba(255,255,255,0) 44%) !important;
      pointer-events: none !important;
    }
    body.crm-app #tab-dashboard .nd-pulse > * { position: relative !important; z-index: 1 !important; }

    /* Glass-on-dark panel inside the navy hero (the All-time broker fee block) */
    body.crm-app #tab-dashboard .nd-revenue-panel {
      background: rgba(255,255,255,0.08) !important;
      -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
      backdrop-filter: blur(14px) saturate(140%) !important;
      border: 1px solid rgba(255,255,255,0.16) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important;
    }

    /* Team performance — ranked revenue list (replaces the lone bar chart) */
    body.crm-app #tab-dashboard .nd-agent-list { display: flex !important; flex-direction: column !important; margin-top: 8px !important; }
    body.crm-app #tab-dashboard .nd-agent-perf { padding: 13px 0 !important; border-bottom: 1px solid rgba(31,45,71,0.07) !important; }
    body.crm-app #tab-dashboard .nd-agent-perf:last-child { border-bottom: 0 !important; }
    body.crm-app #tab-dashboard .nd-agent-perf-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
    body.crm-app #tab-dashboard .nd-agent-perf-val { font-weight: 700 !important; color: var(--nd-ink) !important; font-size: 15px !important; white-space: nowrap !important; }
    body.crm-app #tab-dashboard .nd-agent-perf-bar { height: 9px !important; border-radius: 999px !important; background: rgba(31,45,71,0.08) !important; margin-top: 10px !important; overflow: hidden !important; }
    body.crm-app #tab-dashboard .nd-agent-perf-bar i { display: block !important; height: 100% !important; border-radius: 999px !important; background: linear-gradient(90deg, #4f7cff, #7d64f2) !important; }

    /* Let the lower panels size to their content so sparse cards don't leave dead space */
    body.crm-app #tab-dashboard .nd-intel-grid { align-items: start !important; }

    /* Donut center total label (makes a single-status ring read as intentional) */
    body.crm-app #tab-dashboard .nd-chart-donut { position: relative !important; }
    body.crm-app #tab-dashboard .nd-donut-center {
      position: absolute !important; inset: 0 !important;
      display: flex !important; flex-direction: column !important;
      align-items: center !important; justify-content: center !important;
      pointer-events: none !important;
    }
    body.crm-app #tab-dashboard .nd-donut-center b { font-size: 32px !important; font-weight: 700 !important; color: var(--nd-ink) !important; line-height: 1 !important; }
    body.crm-app #tab-dashboard .nd-donut-center span { font-size: 11px !important; color: var(--nd-muted) !important; margin-top: 5px !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; }

/* ============================================================
   DASHBOARD — LIGHT GLASS THEME (2026-06-23, final override)
   Drop the dark navy header + loud solid tiles. Everything becomes
   light frosted glass over the soft gradient, dark ink text, with
   only a thin colored accent per card. Minimal, elegant, calm.
   ============================================================ */
    /* Slightly cooler, neutral backdrop */
    body.crm-app #tab-dashboard {
      background:
        radial-gradient(820px 480px at 8% -10%, rgba(99,102,241,0.07), transparent 60%),
        radial-gradient(760px 460px at 98% -4%, rgba(20,184,166,0.06), transparent 55%),
        #eef1f6 !important;
    }

    /* HEADER → light glass (was dark navy) */
    body.crm-app #tab-dashboard .nd-command {
      background: rgba(255,255,255,0.55) !important;
      -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
      backdrop-filter: blur(22px) saturate(150%) !important;
      border: 1px solid rgba(255,255,255,0.7) !important;
      box-shadow: 0 18px 44px -20px rgba(31,45,71,0.20) !important;
      min-height: 0 !important;
      padding: 28px 30px !important;
      align-items: center !important;
    }
    body.crm-app #tab-dashboard .nd-command::before { display: none !important; }
    body.crm-app #tab-dashboard .nd-command h2 { color: var(--nd-ink) !important; font-size: 30px !important; letter-spacing: -0.01em !important; margin: 0 0 4px !important; }
    body.crm-app #tab-dashboard .nd-command-copy > p { color: var(--nd-muted) !important; font-size: 14px !important; margin: 0 0 18px !important; }
    body.crm-app #tab-dashboard .nd-live-dot { color: var(--nd-muted) !important; }
    body.crm-app #tab-dashboard .nd-select-wrap span { color: var(--nd-muted) !important; }
    body.crm-app #tab-dashboard .nd-select-wrap select,
    body.crm-app #tab-dashboard #dashRange {
      background: rgba(255,255,255,0.85) !important; color: var(--nd-ink) !important;
      border: 1px solid rgba(31,45,71,0.12) !important;
    }

    /* All-time broker fee → light glass card with dark ink */
    body.crm-app #tab-dashboard .nd-revenue-panel {
      background: rgba(255,255,255,0.78) !important;
      -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
      backdrop-filter: blur(16px) saturate(140%) !important;
      border: 1px solid rgba(255,255,255,0.85) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 10px 30px -18px rgba(31,45,71,0.18) !important;
    }
    body.crm-app #tab-dashboard .nd-revenue-top span { color: var(--nd-muted) !important; }
    body.crm-app #tab-dashboard .nd-revenue-panel > strong { color: var(--nd-ink) !important; -webkit-text-fill-color: var(--nd-ink) !important; }
    body.crm-app #tab-dashboard .nd-revenue-panel > p { color: var(--nd-muted) !important; }
    body.crm-app #tab-dashboard .nd-mini-grid div { background: rgba(31,45,71,0.04) !important; border: 1px solid rgba(31,45,71,0.06) !important; }
    body.crm-app #tab-dashboard .nd-mini-grid span { color: var(--nd-muted) !important; }
    body.crm-app #tab-dashboard .nd-mini-grid strong { color: var(--nd-ink) !important; }

    /* KPI TILES → neutral light glass, dark ink, tiny colored dot before the
       label (matches the metric cards). No more loud colored fills. */
    body.crm-app #tab-dashboard .nd-pulse {
      background: rgba(255,255,255,0.62) !important;
      -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
      backdrop-filter: blur(18px) saturate(150%) !important;
      border: 1px solid rgba(255,255,255,0.72) !important;
      border-top: 1px solid rgba(255,255,255,0.72) !important;
      color: var(--nd-ink) !important;
      min-height: 0 !important;
    }
    body.crm-app #tab-dashboard .nd-pulse::after { display: none !important; }
    body.crm-app #tab-dashboard .nd-pulse span { color: var(--nd-muted) !important; font-weight: 600 !important; }
    body.crm-app #tab-dashboard .nd-pulse p { color: var(--nd-muted) !important; }
    body.crm-app #tab-dashboard .nd-pulse strong { color: var(--nd-ink) !important; }
    body.crm-app #tab-dashboard .nd-pulse > div > span::before {
      content: "" !important; display: inline-block !important;
      width: 8px !important; height: 8px !important; border-radius: 50% !important;
      margin-right: 8px !important; vertical-align: middle !important; background: var(--nd-blue) !important;
    }
    /* Beat the earlier solid-gradient backgrounds at matching nth-child specificity */
    body.crm-app #tab-dashboard .nd-pulse:nth-child(1) { background: rgba(255,255,255,0.62) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(2) { background: rgba(255,255,255,0.62) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(2) > div > span::before { background: var(--nd-teal) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(3) { background: rgba(255,255,255,0.62) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(3) > div > span::before { background: var(--nd-amber) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(4) { background: rgba(255,255,255,0.62) !important; }
    body.crm-app #tab-dashboard .nd-pulse:nth-child(4) > div > span::before { background: var(--nd-coral) !important; }

    /* COMPACT HEADER + EVEN SPACING (was eating too much vertical room) */
    body.crm-app #tab-dashboard .nd-command { padding: 22px 26px !important; gap: 18px !important; }
    body.crm-app #tab-dashboard .nd-revenue-panel { padding: 18px 20px !important; }
    body.crm-app #tab-dashboard .nd-revenue-panel > strong { font-size: 34px !important; margin: 8px 0 2px !important; }
    body.crm-app #tab-dashboard .nd-mini-grid { margin-top: 14px !important; }
    body.crm-app #tab-dashboard .nd-mini-grid div { padding: 9px 12px !important; }
    /* Drop the tiles' overlap into the header so all section gaps are even,
       and make the top KPI row 4 EQUAL columns so it lines up perfectly with
       the metric row below (the first tile was 1.25fr → columns didn't align). */
    body.crm-app #tab-dashboard .nd-pulse-board { margin-top: 0 !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

    /* ── Mobile KPI-row fix (2026-06-23) ───────────────────────────────────
       The rule directly above forces the top KPI tiles to 4 equal columns
       UNCONDITIONALLY, which overrides the earlier @700px 2-up mobile rule
       (source order wins over media queries at equal specificity) — so on a
       phone the 4 tiles overflow and clip at both screen edges. Re-assert
       2-up on phones here, appended last so it wins the cascade. */
    @media (max-width: 700px) {
      body.crm-app #tab-dashboard .nd-pulse-board {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }
    }

/* ── Email Deliverability panel (Settings → Email) — compact + quiet ─────── */
.ed-records, .ed-results { margin-top: 12px; }
.ed-rec-title { font-size: 11.5px; font-weight: 600; color: #334155; margin-bottom: 8px; }
.ed-rec { border: 1px solid #eceff3; border-radius: 7px; padding: 8px 10px; margin-bottom: 7px; background: #fcfcfd; }
.ed-rec-meta { display: flex; gap: 7px; align-items: center; margin-bottom: 5px; flex-wrap: wrap; }
.ed-rec-type { font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; background: #eef2f7; color: #5a6b80; padding: 1px 6px; border-radius: 3px; }
.ed-rec-hint { font-size: 10.5px; color: #8a96a6; }
.ed-rec-kv { display: flex; gap: 7px; align-items: center; margin-top: 3px; }
.ed-rec-k { font-size: 10px; color: #94a3b8; width: 40px; flex: 0 0 40px; }
.ed-rec-kv code { font-size: 10.5px; background: #fff; border: 1px solid #ebeef2; border-radius: 4px; padding: 3px 7px; flex: 1; word-break: break-all; color: #334155; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ed-copy { font-size: 10px; padding: 3px 8px; border: 1px solid #d6dde5; border-radius: 4px; background: #fff; color: #475569; cursor: pointer; flex: 0 0 auto; }
.ed-copy:hover { background: #f1f5f9; }
.ed-result-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid #f4f6f9; }
.ed-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.ed-result-row.ok .ed-dot { background: #16a34a; }
.ed-result-row.bad .ed-dot { background: #dc2626; }
.ed-rl { font-weight: 600; font-size: 11.5px; color: #334155; flex: 0 0 auto; }
.ed-rv { font-size: 10.5px; color: #8a96a6; word-break: break-all; }
.ed-badge { padding: 7px 10px; border-radius: 6px; border-left: 3px solid; margin-bottom: 10px; font-size: 11.5px; font-weight: 500; line-height: 1.5; }
.ed-badge.ok { background: #f3fbf5; border-color: #16a34a; color: #15803d; }
.ed-badge.bad { background: #fdfcf5; border-color: #e0b020; color: #7c6212; }
.ed-checking, .ed-fail { font-size: 11.5px; color: #8a96a6; padding: 6px 0; }
.ed-fail { color: #b91c1c; }
.ed-status { font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; padding: 1px 8px; border-radius: 999px; vertical-align: middle; margin-left: 6px; }
.ed-status.ok { background: #eaf7ee; color: #15803d; }
.ed-status.bad { background: #fbf6e7; color: #7c6212; }

/* ── Email setup pane — light "step" design (replaces the dark heading bars
      in Settings → Email only; scoped so other panes are untouched) ──────── */
#tab-settings .em-steps { display: grid; gap: 16px; min-width: 0; }
#tab-settings .em-intro { padding: 0 2px; }
#tab-settings .em-intro h2 { margin: 0 0 4px !important; padding: 0 !important; border: 0 !important; font-size: 18px !important; font-weight: 700 !important; color: #0f172a !important; }
#tab-settings .em-intro p { margin: 0 !important; font-size: 12.5px; color: #64748b; line-height: 1.5; }

#tab-settings .em-step { background: #fff; border: 1px solid #e6ebf2; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
#tab-settings .em-step-head { display: flex; gap: 12px; align-items: center; padding: 13px 16px; background: #fbfcfe; border-bottom: 1px solid #eef2f7; }
#tab-settings .em-step-num { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #0f2740; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
#tab-settings .em-step-titles h3 { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; text-transform: none !important; letter-spacing: 0 !important; display: flex; align-items: center; gap: 8px; }
#tab-settings .em-step-titles p { margin: 2px 0 0 !important; padding: 0 !important; font-size: 11.5px !important; color: #64748b !important; font-weight: 500 !important; line-height: 1.4; text-transform: none !important; }
#tab-settings .em-step-body { padding: 16px; }

#tab-settings .em-tip { display: flex; gap: 9px; align-items: flex-start; background: #fafbfc; border: 1px solid #eceff3; border-radius: 8px; padding: 9px 11px; font-size: 11px; line-height: 1.5; color: #5a6675; }
#tab-settings .em-tip b, #tab-settings .em-tip strong { color: #334155; font-weight: 700; }
#tab-settings .em-tip a { color: #2563eb; text-decoration: none; }
#tab-settings .em-tip a:hover { text-decoration: underline; }
#tab-settings .em-tip-ic { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; display: grid; place-items: center; background: #eaeef3; color: #7a869a; font-size: 10px; font-weight: 700; }
/* "blue" tip kept deliberately subtle — quiet, not a loud highlight */
#tab-settings .em-tip-blue { background: #fafbfc; border-color: #eceff3; color: #5a6675; }
#tab-settings .em-tip-blue .em-tip-ic { background: #eaeef3; color: #7a869a; }

#tab-settings .em-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
#tab-settings .em-btn { border: none; border-radius: 7px; padding: 8px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1; }
#tab-settings .em-btn-primary { background: #0f2740; color: #fff; }
#tab-settings .em-btn-primary:hover { background: #16314f; }
#tab-settings .em-btn-ghost { background: #fff; color: #334155; border: 1px solid #cbd5e1; }
#tab-settings .em-btn-ghost:hover { background: #f1f5f9; }
#tab-settings .em-help-line { margin: 9px 0 0; font-size: 10.5px; line-height: 1.5; color: #8a96a6; }
#tab-settings .em-help-line b { color: #475569; font-weight: 700; }

/* Email setup steps as click-to-expand accordions */
#tab-settings .em-step-head { cursor: pointer; user-select: none; }
#tab-settings .em-step-head:hover { background: #f4f7fb; }
#tab-settings .em-step-chev { margin-left: auto; flex: 0 0 auto; color: #9aa6b6; display: grid; place-items: center; transition: transform 0.2s ease; }
#tab-settings .em-step-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#tab-settings .em-step:not(.collapsed) .em-step-chev { transform: rotate(180deg); }
#tab-settings .em-step.collapsed .em-step-body { display: none; }
#tab-settings .em-preset-note { color: #15803d; font-weight: 600; margin-top: 6px; }