@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

    body {
      font-family: 'Poppins', sans-serif;
      background: #f4f7f6;
      margin: 0;
      padding: 30px;
      color: #2d3748;
    }

    h1 {
      color: #1a202c;
      margin-top: 0;
      margin-bottom: 25px;
      font-weight: 800;
      font-size: 28px;
    }

    .tabs {
      display: flex;
      gap: 10px;
      margin-bottom: 25px;
      border-bottom: 2px solid #e2e8f0;
      padding-bottom: 15px;
    }

    .tab-btn {
      background: transparent;
      color: #718096;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      font-family: 'Montserrat';
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.2s;
    }

    .tab-btn:hover {
      background: #edf2f7;
      color: #4a5568;
    }

    .tab-btn.active {
      background: #2b6cb0;
      color: white;
      box-shadow: 0 4px 10px rgba(43, 108, 176, 0.2);
    }

    .tab-content {
      display: none;
      animation: fadeIn 0.3s ease;
    }

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

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(5px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* PANELS */
    .panel {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
      padding: 25px;
      margin-bottom: 25px;
      border: 1px solid #edf2f7;
    }

    .panel h3 {
      margin-top: 0;
      color: #2d3748;
      font-size: 16px;
      border-bottom: 1px solid #edf2f7;
      padding-bottom: 10px;
      margin-bottom: 20px;
    }

    /* DASHBOARD */
    .section-header {
      font-size: 16px;
      font-weight: 800;
      color: #2d3748;
      margin: 30px 0 15px;
      display: flex;
      align-items: center;
      gap: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 25px;
    }

    .kpi-card {
      background: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
      border: 1px solid #edf2f7;
    }

    .kpi-title {
      font-size: 11px;
      font-weight: 700;
      color: #a0aec0;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 5px;
    }

    .kpi-value {
      font-size: 28px;
      font-weight: 800;
      color: #2d3748;
    }

    .kpi-value.green {
      color: #38a169;
    }

    .kpi-value.blue {
      color: #3182ce;
    }

    .kpi-value.orange {
      color: #dd6b20;
    }

    .kpi-value.purple {
      color: #805ad5;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
    }

    /* TABLES */
    .table-responsive {
      overflow-x: auto;
      margin-top: 15px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 900px;
    }

    th {
      text-align: left;
      background: #f8fafc;
      color: #718096;
      font-size: 11px;
      text-transform: uppercase;
      padding: 12px 15px;
      border-bottom: 2px solid #e2e8f0;
      font-weight: 700;
      white-space: nowrap;
    }

    td {
      padding: 15px;
      font-size: 13px;
      border-bottom: 1px solid #edf2f7;
      vertical-align: top;
    }

    tr:hover {
      background: #f8fafc;
    }

    /* ACTIONS & INPUTS */
    .btn-action {
      background: #edf2f7;
      color: #4a5568;
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: bold;
      transition: 0.2s;
      border: none;
      cursor: pointer;
      font-family: inherit;
    }

    .btn-action:hover {
      background: #e2e8f0;
      color: #2d3748;
    }

    .btn-primary {
      background: #2b6cb0;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.2s;
      font-family: inherit;
    }

    .btn-primary:hover {
      background: #2c5282;
    }

    .btn-danger {
      background: #fc8181;
      color: white;
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      font-weight: bold;
      cursor: pointer;
      font-size: 11px;
    }

    .btn-danger:hover {
      background: #e53e3e;
    }

    .input-box {
      padding: 10px 15px;
      border: 1px solid #cbd5e0;
      border-radius: 6px;
      font-family: inherit;
      font-size: 13px;
      outline: none;
      transition: 0.2s;
    }

    .input-box:focus {
      border-color: #3182ce;
      box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
    }

    /* ─── Custom select dropdown styling (replaces OS-native look) ─────────── */
    /* Targets every <select> in the admin so it renders as a clean white box  */
    /* with our own chevron icon. Keeps native <select> behavior intact.       */
    select,
    select.input-box,
    select.status-select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background-color: #ffffff;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%234a5568' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 11px 7px;
      padding-right: 32px !important;
      border: 1px solid #d9dfe7;
      border-radius: 8px;
      color: #1f2937;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    select:hover,
    select.input-box:hover,
    select.status-select:hover {
      border-color: #b7c1cf;
      background-color: #fbfcfd;
    }
    select:focus,
    select.input-box:focus,
    select.status-select:focus {
      outline: none;
      border-color: #4169e1;
      box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15);
      background-color: #ffffff;
    }
    select:disabled {
      background-color: #f5f7fa;
      color: #9aa4b2;
      cursor: not-allowed;
      opacity: 1;
    }
    /* Tighter chevron padding for small inline selects inside tables */
    select.status-select {
      background-position: right 8px center;
      background-size: 9px 6px;
      padding-right: 24px !important;
    }
    /* Style option list to look cleaner (browser support varies but degrades gracefully) */
    select option {
      background: #ffffff;
      color: #1f2937;
      padding: 8px 12px;
    }
    /* Hide IE/Edge legacy dropdown arrow */
    select::-ms-expand { display: none; }

    .crm-toast-stack {
      position: fixed;
      right: 22px;
      top: 110px;
      z-index: 14000;
      display: grid;
      gap: 10px;
      width: min(460px, calc(100vw - 32px));
      pointer-events: none;
    }

    /* ─── LICENSE EXPIRED BANNER ─────────────────────────────────────────
       Persistent red bar pinned to the top of the viewport. Visible on
       EVERY tab + every modal because it's `position: fixed` and sits at
       a higher z-index than every modal overlay. Body gets a top padding
       (via the .is-license-expired class) so admin content doesn't slip
       beneath it.
    */
    .license-expired-banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 20000;
      background: linear-gradient(180deg, #b91c1c 0%, #991b1b 100%);
      color: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
    /* When the banner is visible, push every fixed admin element down
       by its actual rendered height. JS sets --license-banner-h after
       paint + on resize so wrapped banners (narrow viewports, long CTA)
       still offset cleanly. Selectors below combine .crm-app and
       .is-license-expired to outrank the base .crm-app rules that set
       top:0 (header), top:70px (tab row), and padding-top:153px (content). */
    :root { --license-banner-h: 0px; }
    body.crm-app.is-license-expired .admin-app-header {
      top: var(--license-banner-h) !important;
    }
    body.crm-app.is-license-expired .tabs.admin-nav {
      top: calc(70px + var(--license-banner-h)) !important;
    }
    body.crm-app.is-license-expired .tab-content {
      padding-top: calc(153px + var(--license-banner-h)) !important;
    }
    body.is-license-expired .crm-toast-stack {
      top: calc(110px + var(--license-banner-h)) !important;
    }
    body.is-license-expired #adminLoginOverlay {
      padding-top: var(--license-banner-h);
    }
    .license-expired-banner__content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 10px 22px;
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 13.5px;
      line-height: 1.4;
    }
    .license-expired-banner__icon {
      font-size: 20px;
      flex-shrink: 0;
    }
    .license-expired-banner__text {
      flex: 1;
      min-width: 0;
    }
    .license-expired-banner__text strong { font-weight: 600; }
    .license-expired-banner__cta {
      flex-shrink: 0;
      background: #fff;
      color: #991b1b;
      text-decoration: none;
      padding: 6px 14px;
      border-radius: 6px;
      font-weight: 600;
      font-size: 12.5px;
      transition: background 0.15s ease;
    }
    .license-expired-banner__cta:hover { background: #fef2f2; }
    @media (max-width: 720px) {
      .license-expired-banner__content {
        flex-wrap: wrap;
        padding: 10px 14px;
        font-size: 12.5px;
      }
      .license-expired-banner__cta { width: 100%; text-align: center; }
    }

    /* ─── READ-ONLY MODE — disable write controls when expired ────────────
       Add `.is-license-expired` to <body> to hide every element that
       creates / sends / edits. Nav links + Add buttons + Send buttons
       all opt into this via the .needs-active-license utility class
       added at their site.
    */
    body.is-license-expired .needs-active-license {
      display: none !important;
    }
    body.is-license-expired .needs-active-license-disabled {
      pointer-events: none !important;
      opacity: 0.45 !important;
      cursor: not-allowed !important;
    }

    .crm-toast {
      pointer-events: auto;
      display: flex;
      gap: 14px;
      align-items: start;
      padding: 15px 18px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid #e7edf5;
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
      color: #1f2937;
      animation: toastIn 0.22s ease both;
    }

    .crm-toast > div {
      flex: 1 1 auto;
      min-width: 0;
    }

    .crm-toast::before {
      content: "";
      width: 10px;
      height: 10px;
      margin-top: 4px;
      border-radius: 50%;
      background: #4169e1;
      flex: 0 0 10px;
    }

    .crm-toast.is-success::before { background: #16a34a; }
    .crm-toast.is-error::before { background: #dc2626; }
    .crm-toast.is-warning::before { background: #d97706; }

    .crm-toast strong {
      display: block;
      margin-bottom: 3px;
      color: #1f2937;
      font-size: 14px;
      line-height: 1.25;
      font-weight: 600;
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
    }

    .crm-toast span {
      display: block;
      color: #667085;
      font-size: 13px;
      line-height: 1.5;
      font-weight: 400;
      white-space: normal;
      overflow-wrap: normal;
      word-break: normal;
    }

    @media (max-width: 700px) {
      .crm-toast-stack {
        top: 82px;
        right: 14px;
        left: 14px;
        width: auto;
      }
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ─── Custom Confirm Dialog (replaces native confirm()) ───────────────── */
    .crm-confirm-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: blur(2px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 15000;
      animation: crmConfirmOverlayIn 0.18s ease both;
    }
    .crm-confirm-overlay.is-leaving { animation: crmConfirmOverlayOut 0.16s ease both; }

    /* Blocking busy overlay — shown during a critical async step so no
       underlying modal button can be clicked mid-flow. Above every dialog. */
    .crm-busy-overlay {
      position: fixed;
      inset: 0;
      z-index: 26000;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(1px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .crm-busy-card {
      display: flex;
      align-items: center;
      gap: 12px;
      background: #ffffff;
      border-radius: 10px;
      padding: 16px 20px;
      box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
      font-size: 13.5px;
      font-weight: 500;
      color: #1f2937;
    }
    .crm-busy-spin {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      border: 2.5px solid #d9dfe7;
      border-top-color: #0A2540;
      border-radius: 50%;
      animation: crmBusySpin 0.7s linear infinite;
    }
    @keyframes crmBusySpin { to { transform: rotate(360deg); } }

    .crm-confirm {
      background: #ffffff;
      border-radius: 14px;
      padding: 26px 26px 20px;
      width: min(420px, calc(100vw - 32px));
      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
      text-align: center;
      animation: crmConfirmIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    .crm-confirm-overlay.is-leaving .crm-confirm { animation: crmConfirmOut 0.16s ease both; }
    .crm-confirm-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #ebf2ff;
      color: #4169e1;
      font-size: 26px;
      font-weight: 700;
      display: grid;
      place-items: center;
      margin: 0 auto 14px;
    }
    .crm-confirm-icon.is-danger {
      background: #fdecec;
      color: #dc2626;
    }
    .crm-confirm-title {
      margin: 0 0 6px;
      font-size: 17px;
      font-weight: 600;
      color: #1f2937;
      line-height: 1.3;
    }
    .crm-confirm-message {
      margin: 0 0 20px;
      font-size: 14px;
      color: #667085;
      line-height: 1.5;
    }
    .crm-confirm-message:empty { display: none; }
    .crm-confirm-actions {
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .crm-confirm-btn {
      flex: 1 1 0;
      padding: 10px 18px;
      border-radius: 9px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      border: 1px solid transparent;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .crm-confirm-cancel {
      background: #ffffff;
      border-color: #e3eaf3;
      color: #4a5568;
    }
    .crm-confirm-cancel:hover { background: #f8fafc; border-color: #c8d1de; }
    .crm-confirm-ok {
      background: #4169e1;
      color: #ffffff;
    }
    .crm-confirm-ok:hover { background: #3553c2; }
    .crm-confirm-ok.is-danger { background: #dc2626; }
    .crm-confirm-ok.is-danger:hover { background: #b91c1c; }
    .crm-confirm-btn:focus { outline: 2px solid rgba(65, 105, 225, 0.4); outline-offset: 2px; }
    @keyframes crmConfirmIn {
      from { opacity: 0; transform: translateY(8px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0)  scale(1);    }
    }
    @keyframes crmConfirmOut {
      from { opacity: 1; transform: translateY(0)  scale(1);    }
      to   { opacity: 0; transform: translateY(4px) scale(0.98); }
    }
    @keyframes crmConfirmOverlayIn {
      from { opacity: 0; } to { opacity: 1; }
    }
    @keyframes crmConfirmOverlayOut {
      from { opacity: 1; } to { opacity: 0; }
    }

    /* ─── Beautiful Calendar Picker (replaces native type=date) ───────────── */
    input[data-crm-date] {
      cursor: pointer;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><rect x='1.5' y='2.5' width='11' height='10' rx='1.5' stroke='%234a5568' stroke-width='1.2'/><line x1='1.5' y1='5.5' x2='12.5' y2='5.5' stroke='%234a5568' stroke-width='1.2'/><line x1='4' y1='1' x2='4' y2='3.5' stroke='%234a5568' stroke-width='1.2' stroke-linecap='round'/><line x1='10' y1='1' x2='10' y2='3.5' stroke='%234a5568' stroke-width='1.2' stroke-linecap='round'/></svg>");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 14px 14px;
      background-color: #ffffff;
      padding-right: 32px !important;
    }
    .crm-cal-pop {
      position: fixed;
      z-index: 16000;
      background: #ffffff;
      border: 1px solid #e3eaf3;
      border-radius: 14px;
      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
      padding: 14px;
      width: 280px;
      font-family: inherit;
      animation: crmCalIn 0.16s ease both;
    }
    @keyframes crmCalIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0);    }
    }
    .crm-cal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      gap: 6px;
    }
    .crm-cal-nav {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid #e3eaf3;
      background: #ffffff;
      color: #4a5568;
      cursor: pointer;
      font-size: 14px;
      display: grid;
      place-items: center;
      transition: background 0.15s ease, border-color 0.15s ease;
      font-family: inherit;
    }
    .crm-cal-nav:hover { background: #f4f7fb; border-color: #c9d2df; }
    .crm-cal-title {
      flex: 1 1 auto;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      color: #1f2937;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: background 0.15s ease;
    }
    .crm-cal-title:hover { background: #f4f7fb; }
    .crm-cal-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      margin-bottom: 6px;
    }
    .crm-cal-weekday {
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: #98a2b3;
      letter-spacing: 0.4px;
      padding: 4px 0;
    }
    .crm-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .crm-cal-day {
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      font-size: 13px;
      color: #2d3748;
      border-radius: 8px;
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: inherit;
      transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
    }
    .crm-cal-day:hover { background: #ebf2ff; color: #4169e1; }
    .crm-cal-day.is-other-month { color: #cbd2dc; }
    .crm-cal-day.is-today {
      background: #f4f7fb;
      color: #4169e1;
      font-weight: 600;
    }
    .crm-cal-day.is-selected {
      background: #4169e1;
      color: #ffffff;
      font-weight: 600;
    }
    .crm-cal-day.is-selected:hover { background: #3553c2; color: #ffffff; }
    .crm-cal-actions {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      border-top: 1px solid #f0f3f8;
      padding-top: 10px;
    }
    .crm-cal-action {
      flex: 1 1 0;
      padding: 7px 10px;
      border-radius: 8px;
      border: 1px solid #e3eaf3;
      background: #ffffff;
      color: #4a5568;
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .crm-cal-action:hover { background: #f4f7fb; color: #1f2937; }
    .crm-cal-action.is-primary {
      background: #4169e1;
      color: #ffffff;
      border-color: #4169e1;
    }
    .crm-cal-action.is-primary:hover { background: #3553c2; border-color: #3553c2; }
    /* Month/year picker view */
    .crm-cal-months,
    .crm-cal-years {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 8px 0;
    }
    .crm-cal-pick {
      padding: 10px 6px;
      text-align: center;
      font-size: 13px;
      color: #2d3748;
      border-radius: 8px;
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      font-family: inherit;
      transition: background 0.12s ease, border-color 0.12s ease;
    }
    .crm-cal-pick:hover { background: #ebf2ff; color: #4169e1; }
    .crm-cal-pick.is-current { background: #4169e1; color: #ffffff; font-weight: 600; }

    /* ─── Zip Code Autocomplete Dropdown ──────────────────────────────────── */
    .zip-field-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .zip-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 9000;
      background: #ffffff;
      border: 1px solid #d9dfe7;
      border-top: none;
      border-radius: 0 0 10px 10px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
      overflow: hidden;
      animation: zipDropIn 0.15s ease both;
    }
    @keyframes zipDropIn {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .zip-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      color: #1f2937;
      transition: background 0.12s ease;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      font-family: inherit;
    }
    .zip-dropdown-item:hover {
      background: #f0f5ff;
    }
    .zip-dropdown-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #ebf2ff;
      color: #4169e1;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-size: 13px;
    }
    .zip-dropdown-text {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .zip-dropdown-city {
      font-weight: 600;
      font-size: 13px;
      color: #1f2937;
    }
    .zip-dropdown-meta {
      font-size: 11px;
      color: #8896a8;
      font-weight: 400;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .filters {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    /* CRM SPECIFIC */
    .status-select {
      padding: 6px;
      border-radius: 4px;
      border: 1px solid #cbd5e0;
      font-size: 11px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      outline: none;
    }

    .status-select.new {
      background-color: #ebf8ff;
      color: #3182ce;
    }

    .status-select.pending {
      background-color: #fffaf0;
      color: #dd6b20;
    }

    .status-select.signed {
      background-color: #f0fff4;
      color: #38a169;
    }

    .status-select.dispatched {
      background-color: #faf5ff;
      color: #805ad5;
    }

    .status-select.delivered {
      background-color: #edf2f7;
      color: #4a5568;
    }

    /* Quote status colors (applied via class="status-select status-X") */
    .status-select.status-converted {
      background-color: #dcfce7;
      color: #166534;
      border-color: #86efac;
    }
    .status-select.status-sent {
      background-color: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
    }
    .status-select.status-pending {
      background-color: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }
    .status-select.status-declined {
      background-color: #fee2e2;
      color: #b91c1c;
      border-color: #fca5a5;
    }
    .status-select.status-expired {
      background-color: #e2e8f0;
      color: #475569;
      border-color: #cbd5e1;
    }

    /* Status colors — scoped to Leads + Quotes tabs only so Order Pipeline
       and other tabs render their status dropdowns in default white. */
    #tab-leads [data-crm-dropdown][data-status="Converted"] .crm-menu-button,
    #tab-quotes [data-crm-dropdown][data-status="Converted"] .crm-menu-button {
      background-color: #dcfce7;
      color: #166534;
      border-color: #86efac;
    }
    #tab-leads [data-crm-dropdown][data-status="Quoted"] .crm-menu-button,
    #tab-quotes [data-crm-dropdown][data-status="Sent"] .crm-menu-button {
      background-color: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd;
    }
    #tab-leads [data-crm-dropdown][data-status="Follow-Up"] .crm-menu-button,
    #tab-quotes [data-crm-dropdown][data-status="Pending"] .crm-menu-button {
      background-color: #fef3c7;
      color: #92400e;
      border-color: #fcd34d;
    }
    #tab-leads [data-crm-dropdown][data-status="Contacted"] .crm-menu-button {
      background-color: #e0e7ff;
      color: #3730a3;
      border-color: #a5b4fc;
    }
    #tab-leads [data-crm-dropdown][data-status="Lost"] .crm-menu-button,
    #tab-quotes [data-crm-dropdown][data-status="Declined"] .crm-menu-button {
      background-color: #fee2e2;
      color: #b91c1c;
      border-color: #fca5a5;
    }
    #tab-quotes [data-crm-dropdown][data-status="Expired"] .crm-menu-button {
      background-color: #e2e8f0;
      color: #475569;
      border-color: #cbd5e1;
    }

    .notes-area {
      width: 150px;
      height: 50px;
      font-family: inherit;
      font-size: 11px;
      padding: 6px;
      border: 1px solid #e2e8f0;
      border-radius: 4px;
      resize: vertical;
      background: #fff;
    }

    .notes-area:focus {
      border-color: #3182ce;
    }

    .comm-link {
      color: #3182ce;
      text-decoration: none;
      font-weight: 600;
    }

    .comm-link:hover {
      text-decoration: underline;
    }

    /* MODAL */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal {
      background: white;
      padding: 30px;
      border-radius: 12px;
      width: 400px;
      max-width: 90%;
      position: relative;
    }

    .modal h2 {
      margin-top: 0;
      font-size: 20px;
      color: #2d3748;
    }

    .modal select,
    .modal input {
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 15px;
    }

    .modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .convert-lead-modal {
      width: min(470px, calc(100vw - 32px));
      padding: 30px 30px 26px;
    }

    .modal-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid #e3eaf3;
      background: #fff;
      color: #667085;
      font-family: inherit;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      display: grid;
      place-items: center;
    }

    .modal-close-btn:hover {
      background: #f8fafc;
      color: #1f2937;
    }

    .convert-lead-field {
      margin-bottom: 15px;
    }

    .convert-lead-field label {
      display: block;
      margin-bottom: 7px;
      color: #394150;
      font-size: 12px;
      font-weight: 600;
    }

    .convert-lead-field .input-box {
      width: 100%;
      margin-bottom: 0;
      box-sizing: border-box;
    }

    .edit-lead-modal {
      width: min(760px, calc(100vw - 32px));
      max-width: min(760px, calc(100vw - 32px));
      padding: 26px;
    }

    .edit-lead-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    .edit-lead-field label {
      display: block;
      margin-bottom: 7px;
      color: #72849a;
      font-size: 12px;
      font-weight: 500;
    }

    .edit-lead-field .input-box,
    .edit-lead-field .notes-area {
      width: 100%;
      margin-bottom: 0;
      box-sizing: border-box;
    }

    .edit-lead-field.is-wide {
      grid-column: 1 / -1;
    }

    @media (max-width: 720px) {
      .edit-lead-grid {
        grid-template-columns: 1fr;
      }
    }

    #adminLoginOverlay {
      position: fixed;
      inset: 0;
      background: #f6f8fb;
      z-index: 9999;
      display: flex;
      align-items: stretch;
      justify-content: center;
      color: #111827;
      overflow: hidden;
    }

    /* Force-password-change modal (first-login flow). */
    .force-pwd-overlay {
      position: fixed; inset: 0; z-index: 10000;
      background: rgba(10, 18, 35, 0.55);
      /* Blur whatever is behind so the dashboard can't be read. */
      backdrop-filter: blur(10px) saturate(0.85);
      -webkit-backdrop-filter: blur(10px) saturate(0.85);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      font-family: 'Poppins', var(--crm-font, 'Urbanist'), sans-serif;
    }
    /* While the modal is up, the page behind must not scroll. */
    body.force-pwd-open { overflow: hidden !important; }
    .force-pwd-card {
      background: #fff; border-radius: 18px; padding: 34px 32px 30px;
      width: 100%; max-width: 440px;
      box-shadow: 0 30px 80px rgba(8, 15, 30, 0.45);
      animation: forcePwdIn 0.32s cubic-bezier(0.21, 1.02, 0.55, 1) both;
    }
    @keyframes forcePwdIn {
      from { opacity: 0; transform: translateY(14px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .force-pwd-icon {
      width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 16px;
      background: #0f172a;
      display: flex; align-items: center; justify-content: center;
    }
    .force-pwd-icon svg { width: 22px; height: 22px; stroke: #fff; }
    .force-pwd-card h2 {
      margin: 0 0 8px; font-size: 21px; font-weight: 600; color: #0f172a;
      text-align: center; letter-spacing: -0.01em;
    }
    .force-pwd-card > p {
      margin: 0 0 22px; font-size: 13px; font-weight: 300; color: #5b6b81;
      line-height: 1.6; text-align: center;
    }
    .force-pwd-field { margin-bottom: 14px; }
    .force-pwd-field label {
      display: block; font-size: 11.5px; font-weight: 500; color: #334155;
      margin-bottom: 6px; letter-spacing: 0.02em; text-transform: uppercase;
    }
    .force-pwd-input-wrap { position: relative; }
    .force-pwd-field input {
      width: 100%; padding: 11px 42px 11px 14px;
      border: 1.5px solid #dbe2ec; border-radius: 10px;
      font-size: 14px; font-family: inherit; font-weight: 400;
      color: #0f172a; box-sizing: border-box; background: #fbfcfe;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .force-pwd-field input:focus {
      outline: none; border-color: #2563eb; background: #fff;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }
    .force-pwd-eye {
      position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; padding: 6px;
      line-height: 0; border-radius: 8px; color: #94a3b8;
    }
    .force-pwd-eye svg { width: 17px; height: 17px; stroke: currentColor; }
    .force-pwd-eye:hover { color: #334155; background: #f1f5f9; }
    /* Password requirements checklist — each rule flips green when met. */
    .force-pwd-reqs { margin: 10px 0 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; }
    .force-pwd-req {
      display: flex; align-items: center; gap: 6px;
      font-size: 11.5px; font-weight: 400; color: #8a97a8;
      transition: color 0.2s; text-transform: none; letter-spacing: 0;
    }
    .force-pwd-req svg { width: 13px; height: 13px; flex-shrink: 0; stroke: #c3ccd8; transition: stroke 0.2s; }
    .force-pwd-req.is-met { color: #15803d; }
    .force-pwd-req.is-met svg { stroke: #16a34a; }
    .force-pwd-error {
      background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
      padding: 9px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 12px;
    }
    .force-pwd-submit {
      width: 100%; padding: 13px; border: none; border-radius: 10px; margin-top: 6px;
      background: #0f172a;
      color: #fff; font-weight: 600; font-size: 14px; font-family: inherit;
      letter-spacing: 0.01em; cursor: pointer;
      transition: background 0.15s, opacity 0.15s;
    }
    .force-pwd-submit:hover { background: #1e293b; }
    .force-pwd-submit:disabled { opacity: 0.65; cursor: default; }

    /* ─── Login-flow modals on mobile (forgot / reset / force-change) ───
       These share the .force-pwd-* shell. On phones the tall reset-password
       card (two fields + a 4-item checklist) can exceed the viewport once the
       keyboard is up, so the overlay must scroll and align to the top instead
       of centering (which would clip the card with no way to reach it). */
    @media (max-width: 560px) {
      .force-pwd-overlay {
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 18px 14px 32px;
      }
      .force-pwd-card { padding: 26px 20px 24px; border-radius: 16px; }
      /* 16px stops iOS Safari from zooming the page when a field is focused. */
      .force-pwd-field input { font-size: 16px; padding-top: 13px; padding-bottom: 13px; }
      .force-pwd-submit { padding: 14px; }
      /* Single-column checklist reads cleaner on a narrow screen. */
      .force-pwd-reqs { grid-template-columns: 1fr; gap: 6px; }
    }

    /* Setup gate card — shown inside Settings until required fields are
       filled. Flat white card matching the settings sections; progress on
       the right, checklist in two columns, no strikethrough. */
    .setup-gate-banner {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-left: 4px solid #1a202c;
      border-radius: 12px;
      padding: 18px 22px;
      margin-bottom: 18px;
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
    }
    .setup-gate-top {
      display: flex; align-items: center; gap: 14px; margin-bottom: 4px;
    }
    .setup-gate-top strong { font-size: 15px; color: #0f172a; font-weight: 700; }
    .setup-gate-progress {
      margin-left: auto; display: flex; align-items: center; gap: 10px;
      font-size: 12px; font-weight: 600; color: #475569; white-space: nowrap;
    }
    .setup-gate-bar {
      width: 120px; height: 6px; border-radius: 99px; background: #e8edf3; overflow: hidden;
    }
    .setup-gate-bar i {
      display: block; height: 100%; background: #16a34a; border-radius: 99px;
      transition: width 0.35s ease;
    }
    .setup-gate-sub { font-size: 12.5px; color: #64748b; margin: 0 0 14px; line-height: 1.5; }
    .setup-gate-list {
      list-style: none; padding: 0; margin: 0;
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
    }
    @media (max-width: 760px) { .setup-gate-list { grid-template-columns: 1fr; } }
    .setup-gate-list li {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: 13px; color: #334155; line-height: 1.45;
    }
    .setup-gate-list li.done { color: #15803d; }
    .setup-gate-list li .gate-detail { color: #94a3b8; font-size: 12px; }
    .setup-gate-list .gate-check {
      width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
    }
    .setup-gate-list .gate-check svg { width: 17px; height: 17px; display: block; }
    .setup-gate-list li:not(.done) .gate-check svg { stroke: #b6c0cd; }
    .setup-gate-list li.done .gate-check svg { stroke: #16a34a; }

    /* Locked nav tabs (everything except Settings) when setup is incomplete.
       Class is applied by JS in enterSetupLockdown(). */
    .tab-btn.tab-locked {
      opacity: 0.4;
      pointer-events: none;
      cursor: not-allowed;
    }