:root {
      font-family: 'Inter', system-ui, Arial, sans-serif;

      /* ===== SureTrack Design Tokens ===== */

      /* Core brand */
      --st-primary: #F97316;
      --st-primary-hover: #EA580C;
      --st-primary-soft: #FFF7ED;
      --st-secondary: #111827;

      /* Surfaces */
      --st-bg: #F8FAFC;
      --st-surface: #FFFFFF;
      --st-border: #E5E7EB;

      /* Text */
      --st-text: #111827;
      --st-muted: #6B7280;

      /* Status */
      --st-success: #16A34A;
      --st-success-soft: #F0FDF4;
      --st-warning: #D97706;
      --st-danger: #DC2626;
      --st-info: #2563EB;

      /* Backward compatibility for existing CSS */
      --brand-primary: var(--st-secondary);
      --brand-alt: #374151;
      --brand-accent: var(--st-primary);
      --brand-red: var(--st-danger);

      --ink: var(--st-text);
      --muted: var(--st-muted);
      --panel: var(--st-surface);
      --bg: var(--st-bg);
      --line: var(--st-border);

      /* Home gradient */
      --home-g1: var(--st-secondary);
      --home-g2: #1F2937;

      /* Spacing */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 24px;
      --space-6: 32px;
      --space-7: 48px;

      /* Radius */
      --radius-sm: 8px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 18px;
      --radius-pill: 999px;

      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
      --shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
      --shadow-lg: 0 18px 50px rgba(15, 23, 42, .18);

      /* Motion */
      --transition-fast: 160ms ease;

      --header-h: 60px;
      --offline-banner-h: 0px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: var(--bg);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
    }

    main.content {
      flex: 1
    }

    /* Public website and authentication */
    body.st-route-pending {
      background: var(--st-bg);
    }

    body.st-route-pending>header,
    body.st-route-pending>main.content,
    body.st-route-pending>#offlineBanner,
    body.st-route-pending>footer.footer,
    body.st-route-pending>#publicApp {
      display: none !important;
    }

    body.st-public-active {
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .14), transparent 34rem),
        linear-gradient(180deg, #fff 0%, var(--st-bg) 100%);
    }

    body.st-public-active>header,
    body.st-public-active>main.content,
    body.st-public-active>#offlineBanner,
    body.st-public-active>footer.footer {
      display: none !important;
    }

    .st-public-app {
      min-height: 100vh;
      color: var(--st-text);
    }

    .st-public-header {
      position: sticky;
      top: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: clamp(16px, 3vw, 28px);
      min-height: 74px;
      padding: 14px clamp(20px, 4vw, 64px);
      background: rgba(255, 255, 255, .92);
      color: var(--st-text);
      border-bottom: 1px solid rgba(226, 232, 240, .9);
      backdrop-filter: blur(14px);
    }

    .st-public-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--st-secondary);
      text-decoration: none;
      font-family: 'Poppins', sans-serif;
      font-size: 1.45rem;
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .st-public-wordmark {
      display: inline-flex;
      align-items: baseline;
      overflow: hidden;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--st-secondary), #1f2937);
      box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
      line-height: 1;
    }

    .st-public-wordmark-sure,
    .st-public-wordmark-track {
      display: inline-block;
      padding: 5px 0;
    }

    .st-public-wordmark-sure {
      color: #fff;
      padding-left: 10px;
    }

    .st-public-wordmark-track {
      color: var(--st-primary);
      padding-right: 10px;
    }

    .st-public-logo {
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(135deg, var(--st-primary), var(--st-primary-hover));
      box-shadow: 0 12px 30px rgba(249, 115, 22, .25);
    }

    .st-public-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      row-gap: 10px;
    }

    .st-public-nav a {
      color: var(--st-muted);
      text-decoration: none;
      font-weight: 700;
      padding: 10px 12px;
      border-radius: var(--radius-pill);
    }

    .st-public-nav a:hover,
    .st-public-nav a:focus-visible {
      color: var(--st-secondary);
      background: #fff7ed;
      outline: none;
    }

    .st-public-nav .st-public-nav-cta {
      color: #fff;
      background: var(--st-primary);
      box-shadow: 0 10px 24px rgba(249, 115, 22, .22);
    }

    .st-public-main {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: clamp(44px, 7vw, 92px) 0 clamp(52px, 7vw, 76px);
    }

    .st-public-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
      gap: clamp(28px, 6vw, 72px);
      align-items: center;
      min-height: clamp(500px, 62vh, 640px);
    }

    .st-public-home-hero {
      grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
      gap: clamp(28px, 5vw, 62px);
      min-height: min(660px, calc(100vh - 74px));
      padding: clamp(12px, 2vw, 24px) 0 clamp(18px, 3vw, 32px);
    }

    .st-public-features-hero {
      grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
      gap: clamp(28px, 5vw, 62px);
      min-height: min(640px, calc(100vh - 74px));
      padding: clamp(10px, 2vw, 20px) 0 clamp(18px, 3vw, 30px);
    }

    .st-public-kicker {
      margin: 0 0 10px;
      color: var(--st-primary);
      font-weight: 800;
      letter-spacing: .11em;
      text-transform: uppercase;
      font-size: .78rem;
    }

    .st-public-hero h1,
    .st-public-narrow h1,
    .st-public-auth-card h1 {
      margin: 0;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(2.15rem, 5vw, 4.7rem);
      line-height: .98;
      letter-spacing: -.06em;
    }

    .st-public-home-hero h1 {
      max-width: 760px;
      font-size: clamp(2.75rem, 5.4vw, 5rem);
      line-height: .96;
    }

    .st-public-hero p,
    .st-public-narrow>p,
    .st-public-auth-card>p {
      color: var(--st-muted);
      font-size: clamp(1rem, 2vw, 1.2rem);
      line-height: 1.7;
      max-width: 680px;
    }

    .st-public-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .st-public-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 11px 18px;
      border-radius: var(--radius-pill);
      border: 1px solid transparent;
      font: inherit;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
    }

    .st-public-button:hover {
      transform: translateY(-1px);
    }

    .st-public-button:focus-visible,
    .st-public-form input:focus-visible,
    .st-public-form select:focus-visible,
    .st-public-check input:focus-visible {
      outline: 3px solid rgba(249, 115, 22, .32);
      outline-offset: 2px;
    }

    .st-public-button-primary {
      background: var(--st-primary);
      color: #fff;
      box-shadow: 0 14px 34px rgba(249, 115, 22, .24);
    }

    .st-public-button-primary:hover {
      background: var(--st-primary-hover);
    }

    .st-public-button-secondary {
      background: #fff;
      color: var(--st-secondary);
      border-color: var(--st-border);
      box-shadow: var(--shadow-sm);
    }

    .st-public-button:disabled {
      cursor: not-allowed;
      opacity: .68;
      transform: none;
      box-shadow: none;
    }

    .st-public-hero-card,
    .st-public-card,
    .st-public-auth-card,
    .st-public-auth-aside,
    .st-public-status-card {
      background: rgba(255, 255, 255, .94);
      border: 1px solid var(--st-border);
      border-radius: 24px;
      box-shadow: var(--shadow-md);
    }

    .st-public-hero-card {
      padding: clamp(22px, 4vw, 36px);
    }

    .st-public-metric {
      display: grid;
      gap: 8px;
      padding: 22px;
      color: #fff;
      background: linear-gradient(135deg, var(--st-secondary), #1f2937);
      border-radius: 20px;
    }

    .st-public-metric span {
      color: #fed7aa;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .1em;
      font-size: .75rem;
    }

    .st-public-metric strong {
      font-size: 1.35rem;
      line-height: 1.35;
    }

    .st-public-mini-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 16px;
    }

    .st-public-mini-grid span {
      padding: 16px;
      border-radius: 16px;
      color: var(--st-secondary);
      background: #fff7ed;
      font-weight: 800;
      text-align: center;
    }

    .st-public-home-preview {
      display: grid;
      gap: 16px;
      padding: clamp(18px, 3vw, 28px);
      background:
        radial-gradient(circle at top right, rgba(249, 115, 22, .18), transparent 18rem),
        linear-gradient(145deg, #0f172a, #1f2937);
      border: 1px solid rgba(255, 255, 255, .22);
      border-radius: 30px;
      box-shadow: 0 26px 70px rgba(15, 23, 42, .22);
      color: #fff;
      overflow: hidden;
    }

    .st-public-preview-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .st-public-preview-topbar div,
    .st-public-preview-list div,
    .st-public-preview-metrics div,
    .st-public-showcase-card {
      display: grid;
      gap: 5px;
    }

    .st-public-preview-topbar span,
    .st-public-preview-list span,
    .st-public-preview-metrics span,
    .st-public-showcase-card span,
    .st-public-showcase-card small {
      color: rgba(255, 255, 255, .72);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .st-public-preview-topbar strong {
      font-size: 1.15rem;
    }

    .st-public-preview-pill {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 6px 11px;
      color: #fed7aa !important;
      background: rgba(249, 115, 22, .16);
      border: 1px solid rgba(253, 186, 116, .24);
      border-radius: var(--radius-pill);
      white-space: nowrap;
    }

    .st-public-preview-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .st-public-preview-metrics div,
    .st-public-preview-list div {
      min-width: 0;
      padding: 16px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 18px;
    }

    .st-public-preview-metrics strong {
      font-size: clamp(1.15rem, 2vw, 1.55rem);
      overflow-wrap: anywhere;
    }

    .st-public-preview-list {
      display: grid;
      gap: 10px;
    }

    .st-public-preview-list strong {
      overflow-wrap: anywhere;
    }

    .st-public-features-preview {
      display: grid;
      gap: 16px;
      min-width: 0;
      padding: clamp(18px, 3vw, 28px);
      color: #fff;
      background:
        radial-gradient(circle at top right, rgba(249, 115, 22, .2), transparent 18rem),
        linear-gradient(145deg, #0f172a, #1f2937);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 30px;
      box-shadow: 0 26px 70px rgba(15, 23, 42, .22);
      overflow: hidden;
    }

    .st-public-features-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .st-public-features-metrics div {
      min-width: 0;
      padding: 16px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 18px;
    }

    .st-public-features-metrics div:first-child {
      grid-column: 1 / -1;
      background: rgba(249, 115, 22, .16);
      border-color: rgba(253, 186, 116, .26);
    }

    .st-public-features-metrics span,
    .st-public-features-preview-nav span {
      display: block;
      color: rgba(255, 255, 255, .72);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .st-public-features-metrics strong {
      display: block;
      margin-top: 6px;
      color: #fff;
      font-size: clamp(1.1rem, 2vw, 1.55rem);
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .st-public-features-preview-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .st-public-features-preview-nav span {
      display: inline-flex;
      align-items: center;
      min-height: 31px;
      padding: 7px 10px;
      color: #fed7aa;
      background: rgba(249, 115, 22, .14);
      border: 1px solid rgba(253, 186, 116, .2);
      border-radius: var(--radius-pill);
    }

    .st-public-capability-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin: 0 0 clamp(34px, 5vw, 58px);
      padding: 14px;
      background: rgba(255, 255, 255, .74);
      border: 1px solid var(--st-border);
      border-radius: 22px;
      box-shadow: var(--shadow-sm);
    }

    .st-public-capability-strip span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 12px;
      color: var(--st-secondary);
      background: #fff7ed;
      border: 1px solid rgba(249, 115, 22, .18);
      border-radius: var(--radius-pill);
      font-weight: 900;
    }

    .st-public-section,
    .st-public-showcase,
    .st-public-split-section,
    .st-public-final-cta {
      margin-top: clamp(42px, 7vw, 82px);
    }

    .st-public-section-head {
      display: grid;
      gap: 10px;
      max-width: 760px;
      margin-bottom: 22px;
    }

    .st-public-section-head h2,
    .st-public-showcase-copy h2,
    .st-public-split-section h2,
    .st-public-final-cta h2 {
      margin: 0;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.8rem, 3.4vw, 3rem);
      line-height: 1.05;
      letter-spacing: -.045em;
    }

    .st-public-section-head p,
    .st-public-showcase-copy p,
    .st-public-split-section p,
    .st-public-final-cta p {
      margin: 0;
      color: var(--st-muted);
      line-height: 1.65;
    }

    .st-public-grid-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 0;
    }

    .st-public-value-card {
      display: grid;
      gap: 10px;
      min-height: 230px;
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .st-public-value-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .st-public-value-card h2 {
      margin-bottom: 0;
    }

    .st-public-showcase {
      display: grid;
      grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
      gap: clamp(22px, 4vw, 46px);
      align-items: center;
      padding: clamp(22px, 4vw, 34px);
      background: linear-gradient(135deg, rgba(15, 23, 42, .04), rgba(249, 115, 22, .08));
      border: 1px solid var(--st-border);
      border-radius: 30px;
    }

    .st-public-showcase-copy {
      display: grid;
      gap: 12px;
    }

    .st-public-showcase-panel {
      display: grid;
      gap: 16px;
      min-width: 0;
      padding: clamp(16px, 3vw, 22px);
      background: #fff;
      border: 1px solid var(--st-border);
      border-radius: 24px;
      box-shadow: var(--shadow-sm);
    }

    .st-public-showcase-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .st-public-showcase-tabs span {
      padding: 7px 10px;
      color: var(--st-muted);
      background: var(--st-bg);
      border-radius: var(--radius-pill);
      font-size: .82rem;
      font-weight: 900;
    }

    .st-public-showcase-tabs .is-active {
      color: var(--st-primary-hover);
      background: #fff7ed;
    }

    .st-public-showcase-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .st-public-showcase-card {
      min-width: 0;
      padding: 16px;
      background: var(--st-bg);
      border: 1px solid var(--st-border);
      border-radius: 18px;
    }

    .st-public-showcase-card strong {
      color: var(--st-secondary);
      font-size: 1.25rem;
      overflow-wrap: anywhere;
    }

    .st-public-showcase-card span,
    .st-public-showcase-card small {
      color: var(--st-muted);
    }

    .st-public-showcase-card-dark {
      background: linear-gradient(135deg, var(--st-secondary), #1f2937);
    }

    .st-public-showcase-card-dark strong {
      color: #fff;
    }

    .st-public-showcase-card-dark span,
    .st-public-showcase-card-dark small {
      color: rgba(255, 255, 255, .76);
    }

    .st-public-steps,
    .st-public-split-section {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .st-public-step-card,
    .st-public-split-section article,
    .st-public-final-cta {
      min-width: 0;
      padding: clamp(20px, 3vw, 30px);
      background: #fff;
      border: 1px solid var(--st-border);
      border-radius: 24px;
      box-shadow: var(--shadow-sm);
    }

    .st-public-step-card span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      color: #fff;
      background: var(--st-primary);
      border-radius: 12px;
      font-weight: 900;
    }

    .st-public-step-card h3 {
      margin: 16px 0 8px;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      letter-spacing: -.03em;
    }

    .st-public-step-card p {
      margin: 0;
      color: var(--st-muted);
      line-height: 1.65;
    }

    .st-public-split-section {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-public-split-section article {
      display: grid;
      gap: 12px;
      background:
        linear-gradient(180deg, rgba(255, 247, 237, .68), rgba(255, 255, 255, .96)),
        #fff;
    }

    .st-public-final-cta {
      display: grid;
      justify-items: center;
      gap: 14px;
      text-align: center;
      background:
        radial-gradient(circle at top, rgba(249, 115, 22, .2), transparent 26rem),
        linear-gradient(135deg, #0f172a, #1f2937);
      color: #fff;
    }

    .st-public-final-cta h2 {
      max-width: 760px;
      color: #fff;
    }

    .st-public-final-cta .st-public-kicker {
      color: #fed7aa;
    }

    .st-public-final-cta p {
      color: rgba(255, 255, 255, .76);
    }

    .st-public-feature-story {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr);
      gap: clamp(22px, 4vw, 48px);
      align-items: center;
      margin-top: clamp(42px, 7vw, 82px);
      padding: clamp(22px, 4vw, 34px);
      background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 247, 237, .72)),
        #fff;
      border: 1px solid var(--st-border);
      border-radius: 30px;
      box-shadow: var(--shadow-sm);
    }

    .st-public-feature-story-reverse .st-public-feature-copy {
      order: 2;
    }

    .st-public-feature-copy,
    .st-public-feature-visual,
    .st-public-feature-window {
      min-width: 0;
    }

    .st-public-feature-copy h2 {
      margin: 0;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.8rem, 3.2vw, 3rem);
      line-height: 1.05;
      letter-spacing: -.045em;
    }

    .st-public-feature-copy p {
      margin: 14px 0 0;
      color: var(--st-muted);
      line-height: 1.7;
    }

    .st-public-feature-list {
      display: grid;
      gap: 10px;
      margin: 20px 0 0;
      padding: 0;
      list-style: none;
    }

    .st-public-feature-list li {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      color: var(--st-muted);
      line-height: 1.55;
    }

    .st-public-feature-list li>span:first-child {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-top: 4px;
      color: var(--st-primary-hover);
      background: var(--st-primary-soft);
      border-radius: 999px;
      font-size: .72rem;
      font-weight: 900;
      line-height: 1;
    }

    .st-public-feature-list li>span:first-child::before {
      content: "✓";
    }

    .st-public-feature-window {
      display: grid;
      gap: 14px;
      padding: clamp(18px, 3vw, 24px);
      background: #fff;
      border: 1px solid var(--st-border);
      border-radius: 24px;
      box-shadow: var(--shadow-md);
    }

    .st-public-feature-window-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--st-border);
    }

    .st-public-feature-window-head span,
    .st-public-feature-lines span,
    .st-public-inventory-table div:first-child span,
    .st-public-refill-list span,
    .st-public-money-list span,
    .st-public-shop-list span {
      color: var(--st-muted);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .st-public-feature-window-head strong,
    .st-public-feature-lines strong,
    .st-public-refill-list strong,
    .st-public-money-list strong,
    .st-public-shop-list strong,
    .st-public-shop-list em {
      color: var(--st-secondary);
      font-style: normal;
      overflow-wrap: anywhere;
    }

    .st-public-feature-lines,
    .st-public-refill-list,
    .st-public-money-list,
    .st-public-shop-list {
      display: grid;
      gap: 10px;
    }

    .st-public-feature-lines div,
    .st-public-refill-list div,
    .st-public-money-list div,
    .st-public-shop-list div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
      padding: 13px 14px;
      background: var(--st-bg);
      border: 1px solid var(--st-border);
      border-radius: 16px;
    }

    .st-public-payment-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .st-public-payment-row span,
    .st-public-feature-callout,
    .st-public-support-flow span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 8px 10px;
      color: var(--st-primary-hover);
      background: #fff7ed;
      border: 1px solid rgba(249, 115, 22, .18);
      border-radius: var(--radius-pill);
      font-weight: 900;
      text-align: center;
    }

    .st-public-reliability-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .st-public-reliability-row span,
    .st-public-receipt-preview {
      min-width: 0;
      padding: 12px 13px;
      color: var(--st-secondary);
      background: linear-gradient(135deg, #f0fdf4, #fff);
      border: 1px solid rgba(22, 163, 74, .2);
      border-radius: 16px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    }

    .st-public-reliability-row span {
      display: grid;
      gap: 4px;
      line-height: 1.35;
    }

    .st-public-reliability-row strong {
      color: #15803d;
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .st-public-receipt-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .st-public-receipt-preview div {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .st-public-receipt-preview span:not(.st-public-preview-action),
    .st-public-receipt-preview small {
      color: var(--st-muted);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .st-public-receipt-preview strong {
      color: var(--st-secondary);
      font-size: 1.25rem;
      line-height: 1.15;
    }

    .st-public-preview-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      padding: 8px 12px;
      color: #047857;
      background: #ecfdf5;
      border: 1px solid rgba(16, 185, 129, .24);
      border-radius: var(--radius-pill);
      font-weight: 900;
      white-space: nowrap;
    }

    .st-public-feature-callout {
      justify-content: flex-start;
      width: fit-content;
      max-width: 100%;
      border-radius: 16px;
    }

    .st-public-inventory-table {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .st-public-inventory-table div {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(76px, .7fr) minmax(70px, .55fr);
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 12px 14px;
      background: var(--st-bg);
      border-radius: 14px;
    }

    .st-public-inventory-table div:first-child {
      background: transparent;
      padding-top: 0;
      padding-bottom: 0;
    }

    .st-public-inventory-table strong,
    .st-public-inventory-table span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .st-public-feature-warning {
      color: var(--st-primary-hover) !important;
      font-weight: 900;
    }

    .st-public-money-list .is-total {
      background: linear-gradient(135deg, var(--st-secondary), #1f2937);
      border-color: rgba(15, 23, 42, .12);
    }

    .st-public-money-list .is-total span,
    .st-public-money-list .is-total strong {
      color: #fff;
    }

    .st-public-shop-list div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
    }

    .st-public-shop-list span {
      grid-column: 1;
    }

    .st-public-shop-list em {
      grid-column: 2;
      grid-row: 1 / span 2;
      align-self: center;
      font-weight: 900;
    }

    .st-public-warehouse-window {
      background:
        radial-gradient(circle at top right, rgba(22, 163, 74, .13), transparent 16rem),
        #fff;
    }

    .st-public-warehouse-stock-list {
      display: grid;
      gap: 10px;
    }

    .st-public-warehouse-stock-list div {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      min-width: 0;
      padding: 13px 14px;
      background: var(--st-bg);
      border: 1px solid var(--st-border);
      border-radius: 16px;
    }

    .st-public-warehouse-stock-list span {
      color: var(--st-muted);
      font-size: .86rem;
      font-weight: 800;
      overflow-wrap: anywhere;
    }

    .st-public-warehouse-stock-list strong {
      color: var(--st-secondary);
      font-size: 1.12rem;
    }

    .st-public-warehouse-transfer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 14px;
      background: #ecfdf5;
      border: 1px solid rgba(16, 185, 129, .24);
      border-radius: 18px;
    }

    .st-public-warehouse-transfer span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 8px 10px;
      color: #047857;
      background: #fff;
      border: 1px solid rgba(16, 185, 129, .18);
      border-radius: var(--radius-pill);
      font-weight: 900;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .st-public-warehouse-transfer strong {
      color: var(--st-primary);
      font-size: 1.35rem;
      line-height: 1;
    }

    .st-public-support-flow {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .st-public-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(18px, 3vw, 24px);
      margin-top: clamp(30px, 5vw, 52px);
    }

    .st-public-grid-3 {
      margin-top: 48px;
    }

    .st-public-card {
      padding: clamp(22px, 3vw, 30px);
    }

    .st-public-card h2,
    .st-public-auth-aside h2,
    .st-public-status-card h2 {
      margin: 0 0 10px;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      letter-spacing: -.03em;
    }

    .st-public-card p,
    .st-public-auth-aside p,
    .st-public-status-card p,
    .st-public-auth-foot,
    .st-public-muted {
      color: var(--st-muted);
      line-height: 1.65;
    }

    .st-public-pricing,
    .st-public-narrow {
      width: min(760px, 100%);
      margin: 0 auto;
    }

    .st-public-pricing {
      display: grid;
      gap: 24px;
      width: min(1040px, 100%);
      margin-top: clamp(26px, 4vw, 42px);
    }

    .st-public-pricing-intro {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      text-align: left;
    }

    .st-public-pricing-intro h2 {
      margin: 14px 0 6px;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(1.65rem, 3vw, 2.25rem);
      letter-spacing: -.04em;
    }

    .st-public-pricing-intro p {
      max-width: 620px;
      margin: 0;
      color: var(--st-muted);
      line-height: 1.6;
    }

    .st-public-billing-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px;
      border: 1px solid var(--st-border);
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .86);
      box-shadow: var(--shadow-sm);
      flex: 0 0 auto;
    }

    .st-public-billing-toggle button {
      border: 0;
      border-radius: var(--radius-pill);
      background: transparent;
      color: var(--st-muted);
      cursor: pointer;
      font: inherit;
      font-size: .9rem;
      font-weight: 900;
      min-height: 34px;
      padding: 7px 14px;
    }

    .st-public-billing-toggle button[aria-pressed="true"] {
      background: var(--st-secondary);
      color: #fff;
      box-shadow: var(--shadow-sm);
    }

    .st-public-billing-toggle button:focus-visible {
      outline: 3px solid rgba(249, 115, 22, .26);
      outline-offset: 2px;
    }

    .st-public-trial-badge,
    .st-public-trial-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      border-radius: var(--radius-pill);
      border: 1px solid rgba(249, 115, 22, .24);
      background: #fff7ed;
      color: var(--st-primary-hover);
      font-weight: 800;
    }

    .st-public-trial-badge {
      min-height: 40px;
      padding: 9px 16px;
      box-shadow: var(--shadow-sm);
    }

    .st-public-pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    .st-public-price-card {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
      min-height: 100%;
      margin: 0;
      position: relative;
    }

    .st-public-price-card-featured {
      border-color: rgba(22, 163, 74, .45);
      background:
        linear-gradient(180deg, rgba(240, 253, 244, .76), rgba(255, 255, 255, .98) 34%),
        var(--st-surface);
      box-shadow: 0 18px 44px rgba(15, 23, 42, .12);
    }

    .st-public-price-head {
      display: grid;
      gap: 8px;
    }

    .st-public-price-card-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .st-public-price-head h2 {
      font-size: clamp(1.65rem, 3vw, 2rem);
    }

    .st-public-trial-pill,
    .st-public-plan-badge {
      min-height: 30px;
      padding: 6px 11px;
      font-size: .78rem;
    }

    .st-public-plan-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      border-radius: var(--radius-pill);
      background: var(--st-success);
      color: #fff;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow: var(--shadow-sm);
    }

    .st-public-plan-customer {
      font-size: .94rem;
    }

    .st-public-price-block {
      display: grid;
      gap: 4px;
      padding: 18px 0;
      border-block: 1px solid var(--st-border);
    }

    .st-public-price-row {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }

    .st-public-price-row strong {
      color: var(--st-secondary);
      font-size: clamp(1.55rem, 2.5vw, 2.05rem);
      letter-spacing: -.04em;
      overflow-wrap: anywhere;
      line-height: 1.1;
    }

    .st-public-price-row span {
      color: var(--st-muted);
      font-size: .95rem;
      font-weight: 700;
    }

    .st-public-plan-list {
      margin: 0;
      padding: 0;
      color: var(--st-muted);
      line-height: 1.7;
      display: grid;
      gap: 8px;
      list-style: none;
    }

    .st-public-plan-list li {
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 9px;
      align-items: start;
      min-width: 0;
    }

    .st-public-plan-list li > span:first-child {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-top: 4px;
      border-radius: 999px;
      background: var(--st-primary-soft);
      color: var(--st-primary-hover);
      font-size: .72rem;
      font-weight: 900;
      line-height: 1;
    }

    .st-public-plan-list li > span:first-child::before {
      content: "✓";
    }

    .st-public-price-card-featured .st-public-plan-list li > span:first-child {
      background: var(--st-success-soft);
      color: var(--st-success);
    }

    .st-public-plan-cta {
      width: 100%;
      margin-top: auto;
      min-height: 46px;
    }

    .st-public-pricing-compare,
    .st-public-included-card {
      display: grid;
      gap: 18px;
    }

    .st-public-section-heading {
      display: grid;
      gap: 8px;
    }

    .st-public-section-heading h2 {
      margin: 0;
    }

    .st-public-section-heading p:last-child {
      margin: 0;
      max-width: 760px;
    }

    .st-public-compare-scroll {
      overflow-x: auto;
      border: 1px solid var(--st-border);
      border-radius: 18px;
      background: #fff;
    }

    .st-public-pricing-compare table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
    }

    .st-public-pricing-compare th,
    .st-public-pricing-compare td {
      padding: 14px 16px;
      border-bottom: 1px solid var(--st-border);
      text-align: left;
      vertical-align: top;
      line-height: 1.45;
    }

    .st-public-pricing-compare tr:last-child th,
    .st-public-pricing-compare tr:last-child td {
      border-bottom: 0;
    }

    .st-public-pricing-compare thead th {
      background: rgba(241, 245, 249, .88);
      color: var(--st-secondary);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .st-public-pricing-compare tbody th {
      color: var(--st-secondary);
      font-weight: 900;
    }

    .st-public-pricing-compare td {
      color: var(--st-muted);
      font-weight: 700;
    }

    .st-public-included-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .st-public-included-grid span {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 10px 12px;
      border: 1px solid rgba(37, 99, 235, .14);
      border-radius: 14px;
      background: rgba(239, 246, 255, .82);
      color: var(--st-secondary);
      font-weight: 800;
      line-height: 1.35;
    }

    .st-public-contact-page {
      display: grid;
      gap: clamp(22px, 4vw, 34px);
      width: min(1040px, 100%);
      margin: 0 auto;
    }

    .st-public-contact-hero {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
      gap: clamp(20px, 4vw, 34px);
      align-items: center;
      padding: clamp(26px, 5vw, 46px);
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 28px;
      background:
        radial-gradient(circle at top right, rgba(249, 115, 22, .13), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .9));
      box-shadow: var(--shadow-md);
    }

    .st-public-contact-hero h1 {
      margin: 8px 0 10px;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      font-size: clamp(2.35rem, 6vw, 4.5rem);
      line-height: .98;
      letter-spacing: -.07em;
    }

    .st-public-contact-hero p {
      max-width: 620px;
      margin: 0;
      color: var(--st-muted);
      font-size: clamp(1rem, 2vw, 1.18rem);
      line-height: 1.65;
    }

    .st-public-contact-hero-card {
      display: grid;
      gap: 10px;
      padding: 18px;
      border: 1px solid var(--st-border);
      border-radius: 22px;
      background: rgba(255, 255, 255, .88);
      box-shadow: var(--shadow-sm);
    }

    .st-public-contact-hero-card span {
      display: flex;
      align-items: center;
      min-height: 38px;
      padding: 9px 12px;
      border-radius: 14px;
      background: var(--st-primary-soft);
      color: var(--st-secondary);
      font-weight: 900;
      line-height: 1.35;
    }

    .st-public-contact-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 20px;
      align-items: stretch;
    }

    .st-public-contact-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }

    .st-public-contact-card h2,
    .st-public-contact-card p {
      margin: 0;
    }

    .st-public-contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: auto;
    }

    .st-public-contact-actions .st-public-button {
      flex: 1 1 180px;
    }

    .st-public-contact-next {
      display: grid;
      gap: 18px;
    }

    .st-public-contact-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .st-public-contact-steps div {
      display: grid;
      gap: 9px;
      min-width: 0;
      padding: 16px;
      border: 1px solid rgba(37, 99, 235, .14);
      border-radius: 18px;
      background: rgba(239, 246, 255, .75);
    }

    .st-public-contact-steps strong {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: var(--st-secondary);
      color: #fff;
      font-size: .92rem;
    }

    .st-public-contact-steps span {
      color: var(--st-muted);
      font-weight: 700;
      line-height: 1.55;
    }

    .st-public-auth {
      display: grid;
      grid-template-columns: minmax(300px, 520px) minmax(260px, 1fr);
      gap: clamp(22px, 5vw, 56px);
      align-items: stretch;
    }

    .st-public-auth-card,
    .st-public-auth-aside {
      padding: clamp(24px, 4vw, 42px);
    }

    .st-public-auth-card {
      position: relative;
      overflow: hidden;
      border-color: rgba(15, 23, 42, .08);
      box-shadow: 0 22px 54px rgba(15, 23, 42, .09);
    }

    .st-public-auth-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, var(--st-primary), var(--st-accent));
    }

    .st-public-auth-aside {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background:
        radial-gradient(circle at top right, rgba(249, 115, 22, .18), transparent 22rem),
        linear-gradient(135deg, #0f172a, #1f2937);
      color: #fff;
    }

    .st-public-auth-aside h2,
    .st-public-auth-aside p {
      color: #fff;
    }

    .st-public-auth-panel {
      display: grid;
      gap: 18px;
    }

    .st-public-auth-panel .st-public-kicker {
      color: #fed7aa;
    }

    .st-public-auth-panel h2 {
      margin: 0;
      font-size: clamp(1.8rem, 4vw, 2.7rem);
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .st-public-auth-panel>p {
      max-width: 34rem;
      margin: 0;
      color: rgba(255, 255, 255, .82);
      font-weight: 700;
      line-height: 1.65;
    }

    .st-public-login-visual {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-block: 8px;
    }

    .st-public-login-visual div {
      min-height: 92px;
      padding: 16px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 20px;
      background: rgba(255, 255, 255, .08);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    }

    .st-public-login-visual span,
    .st-public-login-visual strong {
      display: block;
    }

    .st-public-login-visual span {
      color: rgba(255, 255, 255, .68);
      font-size: .76rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .st-public-login-visual strong {
      margin-top: 10px;
      color: #fff;
      font-size: 1.02rem;
      line-height: 1.25;
    }

    .st-public-auth-points {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .st-public-auth-points li {
      position: relative;
      padding-left: 26px;
      color: rgba(255, 255, 255, .9);
      font-weight: 800;
      line-height: 1.45;
    }

    .st-public-auth-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .36em;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: var(--st-primary);
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .18);
    }

    .st-public-signup-context {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-block: 4px 2px;
    }

    .st-public-signup-context div {
      min-width: 0;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 18px;
      background: rgba(255, 255, 255, .09);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    }

    .st-public-signup-context span,
    .st-public-signup-context strong {
      display: block;
    }

    .st-public-signup-context span {
      color: rgba(255, 255, 255, .68);
      font-size: .72rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .st-public-signup-context strong {
      margin-top: 8px;
      color: #fff;
      font-size: .94rem;
      line-height: 1.25;
    }

    .st-public-form {
      display: grid;
      gap: 16px;
      margin-top: 26px;
    }

    .st-public-form label {
      display: grid;
      gap: 7px;
      color: var(--st-secondary);
      font-weight: 800;
    }

    .st-public-signup-form {
      gap: 18px;
      margin-top: 24px;
    }

    .st-public-form-section {
      display: grid;
      gap: 14px;
      padding: 18px;
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 20px;
      background: rgba(248, 250, 252, .76);
    }

    .st-public-form-section-compact {
      gap: 10px;
    }

    .st-public-form-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .st-public-form-section-head span {
      color: var(--st-muted);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .st-public-form-section-title {
      margin: 0;
      color: var(--st-secondary);
      font-size: .9rem;
      font-weight: 950;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .st-public-field-helper {
      color: var(--st-muted);
      font-size: .88rem;
      font-weight: 650;
      line-height: 1.4;
    }

    .st-public-form input,
    .st-public-form select {
      width: 100%;
      min-height: 46px;
      padding: 11px 13px;
      border: 1px solid var(--st-border);
      border-radius: 14px;
      background: #fff;
      color: var(--st-text);
      font: inherit;
    }

    .st-public-form input:focus,
    .st-public-form select:focus {
      border-color: var(--st-primary);
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .16);
      outline: none;
    }

    .st-public-password-field {
      position: relative;
      display: block;
    }

    .st-public-password-field input {
      padding-right: 82px;
    }

    .st-public-password-toggle {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      min-width: 62px;
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      background: #fff7ed;
      color: var(--st-primary-hover);
      cursor: pointer;
      font: inherit;
      font-size: .86rem;
      font-weight: 900;
    }

    .st-public-password-toggle:hover,
    .st-public-password-toggle:focus-visible {
      background: #ffedd5;
      outline: 2px solid rgba(249, 115, 22, .28);
      outline-offset: 2px;
    }

    .st-public-login-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .st-public-check {
      grid-template-columns: auto 1fr;
      align-items: start;
      font-weight: 600 !important;
      color: var(--st-muted) !important;
    }

    .st-public-check input {
      width: 18px;
      min-height: 18px;
      margin-top: 3px;
    }

    .st-public-check a,
    .st-public-auth-foot a,
    .st-public-footer a {
      color: var(--st-primary-hover);
      font-weight: 800;
      text-decoration: none;
    }

    .st-public-check a:hover,
    .st-public-auth-foot a:hover,
    .st-public-footer a:hover {
      text-decoration: underline;
    }

    .st-public-login-link,
    .st-public-login-next a {
      color: var(--st-primary-hover);
      font-weight: 900;
      text-decoration: none;
    }

    .st-public-login-link:hover,
    .st-public-login-next a:hover {
      text-decoration: underline;
    }

    .st-public-login-next {
      display: grid;
      gap: 10px;
      margin-top: 22px;
      padding-top: 20px;
      border-top: 1px solid var(--st-border);
      color: var(--st-muted);
      font-weight: 700;
    }

    .st-public-login-next p {
      margin: 0;
    }

    .st-public-login-next span {
      color: var(--st-secondary);
      font-weight: 900;
    }

    .st-public-form-errors,
    .st-public-status-card {
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .st-public-form-errors p {
      margin: 0;
    }

    .st-public-form-note {
      border-color: #bfdbfe;
      background: #eff6ff;
      color: #1e40af;
    }

    .st-public-form-error {
      border-color: #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .st-public-status-success {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }

    .st-public-status-info {
      border-color: #bfdbfe;
      background: #eff6ff;
      color: #1e40af;
    }

    .st-public-status-warning {
      border-color: #fed7aa;
      background: #fff7ed;
      color: #9a3412;
    }

    .st-public-status-invalid,
    .st-public-status-danger {
      border-color: #fecaca;
      background: #fef2f2;
      color: #991b1b;
    }

    .st-public-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 26px clamp(20px, 4vw, 64px);
      border-top: 1px solid var(--st-border);
      color: var(--st-muted);
      background: #fff;
    }

    .st-public-footer div,
    .st-public-footer nav {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .st-public-footer-brand {
      font-size: 1rem;
    }

    .st-public-auth-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--st-secondary);
      font-family: 'Poppins', sans-serif;
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -.03em;
    }

    @media (max-width: 900px) {
      .st-public-header,
      .st-public-footer {
        align-items: flex-start;
        flex-direction: column;
      }

      .st-public-header {
        padding-block: 16px;
      }

      .st-public-nav {
        justify-content: flex-start;
      }

      .st-public-hero,
      .st-public-auth,
      .st-public-grid,
      .st-public-contact-hero {
        grid-template-columns: 1fr;
      }

      .st-public-hero {
        min-height: auto;
      }

      .st-public-home-hero,
      .st-public-features-hero,
      .st-public-feature-story,
      .st-public-showcase,
      .st-public-split-section,
      .st-public-steps {
        grid-template-columns: 1fr;
      }

      .st-public-feature-story-reverse .st-public-feature-copy {
        order: 0;
      }

      .st-public-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .st-public-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .st-public-pricing-intro {
        align-items: start;
        flex-direction: column;
      }

      .st-public-included-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .st-public-contact-grid,
      .st-public-contact-steps {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 560px) {
      .st-public-main {
        width: min(100% - 22px, 1180px);
        padding-top: 32px;
      }

      .st-public-nav a {
        padding: 9px 10px;
      }

      .st-public-brand {
        font-size: 1.25rem;
      }

      .st-public-logo {
        width: 28px;
        height: 28px;
        border-radius: 9px;
      }

      .st-public-auth-card,
      .st-public-auth-aside,
      .st-public-card {
        padding: 20px;
        border-radius: 18px;
      }

      .st-public-login-visual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .st-public-signup-context {
        grid-template-columns: 1fr;
      }

      .st-public-login-options {
        align-items: flex-start;
        flex-direction: column;
      }

      .st-public-login-visual div {
        min-height: 74px;
        padding: 13px;
      }

      .st-public-login-visual span {
        font-size: .68rem;
      }

      .st-public-login-visual strong {
        margin-top: 7px;
        font-size: .9rem;
      }

      .st-public-form-section {
        padding: 16px;
      }

      .st-public-form-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
      }

      .st-public-form-section-head span {
        white-space: normal;
      }

      .st-public-home-hero h1 {
        font-size: clamp(2.2rem, 13vw, 3.3rem);
      }

      .st-public-home-preview,
      .st-public-features-preview,
      .st-public-feature-story,
      .st-public-feature-window,
      .st-public-showcase,
      .st-public-final-cta,
      .st-public-step-card,
      .st-public-split-section article {
        border-radius: 20px;
      }

      .st-public-preview-metrics,
      .st-public-features-metrics,
      .st-public-showcase-grid,
      .st-public-payment-row,
      .st-public-reliability-row,
      .st-public-support-flow,
      .st-public-grid-4 {
        grid-template-columns: 1fr;
      }

      .st-public-feature-lines div,
      .st-public-refill-list div,
      .st-public-money-list div,
      .st-public-shop-list div,
      .st-public-receipt-preview,
      .st-public-feature-window-head {
        align-items: flex-start;
        flex-direction: column;
      }

      .st-public-warehouse-transfer {
        grid-template-columns: 1fr;
      }

      .st-public-warehouse-transfer strong {
        transform: rotate(0deg);
      }

      .st-public-inventory-table div {
        grid-template-columns: minmax(0, 1fr);
      }

      .st-public-inventory-table div:first-child {
        display: none;
      }

      .st-public-shop-list div {
        display: flex;
      }

      .st-public-preview-topbar,
      .st-public-actions {
        align-items: stretch;
      }

      .st-public-actions .st-public-button {
        width: 100%;
      }

      .st-public-pricing-grid {
        grid-template-columns: 1fr;
      }

      .st-public-billing-toggle,
      .st-public-billing-toggle button {
        width: 100%;
      }

      .st-public-billing-toggle button {
        flex: 1 1 0;
      }

      .st-public-included-grid {
        grid-template-columns: 1fr;
      }

      .st-public-contact-hero {
        padding: 22px;
        border-radius: 22px;
      }

      .st-public-contact-hero-card,
      .st-public-contact-card,
      .st-public-contact-next {
        border-radius: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .st-public-button,
      .st-public-value-card,
      .st-public-feature-story {
        transition: none;
      }

      .st-public-button:hover,
      .st-public-value-card:hover {
        transform: none;
      }
    }

    /* Header */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background: var(--brand-primary);
      /* teal background */
      border-bottom: 3px solid var(--brand-alt);
      /* aqua accent line */
      position: sticky;
      top: 0;
      z-index: 30;
      color: #fff;
    }

    /* Force the orange highlight to show inside the header brand */
    header .brand .highlight {
      color: var(--brand-accent) !important;
      /* ensure it beats any white */
    }

    .brand {
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      /* heavier */
      font-size: 1.5rem;
      /* bigger (≈24px) */
      letter-spacing: -0.5px;
      /* tighter */
      color: #fff;
      /* white on teal header */
    }

    .nav a {
      margin-left: 12px;
      text-decoration: none;
      color: #fff;
      transition: color .2s;
    }

    .nav a:hover {
      color: var(--st-primary);
    }


    /* Containers */
    .wrap {
      max-width: 1100px;
      margin: 16px auto;
      padding: 0 16px;
    }

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

    /* Cards */
    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    /* Panels */
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 12px
    }

    /* Buttons */
    .btn {
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: var(--panel);
      cursor: pointer;
      transition: background .15s, opacity .15s;
      white-space: nowrap
    }

    .btn.primary {
      background: var(--st-primary);
      background-image: none;
      color: #fff;
      font-weight: 600;
      border: 1px solid var(--st-primary);
      border-radius: var(--radius-md);
      padding: 10px 18px;
      cursor: pointer;
      transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .btn.primary:hover {
      background: var(--st-primary-hover);
      background-image: none;
      border-color: var(--st-primary-hover);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(249, 115, 22, .22);
    }

    /* darker orange */
    .btn[disabled] {
      opacity: .5;
      cursor: not-allowed
    }

    /* Toggle buttons */
    .btn.toggle.toggled {
      background: #e5e7eb;
      border-color: #cbd5e1;
      color: var(--ink)
    }

    /* Two-column layouts */
    .two-col {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 16px
    }

    @media (max-width:900px) {
      .two-col {
        grid-template-columns: 1fr
      }
    }

    /* Flex rows */
    .row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin: 6px 0;
      align-items: center
    }

    .cell-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center
    }

    /* Inputs */
    .input,
    select,
    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #cbd5e1;
      border-radius: 8px
    }

    textarea {
      resize: vertical
    }

    /* Muted text */
    .muted {
      color: var(--muted);
      font-size: 14px
    }

    .admin-subtitle {
      margin: 0 0 8px;
    }

    #admin-users .admin-users-form {
      display: grid;
      grid-template-columns: repeat(3, minmax(180px, 1fr));
      gap: 12px;
      align-items: end;
      margin-top: 12px;
    }

    #admin-users .admin-users-form .field {
      min-width: 0;
    }

    #admin-users .admin-users-form .field:last-child {
      display: flex;
      align-items: flex-end;
      justify-self: start;
    }

    #admin-users .admin-users-form .field:last-child .btn {
      width: auto;
      min-width: 140px;
      white-space: nowrap;
    }

    @media (max-width: 900px) {
      #admin-users .admin-users-form {
        grid-template-columns: 1fr;
      }
    }

    #admin-users .admin-users-form .btn {
      white-space: nowrap;
      min-width: 120px;
    }

    #admin-users .admin-users-table-wrap {
      margin-top: 14px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .98));
    }

    #admin-users .admin-users-table {
      width: 100%;
      min-width: 760px;
      border-collapse: separate;
      border-spacing: 0;
    }

    #admin-users .admin-users-table thead th {
      padding: 14px 16px;
      text-align: left;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .03em;
      color: #475569;
      background: rgba(248, 250, 252, .92);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }

    #admin-users .admin-users-table tbody td {
      padding: 14px 16px;
      border-bottom: 1px solid rgba(226, 232, 240, .95);
      vertical-align: middle;
    }

    #admin-users .admin-users-table tbody tr:last-child td {
      border-bottom: none;
    }

    #admin-users .admin-users-table tbody tr:hover td {
      background: rgba(248, 250, 252, .72);
    }


    #admin-cashiers .panel {
      width: min(100%, 980px);
    }


    .cashier-form {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
      margin-top: 14px;
      margin-bottom: 18px;
    }

    .cashier-form-action .btn {
      width: 100%;
    }

    @media (max-width: 900px) {
      .cashier-form {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .cashier-form {
        grid-template-columns: 1fr;
      }
    }


    .cashiers-list-box {
      margin-top: 14px;
    }

    .cashiers-table {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }

    .cashiers-row {
      display: grid;
      grid-template-columns: 1.5fr 0.8fr 0.8fr 0.7fr 1.4fr;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      align-items: center;
    }

    .cashiers-row:last-child {
      border-bottom: none;
    }

    .cashiers-head {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-weight: 800;
    }


    .cashier-actions {
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
      align-items: center;
    }

    @media (max-width: 640px) {
      .cashiers-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }
    }



    /* ===== Customer History ===== */
    .customer-history-search {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
      margin-top: 14px;
      margin-bottom: 16px;
    }

    .customer-history-search .btn {
      min-width: 120px;
    }

    .customer-history-body {
      margin-top: 12px;
    }

    @media (max-width: 640px) {
      .customer-history-search {
        grid-template-columns: 1fr;
      }

      .customer-history-search .btn {
        width: 100%;
      }
    }



    @media (max-width:1100px) {
      #admin-users .admin-users-form {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
      }
    }

    @media (max-width:720px) {
      #admin-users .admin-users-form {
        grid-template-columns: 1fr;
      }
    }


    .customer-history-count {
      margin-bottom: 12px;
      font-weight: 600;
    }

    .customer-history-card {
      margin-bottom: 14px;
      border-radius: 14px;
      border: 1px solid var(--line);
      box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    }

    .customer-history-card-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .customer-history-total {
      font-weight: 800;
      color: var(--brand-accent);
      white-space: nowrap;
      font-size: 1.05rem;
    }

    .customer-history-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 12px;
      color: #334155;
    }

    .customer-history-items {
      border-top: 1px solid var(--line);
      padding-top: 10px;
      margin-top: 8px;
    }

    .customer-history-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 5px 0;
      color: #334155;
    }

    .customer-history-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 14px;
    }

    .customer-history-pdf-btn {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
      font-weight: 700;
    }

    .customer-history-pdf-btn:hover {
      filter: brightness(0.95);
    }

    @media (max-width: 640px) {

      .customer-history-card-top,
      .customer-history-item {
        flex-direction: column;
      }

      .customer-history-meta {
        grid-template-columns: 1fr;
      }

      .customer-history-actions {
        justify-content: stretch;
      }

      .customer-history-pdf-btn {
        width: 100%;
      }
    }

    .customer-history-wa-btn {
      border-color: var(--brand-primary);
      color: var(--brand-primary);
      background: #fff;
      font-weight: 700;
    }

    .customer-history-wa-btn:hover {
      background: rgba(93, 159, 150, .08);
    }

    /* Tags */
    .tag {
      display: inline-block;
      background: #f1f5f9;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 2px 8px;
      font-size: 12px
    }

    .subscription-tag-active {
      background: rgba(16, 185, 129, .14);
      border-color: rgba(16, 185, 129, .35);
      color: #065f46;
    }

    .subscription-tag-expiring {
      background: rgba(245, 158, 11, .16);
      border-color: rgba(245, 158, 11, .4);
      color: #92400e;
    }

    .subscription-tag-expired {
      background: rgba(239, 68, 68, .14);
      border-color: rgba(239, 68, 68, .35);
      color: #7f1d1d;
    }

    .subscription-tag-none {
      background: rgba(100, 116, 139, .14);
      border-color: rgba(100, 116, 139, .35);
      color: #334155;
    }

    #admin-subscriptions .admin-subscriptions-table-wrap {
      margin-top: 14px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(248, 250, 252, .96), rgba(255, 255, 255, .98));
      box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

    #admin-subscriptions .admin-subscriptions-table {
      width: 100%;
      min-width: 980px;
      border-collapse: separate;
      border-spacing: 0;
    }

    #admin-subscriptions .admin-subscriptions-table thead th {
      padding: 14px 16px;
      text-align: left;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .03em;
      color: #475569;
      background: rgba(248, 250, 252, .92);
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
      vertical-align: middle;
    }

    #admin-subscriptions .admin-subscriptions-table tbody td {
      padding: 16px;
      border-bottom: 1px solid rgba(226, 232, 240, .95);
      vertical-align: middle;
      color: #0f172a;
    }

    #admin-subscriptions .admin-subscriptions-table tbody tr:last-child td {
      border-bottom: none;
    }

    #admin-subscriptions .admin-subscriptions-table tbody tr:hover td {
      background: rgba(248, 250, 252, .75);
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(1),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(1) {
      width: 24%;
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(2),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(2) {
      width: 11%;
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(3),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(3) {
      width: 12%;
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(4),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(4),
    #admin-subscriptions .admin-subscriptions-table th:nth-child(7),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(7) {
      width: 9%;
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(5),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(5) {
      width: 12%;
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(6),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(6) {
      width: 15%;
    }

    #admin-subscriptions .admin-subscriptions-table th:nth-child(8),
    #admin-subscriptions .admin-subscriptions-table td:nth-child(8) {
      width: 18%;
    }

    #admin-subscriptions .admin-subscriptions-customer {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    #admin-subscriptions .admin-subscriptions-customer-name {
      font-weight: 700;
      line-height: 1.25;
      color: #0f172a;
    }

    #admin-subscriptions .admin-subscriptions-customer-id {
      font-size: 12px;
      line-height: 1.3;
      color: var(--muted);
      word-break: break-word;
    }

    #admin-subscriptions .admin-subscriptions-plan,
    #admin-subscriptions .admin-subscriptions-days,
    #admin-subscriptions .admin-subscriptions-expiry,
    #admin-subscriptions .admin-subscriptions-updated,
    #admin-subscriptions .admin-subscriptions-shops {
      white-space: nowrap;
    }

    #admin-subscriptions .admin-subscriptions-days,
    #admin-subscriptions .admin-subscriptions-shops {
      font-variant-numeric: tabular-nums;
    }

    #admin-subscriptions .admin-subscriptions-status .tag {
      font-weight: 700;
      white-space: nowrap;
    }

    #admin-subscriptions .admin-subscriptions-updated {
      font-size: 13px;
      color: #334155;
    }

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

    #admin-subscriptions .admin-subscriptions-actions .btn {
      flex: 0 0 auto;
      min-width: 98px;
    }

    @media (max-width: 980px) {
      #admin-subscriptions .admin-subscriptions-table-wrap {
        border-radius: 12px;
      }

      #admin-subscriptions .admin-subscriptions-table {
        min-width: 900px;
      }
    }

    @media (max-width: 820px) {
      #admin-subscriptions .admin-subscriptions-table-wrap {
        overflow: visible;
        border: none;
        background: transparent;
        box-shadow: none;
      }

      #admin-subscriptions .admin-subscriptions-table {
        min-width: 0;
      }

      #admin-subscriptions .admin-subscriptions-table,
      #admin-subscriptions .admin-subscriptions-table thead,
      #admin-subscriptions .admin-subscriptions-table tbody,
      #admin-subscriptions .admin-subscriptions-table tr,
      #admin-subscriptions .admin-subscriptions-table td {
        display: block;
      }

      #admin-subscriptions .admin-subscriptions-table thead {
        display: none;
      }

      #admin-subscriptions .admin-subscriptions-table tbody {
        display: grid;
        gap: 12px;
      }

      #admin-subscriptions .admin-subscriptions-table tbody tr {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
        overflow: hidden;
      }

      #admin-subscriptions .admin-subscriptions-table tbody td {
        display: grid;
        grid-template-columns: minmax(92px, 110px) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 12px 14px;
      }

      #admin-subscriptions .admin-subscriptions-table tbody td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        letter-spacing: .02em;
      }

      #admin-subscriptions .admin-subscriptions-table tbody td:first-child,
      #admin-subscriptions .admin-subscriptions-table tbody td:last-child {
        grid-template-columns: 1fr;
      }

      #admin-subscriptions .admin-subscriptions-table tbody td:first-child::before,
      #admin-subscriptions .admin-subscriptions-table tbody td:last-child::before {
        margin-bottom: 2px;
      }

      #admin-subscriptions .admin-subscriptions-plan,
      #admin-subscriptions .admin-subscriptions-days,
      #admin-subscriptions .admin-subscriptions-expiry,
      #admin-subscriptions .admin-subscriptions-updated,
      #admin-subscriptions .admin-subscriptions-shops {
        white-space: normal;
      }

      #admin-subscriptions .admin-subscriptions-actions {
        gap: 8px;
      }

      #admin-subscriptions .admin-subscriptions-actions .btn {
        min-width: 0;
      }
    }

    .subscription-card {
      margin: 0;
      max-width: 680px;
      text-align: left;
      background: rgba(255, 255, 255, .94);
      color: var(--ink);
      padding: 10px 12px;
    }

    .subscription-card .muted {
      font-size: 12px;
    }

    .subscription-card .subscription-header {
      margin: 0 0 6px;
    }

    .subscription-card .subscription-header strong {
      font-size: 13px;
    }

    .subscription-card .subscription-meta {
      margin-top: 8px;
    }

    .subscription-card .subscription-updated {
      margin-top: 8px;
    }

    .subscription-new-card {
      margin-bottom: 16px;
    }

    .subscription-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    .subscription-section-header h4 {
      margin: 0 0 4px;
    }

    .subscription-register-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .subscription-form-actions {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    @media (max-width: 720px) {
      .subscription-register-form {
        grid-template-columns: 1fr;
      }
    }

    .subscription-tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }


    /* Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      margin: 12px 0
    }

    .tab {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid #cbd5e1;
      background: var(--panel);
      cursor: pointer
    }

    .tab.active {
      background: var(--brand-primary);
      color: #fff;
      border-color: var(--brand-primary);
    }

    /* Pills */
    .pill {
      padding: 6px 10px;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      background: var(--panel);
      cursor: pointer
    }

    .pill.active {
      background: var(--brand-primary);
      color: #fff;
      border-color: var(--brand-primary);
    }

    .hide {
      display: none
    }




    /* ===== SureTrack Utility Classes ===== */

    .text-muted {
      color: var(--st-muted) !important;
    }

    .text-bold {
      font-weight: 700 !important;
    }

    .page-title {
      margin: 0 0 var(--space-4);
      font-size: 28px;
      line-height: 1.15;
      font-weight: 800;
      color: var(--st-text);
    }

    .section-title {
      margin: 0 0 var(--space-3);
      font-size: 22px;
      line-height: 1.2;
      font-weight: 700;
      color: var(--st-text);
    }

    .surface-card {
      background: var(--st-surface);
      border: 1px solid var(--st-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .stack-sm {
      display: grid;
      gap: var(--space-2);
    }

    .stack-md {
      display: grid;
      gap: var(--space-4);
    }

    .cluster {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      flex-wrap: wrap;
    }

    .flex-wrap {
      flex-wrap: wrap !important;
    }

    .filter-spacing {
      margin: 8px 0 12px !important;
    }

    .ml-6 {
      margin-left: 6px !important;
    }

    .align-end {
      align-items: flex-end !important;
    }

    .align-start {
      align-items: flex-start !important;
    }

    .cursor-pointer {
      cursor: pointer !important;
    }

    .justify-start {
      justify-content: flex-start !important;
    }

    .helper-tight {
      margin: 0 0 8px !important;
    }

    .helper-compact {
      margin: 0 0 10px !important;
    }

    .my-6 {
      margin-top: 6px !important;
      margin-bottom: 6px !important;
    }

    .my-12 {
      margin-top: 12px !important;
      margin-bottom: 12px !important;
    }

    .mt-0 {
      margin-top: 0 !important;
    }

    .max-w-360 {
      max-width: 360px !important;
    }

    .max-w-140 {
      max-width: 140px !important;
    }

    .max-w-900-center {
      max-width: 900px !important;
      margin-inline: auto !important;
    }

    .p-12 {
      padding: 12px !important;
    }

    .incident-consent-label {
      display: flex !important;
      align-items: center !important;
      margin: 6px 0 !important;
    }

    #admin-inventory .inventory-edit-card-title {
      margin: 0 0 6px 0 !important;
      color: #1e293b !important;
    }

    #admin-inventory .inventory-edit-card-subtitle {
      margin: 0 0 12px !important;
    }

    #refundBuilderCard .refund-builder-field {
      min-width: 220px !important;
    }

    #refundBuilderCard .refund-builder-restock-row {
      gap: 12px !important;
      align-items: center !important;
      margin-top: 4px !important;
    }

    #admin-receipts .receipt-search-field {
      min-width: 260px !important;
    }

    #admin-receipts .receipt-clear-btn-height {
      height: 38px !important;
    }

    .mt-6 {
      margin-top: 6px !important;
    }

    .mt-8 {
      margin-top: 8px !important;
    }

    .mt-10 {
      margin-top: 10px !important;
    }

    .mt-12 {
      margin-top: 12px !important;
    }

    .mt-14 {
      margin-top: 14px !important;
    }

    .gap-6 {
      gap: 6px !important;
    }

    .gap-8 {
      gap: 8px !important;
    }

    .gap-10 {
      gap: 10px !important;
    }

    .flex-1 {
      flex: 1 !important;
    }

    .flex-2 {
      flex: 2 !important;
    }

    .font-weight-700 {
      font-weight: 700 !important;
    }

    .generated-text-sm {
      font-size: 12px !important;
    }

    .status-success {
      background: rgba(22, 163, 74, .12);
      border-color: rgba(22, 163, 74, .32);
      color: #166534;
    }

    .status-warning {
      background: rgba(217, 119, 6, .14);
      border-color: rgba(217, 119, 6, .34);
      color: #92400E;
    }

    .status-danger {
      background: rgba(220, 38, 38, .12);
      border-color: rgba(220, 38, 38, .32);
      color: #991B1B;
    }

    .status-info {
      background: rgba(37, 99, 235, .12);
      border-color: rgba(37, 99, 235, .32);
      color: #1E40AF;
    }




    /* Thumbnails */
    .thumb {
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid var(--line)
    }

    /* Small preview for uploaded image */
    .img-preview img {
      width: 120px;
      height: 90px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      display: block;
    }

    .img-preview .muted {
      font-size: 12px;
    }


    /* Header center slot */
    .header-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-width: 0;
    }

    .header-meta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      width: 100%;
      max-width: 520px;
    }

    .active-shop-badge {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, .94);
      color: var(--st-text);
      border: 1px solid rgba(255, 255, 255, .24);
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 13px;
      line-height: 1.2;
      white-space: nowrap;
    }

    #sessionUserBadge {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, .92);
      color: #0f172a !important;
      border: 1px solid rgba(15, 23, 42, .16);
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 12px;
      line-height: 1.2;
      white-space: nowrap;
    }

    #sessionLogoutBtn {
      border: 1px solid rgba(255, 255, 255, .6);
      color: #fff;
      background: transparent;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
    }

    #sessionLogoutBtn:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: rgba(250, 115, 5, .08);
    }

    @media (max-width:900px) {
      .header-center {
        gap: 3px;
      }

      .header-meta-row {
        max-width: 100%;
        gap: 5px;
      }

      .active-shop-badge {
        font-size: 12px;
        padding: 3px 8px;
      }

      #sessionUserBadge {
        font-size: 12px;
        padding: 3px 8px;
      }

      #sessionLogoutBtn {
        font-size: 12px;
        padding: 4px 8px;
      }
    }

    .shop-switch-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: rgba(255, 255, 255, .16);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .35);
      padding: 6px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      max-width: 420px;
      position: relative;
      z-index: 1001;
      pointer-events: auto;
    }

    .shop-switch-banner.pop {
      animation: bannerPop .35s cubic-bezier(.2, .9, .2, 1) !important;
    }

    .shop-switch-banner-close {
      border: none;
      background: transparent;
      color: #fff;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      opacity: .85;
      padding: 0 4px;
      position: relative;
      z-index: 1002;
      pointer-events: auto;
    }

    @keyframes bannerPop {
      0% {
        opacity: 0;
        transform: translateY(-10px) scale(.96);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* Switch (slider) */
    .switch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      user-select: none
    }

    .switch input {
      display: none
    }

    .switch .slider {
      position: relative;
      width: 44px;
      height: 24px;
      background: #e5e7eb;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      transition: background .2s, border-color .2s
    }

    .switch .slider::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: var(--panel);
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      transition: transform .2s;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .08)
    }

    /* High-contrast ON state using brand orange */
    .switch input:checked+.slider {
      background: var(--brand-accent);
      /* orange */
      border-color: #d55f04;
      /* slightly darker orange border */
      box-shadow: 0 0 0 2px rgba(255, 255, 255, .85) inset;
      /* white ring for contrast on teal header */
    }

    .switch input:checked+.slider::after {
      transform: translateX(20px);
      background: #fff;
      border-color: #fff;
    }

    .switch input:checked+.slider::after {
      transform: translateX(20px);
    }

    /* Switch label */
    .switch .switch-label {
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      /* white text in header */
      letter-spacing: 0.3px;
    }


    /* Offline banner */
    .offline-banner {
      background: var(--brand-red);
      color: #fff;
      text-align: center;
      padding: 8px 12px;
      border-bottom: 1px solid #dc2626;
      font-weight: 600;
    }

    .support-session-banner,
    .support-session-terminal-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 16px;
      background: #eff6ff;
      border-bottom: 1px solid #bfdbfe;
      color: #1e3a8a;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
      position: sticky;
      top: var(--header-h);
      z-index: 2;
    }

    .support-session-banner-elevated {
      background: #fff7ed;
      border-bottom-color: #fed7aa;
      color: #9a3412;
    }

    .support-session-banner strong,
    .support-session-terminal-banner strong {
      display: block;
      font-weight: 800;
    }

    .support-session-banner span,
    .support-session-terminal-banner span {
      display: inline-block;
      margin-right: 10px;
      font-size: 13px;
    }

    .support-session-banner-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .support-session-banner button,
    .support-session-terminal-banner button {
      border: 1px solid currentColor;
      border-radius: 999px;
      background: #fff;
      color: inherit;
      cursor: pointer;
      font-weight: 700;
      padding: 8px 12px;
    }

    @media (max-width: 760px) {
      .support-session-banner,
      .support-session-terminal-banner {
        align-items: flex-start;
        flex-direction: column;
      }

      .support-session-banner-actions {
        justify-content: flex-start;
      }
    }

    /* Helpers */
    .helper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--muted)
    }

    .inline {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap
    }

    /* Scroll areas */
    .scroll-area {
      max-height: 68vh;
      overflow: auto;
      padding-right: 2px
    }

    .scroll-area::-webkit-scrollbar,
    #pos #cartList.is-scrollable::-webkit-scrollbar {
      width: 8px
    }

    .scroll-area::-webkit-scrollbar-thumb,
    #pos #cartList.is-scrollable::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 8px
    }

    .scroll-area::-webkit-scrollbar-track,
    #pos #cartList.is-scrollable::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 8px
    }

    /* Refund builder grid */
    .rb-grid {
      display: grid;
      grid-template-columns: 2fr .8fr .9fr .8fr 1fr 1.2fr;
      column-gap: 8px;
      row-gap: 6px;
      align-items: center
    }

    .rb-grid .head {
      font-weight: 700
    }

    /* Toasts */
    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      background: #16a34a;
      color: #fff;
      padding: 14px 18px;
      border-radius: 10px;
      font-weight: 600;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
      transition: opacity .25s ease, transform .25s ease;
      z-index: 9999;
      max-width: 360px;
      white-space: normal;
      line-height: 1.45;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .toast.hide {
      opacity: 0;
      transform: translateY(10px);
    }




    /* Strikethrough helpers */
    .struck {
      opacity: .6;
      text-decoration: line-through
    }

    .strike {
      text-decoration: line-through
    }

    /* Flash highlight */
    @keyframes flashBg {
      0% {
        background: #fff59d;
      }

      100% {
        background: transparent;
      }
    }

    .flash {
      animation: flashBg 1.6s ease-out;
    }

    @keyframes shopPulse {
      0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(93, 159, 150, 0);
      }

      35% {
        transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(93, 159, 150, .55), 0 10px 24px rgba(15, 23, 42, .14);
      }

      100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(93, 159, 150, 0);
      }
    }

    .shop-flash {
      position: relative;
      z-index: 2;
      animation: shopPulse 1.1s ease-out !important;
      will-change: transform, box-shadow;
    }

    /* Details panel */
    .details {
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 8px;
      margin: 6px 0 10px;
      padding: 8px
    }

    .details .head {
      font-weight: 700
    }

    .details .row {
      border-bottom: 1px solid var(--line);
      padding: 4px 0
    }

    .details .row:last-child {
      border-bottom: 0
    }

    /* Admin hub grid */
    .admin-hub-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .admin-hub-grid.hide {
      display: none !important;
    }

    @media (max-width:1100px) {
      .admin-hub-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width:800px) {
      .admin-hub-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width:520px) {
      .admin-hub-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ===== Admin Cards — Figma-style ===== */
    .admin-card {
      position: relative;
      background: #fff;
      /* or var(--panel) */
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
      box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
      overflow: hidden;
    }

    /* top accent strip */
    .admin-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      opacity: .9;
    }

    /* hover: lift + glow */
    .admin-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
      border-color: rgba(93, 159, 150, .5);
      background: #fff;
      /* keep white, let accent strip carry color */
    }

    /* inner layout */
    .admin-card .card-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 6px;
    }

    .admin-card .card-ico {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-size: 18px;
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    }

    .admin-card h4 {
      margin: 0;
      font-weight: 700;
      color: #1e293b;
      font-size: 1rem;
    }

    .admin-card .muted {
      color: var(--muted);
      font-size: 13px;
    }

    /* chevron affordance */
    .admin-card .chev {
      margin-left: auto;
      opacity: 0;
      transform: translateX(-4px);
      transition: opacity .16s, transform .16s;
      color: #94a3b8;
    }

    .admin-card:hover .chev {
      opacity: .9;
      transform: translateX(0);
    }

    /* optional state variants */
    .admin-card.is-danger::before {
      background: var(--brand-red);
    }

    .admin-card.is-accent::before {
      background: var(--brand-accent);
    }


    /* Admin section wrapper */
    .admin-section {
      display: none;
    }

    .admin-section.show {
      display: block;
    }

    .admin-shell {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 18px;
      align-items: start;
    }

    .admin-shell-sidebar {
      margin-top: 55px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .admin-shell-sidebar .sidebar-panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px;
    }

    .admin-shell-sidebar .sidebar-label {
      margin: 0 0 10px;
      font-size: .82rem;
      font-weight: 700;
      color: #475569;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .admin-shell-sidebar .sidebar-item {
      display: block;
      padding: 10px 12px;
      border-radius: 10px;
      color: var(--ink);
      background: #fff;
      text-decoration: none;
      border: 1px solid transparent;
      transition: background .2s, border-color .2s;
    }

    .admin-shell-sidebar .sidebar-item:hover {
      background: rgba(171, 226, 244, .18);
      border-color: rgba(93, 159, 150, .3);
    }

    .admin-shell-sidebar .sidebar-panel .sidebar-item.active {
      background: var(--st-bg) !important;
      background-image: none !important;
      color: var(--st-text) !important;
      font-weight: 700;
      border: 1px solid transparent !important;
      border-left: 4px solid var(--st-primary) !important;
      border-radius: var(--radius-md);
      box-shadow: none !important;
    }

    .admin-shell-main {
      width: 100%;
      min-width: 0;
      overflow: hidden;
    }

    #admin-section-view {
      min-width: 0;
      overflow: hidden;
    }

    .admin-toolbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 12px;
    }

    .admin-page-title-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .admin-page-title-row > div:first-child {
      min-width: 0;
    }

    .admin-page-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 0 0 auto;
      padding-top: 3px;
    }

    .products-add-action {
      display: inline-flex !important;
      align-items: center !important;
      gap: 7px !important;
      min-height: 38px !important;
      padding: 9px 14px !important;
      white-space: nowrap !important;
      box-shadow: 0 10px 24px rgba(45, 106, 79, .14) !important;
    }

    .products-add-action span[aria-hidden="true"] {
      font-size: 18px;
      line-height: 1;
      font-weight: 900;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }

    #admin-dashboard.hide {
      display: none !important;
    }

    .dashboard-kpi {
      padding: 18px;
      min-height: 124px;
      border-radius: 14px;
      background: var(--panel);
      border: 1px solid var(--line);
    }

    .dashboard-kpi .kpi-label {
      margin: 0 0 10px;
      font-size: .82rem;
      font-weight: 700;
      color: #475569;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .dashboard-kpi .kpi-value {
      font-size: 1.85rem;
      font-weight: 800;
      color: #0f172a;
    }

    .dashboard-kpi .kpi-note {
      margin-top: 10px;
      color: var(--muted);
      font-size: .92rem;
    }

    .dashboard-kpi.dashboard-warning {
      border-color: #f59e0b;
      background: #fffbeb;
    }

    .dashboard-kpi.dashboard-warning .kpi-value {
      color: #b45309;
    }

    .queue-summary-action {
      margin-top: 10px;
    }

    .queue-details-btn {
      background: var(--accent, #f59e0b);
      color: #fff;
      border-color: transparent;
    }

    .queue-details-btn:hover {
      filter: brightness(0.96);
    }

    .queue-summary {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 16px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.35;
      margin-top: 6px;
    }

    .queue-summary span {
      font-weight: 700;
    }

    .queue-summary .muted,
    .queue-summary small {
      font-size: 13px;
    }


    .queue-page-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 12px;
      margin-top: 14px;
      margin-bottom: 14px;
    }

    .queue-stat {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px 12px;
    }

    .queue-stat-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 6px;
    }

    .queue-stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--ink);
    }

    .queue-page-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }

    .queue-page-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
    }

    .queue-page-item-top {
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 4px;
    }

    .queue-page-item-meta {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }

    .queue-status {
      display: inline-block;
      padding: 2px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      margin-left: 8px;
    }




    .queue-list {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .queue-item {
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      font-size: 13px;
      line-height: 1.4;
    }

    .admin-products-count {
      margin-top: 10px;
    }

    .admin-products-grid {
      margin-top: 12px;
    }

    .admin-products-loadmore {
      margin-top: 12px;
    }

    @media (max-width:900px) {
      .admin-shell {
        grid-template-columns: 1fr;
      }
    }

    /* Close bar */
    /* Close bar in detail views (parks under sticky header) */
    .admin-closebar {
      position: sticky;
      top: var(--header-h);
      /* <- sits just below the global header */
      z-index: 0;
      /* below header (header is z-index:1) */
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background: #fff;
      border-bottom: 1px solid #e2e8f0;
      padding: 8px;
      margin-bottom: 8px;
      border-radius: 8px;
    }

    .close-btn {
      border: 1px solid #cbd5e1;
      background: var(--panel);
      color: #475569;
      font-weight: 600;
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
    }

    .close-btn:hover {
      background: #f1f5f9;
      color: #1e293b;
    }

    /* Headings */
    h3,
    h4 {
      font-family: 'Poppins', sans-serif;
      font-weight: 600;
      color: #1e293b;
    }

    /* Numeric emphasis */
    .table td,
    .table th {
      font-family: 'Inter', sans-serif;
    }

    .table td.num {
      font-family: 'Roboto Mono', monospace;
    }


    /* ===== Home Landing Hero ===== */
    #home {
      padding: 30px 0;
    }

    .home-hero {
      min-height: calc(100vh - 56px);
      /* header height ~56px */
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--home-g1), var(--home-g2));
      color: #fff;
      text-align: center;
      position: relative;
      border-radius: var(--radius-xl);
      overflow: hidden;

    }

    .home-hero .hero-inner {
      padding: 48px 16px;
      max-width: 800px;
    }

    .home-hero h2 {
      margin: 0 0 12px 0;
      font-size: clamp(28px, 5vw, 44px);
      font-weight: 800;
      font-family: 'Poppins', sans-serif;
    }

    .home-hero p {
      margin: 0 auto 18px;
      font-size: clamp(16px, 2.2vw, 18px);
      color: rgba(255, 255, 255, .92);
      max-width: 640px;
    }

    .home-hero .tabs {
      justify-content: center;
      margin-top: 16px;
    }

    .home-hero .tab {
      border-color: rgba(255, 255, 255, .5);
      color: #fff;
      background: rgba(255, 255, 255, .12);
    }

    .home-hero .tab.active,
    .home-hero .tab:hover {
      background: #fff;
      color: var(--brand-primary);
      border-color: #fff;
    }

    .logo-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 6px;
      border-radius: 4px;
      background: var(--brand-accent);
      /* orange square */
    }

    /* Footer */
    /* ===== FINAL FOOTER (all 3 columns left-aligned) ===== */
    footer.footer {
      background: var(--brand-primary) !important;
      /* teal */
      border-top: 3px solid var(--brand-alt) !important;
      /* aqua accent */
      color: #fff !important;
      margin-top: 40px;
    }

    /* Grid: 3 equal columns (desktop) → 2 (tablet) → 1 (mobile) */
    footer.footer .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      /* 3 equal columns */
      gap: 48px;
      align-items: start;
    }

    @media (max-width:900px) {
      footer.footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

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

    /* Brand (kept in case you add it back later) */
    footer.footer .brand {
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      font-size: 1.2rem;
      color: #fff !important;
    }

    footer.footer .brand .highlight {
      color: var(--brand-accent) !important;
    }

    /* Make muted text readable on teal */
    footer.footer .muted,
    footer.footer p,
    footer.footer small {
      color: rgba(255, 255, 255, .9) !important;
    }

    /* Section headings */
    footer.footer .foot-head {
      font-size: .9rem;
      font-weight: 700;
      margin: 0 0 8px;
      color: var(--brand-alt) !important;
      /* aqua */
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    /* Links inside footer */
    footer.footer .foot-links a,
    footer.footer .foot-legal a,
    footer.footer a {
      display: inline-block;
      margin: 4px 12px 4px 0;
      text-decoration: none;
      color: #fff !important;
      opacity: .95;
      transition: color .2s, opacity .2s;
    }

    footer.footer .foot-links a:hover,
    footer.footer .foot-legal a:hover,
    footer.footer a:hover {
      color: var(--brand-accent) !important;
      /* orange hover */
      opacity: 1;
    }

    /* Tags look glassy on teal */
    footer.footer .tag {
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .35);
      color: #fff !important;
    }

    /* ========== POS Button Styling (scoped) ========== */

    /* Primary CTA in the POS (Checkout & WhatsApp Receipt) */
    #pos .btn.primary {
      background: var(--brand-accent);
      /* vibrant orange */
      border-color: var(--brand-accent);
      color: #fff;
    }

    #pos .btn.primary:hover {
      filter: brightness(0.95);
    }

    #pos .btn.primary:active {
      transform: translateY(1px);
    }

    #pos .btn.primary:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(250, 115, 5, .25);
    }

    /* Product card "Add" buttons (they use .btn.add-btn from your JS) */
    #pos .btn.add-btn {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
    }

    #pos .btn.add-btn:hover {
      filter: brightness(0.95);
    }

    #pos .btn.add-btn:active {
      transform: translateY(1px);
    }

    /* Disabled state (out-of-stock) */
    #pos .btn.add-btn[disabled],
    #pos .btn.primary[disabled] {
      opacity: .55;
      cursor: not-allowed;
      filter: none;
      box-shadow: none;
    }

    /* Optional: make low-stock tag feel on-brand (amber hint) */
    #pos .tag {
      background: #fff7ed;
      /* soft amber bg */
      border-color: #fed7aa;
      /* light amber border */
      color: #b45309;
      /* amber-700 text */
    }

    /* Slightly lift product cards on hover */
    #pos .card {
      transition: box-shadow .12s ease, transform .08s ease;
    }

    #pos .card:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px rgba(15, 23, 42, .08);
    }

    /* =========================
   POS — Products & Cart polish
   ========================= */

    /* Give the POS page a little breathing room and a soft backdrop */
    #pos .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    }

    /* More room between product cards */
    #pos #productGrid {
      gap: 14px !important;
      /* override base 12px to open it up a touch */
    }

    /* Product cards: soft elevation + hover lift */
    #pos .grid .card {
      border-radius: 14px;
      border: 1px solid var(--line);
      box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
      transition: transform .12s ease, box-shadow .16s ease, border-color .16s ease;
    }

    #pos .grid .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
      border-color: rgba(171, 226, 244, .7);
      /* aqua hint */
    }

    /* Product title + price hierarchy */
    #pos .grid .card>div:first-child b {
      font-weight: 700;
      letter-spacing: .1px;
    }

    #pos .grid .card .muted {
      color: var(--muted);
    }

    /* Make price pop slightly inside the muted line */
    #pos .grid .card .muted::first-line {
      color: var(--ink);
      font-weight: 600;
    }

    /* Low-stock tag restyle (soft amber) */
    #pos .grid .card .tag {
      background: #fff7ed;
      border-color: #fed7aa;
      color: #b45309;
    }

    /* Full-width orange Add button with nice focus ring */
    #pos .btn.add-btn {
      width: 100%;
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
      font-weight: 600;
      transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
    }

    #pos .btn.add-btn:hover {
      filter: brightness(.96);
    }

    #pos .btn.add-btn:active {
      transform: translateY(1px) scale(.99);
    }

    #pos .btn.add-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(250, 115, 5, .25);
    }

    /* Disabled state clearly dimmed */
    #pos .btn.add-btn[disabled] {
      opacity: .55;
      filter: grayscale(.2);
    }

    /* Cart panel: subtle top stripe and tighter layout */
    #pos .panel:nth-of-type(1) {
      /* the Cart panel is the first in the right column */
      position: relative;
    }

    #pos .panel:nth-of-type(1)::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 4px;
      border-top-left-radius: 14px;
      border-top-right-radius: 14px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
    }

    /* Cart item rows: tidy spacing and readable totals */
    #pos #cartList .row {
      align-items: center;
      margin: 4px 0;
    }

    #pos #cartList .row>div:first-child {
      font-weight: 600;
    }

    #pos #cartList .row>div:last-child {
      font-variant-numeric: tabular-nums;
    }

    /* Quantity +/- and Remove: keep them light so orange CTAs stand out */
    #pos .cell-actions .btn {
      background: #fff;
      border-color: #cbd5e1;
      color: #334155;
      padding: 8px 10px;
      transition: background .12s ease, border-color .12s ease;
    }

    #pos .cell-actions .btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    /* Subtotal row: emphasize the number */
    #pos #subtotal {
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    /* Checkout CTA: orange with glow on hover (matches Add buttons) */
    #pos .btn.primary {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 6px 18px rgba(250, 115, 5, .18);
      transition: transform .06s ease, filter .12s ease, box-shadow .16s ease;
    }

    #pos .btn.primary:hover {
      filter: brightness(.97);
      box-shadow: 0 10px 24px rgba(250, 115, 5, .24);
    }

    #pos .btn.primary:active {
      transform: translateY(1px) scale(.995);
    }

    #pos .btn.primary:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(250, 115, 5, .28);
    }

    /* Mini report block inside right column: make numbers crisper */
    #pos #miniReport .row b {
      font-variant-numeric: tabular-nums;
      letter-spacing: .2px;
    }

    /* POS search input: subtle focus ring to match brand */
    #pos #search.input:focus {
      outline: none;
      border-color: var(--brand-alt);
      box-shadow: 0 0 0 3px rgba(171, 226, 244, .35);
    }

    /* Load more button: keep it secondary */
    #pos #loadMoreBtn.btn {
      border-color: #cbd5e1;
    }

    #pos #loadMoreBtn.btn:hover {
      background: #f8fafc;
    }

    #pos .two-col> :first-child .panel {
      background:
        radial-gradient(1200px 300px at 20% 0%, rgba(171, 226, 244, .12), transparent 60%),
        var(--panel);
    }

    #pos #cartList p.muted {
      padding: 8px 10px;
      background: #f8fafc;
      border: 1px dashed #e2e8f0;
      border-radius: 10px;
    }

    /* ==== Product card thumbs + low-stock ribbon ==== */
    .pos-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Thumb wrapper */
    .product-thumb {
      width: 100%;
      aspect-ratio: 4 / 3;
      border-radius: 10px;
      overflow: hidden;
      background: #f1f5f9;
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* SVG/letter fallback gets this class */
    .thumb-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 28px;
      letter-spacing: .5px;
      color: #fff;
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-alt));
    }

    /* Low stock ribbon */
    .ribbon-low {
      position: absolute;
      top: 10px;
      left: -8px;
      background: #fff7ed;
      color: #b45309;
      border: 1px solid #fed7aa;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
      transform: rotate(-6deg);
    }

    /* Make the Add button span full width nicely */
    #pos .grid .card .btn.add-btn {
      width: 100%;
    }

    /* POS Cart – tidy colorful blocks */
    #pos .panel .cart-block {
      border-radius: 12px;
      padding: 14px 12px;
      margin: 14px 0;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
      border: 1px solid var(--line);
    }

    /* Block 1: Cart summary */
    #pos .panel .cart-block:nth-of-type(1) {
      background: #fff;
      border-top: 4px solid var(--brand-primary);
      /* teal stripe */
    }

    /* Block 2: Cashier */
    #pos .panel .cart-block:nth-of-type(2) {
      background: rgba(171, 226, 244, 0.15);
      /* soft aqua wash */
      border: 1px solid rgba(171, 226, 244, 0.6);
    }

    /* Block 3: Customer & Checkout */
    #pos .panel .cart-block:nth-of-type(3) {
      background: rgba(250, 115, 5, 0.06);
      /* soft orange wash */
      border: 1px solid rgba(250, 115, 5, 0.4);
    }

    /* Block 4: Notify */
    #pos .panel .cart-block:nth-of-type(4) {
      background: #fff;
      border: 2px dashed var(--line);
      box-shadow: none;
      /* keep flat */
    }

    /* Section separator inside block 1 */
    #pos .panel .cart-sep {
      border: 0;
      border-top: 1px dashed #e2e8f0;
      margin: 10px 0;
    }

    /* Action row inside Cashier block */
    #pos .panel .cart-actions {
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    /* Checkout CTA full width */
    #pos .panel .cart-cta {
      width: 100%;
      margin-top: 10px;
    }

    /* Notify button full width */
    #pos .panel .cart-notify {
      width: 100%;
    }

    /* Empty cart message */
    #pos #cartList p.muted {
      background: #f9fafb;
      border: 1px dashed #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      margin: 0;
    }

    /* Subtotal highlight */
    #pos #subtotal {
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--brand-primary);
    }

    /* Only Cart header gets styled */
    #pos .panel .cart-head {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 3px solid var(--brand-primary);
    }

    #pos .panel .cart-head::before {
      content: "🛒";
      font-size: 1.2rem;
    }

    #pos .panel .cart-head.cart-reset {
      animation: cartPulse .42s ease-out;
    }

    @keyframes cartPulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.04);
      }

      100% {
        transform: scale(1);
      }
    }

    /* Product header styling */
    #pos .panel .product-head {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 3px solid var(--brand-primary);
      /* orange stripe for contrast */
    }

    #pos .panel .product-head::before {
      content: "📦";
      /* or "🛍️" if you prefer */
      font-size: 1.2rem;
    }

    /* Product search bar */
    .product-search {
      position: relative;
      margin-bottom: 12px;
    }

    .product-search input {
      width: 100%;
      padding: 10px 36px 10px 36px;
      /* left for 🔍, right for × */
      border: 1px solid var(--line);
      border-radius: 999px;
      /* pill shape */
      font-size: 14px;
      background: #fff;
      transition: border-color .2s, box-shadow .2s;
    }

    .product-search input:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(93, 159, 150, .25);
    }

    .product-search::before {
      content: "🔍";
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
      opacity: 0.6;
      pointer-events: none;
    }

    .product-search .clear-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      color: #64748b;
      /* muted */
      opacity: 0.6;
      transition: opacity .2s;
    }

    .product-search .clear-btn:hover {
      opacity: 1;
      color: var(--brand-red);
      /* red on hover */
    }


    /* Product count (Showing X of Y) */
    .helper {
      font-size: 13px;
      color: var(--muted);
      margin: 6px 0 12px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .helper #productCount {
      font-size: inherit;
    }

    .helper #productCount strong {
      color: var(--brand-primary);
      /* teal highlight */
      font-weight: 600;
    }

    .helper #productCount small {
      font-size: 12px;
      color: var(--brand-accent);
      /* orange accent */
    }

    /* Product count (Showing X of Y) — styled */
    .helper #productCount strong {
      color: var(--brand-primary);
      font-weight: 600;
    }

    .helper #productCount small {
      font-size: 12px;
      color: var(--brand-accent);
    }

    /* ===== Admin Login — Figma-style ===== */
    #adminLoginModal {
      position: fixed;
      inset: 0;
      display: none;
      /* toggled by JS */
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, .50);
      /* slate overlay */
      backdrop-filter: blur(2px);
      z-index: 9998;
    }

    /* Login card */
    .login-card {
      width: 100%;
      max-width: 420px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(15, 23, 42, .25);
      overflow: hidden;
    }

    /* Header strip */
    .login-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 16px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
    }

    .login-head .logo-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      opacity: .9;
    }

    .login-head .title {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      letter-spacing: .2px;
    }

    /* Body */
    .login-body {
      padding: 14px 16px 16px;
    }

    .login-body .muted {
      color: #64748b;
      margin: 6px 0 10px;
    }

    /* Input groups with icon */
    .input-group {
      position: relative;
      margin: 10px 0;
    }

    .input-group .leading {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      opacity: .6;
      font-size: 16px;
    }

    .input-group input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      /* leave room for icon */
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      transition: border-color .2s, box-shadow .2s;
    }

    .input-group input:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(93, 159, 150, .25);
    }

    /* Show/hide password button */
    .reveal-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 12px;
      color: #64748b;
      padding: 4px 6px;
      border-radius: 6px;
    }

    .reveal-btn:hover {
      color: var(--brand-primary);
      background: #f1f5f9;
    }

    /* Actions */
    .login-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .login-actions .btn {
      padding: 10px 12px;
      border-radius: 10px;
    }

    .login-actions .btn.primary {
      background: var(--st-primary);
      background-image: none;
      color: #fff;
      border: 1px solid var(--st-primary);
    }

    .login-actions .btn.primary:hover {
      background: var(--st-primary-hover);
      background-image: none;
      border-color: var(--st-primary-hover);
      color: #fff;
    }

    .login-actions .btn.secondary {
      background: #fff;
      color: #334155;
      border: 1px solid var(--line);
    }

    .login-actions .btn.secondary:hover {
      background: #f8fafc;
    }

    /* Footer hints (remember/forgot) */
    .login-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 6px 0 4px;
      gap: 8px;
      flex-wrap: wrap;
    }

    .login-meta a {
      color: var(--brand-primary);
      text-decoration: none;
      font-size: 13px;
    }

    .login-meta a:hover {
      text-decoration: underline;
    }

    /* Error / hint text */
    #adminLoginHint {
      margin-top: 8px;
      font-size: 13px;
      color: var(--brand-red);
    }

    /* ===== Admin PIN Modal ===== */
    #adminPinModal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, .50);
      backdrop-filter: blur(2px);
      z-index: 9999;
    }

    #adminPinHint {
      margin-top: 8px;
      font-size: 13px;
      color: var(--brand-red);
    }

    /* ===== Admin Idle Warning Modal ===== */
	    #adminIdleModal {
	      position: fixed;
	      inset: 0;
	      display: none;
	      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, .50);
      backdrop-filter: blur(2px);
	      z-index: 9999;
	    }

	    .tenant-idle-modal {
	      position: fixed;
	      inset: 0;
	      display: none;
	      align-items: center;
	      justify-content: center;
	      padding: 16px;
	      background: rgba(15, 23, 42, .50);
	      backdrop-filter: blur(2px);
	      z-index: 1000000;
	    }

	    .tenant-idle-modal.show {
	      display: flex;
	    }

	    body.tenant-idle-warning-active {
	      overflow: hidden;
	    }

	    .tenant-idle-card {
	      margin: 0 12px;
	    }

	    #tenantIdleHint {
	      margin-top: 8px;
	      font-size: 13px;
	      color: #334155;
	    }
	
	    #adminIdleHint {
	      margin-top: 8px;
      font-size: 13px;
      color: #334155;
    }

    /* Small screens */
    @media (max-width:480px) {
      .login-card {
        margin: 0 12px;
      }
    }

    /* ===== Logout Button ===== */
    /* ===== Logout Button (Ghost style) ===== */
    /* Ghost logout (for dark/colored headers) — already added earlier */
    .btn.logout {
      background: transparent;
      border: 1px solid rgba(255, 255, 255, .6);
      color: #fff;
      font-weight: 600;
      border-radius: 8px;
      padding: 8px 14px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color .2s, border-color .2s, background .2s;
    }

    .btn.logout:hover {
      border-color: var(--brand-accent);
      color: var(--brand-accent);
      background: rgba(250, 115, 5, .08);
    }

    .btn.logout .ico {
      font-size: 16px;
      line-height: 1;
    }

    /* NEW: Light-header variant (on white/grey headers) */
    .btn.logout.on-light {
      border-color: var(--brand-primary);
      /* teal outline */
      color: var(--brand-primary);
      /* teal text */
    }

    .btn.logout.on-light:hover {
      border-color: var(--brand-accent);
      /* orange on hover */
      color: var(--brand-accent);
      background: rgba(250, 115, 5, .08);
    }

    /* Add breathing room between Logout/header and the Admin cards */
    .admin-hub-grid {
      margin-top: 30px;
      /* adjust: 24–32px is common in Figma systems */
    }

    /* ===== Admin Hub — uniform tile sizes ===== */

    /* Make every card the same height across the grid */
    .admin-card {
      /* pick a height that fits your title + one short line */
      min-height: 168px;
      /* 👈 adjust to 160–184px if you want */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      /* keep top and bottom nicely spaced */
    }

    /* Ensure the header row inside the card has consistent height */
    .admin-card .card-top {
      min-height: 40px;
    }

    /* Clamp text so it never stretches the tile */
    .admin-card h4 {
      margin: 0;
      font-weight: 700;
      color: #1e293b;
      font-size: 1rem;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .admin-card .muted {
      color: var(--muted);
      font-size: 13px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* allow 2 lines max */
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: 34px;
      /* reserve space for up to 2 lines */
    }

    /* Keep tiles tidy on smaller breakpoints (a touch shorter is fine) */
    @media (max-width:1100px) {
      .admin-card {
        min-height: 160px;
      }
    }

    @media (max-width:800px) {
      .admin-card {
        min-height: 152px;
      }
    }

    /* Normalize icon box so emojis/SVGs don't push height */
    .admin-card .card-ico {
      width: 36px;
      height: 36px;
      min-width: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Kill accidental extra bottom margins in cards */
    .admin-card>*:last-child {
      margin-bottom: 0;
    }

    .refill-items {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 6px;
      max-height: 240px;
      overflow-y: auto;
      padding-right: 4px;
    }

    .refill-items::-webkit-scrollbar {
      width: 6px;
    }

    .refill-items::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, .15);
      border-radius: 999px;
    }

    .refill-items::-webkit-scrollbar-track {
      background: transparent;
    }

    .refill-item {
      display: grid;
      grid-template-columns: 24px 1fr 120px 110px;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 14px;
      background: rgba(255, 255, 255, .75);
    }

    .refill-name {
      font-weight: 700;
      font-size: 15px;
    }

    .refill-stock {
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: rgba(0, 0, 0, .65);
      font-size: 15px;
    }

    .refill-pill {
      justify-self: end;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
    }

    .refill-check {
      width: 16px;
      height: 16px;
    }

    .refill-pill-low {
      background: rgba(255, 193, 7, .18);
      color: #8a5a00;
      border: 1px solid rgba(255, 193, 7, .35);
    }

    .refill-pill-critical {
      background: rgba(220, 53, 69, .15);
      color: #8b1e2d;
      border: 1px solid rgba(220, 53, 69, .30);
    }

    /* Supplier card wrapper inside refill list */
    #admin-refillList .card {
      padding: 14px;
      border-radius: 16px;
    }

    /* Supplier header row */
    .refill-supplier-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 0, 0, .06);
    }

    .refill-supplier-email {
      height: auto;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .refill-supplier-email-line {
      font-size: 16px;
      font-weight: 800;
      line-height: 1.1;
    }

    .refill-supplier-wa-line {
      font-size: 12px;
      color: rgba(0, 0, 0, .60);
      line-height: 1.1;
    }

    .inv-supplier {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .inv-supplier-email {
      font-size: 14px;
    }

    .inv-supplier-wa {
      font-size: 11px;
      color: rgba(0, 0, 0, .55);
    }

    /* Column labels */
    .refill-cols {
      display: grid;
      grid-template-columns: 24px 1fr 120px 110px;
      gap: 10px;
      align-items: center;
      padding: 6px 10px;
      margin-top: 4px;
      color: rgba(0, 0, 0, .70);
      font-size: 14px;
      font-weight: 900;
    }

    .refill-cols-stock {
      text-align: right;
    }

    .refill-cols-status {
      text-align: right;
    }

    @media (max-width: 640px) {
      .refill-cols {
        display: none;
      }

      .refill-item {
        grid-template-columns: 1fr;
      }

      .refill-stock {
        text-align: left;
      }

      .refill-pill {
        justify-self: start;
      }
    }

    .refill-suggestion {
      margin-top: 4px;
      font-size: 12px;
      color: #475569;
      line-height: 1.35;
    }

    .refill-suggestion small {
      display: block;
      color: var(--muted);
      margin-top: 2px;
    }


    /* ===== Refill Reminder Modal ===== */
    .refill-reminder-modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, .45);
      z-index: 10020;
      padding: 16px;
    }

    .refill-reminder-modal.show {
      display: flex;
    }

    .refill-reminder-card {
      position: relative;
      width: min(420px, 100%);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
      text-align: center;
    }

    .refill-reminder-close {
      position: absolute;
      top: 10px;
      right: 12px;
      border: none;
      background: transparent;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      color: #64748b;
    }

    .refill-reminder-icon {
      font-size: 34px;
      margin-bottom: 8px;
    }

    .refill-reminder-card h3 {
      margin: 0 0 8px;
    }

    .refill-reminder-card p {
      margin: 0;
      color: #334155;
      line-height: 1.45;
    }

    .refill-reminder-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }

    @media (max-width: 480px) {
      .refill-reminder-actions .btn {
        width: 100%;
      }
    }

    /* ===== Inventory (Prototype) — polished styles ===== */
    #admin-inventory .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
    }

    #admin-inventory .panel>h3 {
      margin: 0;
      padding: 10px 12px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, .06);
      font-weight: 700;
    }

    /* Inner "card" is the form body */
    #admin-inventory .card {
      border: 0;
      border-radius: 0;
      padding: 14px 14px 16px;
      background: #fff;
    }

    /* Grid for fields (2 cols desktop → 1 col mobile) */
    .inv-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    @media (max-width: 800px) {
      .inv-form-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Field block */
    .inv-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .inv-field label {
      font-size: .85rem;
      font-weight: 600;
      color: #0f172a;
    }

    .inv-field .hint {
      font-size: .75rem;
      color: var(--muted);
    }

    /* Inputs with brand focus ring */
    #admin-inventory .input,
    #admin-inventory select,
    #admin-inventory textarea {
      background: #fff;
      border: 1px solid #d7e0e7;
      border-radius: 10px;
      padding: 10px 12px;
      transition: border-color .15s, box-shadow .15s;
    }

    #admin-inventory .input:focus,
    #admin-inventory select:focus,
    #admin-inventory textarea:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
    }

    /* Upload area */
    .inv-upload {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 10px;
      border: 1px dashed #d7e0e7;
      border-radius: 10px;
      background: #fafcff;
    }

    /* Preview tiles */
    #pImgPreview {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    #pImgPreview .thumb {
      width: 72px;
      height: 72px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      object-fit: cover;
    }

    /* Footer row */
    .inv-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      margin-top: 8px;
    }

    /* Primary button in your accent */
    #admin-inventory .btn.primary {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
    }

    #admin-inventory .btn.primary:hover {
      filter: brightness(0.95);
    }

    /* Small “optional” badge */
    .badge-optional {
      display: inline-block;
      padding: 2px 8px;
      font-size: .72rem;
      border-radius: 999px;
      background: #fff3eb;
      color: #c2410c;
      border: 1px solid #ffd9bf;
    }

    /* ===== Inventory Table — polished visuals ===== */
    #admin-inventoryTable .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
    }

    #admin-inventoryTable .panel>h3 {
      margin: 0;
      padding: 10px 12px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-weight: 700;
      border-bottom: 1px solid rgba(0, 0, 0, .06);
    }




    /* Toolbar (search + pill) */
    #admin-inventoryTable .row:first-of-type {
      margin: 12px 0 6px;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* Search input with icon & brand focus */
    #admin-inventoryTable .input.search {
      position: relative;
      padding-left: 36px;
      /* room for icon */
      background:
        url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.8 14.8l3.2 3.2' stroke='%2364758b' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='9' r='5.6' stroke='%2364758b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat 10px center / 16px 16px;
      border: 1px solid #d7e0e7;
      border-radius: 10px;
    }

    #admin-inventoryTable .input.search:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
    }

    /* Pill style for “Low stock only” */
    #admin-inventoryTable .pill {
      border-radius: 999px;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      background: #fff;
      cursor: pointer;
    }

    #admin-inventoryTable #invLowBtn.toggled {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
    }

    /* Helper line (count) */
    #admin-inventoryTable .helper {
      margin-top: 4px;
      font-size: 13px;
      color: var(--muted);
    }

    /* Table container */
    #invTable {
      margin-top: 8px;
      border: 1px solid #eef2f6;
      border-radius: 10px;
      overflow: hidden;
    }

    /* Header row (your renderInventory creates a bold first row) */
    #invTable>.row:first-child {
      background: #f2fbf9;
      /* very light brand tint */
      font-weight: 700 !important;
      padding: 8px 10px;
    }

    #invTable>.row {
      padding: 8px 10px;
      border-bottom: 1px solid #f1f5f9;
      align-items: center;
    }

    #invTable>.row:last-child {
      border-bottom: 0;
    }

    /* Hover + zebra for readability */
    #invTable>.row:nth-child(odd):not(:first-child) {
      background: #fcfefe;
    }

    #invTable>.row:hover {
      background: #f9fdfc;
    }

    /* “Low” badge — uses .tag.low (see tiny JS tweak below) */
    .tag.low {
      background: rgba(250, 115, 5, .10);
      /* brand-accent tint */
      border-color: rgba(250, 115, 5, .35);
      color: #B45309;
      /* deeper orange/brown text */
    }

    /* Delete buttons look subtle in table */
    #invTable .btn {
      padding: 6px 10px;
    }

    #invTable .btn:hover {
      background: #f8fafc;
    }







    /* ==== INVENTORY TABLE: rock-solid alignment (fixed track sizes) ==== */
    #invTable {
      --col-qty: 64px;
      --col-low: 64px;
      /* Qty column width */
      --col-money: 120px;
      /* Cost / Price / Margin widths */
      --col-actions: 92px;
      /* Delete button column */
    }

    #invTable>.row {
      display: grid !important;
      /* beat global .row flex */
      justify-content: initial !important;
      /* kill space-between */
      align-items: center;
      column-gap: 12px;
      padding: 10px 12px;

      /* Product | Qty | Cost | Price | Margin | Actions */
      grid-template-columns:
        1fr var(--col-qty) var(--col-low) var(--col-money) var(--col-money) var(--col-money) var(--col-actions);
    }

    /* Header look (first row) */
    #invTable>.row.inv-head {
      background: #eefaf7;
      font-weight: 700 !important;
      border-radius: 10px 10px 0 0;
    }

    /* Right-align numbers (header + body) */
    #invTable>.row>div:nth-child(2),
    #invTable>.row>div:nth-child(3),
    #invTable>.row>div:nth-child(4),
    #invTable>.row>div:nth-child(5),
    #invTable>.row>div:nth-child(6) {
      text-align: right;
      font-variant-numeric: tabular-nums;
      /* equal digit widths */
    }

    /* Product cell (rows only – not header) */
    #invTable>.row:not(.inv-head)>div:first-child {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
      /* allow ellipsis */
    }

    /* Optional, if you’re showing thumbnails in table */
    #invTable .product-thumb {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
    }

    #invTable .product-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Product name ellipsis so long names don’t push columns */
    #invTable .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Keep Delete at far-right */
    #invTable>.row>div:last-child {
      justify-self: end;
    }

    /* Subtle zebra + hover (does not affect widths) */
    #invTable>.row:not(.inv-head):nth-child(odd) {
      background: #fcfefe;
    }

    #invTable>.row:not(.inv-head):hover {
      background: #f4fbf8;
    }

    /* Small screens: slightly tighter money columns */
    @media (max-width: 720px) {
      #invTable {
        --col-money: 104px;
        --col-actions: 84px;
      }
    }

    /* ===== Low stock toggle pill ===== */
    #invLowBtn {
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 600;
      background: #fff;
      border: 1px solid #cbd5e1;
      color: var(--ink);
      cursor: pointer;
      transition: all .2s;
    }

    /* Hover state */
    #invLowBtn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    /* Active/toggled ON (use .toggled class in JS or aria-pressed) */
    #invLowBtn.toggled,
    #invLowBtn[aria-pressed="true"] {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
    }

    /* Header + banner dimensions (tweak if needed) */
    :root {
      --header-h: 60px;
      /* your header height (approx) */
      --offline-banner-h: 0px;
      /* JS will set to ~36px when banner is visible */
    }

    /* Make sure the header respects the variable (optional but nice) */
    header {
      min-height: var(--header-h);
    }

    /* Close bar: float below header + banner, and never cover header */
    .admin-closebar {
      position: static;
      top: auto;
      z-index: auto;
      margin-bottom: 16px;
      /* header uses z-index:1, so this sits below it */
      display: flex;
      justify-content: flex-end;
      align-items: center;

      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      padding: 8px 12px;
      margin-bottom: 28px;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
    }

    /* Add a little breathing room before the close bar in each detail view */
    .admin-section {
      padding-top: 12px;
    }

    /* ===== Inventory: Load more pill ===== */
    #invLoadMoreWrap {
      justify-content: center;
      /* center the button row */
      margin: 16px 0 4px !important;
    }

    #invLoadMoreWrap .btn {
      border-radius: 999px;
      /* pill */
      padding: 10px 16px;
      font-weight: 700;
      background: var(--brand-accent);
      /* your orange */
      border: 1px solid var(--brand-accent);
      color: #fff;
      box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
      transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease, background .2s ease;
    }

    #invLoadMoreWrap .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
      background: color-mix(in srgb, var(--brand-accent) 92%, white);
    }

    #invLoadMoreWrap .btn:active {
      transform: translateY(0);
      box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
    }

    #invLoadMoreWrap .btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 28%, transparent);
    }

    #invLoadMoreWrap .btn[disabled] {
      opacity: .55;
      cursor: not-allowed;
    }

    /* Optional: full-width on small screens */
    @media (max-width: 520px) {
      #invLoadMoreWrap .btn {
        width: 100%;
      }
    }

    /* Inventory search field */
    #invSearch {
      border: 1px solid var(--line);
      border-radius: 999px;
      /* pill shape */
      padding: 10px 14px 10px 38px;
      /* left space for icon */
      font-size: 14px;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat 12px center;
      background-size: 16px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: border-color .2s, box-shadow .2s;
    }

    #invSearch:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(93, 159, 150, 0.25);
      /* teal glow */
    }

    /* Inventory search field (stronger selector so it beats .input) */
    #admin-inventoryTable #invSearch {
      border: 1px solid var(--line) !important;
      border-radius: 999px !important;
      /* pill */
      padding: 10px 14px 10px 38px !important;
      /* room for icon */
      font-size: 14px !important;
      background:
        #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.65' y1='16.65' x2='21' y2='21'/%3E%3C/svg%3E") no-repeat 12px center !important;
      background-size: 16px !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
      transition: border-color .2s, box-shadow .2s !important;
    }

    #admin-inventoryTable #invSearch:focus {
      outline: none !important;
      border-color: var(--brand-primary) !important;
      box-shadow: 0 0 0 3px rgba(93, 159, 150, .25) !important;
      /* teal glow */
    }

    /* Compact numeric cells in Inventory Table */
    #admin-inventoryTable .cell-num {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    #admin-inventoryTable .cell-num .inv-edit {
      width: 100px;
      /* fixed width for alignment */
      text-align: right;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      font-variant-numeric: tabular-nums;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
      transition: border-color .2s, box-shadow .2s;
    }

    #admin-inventoryTable .cell-num .inv-edit:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(93, 159, 150, .20);
    }

    /* Inventory Table mini thumbnail (doesn't affect product grid) */
    #admin-inventoryTable .mini-thumb {
      width: 34px;
      height: 34px;
      margin-right: 8px;
      border-radius: 6px;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      flex-shrink: 0;
    }

    #admin-inventoryTable .mini-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Fallback tile inside mini thumb */
    #admin-inventoryTable .mini-thumb .thumb-fallback,
    #admin-inventoryTable .thumb-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
      font-size: 12px;
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-alt));
    }

    /* ===== Inventory Table: fixed grid columns (header + rows align) ===== */
    #admin-inventoryTable .inv-head,
    #admin-inventoryTable .inv-row {
      display: grid;
      grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 1fr 1fr 1fr 0.9fr;
      /* Product | Supplier | Qty | LowStock | Cost | Price | Margin | Actions */
      gap: 12px;
      align-items: center;
    }

    #admin-inventoryTable .inv-head {
      font-weight: 700;
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
      color: #1e293b;
    }

    #admin-inventoryTable .inv-row {
      padding: 8px 0;
      border-bottom: 1px solid var(--line);
    }

    /* Product cell: keep thumb + name inline */
    #admin-inventoryTable .inv-product {
      display: flex;
      align-items: center;
      min-width: 0;
      /* allow name to truncate */
    }

    #admin-inventoryTable .inv-product .name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #admin-inventoryTable .mini-thumb .thumb-fallback {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #fff;
      font-size: 12px;
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-alt));
    }

    /* Numeric cells */
    #admin-inventoryTable .cell-num {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-variant-numeric: tabular-nums;
    }

    /* Inputs inside numeric cells */
    #admin-inventoryTable .inv-edit {
      width: 100%;
      /* fills the column track (e.g. 0.8fr) */
      max-width: 110px;
      /* keeps them neat and aligned */
      text-align: right;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
      transition: border-color .2s, box-shadow .2s;
    }

    #admin-inventoryTable .inv-edit:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(93, 159, 150, .20);
    }

    /* Actions column (right aligned by default via grid gap) */
    #admin-inventoryTable .inv-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    /* Make numeric headers align visually with right-aligned inputs */
    #admin-inventoryTable .inv-head .num {
      justify-self: end;
    }

    /* Normalize number cells in Inventory Table */
    #admin-inventoryTable .cell-num input,
    #admin-inventoryTable .cell-num span {
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      line-height: 1.4;
      font-weight: 500;
      color: #0f172a;
    }

    /* INVENTORY TABLE — header + rows share the same grid */
    #admin-inventoryTable .inv-head,
    #admin-inventoryTable .inv-row {
      display: grid;
      grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 1fr 1fr 1fr 0.9fr;
      /* Product | Supplier | Qty | LowStock | Cost | Price | Margin | Actions */
      gap: 12px;
      align-items: center;
    }

    /* Header styling */
    #admin-inventoryTable .inv-head {
      padding: 10px 12px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      border-radius: 8px 8px 0 0;
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    #admin-inventoryTable .inv-head .num {
      justify-self: end;
      /* align numeric headers to right edge of their tracks */
    }

    /* Data rows */
    #admin-inventoryTable .inv-row {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    #admin-inventoryTable .inv-row:last-child {
      border-bottom: 0;
    }

    /* Product cell (thumb + name) */
    #admin-inventoryTable .inv-row .inv-product {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #admin-inventoryTable .inv-row .mini-thumb {
      width: 34px;
      height: 34px;
      border-radius: 6px;
      overflow: hidden;
      flex: 0 0 34px;
      border: 1px solid #e2e8f0;
      background: #eef2ff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #admin-inventoryTable .inv-row .mini-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Numeric cells (Qty / Cost / Price / Margin) — right aligned */
    #admin-inventoryTable .inv-row .cell-num {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    #admin-inventoryTable .inv-row .inv-edit {
      width: 100%;
      text-align: right;
      padding: 6px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 500;
      color: var(--ink);
      background: #fff;
    }

    /* Margin as plain text, but visually harmonized with inputs */
    #admin-inventoryTable .inv-row .cell-num .num-text {
      display: inline-block;
      min-width: 70px;
      text-align: right;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 500;
      color: var(--ink);
      padding: 6px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f9fafb;
    }

    /* Actions cell */
    #admin-inventoryTable .inv-row .inv-actions {
      display: flex;
      justify-content: flex-start;
      gap: 8px;
    }

    /* Low stock tag highlight */
    #admin-inventoryTable .tag.low {
      background: rgba(250, 115, 5, .12);
      border-color: rgba(250, 115, 5, .35);
      color: var(--brand-accent);
      margin-left: 6px;
      font-weight: 600;
    }


    /* =========================
   SALES TABLE (Admin)
   ========================= */

    #admin-salesTable .panel {
      max-width: 100%;
      overflow-x: auto;
      overflow-y: visible;
    }

    #salesTableBox {
      width: max-content;
      min-width: 100%;
    }

    #salesTableBox .st-head,
    #salesTableBox .st-row {
      min-width: 1300px;
    }

    /* Filters row: pills + search */
    #admin-salesTable .filters .pill {
      border-radius: 999px;
      padding: 6px 12px;
      border: 1px solid var(--brand-primary);
      color: var(--brand-primary);
      background: #fff;
      transition: background .2s, color .2s, border-color .2s;
    }

    #admin-salesTable .filters .pill:hover {
      background: rgba(93, 159, 150, .08);
    }

    #admin-salesTable .filters .pill.active {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
    }

    /* Sales search input */
    /* Sales search input */
    #admin-salesTable #salesSearch.input {
      border-color: var(--line);
      border-radius: 20px;
      background: #fff;
      padding: 10px 12px 10px 38px;
      background-image:
        linear-gradient(transparent, transparent),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="%2364758b"><path d="M21 20l-5.197-5.197A7.5 7.5 0 1016.5 17L21 21zM10.5 16a5.5 5.5 0 110-11 5.5 5.5 0 010 11z"></path></svg>');
      background-repeat: no-repeat;
      background-position: 10px center;

      /* ensure typed text is normal, not bold */
      font-weight: 400;
    }

    #admin-salesTable #salesSearch.input:focus {
      outline: 0;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(93, 159, 150, 2);
    }

    /* lighter placeholder for modern browsers */
    #admin-salesTable #salesSearch::placeholder {
      font-weight: 300;
      /* lighter than input text */
      color: #94a3b8;
      /* softer slate */
      opacity: 1;
      /* show color on Safari too */
    }

    /* Safari/WebKit */
    #admin-salesTable #salesSearch::-webkit-input-placeholder {
      font-weight: 300;
      color: #94a3b8;
    }

    /* Header + rows share a grid so columns line up perfectly */
    #admin-salesTable .st-head,
    #admin-salesTable .st-row {
      display: grid;
      grid-template-columns:
        1.3fr
        /* Sales ID */
        1.6fr
        /* Date/Time */
        2fr
        /* Item */
        0.8fr
        /* Qty */
        1.1fr
        /* Total */
        1.1fr
        /* Gross Profit */
        1fr
        /* Payment */
        1.2fr
        /* Sold by */
        1.4fr;
      /* Actions */
      gap: 12px;
      align-items: center;
    }

    /* Header bar */
    #admin-salesTable .st-head {
      margin-top: 8px;
      padding: 10px 12px;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .4px;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
    }

    /* Data rows */
    #admin-salesTable .st-row {
      padding: 10px 12px;
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    #admin-salesTable .st-row:last-child {
      border-bottom: 0;
    }

    /* Numeric alignments */
    #admin-salesTable .st-qty,
    #admin-salesTable .st-total,
    #admin-salesTable .st-gp {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* Amount chips to make totals readable */
    #admin-salesTable .chip {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 8px;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
    }

    #admin-salesTable .chip.total {
      background: rgba(250, 115, 5, .08);
      border-color: rgba(250, 115, 5, .35);
      color: var(--brand-accent);
      font-weight: 600;
    }

    #admin-salesTable .chip.gp {
      background: rgba(16, 185, 129, .08);
      border-color: rgba(16, 185, 129, .3);
      color: #0f766e;
      font-weight: 600;
    }

    /* Refunded / struck rows (your logic sets l.struck) */
    #admin-salesTable .st-row.struck {
      color: #6b7280;
      background: #fafafa;
      position: relative;
    }

    #admin-salesTable .st-row.struck .st-item,
    #admin-salesTable .st-row.struck .st-id {
      text-decoration: line-through;
      opacity: .8;
    }

    /* Sold-by column */
    #admin-salesTable .st-soldby {
      color: #334155;
      font-weight: 600;
    }

    /* Actions */
    #admin-salesTable .st-actions .btn {
      padding: 6px 10px;
      border-radius: 8px;
    }

    #admin-salesTable .st-actions .btn[disabled] {
      opacity: .5;
      cursor: not-allowed;
    }

    /* Load more button row */
    #admin-salesTable #salesLoadMoreWrap .btn {
      border-radius: 999px;
      border-color: var(--brand-primary);
      color: var(--brand-primary);
      background: #fff;
    }

    #admin-salesTable #salesLoadMoreWrap .btn:hover {
      background: rgba(93, 159, 150, .08);
    }

    /* Tiny code tag look for ID */
    #admin-salesTable code {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 2px 6px;
      border-radius: 6px;
    }


    /* Sales Table filter layout */
    .sales-filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
      /* space below each filter group */
    }

    /* Search field gets its own spacing */
    .sales-search {
      margin: 20px 0;
      /* space above and below */
    }

    /* Make date inputs wrap nicely on smaller screens */
    @media (max-width: 640px) {
      .sales-filters input[type="date"] {
        flex: 1 1 140px;
        min-width: 140px;
      }
    }

    /* Sales filters layout + alignment */
    .sales-filters {
      display: flex;
      align-items: center;
      /* aligns pills, labels, and inputs on the same baseline */
      flex-wrap: wrap;
      gap: 10px 12px;
      /* vertical then horizontal gap */
      margin-bottom: 16px;
      /* space below each group */
    }

    /* Labels: light, consistent spacing */
    .filters-label {
      color: var(--muted);
      font-weight: 600;
      font-size: 0.95rem;
      margin-left: 4px;
    }

    /* Date inputs match pill height/shape a bit better */
    .sales-filters input[type="date"] {
      height: 36px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
    }

    /* On small screens, put the label on its own line for cleaner wrap */
    @media (max-width: 640px) {
      .sales-filters .filters-label {
        flex-basis: 100%;
        margin: 6px 0 0;
      }
    }

    /* Sales table grid */
    .sales-head,
    .sales-row {
      display: grid;
      grid-template-columns: 1.3fr 1.6fr 2fr 0.6fr 1fr 1fr 1fr 1.2fr 1.4fr;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
    }

    .sales-head {
      font-weight: 700;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      border-radius: 8px 8px 0 0;
    }

    .sales-row {
      border-bottom: 1px solid var(--line);
      background: #fff;
    }

    .sales-row:nth-child(even) {
      background: #f9fafb;
    }

    /* Numbers styled */
    .sales-row .num {
      font-family: monospace;
      text-align: right;
    }

    .sales-row .total {
      color: var(--brand-accent);
      font-weight: 600;
    }

    .sales-row .gross {
      color: var(--brand-primary);
      font-weight: 600;
    }

    /* Align buttons */
    .sales-row .cell-actions {
      display: flex;
      gap: 6px;
    }

    /* === SALES TABLE: perfect header/value alignment === */
    #salesTableBox .st-head,
    #salesTableBox .st-row {
      display: grid;
      /* Same columns for header and rows (adjust % if you like) */
      grid-template-columns:
        16%
        /* Sales ID */
        19%
        /* Date/Time */
        22%
        /* Item */
        6%
        /* Qty */
        12%
        /* Total */
        12%
        /* Gross Profit */
        8%
        /* Payment */
        8%
        /* Sold by */
        7%;
      /* Actions */
      align-items: center;
      column-gap: 12px;
    }

    /* Header look (optional, doesn’t affect alignment) */
    #salesTableBox .st-head {
      font-weight: 700;
      background: linear-gradient(90deg, var(--brand-primary, #5D9F96), var(--brand-alt, #ABE2F4));
      color: #fff;
      padding: 10px 12px;
      border-radius: 8px;
      margin-bottom: 6px;
    }

    #salesTableBox .st-head>div {
      white-space: nowrap;
    }

    /* Row styling (keeps your current visuals neutral) */
    #salesTableBox .st-row {
      padding: 8px 12px;
      border-bottom: 1px solid var(--line, #e2e8f0);
    }

    /* Right-align numeric columns so labels match values */
    #salesTableBox .st-row .st-qty,
    #salesTableBox .st-row .st-total,
    #salesTableBox .st-row .st-gp {
      text-align: right;
    }

    /* Also right-align numeric headers to match their columns */
    #salesTableBox .st-head>div:nth-child(4),
    /* Qty */
    #salesTableBox .st-head>div:nth-child(5),
    /* Total */
    #salesTableBox .st-head>div:nth-child(6)

    /* Gross Profit */
      {
      text-align: right;
    }

    /* Keep text tidy */
    #salesTableBox .st-row>div {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #salesTableBox .st-item {
      white-space: nowrap;
    }

    /* Make chips not push layout around */
    #salesTableBox .chip {
      display: inline-block;
    }

    #salesTableBox .st-actions {
      text-align: right;
    }

    /* If any older flex/grid rules were added earlier, neutralize them here */
    #salesTableBox {
      display: block;
    }


    /* Same grid for header + rows, but give Actions proper width */
    #salesTableBox .st-head,
    #salesTableBox .st-row {
      display: grid;
      grid-template-columns:
        15%
        /* Sales ID */
        18%
        /* Date/Time */
        1fr
        /* Item (flexes) */
        6%
        /* Qty */
        12%
        /* Total */
        12%
        /* Gross Profit */
        8%
        /* Payment */
        9%
        /* Sold by */
        14%;
      /* Actions (enough for two buttons) */
      align-items: center;
      column-gap: 12px;
    }

    /* Right align numeric headers */
    #salesTableBox .st-head>div:nth-child(4),
    /* Qty */
    #salesTableBox .st-head>div:nth-child(5),
    /* Total */
    #salesTableBox .st-head>div:nth-child(6)

    /* Gross Profit */
      {
      text-align: right;
    }

    /* Right align numeric cells */
    #salesTableBox .st-row .st-qty,
    #salesTableBox .st-row .st-total,
    #salesTableBox .st-row .st-gp {
      text-align: right;
    }

    /* Actions: keep both buttons visible and aligned right */
    #salesTableBox .st-actions {
      justify-self: end;
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
      /* don’t wrap unless screen is tiny */
      overflow: visible;
      /* ensure no clipping */
    }

    /* Optional: on narrow screens, allow wrap so nothing clips */
    @media (max-width: 900px) {
      #salesTableBox .st-actions {
        flex-wrap: wrap;
      }
    }

    /* ===== Sales table action buttons (View / Refund) ===== */
    /* Base: compact, rounded “pill”, subtle shadow on focus */
    #salesTableBox .st-actions .btn {
      padding: 7px 12px;
      border-radius: 999px;
      font-weight: 600;
      line-height: 1;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      transition: background .18s ease, border-color .18s ease, transform .04s ease;
    }

    /* View = secondary/teal outline */
    #salesTableBox .st-actions .btn:first-child {
      border-color: var(--brand-primary);
      color: var(--brand-primary);
      background: rgba(93, 159, 150, .06);
      /* subtle teal wash */
    }

    #salesTableBox .st-actions .btn:first-child:hover {
      background: rgba(93, 159, 150, .12);
    }

    #salesTableBox .st-actions .btn:first-child:active {
      transform: translateY(1px);
    }

    #salesTableBox .st-actions .btn:first-child:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(171, 226, 244, .65);
      /* aqua focus ring */
    }

    /* Refund = danger outline, soft red wash */
    #salesTableBox .st-actions .btn:last-child {
      border-color: var(--brand-red);
      color: var(--brand-red);
      background: rgba(217, 27, 36, .06);
    }

    #salesTableBox .st-actions .btn:last-child:hover {
      background: rgba(217, 27, 36, .12);
    }

    #salesTableBox .st-actions .btn:last-child:active {
      transform: translateY(1px);
    }

    #salesTableBox .st-actions .btn:last-child:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(217, 27, 36, .28);
    }

    /* Disabled state (if you ever disable them) */
    #salesTableBox .st-actions .btn[disabled] {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* Keep the two buttons tidy on one line */
    #salesTableBox .st-actions {
      display: flex;
      gap: 8px;
      justify-self: end;
    }

    #salesTableBox .st-head>div:last-child {
      text-align: center;
      justify-self: center;
    }

    #salesTableBox .st-actions {
      justify-self: center;
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: nowrap;
    }

    /* ================= Sales Summary ================= */
    #admin-salesReport .panel h3 {
      /* same gradient bar style as other sections */
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 800;
      letter-spacing: .2px;
    }

    /* Filter rows: more breathing room */
    #admin-salesReport .filters {
      gap: 10px;
      margin: 10px 0 12px !important;
    }

    #admin-salesReport .filters .pill {
      border-radius: 999px;
    }

    /* KPI cards (Revenue / Cost / Gross Profit) */
    #admin-salesReport .kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(180px, 1fr));
      gap: 12px;
      margin: 8px 0 14px;
    }

    @media (max-width: 800px) {
      #admin-salesReport .kpi-grid {
        grid-template-columns: 1fr;
      }
    }

    #admin-salesReport .kpi-card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
    }

    #admin-salesReport .kpi-label {
      font: 600 12px/1 'Inter', sans-serif;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .4px;
    }

    #admin-salesReport .kpi-value {
      margin-top: 6px;
      font: 800 26px/1.1 'Poppins', sans-serif;
      color: var(--ink);
    }

    #admin-salesReport .kpi-value.emph-profit {
      color: var(--brand-accent);
    }

    /* orange */
    #admin-salesReport .kpi-sub {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
    }

    /* Report table (grid) */
    #admin-salesReport .rep-table {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
    }

    #admin-salesReport .rep-head,
    #admin-salesReport .rep-row {
      display: grid;
      grid-template-columns: 2.2fr 1fr 1fr 1.2fr;
      /* Period | Revenue | Cost | Gross Profit */
      align-items: center;
      column-gap: 12px;
      padding: 10px 12px;
    }

    #admin-salesReport .rep-head {
      background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-alt) 100%);
      color: #fff;
      font-weight: 700;
    }

    #admin-salesReport .rep-row {
      background: #fff;
      border-top: 1px solid var(--line);
    }

    #admin-salesReport .rep-row:nth-child(even) {
      background: #fbfdfe;
    }

    #admin-salesReport .rep-row .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* Money chips */
    #admin-salesReport .chip {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      font-weight: 700;
    }

    #admin-salesReport .chip.rev {
      color: #b45309;
      background: rgba(250, 115, 5, .08);
      border-color: rgba(250, 115, 5, .25);
    }

    /* revenue = warm/orange wash */
    #admin-salesReport .chip.cost {
      color: #0f766e;
      background: rgba(171, 226, 244, .15);
      border-color: rgba(171, 226, 244, .35);
    }

    /* cost = aqua wash */
    #admin-salesReport .chip.gp {
      color: var(--brand-accent);
      background: rgba(250, 115, 5, .10);
      border-color: rgba(250, 115, 5, .35);
    }

    /* gross profit strong */

    /* Download button (if you have one) */
    #admin-salesReport .download-btn {
      margin-top: 10px;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--brand-primary);
      color: var(--brand-primary);
      background: rgba(93, 159, 150, .06);
      font-weight: 700;
      cursor: pointer;
    }

    #admin-salesReport .download-btn:hover {
      background: rgba(93, 159, 150, .12);
    }


    /* ===== Top Sellers (by Qty) ===== */
    .tops-head {
      display: grid;
      grid-template-columns: 1.6fr .6fr .8fr .9fr;
      /* Product | Qty | Revenue | Actions */
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 10px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-weight: 700;
      margin: 8px 0 6px;
    }

    .tops-head .num {
      text-align: right;
    }

    .tops-row {
      display: grid;
      grid-template-columns: 1.6fr .6fr .8fr .9fr;
      gap: 12px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      margin-bottom: 8px;
    }

    .tops-product {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .tops-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* rank + thumb reuse your existing mini-thumb system */
    .rank-badge {
      min-width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: .9rem;
      background: rgba(0, 0, 0, .06);
      border: 1px solid var(--line);
      margin-right: 6px;
    }

    .rank-1 {
      background: linear-gradient(135deg, #f59e0b, #fbbf24);
      color: #fff;
      border: none;
    }

    .rank-2 {
      background: linear-gradient(135deg, #94a3b8, #cbd5e1);
      color: #fff;
      border: none;
    }

    .rank-3 {
      background: linear-gradient(135deg, #b45309, #f59e0b);
      color: #fff;
      border: none;
    }

    /* chips for qty/revenue (reuse chip colors from sales if present) */
    .chip.qty {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
      background: rgba(250, 115, 5, .10);
      border: 1px solid rgba(250, 115, 5, .35);
    }

    .chip.rev {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-weight: 700;
      background: rgba(16, 185, 129, .10);
      border: 1px solid rgba(16, 185, 129, .35);
    }

    /* Load more button alignment under the list */
    #topLoadMoreWrap {
      justify-content: center;
    }

    /* Empty state */
    .tops-empty {
      background: #fff;
      border: 1px dashed var(--line);
      border-radius: 10px;
      padding: 14px;
      text-align: center;
      color: var(--muted);
    }

    /* ===== Section Title Bars (Inventory, Top Sellers, etc.) ===== */
    .admin-section h3 {
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      /* bolder */
      font-size: 1.35rem;
      /* slightly bigger */
      letter-spacing: 1.6px;
      padding: 12px 16px;
      margin: 0 0 16px 0;

      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      border-radius: 10px;

      /* Subtle shadow */
      box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
      ;
    }

    /* Force the gradient header ONLY for Sales Summary */
    #admin-salesReport h3.admin-title {
      display: block;
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      /* heavier as requested */
      font-size: 1.35rem;
      letter-spacing: .1.6px;

      color: #fff !important;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt)) !important;

      padding: 12px 16px;
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
      /* subtle shadow */
      margin: 0 0 16px 0;
    }


    #admin-incidents .panel {
      max-width: 100%;
      overflow-x: auto;
    }

    #admin-incidents .incident-table-wrap {
      margin-top: 12px;
      overflow-x: auto;
    }

    #admin-incidents .incident-table-wrap .row {
      min-width: 980px;
      align-items: center;
      gap: 12px;
    }

    #admin-incidents #incidentListCard {
      width: 100%;
      max-width: 100%;
    }

    #admin-incidents .two-col {
      grid-template-columns: 1fr;
    }

    #admin-incidents .cell-actions {
      flex-wrap: nowrap;
    }

    #admin-incidents .incident-table-wrap {
      margin-top: 12px;
      overflow-x: auto;
    }

    #admin-incidents .incident-table {
      min-width: 1180px;
    }

    #admin-incidents .incident-head,
    #admin-incidents .incident-row {
      display: grid;
      grid-template-columns: 140px 150px 160px 180px 140px 220px 140px 110px 180px 100px;
      gap: 12px;
      align-items: center;
    }

    #admin-incidents .incident-head {
      font-weight: 800;
      padding: 12px;
      border-bottom: 1px solid var(--line);
    }

    #admin-incidents .incident-row {
      padding: 12px;
      border-bottom: 1px solid var(--line);
    }

    #admin-incidents .incident-id,
    #admin-incidents .incident-customer,
    #admin-incidents .incident-contact,
    #admin-incidents .incident-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #admin-incidents .incident-status {
      min-width: 130px;
    }

    #admin-incidents .incident-actions {
      display: flex;
      gap: 8px;
      flex-wrap: nowrap;
    }

    #admin-incidents .incident-toolbar {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 14px 0 18px;
    }

    #admin-incidents .incident-toolbar .btn.primary {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
    }

    #admin-incidents #incidentListCard h4 {
      margin-top: 0;
      margin-bottom: 14px;
    }


    #admin-incidents .incident-filters {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 10px;
      margin: 0 0 14px;
    }

    @media (max-width: 760px) {
      #admin-incidents .incident-filters {
        grid-template-columns: 1fr;
      }
    }

    #admin-incidents {
      width: 100%;
      max-width: none;
    }

    #admin-incidents .panel {
      width: 100%;
      max-width: none;
    }

    #admin-incidents #incidentListCard,
    #admin-incidents .incident-table-wrap {
      width: 100%;
      max-width: 100%;
    }

    #admin-incidents .two-col {
      grid-template-columns: 1fr;
    }


    .incident-view-modal {
      position: fixed;
      inset: 0;
      z-index: 10050;
      background: rgba(15, 23, 42, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .incident-view-card {
      position: relative;
      width: min(760px, 96vw);
      max-height: 88vh;
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    }

    .incident-view-close {
      position: absolute;
      top: 12px;
      right: 14px;
      border: none;
      background: transparent;
      font-size: 26px;
      cursor: pointer;
    }

    .incident-view-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 14px 0;
    }

    .incident-note-item {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 8px;
      background: #f8fafc;
    }

    .incident-view-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
    }




    /* Form wrapper */
    .issue-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 12px;
    }

    /* Field grouping */
    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .field label {
      font-weight: 600;
      font-size: 0.95rem;
      color: #334155;
      /* dark slate */
    }

    /* Inputs */
    .input {
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 0.95rem;
      font-family: 'Poppins', sans-serif;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .input:focus {
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15);
      outline: none;
    }

    .textarea {
      min-height: 100px;
      resize: vertical;
    }

    /* Buttons */
    .btn.primary {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      padding: 10px 18px;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.2s;
    }

    .btn.primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    }

    .btn.secondary {
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 10px 18px;
      cursor: pointer;
      font-weight: 500;
    }

    .btn.secondary:hover {
      background: #e2e8f0;
    }

    /* Home page buttons (larger + more prominent) */
    .home-actions .btn {
      padding: 14px 28px;
      /* bigger padding */
      font-size: 1.1rem;
      /* larger text */
      border-radius: 999px;
      /* pill shape */
      border: 2px solid #fff;
      /* white outline */
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(6px);
      /* glass effect */
      color: #fff;
      font-weight: 600;
      transition: all .25s ease;
    }

    .home-actions .btn:hover {
      background: var(--brand-accent);
      /* your orange accent */
      border-color: var(--brand-accent);
      color: #fff;
    }

    /* ===== Hero Section Background ===== */
    /* ===== SureTrack Home Hero ===== */

    #home .home-hero {
      background:
        radial-gradient(circle at top left,
          rgba(249, 115, 22, .12),
          transparent 28%),
        linear-gradient(135deg,
          #FFFFFF 0%,
          #F8FAFC 45%, ß #EEF2F7 100%);

      padding: 70px 16px 120px;
      text-align: center;
      color: var(--st-text);
      position: relative;
    }

    #subscriptionBanner {
      width: min(680px, calc(100% - 32px));
      margin: 6px auto 36px;
    }

    /* Inner container */
    #home .hero-inner {
      max-width: 680px;
      margin: 0 auto;
    }

    /* Title */
    #home .hero-inner h2 {
      font-family: 'Poppins', sans-serif;
      font-weight: 800;
      font-size: clamp(36px, 5vw, 56px);
      line-height: 1.1;
      margin: 0 0 16px;
      color: #fff;
      /* make sure it stays white */
    }

    /* Subtitle */
    #home .hero-inner p {
      font-size: clamp(16px, 2vw, 20px);
      color: rgba(255, 255, 255, .95);
      /* softer white */
      margin: 0 auto 40px;
      max-width: 700px;
    }

    /* Action buttons */
    #home .home-actions {
      display: flex;
      justify-content: center;
      gap: 24px;
      /* spacing between buttons */
      flex-wrap: wrap;
    }

    /* Primary CTA (Point of Sale) */
    .hero-cta--primary {
      background: var(--brand-accent, #ff6600) !important;
      color: #fff !important;
      border: none !important;
      padding: 16px 36px !important;
      font-size: 1.15rem !important;
      font-weight: 700 !important;
      border-radius: 999px !important;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
      transition: all 0.25s ease;
    }

    .hero-cta--primary:hover {
      background: #e65c00 !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    /* Secondary CTA (Admin Dashboard) */
    .hero-cta--secondary {
      background: rgba(255, 255, 255, 0.15) !important;
      color: #fff !important;
      border: 2px solid rgba(255, 255, 255, 0.9) !important;
      padding: 16px 36px !important;
      font-size: 1.15rem !important;
      font-weight: 600 !important;
      border-radius: 999px !important;
      transition: all 0.25s ease;
    }

    .hero-cta--secondary:hover {
      background: rgba(255, 255, 255, 0.25) !important;
      border-color: #fff !important;
    }

    /* Phone field (WhatsApp) — lighter text + lighter placeholder */
    #pos #custPhone {
      font-weight: 400;
      /* make actual typed number normal, not bold */
    }

    /* Modern browsers */
    #pos #custPhone::placeholder {
      color: #94a3b8;
      /* lighter slate */
      font-weight: 300;
      /* lighter than the input text */
      opacity: 1;
      /* ensure the color shows (Safari) */
    }

    /* Safari/WebKit */
    #pos #custPhone::-webkit-input-placeholder {
      color: #94a3b8;
      font-weight: 300;
    }

    /* Phone field (WhatsApp) — smaller text + lighter placeholder */
    #pos #custPhone {
      font-size: 14px;
      /* smaller input text */
      font-weight: 400;
      /* normal weight */
      line-height: 1.2;
      /* keeps it tidy */
    }

    #pos #custPhone::placeholder {
      font-size: 13px;
      /* smaller than input text */
      font-weight: 300;
      /* lighter weight */
      color: #94a3b8;
      /* softer color */
      opacity: 1;
    }

    /* Safari/WebKit */
    #pos #custPhone::-webkit-input-placeholder {
      font-size: 13px;
      font-weight: 300;
      color: #94a3b8;
    }

    /* ===== POS — Share Actions (Figma-style, on-brand) ===== */

    /* Base for the three share buttons */
    #pos #btnShareWA,
    #pos #btnShareTG,
    #pos #btnShareEmail,
    #pos #btnPrintPDF {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      /* Figma tap target */
      padding: 10px 14px;
      border-radius: 999px;
      /* pill */
      font-weight: 600;
      font-size: 14px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
      transition: background .15s, border-color .15s, box-shadow .2s, transform .06s;
    }

    /* Hover/active/focus (shared) */
    #pos #btnShareWA:hover,
    #pos #btnShareTG:hover,
    #pos #btnPrintPDF:hover,
    #pos #btnShareEmail:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
      transform: translateY(-1px);
    }

    #pos #btnShareWA:active,
    #pos #btnShareTG:active,
    #pos #btnShareEmail:active,
    #pos #btnPrintPDF:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }

    #pos #btnShareWA:focus-visible,
    #pos #btnShareTG:focus-visible,
    #pos #btnShareEmail:focus-visible,
    #pos #btnPrintPDF:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 24%, transparent);
    }

    /* Disabled */
    #pos #btnShareWA[disabled],
    #pos #btnShareTG[disabled],
    #pos #btnShareEmail[disabled],
    #pos #btnPrintPDF[disabled] {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* --- Individual accents (use your teal/aqua brand) --- */

    /* WhatsApp: teal outline + subtle teal wash on hover */
    #pos #btnShareWA {
      border-color: var(--brand-primary);
      color: var(--brand-primary);
    }

    #pos #btnShareWA:hover {
      background: color-mix(in srgb, var(--brand-primary) 10%, white);
      border-color: var(--brand-primary);
    }

    /* Telegram: aqua outline + subtle aqua wash on hover */
    #pos #btnShareTG {
      border-color: var(--brand-alt);
      color: color-mix(in srgb, var(--brand-primary) 30%, #0f172a);
    }

    #pos #btnShareTG:hover {
      background: color-mix(in srgb, var(--brand-alt) 12%, white);
      border-color: var(--brand-alt);
    }

    /* Print/PDF: neutral outline; on hover, light brand hint */
    #pos #btnPrintPDF {
      border-color: #cbd5e1;
      color: #334155;
    }

    #pos #btnPrintPDF:hover {
      background: linear-gradient(0deg, rgba(171, 226, 244, .10), rgba(171, 226, 244, .10)), #fff;
      /* aqua mist */
      border-color: #94a3b8;
    }

    /* Email accent (same vibe as Print) */
    #pos #btnShareEmail {
      border-color: #cbd5e1;
      color: #334155;
    }

    #pos #btnShareEmail:hover {
      background: linear-gradient(0deg, rgba(171, 226, 244, .10), rgba(171, 226, 244, .10)), #fff;
      border-color: #94a3b8;
    }


    /* --- Compact emoji icons via pseudo-elements (no HTML changes) --- */
    #pos #btnShareWA::before {
      content: "💬";
    }

    #pos #btnShareTG::before {
      content: "✈️";
    }

    /* paper plane */
    #pos #btnPrintPDF::before {
      content: "🖨️";
    }

    #pos #btnShareEmail::before {
      content: "📧";
    }

    /* Tighter icon baseline alignment */
    #pos #btnShareWA::before,
    #pos #btnShareTG::before,
    #pos #btnShareEmail::before,
    #pos #btnPrintPDF::before {
      font-size: 16px;
      line-height: 1;
      translate: 0 .5px;
    }




    /* ===== Strong disabled state for POS action buttons ===== */
    #pos #btnShareWA[disabled],
    #pos #btnShareTG[disabled],
    #pos #btnPrintPDF[disabled],
    #pos #btnShareEmail[disabled],
    #pos #btnCheckoutOnly[disabled],
    #pos .cart-cta[disabled],
    #pos .btn[aria-disabled="true"] {
      background: #f1f5f9 !important;
      /* flat grey */
      border-color: #e2e8f0 !important;
      /* light border */
      color: #94a3b8 !important;
      /* muted label */
      box-shadow: none !important;
      transform: none !important;
      cursor: not-allowed !important;
      opacity: 1 !important;
      /* keep text readable; rely on grey styling */
      filter: grayscale(40%) saturate(70%) brightness(0.98);
    }

    /* Kill hover/active/focus effects when disabled */
    #pos #btnShareWA[disabled]:is(:hover, :active, :focus),
    #pos #btnShareTG[disabled]:is(:hover, :active, :focus),
    #pos #btnPrintPDF[disabled]:is(:hover, :active, :focus),
    #pos #btnShareEmail[disabled]:is(:hover, :active, :focus),
    #pos #btnCheckoutOnly[disabled]:is(:hover, :active, :focus),
    #pos .btn[aria-disabled="true"]:is(:hover, :active, :focus) {
      background: #f1f5f9 !important;
      border-color: #e2e8f0 !important;
      box-shadow: none !important;
      transform: none !important;
      outline: none !important;
    }

    /* Fade the emoji “icons” on disabled */
    #pos #btnShareWA[disabled]::before,
    #pos #btnShareTG[disabled]::before,
    #pos #btnPrintPDF[disabled]::before,
    #pos #btnCheckoutOnly[disabled]::before,
    #pos #btnShareEmail[disabled]::before {
      opacity: .55;
    }

    .row-break {
      flex-basis: 100%;
      height: 0;
    }



    /* ===== POS Cart: scroll after 5+ items ===== */
    #pos #cartList {
      overflow: hidden;
      transition: max-height .15s ease;
    }

    #pos #cartList.is-scrollable {
      max-height: 300px;
      /* adjust if you want a taller/shorter box */
      overflow: auto;
      padding-right: 6px;
    }

    /* ===== Offline Receipt — modal + QR ===== */
    #receiptModal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, .55);
    }

    #receiptModal.show {
      display: flex;
    }

    .backend-refund-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(15, 23, 42, .55);
    }

    .backend-refund-modal.show {
      display: flex;
    }

    .backend-receipt-modal {
      position: fixed;
      inset: 0;
      z-index: 10020;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(15, 23, 42, .62);
    }

    .backend-receipt-modal.show {
      display: flex;
    }

    .receipt-card {
      width: min(560px, 92vw);
      background: #fff;
      color: #0f172a;
      border-radius: 14px;
      padding: 18px 16px;
      box-shadow: 0 20px 60px rgba(2, 6, 23, .35);
    }

    .backend-refund-card {
      width: min(840px, calc(100vw - 32px));
      max-height: min(760px, 92vh);
      overflow: auto;
      padding: 0;
    }

    .backend-receipt-card {
      width: min(640px, calc(100vw - 32px));
      max-height: min(760px, 92vh);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .receipt-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .receipt-head .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #10b981;
    }

    .receipt-body {
      max-height: 60vh;
      overflow: auto;
      border: 1px dashed #e2e8f0;
      border-radius: 10px;
      padding: 12px;
    }

    .backend-refund-head {
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      margin: 0;
      padding: 22px 24px 16px;
      border-bottom: 1px solid #e2e8f0;
    }

    .backend-refund-title {
      color: #0f172a;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -.01em;
      line-height: 1.2;
    }

    .backend-refund-subtitle {
      margin-top: 5px;
      font-size: 13px;
    }

    .backend-refund-close {
      width: 34px;
      height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      padding: 0;
      border-radius: 999px;
      color: #475569;
      font-size: 22px;
      line-height: 1;
    }

    .backend-refund-body {
      max-height: min(680px, calc(92vh - 78px));
      overflow: auto;
      border: 0;
      border-radius: 0;
      padding: 20px 24px 22px;
      background: #f8fafc;
    }

    .backend-receipt-card .receipt-body {
      max-height: min(560px, calc(92vh - 168px));
      overflow: auto;
      background: #fff;
    }

    .backend-receipt-brand {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e2e8f0;
    }

    .backend-receipt-logo {
      width: 48px;
      height: 48px;
      flex: 0 0 auto;
      object-fit: contain;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
    }

    .backend-receipt-brand-text {
      min-width: 0;
    }

    .backend-receipt-merchant {
      color: #0f172a;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .backend-receipt-contact,
    .backend-receipt-location,
    .receipt-powered {
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .receipt-powered {
      margin-top: 12px;
      text-align: center;
      color: #94a3b8;
    }

    .backend-refund-sale-card,
    .backend-refund-section,
    .backend-refund-preview {
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

    .backend-refund-sale-card {
      padding: 16px;
    }

    .backend-refund-meta-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px 16px;
    }

    .backend-refund-meta-grid span,
    .backend-refund-total-card span,
    .backend-refund-preview-grid span,
    .backend-refund-field > span {
      display: block;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .backend-refund-meta-grid b {
      display: block;
      min-width: 0;
      margin-top: 4px;
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    .backend-refund-meta-wide {
      grid-column: span 3;
    }

    .backend-refund-total-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 14px;
    }

    .backend-refund-total-card {
      padding: 14px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #fff;
    }

    .backend-refund-total-card b {
      display: block;
      margin-top: 5px;
      color: #0f172a;
      font-size: 20px;
      line-height: 1.2;
    }

    .backend-refund-total-card-success {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }

    .backend-refund-total-card-success b {
      color: #15803d;
    }

    .backend-refund-section {
      margin-top: 16px;
      overflow: hidden;
    }

    .backend-refund-section-head {
      padding: 16px 16px 12px;
      border-bottom: 1px solid #e2e8f0;
    }

    .backend-refund-section-head h4 {
      margin: 0;
      color: #0f172a;
      font-size: 16px;
      font-weight: 800;
    }

    .backend-refund-section-head p {
      margin: 4px 0 0;
      color: #64748b;
      font-size: 13px;
    }

    .backend-refund-table-wrap {
      width: 100%;
      overflow-x: auto;
    }

    .backend-refund-table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
      margin: 0;
    }

    .backend-refund-table th {
      padding: 10px 12px;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .05em;
      text-align: left;
      text-transform: uppercase;
      white-space: nowrap;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
    }

    .backend-refund-table td {
      padding: 12px;
      color: #0f172a;
      font-size: 13px;
      vertical-align: middle;
      border-bottom: 1px solid #edf2f7;
    }

    .backend-refund-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .backend-refund-item-cell {
      min-width: 180px;
    }

    .backend-refund-item-cell b {
      display: block;
      line-height: 1.25;
    }

    .backend-refund-num {
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .backend-refund-select-cell {
      text-align: center;
    }

    .backend-refund-select-label,
    .backend-refund-restock-line {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .backend-refund-select-label span {
      color: #334155;
      font-size: 12px;
      font-weight: 700;
    }

    .backend-refund-qty-cell {
      width: 120px;
    }

    .backend-refund-qty-label {
      display: grid;
      gap: 4px;
      justify-items: start;
    }

    .backend-refund-qty-input {
      width: 76px;
      max-width: 76px;
      padding: 8px 10px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .backend-refund-qty-max {
      color: #64748b;
      font-size: 11px;
      white-space: nowrap;
    }

    .backend-refund-controls {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
      gap: 14px;
      margin-top: 16px;
      align-items: stretch;
    }

    .backend-refund-field,
    .backend-refund-restock-card {
      display: grid;
      gap: 8px;
      min-width: 0;
      padding: 14px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #fff;
    }

    .backend-refund-field .input {
      min-height: 42px;
    }

    .backend-refund-restock-card {
      align-content: center;
    }

    .backend-refund-restock-card .receipt-note {
      margin: 0;
    }

    .backend-refund-preview {
      margin-top: 16px;
      padding: 16px;
    }

    .backend-refund-summary-title {
      margin-bottom: 10px;
      color: #0f172a;
      font-size: 15px;
      font-weight: 800;
    }

    .backend-refund-preview-grid {
      display: grid;
      grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr);
      gap: 8px 16px;
      align-items: baseline;
    }

    .backend-refund-preview-grid b {
      color: #0f172a;
      font-size: 13px;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .backend-refund-message {
      margin-top: 12px;
      padding: 10px 12px;
      border: 1px solid #dbeafe;
      border-radius: 12px;
      color: #1e40af;
      font-size: 13px;
      background: #eff6ff;
    }

    .backend-refund-message-error {
      border-color: #fecaca;
      color: #b91c1c;
      background: #fef2f2;
    }

    .backend-refund-message-warning {
      border-color: #fde68a;
      color: #92400e;
      background: #fffbeb;
    }

    .backend-refund-footer {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
    }

    .backend-refund-footer .btn {
      min-width: 128px;
    }

    .backend-refund-submit {
      min-width: 158px;
    }

    .backend-refund-sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .backend-refund-complete-hero {
      display: flex;
      gap: 14px;
      align-items: center;
      padding: 18px;
      border: 1px solid #bbf7d0;
      border-radius: 18px;
      background: #f0fdf4;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }

    .backend-refund-success-mark {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border-radius: 999px;
      color: #fff;
      font-size: 24px;
      font-weight: 900;
      background: #16a34a;
    }

    .backend-refund-complete-hero h4 {
      margin: 0;
      color: #14532d;
      font-size: 16px;
      font-weight: 800;
    }

    .backend-refund-complete-total {
      margin-top: 4px;
      color: #14532d;
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 900;
      letter-spacing: -.03em;
      line-height: 1;
    }

    .backend-refund-complete-hero p {
      margin: 6px 0 0;
      color: #166534;
      font-size: 13px;
      font-weight: 700;
    }

    .backend-refund-complete-section {
      margin-top: 16px;
    }

    .backend-refund-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 16px;
      padding: 16px;
    }

    .backend-refund-detail-grid span {
      display: block;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .backend-refund-detail-grid b {
      display: block;
      margin-top: 4px;
      color: #0f172a;
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .backend-refund-detail-wide {
      grid-column: span 2;
    }

    .backend-refund-complete-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: end;
      margin-top: 16px;
      padding: 16px;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      background: #fff;
    }

    .backend-refund-action-row,
    .backend-refund-complete-workflow-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .backend-refund-complete-workflow-actions {
      justify-content: flex-end;
    }

    @media (max-width: 760px) {
      .backend-refund-card {
        width: calc(100vw - 24px);
      }

      .backend-receipt-card {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
      }

      .backend-refund-head {
        padding: 18px 18px 14px;
      }

      .backend-refund-body {
        padding: 16px 14px 18px;
      }

      .backend-refund-meta-grid,
      .backend-refund-total-grid,
      .backend-refund-controls {
        grid-template-columns: 1fr;
      }

      .backend-refund-meta-wide {
        grid-column: auto;
      }

      .backend-refund-preview-grid {
        grid-template-columns: 1fr;
      }

      .backend-refund-preview-grid b {
        text-align: left;
      }

      .backend-refund-detail-grid,
      .backend-refund-complete-actions {
        grid-template-columns: 1fr;
      }

      .backend-refund-detail-wide {
        grid-column: auto;
      }

      .backend-refund-complete-workflow-actions {
        justify-content: stretch;
      }

      .backend-refund-action-row .btn,
      .backend-refund-complete-workflow-actions .btn {
        width: 100%;
      }

      .backend-refund-complete-table {
        min-width: 0;
      }

      .backend-refund-complete-table thead {
        display: none;
      }

      .backend-refund-complete-table,
      .backend-refund-complete-table tbody,
      .backend-refund-complete-table tr,
      .backend-refund-complete-table td {
        display: block;
        width: 100%;
      }

      .backend-refund-complete-table tr {
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
      }

      .backend-refund-complete-table tr:last-child {
        border-bottom: 0;
      }

      .backend-refund-complete-table td {
        padding: 4px 0;
        border-bottom: 0;
      }

      .backend-refund-footer {
        align-items: stretch;
        flex-direction: column-reverse;
      }

      .backend-refund-footer .btn {
        width: 100%;
      }
    }

    .receipt-body h4 {
      margin: 4px 0 6px;
    }

    .receipt-body .row {
      display: flex;
      justify-content: space-between;
      margin: 4px 0;
    }

    .receipt-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }

    .receipt-actions .btn {
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #fff;
    }

    .receipt-actions .btn.primary {
      background: var(--brand-accent);
      color: #fff;
      border: none;
    }

    .receipt-card.fullscreen {
      width: 100vw;
      height: 100vh;
      border-radius: 0;
    }

    .receipt-note {
      font-size: 12px;
      color: #64748b;
      margin-top: 8px;
    }

    /* QR container */
    #qrWrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px 0 4px;
    }

    #qrBox {
      width: 148px;
      height: 148px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #qrInfo {
      font-size: 12px;
      color: #475569;
    }

    /* Pending queue pill (send when back online) */
    #pendingReceiptsBtn {
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 9998;
      background: #0ea5e9;
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(2, 6, 23, .25);
      display: none;
    }

    #pendingReceiptsBtn.show {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }


    /* QR container (bigger + clear background + padding as quiet zone) */
    #qrBox {
      width: 220px;
      height: 220px;
      background: #fff;
      /* solid white for contrast */
      padding: 12px;
      /* quiet zone around modules */
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Ensure SVG QR fills the box neatly */
    #qrBox svg {
      width: 100%;
      height: 100%;
      display: block;
    }


    /* === Hamburger nav (mobile) === */
    #hamburgerBtn {
      display: none;
      align-items: center;
      gap: 8px;
      border: 0;
      background: transparent;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      padding: 8px;
      border-radius: 10px;
    }

    #hamburgerBtn .bars {
      width: 20px;
      height: 14px;
      position: relative;
    }

    #hamburgerBtn .bars::before,
    #hamburgerBtn .bars::after,
    #hamburgerBtn .mid {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: #fff;
      border-radius: 2px;
    }

    #hamburgerBtn .bars::before {
      top: 0;
    }

    #hamburgerBtn .mid {
      top: 6px;
    }

    #hamburgerBtn .bars::after {
      bottom: 0;
    }

    /* Slide-over menu */
    #mobileMenu {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      background: rgba(2, 6, 23, .45);
    }

    #mobileMenu.show {
      display: block;
    }

    #mobileMenu .sheet {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: min(82vw, 360px);
      background: #fff;
      color: #0f172a;
      box-shadow: -12px 0 40px rgba(2, 6, 23, .25);
      display: flex;
      flex-direction: column;
    }

    #mobileMenu header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
    }

    #mobileMenu .links {
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #mobileMenu .links a {
      display: block;
      padding: 12px 12px;
      border-radius: 10px;
      text-decoration: none;
      color: #0f172a;
      border: 1px solid #e2e8f0;
      background: #fff;
    }

    #mobileMenu .links a:hover {
      background: #f1f5f9;
    }

    #mobileMenu .close {
      border: 1px solid rgba(255, 255, 255, .7);
      background: transparent;
      color: #fff;
      padding: 6px 10px;
      border-radius: 8px;
    }

    /* Prevent background scroll when menu is open */
    body.mm-open {
      overflow: hidden;
    }

    /* Breakpoint: hide .nav, show hamburger */
    @media (max-width: 900px) {
      header .nav {
        display: none;
      }

      /* your existing nav disappears */
      #hamburgerBtn {
        display: inline-flex;
      }

      /* hamburger shows */
    }



    /* ===== Pending Receipts Modal ===== */
    #pendingModal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      background: rgba(2, 6, 23, .45);
    }

    #pendingModal.show {
      display: block;
    }

    #pendingModal .sheet {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: min(92vw, 800px);
      background: #fff;
      color: #0f172a;
      box-shadow: -16px 0 50px rgba(2, 6, 23, .25);
      display: flex;
      flex-direction: column;
    }

    #pendingModal header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 14px 16px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
    }

    #pendingModal header .title {
      font-weight: 800;
    }

    #pendingModal .body {
      padding: 14px;
      overflow: auto;
      height: 100%;
    }

    #pendingModal .empty {
      color: #64748b;
      padding: 24px 0;
      text-align: center;
    }

    /* ===== Card Terminal Modal ===== */
    #cardTerminalModal {
      position: fixed;
      inset: 0;
      z-index: 10002;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(2, 6, 23, .45);
    }

    #cardTerminalModal.show {
      display: flex;
    }

    #cardTerminalModal .terminal-card {
      width: min(420px, 92vw);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(2, 6, 23, .30);
      overflow: hidden;
    }

    #cardTerminalModal .terminal-head {
      padding: 12px 14px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      font-weight: 800;
    }

    #cardTerminalModal .terminal-body {
      padding: 14px;
      display: grid;
      gap: 10px;
    }

    #cardTerminalModal .terminal-amount {
      font-size: 26px;
      font-weight: 800;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }

    #cardTerminalModal .terminal-status {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #f8fafc;
      color: #334155;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
    }

    #cardTerminalModal .terminal-status.ok {
      border-color: rgba(16, 185, 129, .4);
      background: rgba(16, 185, 129, .10);
      color: #065f46;
    }

    #cardTerminalModal .terminal-status.fail {
      border-color: rgba(217, 27, 36, .4);
      background: rgba(217, 27, 36, .10);
      color: #7f1d1d;
    }

    #cardTerminalModal .terminal-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    #cardTerminalModal .terminal-actions .btn {
      flex: 1 1 110px;
    }

    #cardTerminalModal .terminal-actions .btn.fail {
      border-color: var(--brand-red);
      color: var(--brand-red);
      background: #fff;
    }

    #pendingTable {
      width: 100%;
      border-collapse: collapse;
    }

    #pendingTable th,
    #pendingTable td {
      padding: 10px;
      border-bottom: 1px solid #e2e8f0;
      text-align: left;
      font-size: 14px;
    }

    #pendingTable th {
      font-weight: 700;
      color: #334155;
      background: #f8fafc;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid #e2e8f0;
      background: #fff;
    }

    .badge.wa {
      color: #0f766e;
      border-color: #99f6e4;
      background: #ecfeff;
    }

    .badge.tg {
      color: #0369a1;
      border-color: #bae6fd;
      background: #eff6ff;
    }

    .input-phone {
      width: 160px;
      padding: 8px 10px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      font-size: 14px;
    }

    .row-actions {
      display: flex;
      gap: 8px;
    }

    .row-actions .btn {
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #fff;
      cursor: pointer;
    }

    .row-actions .btn.primary {
      background: var(--brand-accent);
      color: #fff;
      border: none;
    }

    .row-actions .btn[disabled] {
      opacity: .55;
      cursor: not-allowed;
    }

    .note-muted {
      font-size: 12px;
      color: #64748b;
    }

    /* Compact on narrow screens */
    @media (max-width: 700px) {

      #pendingTable th:nth-child(3),
      #pendingTable td:nth-child(3) {
        display: none;
      }

      /* hide cashier on small screens */
    }





    /* ===== POS — Load More (brand-consistent) ===== */
    #pos #loadMore,
    #pos .load-more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      /* Figma tap target */
      padding: 10px 16px;
      border-radius: 999px;
      /* pill */
      font-weight: 600;
      font-size: 14px;
      background: #fff;
      /* keep neutral like your share buttons */
      color: var(--ink);
      border: 1px solid var(--brand-primary);
      /* subtle brand accent */
      box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
      transition: background .15s, border-color .15s, box-shadow .2s, transform .06s;
      margin-inline: auto;
      /* center even if it’s display:block somewhere */
    }

    /* Hover / active / focus */
    #pos #loadMore:hover,
    #pos .load-more:hover {
      background: color-mix(in srgb, var(--brand-primary) 10%, white);
      border-color: var(--brand-primary);
      box-shadow: 0 4px 14px rgba(15, 23, 42, .10);
      transform: translateY(-1px);
    }

    #pos #loadMore:active,
    #pos .load-more:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }

    #pos #loadMore:focus-visible,
    #pos .load-more:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 24%, transparent);
    }

    /* Strong disabled (same system you use elsewhere) */
    #pos #loadMore[disabled],
    #pos .load-more[disabled] {
      background: #f1f5f9 !important;
      border-color: #e2e8f0 !important;
      color: #94a3b8 !important;
      box-shadow: none !important;
      transform: none !important;
      cursor: not-allowed !important;
      opacity: 1 !important;
      filter: grayscale(40%) saturate(70%) brightness(0.98);
    }

    /* Emoji icon (like your other buttons) */
    #pos #loadMore::before,
    #pos .load-more::before {
      content: "⤵️";
      /* you can switch to "⋯" if you prefer */
      font-size: 16px;
      line-height: 1;
      translate: 0 .5px;
    }

    #pos #loadMore[disabled]::before,
    #pos .load-more[disabled]::before {
      opacity: .55;
    }

    /* Optional loading spinner state: add .is-loading to the button */
    #pos #loadMore.is-loading,
    #pos .load-more.is-loading {
      pointer-events: none;
      color: #64748b;
    }

    #pos #loadMore.is-loading::before,
    #pos .load-more.is-loading::before {
      content: "";
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background:
        conic-gradient(var(--brand-primary) 0deg, var(--brand-primary) 90deg, #e2e8f0 90deg 360deg);
      -webkit-mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
      mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
      animation: posspin 1s linear infinite;
    }

    @keyframes posspin {
      to {
        transform: rotate(1turn);
      }
    }


    /* Final override to keep header/rows perfectly aligned */
    #admin-inventoryTable .inv-head,
    #admin-inventoryTable .inv-row {
      grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 1fr 1fr 1fr 0.9fr !important;
    }


    /* ==== Inventory Table: align headers to the inputs (7 columns) ==== */
    #admin-inventoryTable .inv-head,
    #admin-inventoryTable .inv-row {
      grid-template-columns: 2fr 1.2fr 0.8fr 0.8fr 1fr 1fr 1fr 0.9fr !important;
      /* Product | Supplier | Qty | Low | Cost | Price | Margin | Actions */
    }

    /* Center the header labels per column (keep Product left) */
    #admin-inventoryTable .inv-head>div {
      justify-self: center;
      text-align: center;
    }

    #admin-inventoryTable .inv-head>div:first-child {
      justify-self: start;
      text-align: left;
    }

    /* Center the numeric cells so inputs sit under the centered headers */
    #admin-inventoryTable .inv-row .cell-num {
      justify-content: center !important;
    }

    /* Keep the Actions/Delete column centered too */
    #admin-inventoryTable .inv-row .inv-actions {
      justify-content: center !important;
    }

    /* Kill older rule that forced numeric headers to the far right */
    #admin-inventoryTable .inv-head .num {
      justify-self: center !important;
      text-align: center !important;
    }

    /* Stack expiry under the title inside the product cell */
    #admin-inventoryTable .inv-product {
      align-items: flex-start;
      gap: 8px;
    }

    #admin-inventoryTable .inv-meta {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    #admin-inventoryTable .inv-title {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }







    /* ===== Search fields: add clear (×) button ===== */

    /* Inventory search */
    #invSearch {
      position: relative;
      padding-right: 28px !important;
      /* room for the clear icon */
    }

    /* Sales search */
    #salesSearch {
      position: relative;
      padding-right: 28px !important;
    }

    /* Shared style for both clear buttons */
    .search-clear {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      font-size: 16px;
      color: #64748b;
      opacity: 0.6;
      user-select: none;
      display: none;
    }

    .search-clear:hover {
      opacity: 1;
      color: var(--brand-red);
    }


    /* ==== Search clear (×) button for Inventory & Sales ==== */
    .search-wrap {
      position: relative;
      display: inline-block;
      width: 100%;
    }

    #invSearch,
    #salesSearch {
      padding-right: 32px !important;
    }

    .search-clear-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      display: none;
      line-height: 0;
    }

    .search-clear-btn svg {
      width: 22px;
      height: 22px;
      stroke: #64748b;
      opacity: .7;
      display: block;
    }

    .search-clear-btn:hover svg,
    .search-clear-btn:focus-visible svg {
      opacity: 1;
      stroke: var(--brand-red, #ef4444);
      outline: none;
    }


    /* === Admin Login: lighter/smaller placeholders + normal input text === */
    #adminLoginModal .input-group input {
      font-size: 14px !important;
      /* smaller typed text */
      font-weight: 400 !important;
      /* normal (not bold) */
      line-height: 1.25;
    }

    /* modern browsers */
    #adminLoginModal .input-group input::placeholder {
      font-size: 13px;
      /* smaller than text */
      font-weight: 300;
      /* lighter placeholder */
      color: #94a3b8;
      /* softer slate */
      opacity: 1;
      /* Safari needs this */
    }

    /* Safari/WebKit fallback */
    #adminLoginModal .input-group input::-webkit-input-placeholder {
      font-size: 13px;
      font-weight: 300;
      color: #94a3b8;
    }


    /* === Sales Table: Load More (centered, brand-accent, auto-hide) === */

    /* Declare accent if not already set */
    :root {
      --brand-accent: #FA7305;
    }

    /* Center common wrappers */
    #admin-salesTable #salesLoadMoreWrap,
    #admin-salesTable .sales-load-more,
    #admin-salesTable .load-more,
    #admin-salesTable .loadMoreWrap {
      display: flex !important;
      justify-content: center !important;
      align-items: center;
      margin: 16px 0 24px;
    }

    /* Auto-hide patterns:
   - wrapper has .hide (your app already uses this)
   - wrapper declares data-has-more="false"
   - button is disabled
   - wrapper has no children (safety) */
    #admin-salesTable #salesLoadMoreWrap.hide,
    #admin-salesTable .sales-load-more.hide,
    #admin-salesTable .load-more.hide,
    #admin-salesTable .loadMoreWrap.hide,
    #admin-salesTable [data-has-more="false"],
    #admin-salesTable #salesLoadMoreWrap:has(> button:disabled),
    #admin-salesTable .sales-load-more:has(> button:disabled),
    #admin-salesTable .load-more:has(> button:disabled),
    #admin-salesTable .loadMoreWrap:has(> button:disabled),
    #admin-salesTable #salesLoadMoreWrap:empty,
    #admin-salesTable .sales-load-more:empty,
    #admin-salesTable .load-more:empty,
    #admin-salesTable .loadMoreWrap:empty {
      display: none !important;
    }

    /* Button styling */
    #admin-salesTable #salesLoadMoreWrap .btn,
    #admin-salesTable .sales-load-more .btn,
    #admin-salesTable .load-more .btn,
    #admin-salesTable .loadMoreWrap .btn,
    #admin-salesTable button#salesLoadMore,
    #admin-salesTable button[data-role="sales-load-more"] {
      appearance: none;
      border: 0;
      border-radius: 9999px;
      padding: 10px 16px;
      min-height: 44px;
      font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

      background: var(--brand-accent, #FA7305);
      color: #fff;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .08);

      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition:
        transform .06s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        opacity .2s ease;
    }

    #admin-salesTable #salesLoadMoreWrap .btn:hover,
    #admin-salesTable .sales-load-more .btn:hover,
    #admin-salesTable .load-more .btn:hover,
    #admin-salesTable .loadMoreWrap .btn:hover {
      background: color-mix(in srgb, var(--brand-accent, #FA7305) 90%, #ffffff 10%);
      box-shadow: 0 2px 4px rgba(16, 24, 40, .10), 0 6px 16px rgba(16, 24, 40, .12);
    }

    #admin-salesTable #salesLoadMoreWrap .btn:active,
    #admin-salesTable .sales-load-more .btn:active,
    #admin-salesTable .load-more .btn:active,
    #admin-salesTable .loadMoreWrap .btn:active {
      transform: translateY(1px);
      box-shadow: 0 1px 2px rgba(16, 24, 40, .10), 0 3px 8px rgba(16, 24, 40, .12);
    }

    #admin-salesTable #salesLoadMoreWrap .btn:focus-visible,
    #admin-salesTable .sales-load-more .btn:focus-visible,
    #admin-salesTable .load-more .btn:focus-visible,
    #admin-salesTable .loadMoreWrap .btn:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 3px rgba(255, 255, 255, 1),
        0 0 0 6px color-mix(in srgb, var(--brand-accent, #FA7305) 35%, transparent);
    }

    /* Disabled state (also triggers wrapper auto-hide via :has above) */
    #admin-salesTable #salesLoadMoreWrap .btn:disabled,
    #admin-salesTable .sales-load-more .btn:disabled,
    #admin-salesTable .load-more .btn:disabled,
    #admin-salesTable .loadMoreWrap .btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    }

    /* === Normalize width for specific admin panels (match Inventory/Sales width) === */
    /* Targets duplicates too by using [id="..."] attribute selectors */
    :root {
      /* adjust if your normal content width is different */
      --admin-content-max: 1100px;
      --admin-side-pad: 16px;
    }

    /* Sales Summary, Top Sellers, Report a Problem, Developer Tools */
    [id="admin-salesReport"],
    [id="admin-topSellers"],

    [id="admin-devUtils"] {
      width: 100%;
      max-width: var(--admin-content-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--admin-side-pad);
      padding-right: var(--admin-side-pad);
      box-sizing: border-box;
    }

    /* If those sections contain an inner wrapper, constrain it too (harmless if absent) */
    [id="admin-salesReport"]>.inner,
    [id="admin-topSellers"]>.inner,

    [id="admin-devUtils"]>.inner {
      width: 100%;
      max-width: var(--admin-content-max);
      margin: 0 auto;
      padding-left: var(--admin-side-pad);
      padding-right: var(--admin-side-pad);
      box-sizing: border-box;
    }

    #admin-multiShop {
      padding: 0 12px;
    }

    #admin-multiShop .panel {
      max-width: 1100px;
      margin: 0 auto;
      width: 100%;
    }

    /* Keep small screens edge-to-edge padding consistent */
    @media (max-width: 640px) {
      :root {
        --admin-side-pad: 12px;
      }
    }

    /* === Top Sellers (by Qty): Load More — centered + brand accent === */
    #admin-topSellers #topLoadMoreWrap {
      display: flex !important;
      justify-content: center !important;
      align-items: center;
      margin: 16px 0 24px;
    }

    /* Auto-hide common cases (wrapper .hide, no button, or disabled button) */
    #admin-topSellers #topLoadMoreWrap.hide,
    #admin-topSellers #topLoadMoreWrap:empty,
    #admin-topSellers #topLoadMoreWrap:has(> button:disabled) {
      display: none !important;
    }

    /* Button look */
    #admin-topSellers #topLoadMoreWrap .btn,
    #admin-topSellers #topLoadMoreWrap button {
      appearance: none;
      border: 0;
      border-radius: 9999px;
      padding: 10px 16px;
      min-height: 44px;
      font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

      background: var(--brand-accent, #FA7305);
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 8px;

      box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .08);
      transition:
        transform .06s ease,
        box-shadow .2s ease,
        background-color .2s ease,
        opacity .2s ease;
    }

    #admin-topSellers #topLoadMoreWrap .btn:hover,
    #admin-topSellers #topLoadMoreWrap button:hover {
      background: color-mix(in srgb, var(--brand-accent, #FA7305) 90%, #ffffff 10%);
      box-shadow: 0 2px 4px rgba(16, 24, 40, .10), 0 6px 16px rgba(16, 24, 40, .12);
    }

    #admin-topSellers #topLoadMoreWrap .btn:active,
    #admin-topSellers #topLoadMoreWrap button:active {
      transform: translateY(1px);
    }

    #admin-topSellers #topLoadMoreWrap .btn:disabled,
    #admin-topSellers #topLoadMoreWrap button:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    }


    /* Top Sellers: give the Load more button more space from the list */
    #admin-topSellers #topLoadMoreWrap {
      margin-top: 32px !important;
      /* space above the button */
      margin-bottom: 28px;
      /* keep some space below */
      padding-top: 8px;
      /* extra cushion in tight layouts */
    }


    /* === Top Sellers: actions row (Download CSV + Load more) === */
    #admin-topSellers #topLoadMoreWrap.top-actions {
      display: flex !important;
      justify-content: center !important;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      /* space between the two buttons */
      margin-top: 32px;
      /* breathing room from the list */
      margin-bottom: 28px;
      padding-top: 8px;
    }

    /* Primary button (Load more) — brand accent */
    #admin-topSellers #topLoadMoreWrap .btn {
      appearance: none;
      border: 0;
      border-radius: 9999px;
      padding: 10px 16px;
      min-height: 44px;
      font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

      background: var(--brand-accent, #FA7305);
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 8px rgba(16, 24, 40, .08);
      transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
    }

    /* Ghost button (Download CSV) — outlined accent */
    #admin-topSellers #topLoadMoreWrap .btn-ghost {
      background: #fff;
      color: var(--brand-accent, #FA7305);
      border: 1px solid color-mix(in srgb, var(--brand-accent, #FA7305) 72%, #ffffff 28%);
      box-shadow: none;
    }

    #admin-topSellers #topLoadMoreWrap .btn-ghost:hover {
      background: color-mix(in srgb, var(--brand-accent, #FA7305) 8%, #ffffff 92%);
    }

    /* Hover / Active on primary */
    #admin-topSellers #topLoadMoreWrap .btn:not(.btn-ghost):hover {
      background: color-mix(in srgb, var(--brand-accent, #FA7305) 90%, #ffffff 10%);
      box-shadow: 0 2px 4px rgba(16, 24, 40, .10), 0 6px 16px rgba(16, 24, 40, .12);
    }

    #admin-topSellers #topLoadMoreWrap .btn:not(.btn-ghost):active {
      transform: translateY(1px);
    }

    /* If there’s no more to load, you may disable only the Load more button.
   Keep the row visible so CSV still shows. */
    #admin-topSellers #topLoadMoreWrap .btn:disabled {
      opacity: .55;
      cursor: not-allowed;
      transform: none;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    }

    /* If earlier CSS hid the whole row when button was disabled, cancel that now. */
    #admin-topSellers #topLoadMoreWrap:has(> .btn:disabled) {
      display: flex !important;
    }

    /* Hide the "All Incidents" button in Report an Issue */
    [id="btnList"] {
      display: none !important;
    }

    /* ==== Contact page: center everything + add spacing ==== */
    [id="contact"] {
      --contact-max: 1100px;
      /* width of the centered content */
      --side-pad: 16px;
    }

    /* center the whole section and its children */
    [id="contact"]>* {
      max-width: var(--contact-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: var(--side-pad);
      padding-right: var(--side-pad);
      box-sizing: border-box;
      text-align: center;
      /* center headings/paragraphs in contact */
    }

    /* actions row (WhatsApp / Call / Email) — centered with gap */
    [id="contact"] .actions,
    [id="contact"] .contact-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      margin: 8px auto 24px;
      /* space below buttons before the form */
    }

    /* form card centered with extra top space from the buttons */
    [id="contact"] form,
    [id="contact"] .contact-form,
    [id="contact"] .card {
      width: 100%;
      max-width: 820px;
      /* form a bit narrower for readability */
      margin: 20px auto 28px;
      /* <-- space between buttons and form */
      text-align: left;
      /* keep labels/inputs readable */
    }

    /* make inputs fill the centered form card */
    [id="contact"] input[type="text"],
    [id="contact"] input[type="tel"],
    [id="contact"] input[type="email"],
    [id="contact"] input[type="number"],
    [id="contact"] select,
    [id="contact"] textarea {
      width: 100%;
      box-sizing: border-box;
    }

    /* optional: center the small counter line under textarea */
    [id="contact"] .char-count,
    [id="contact"] .counter,
    [id="contact"] .limit {
      text-align: right;
    }

    /* small screens */
    @media (max-width: 640px) {
      [id="contact"] {
        --side-pad: 12px;
      }

      [id="contact"] .actions,
      [id="contact"] .contact-actions {
        gap: 8px;
      }

      [id="contact"] form,
      [id="contact"] .contact-form,
      [id="contact"] .card {
        max-width: 100%;
      }
    }



    /* ===== Force style Contact actions (WhatsApp / Call / Email) ===== */
    :root {
      --brand-accent: #FA7305;
      --contact-pill-h: 44px;
      --contact-gap: 10px;
    }

    /* 1) Make any container that holds these links act like a centered row */
    [id="contact"] :is(.actions, .contact-actions, .row, .buttons, div, section, header, nav) :is(a[href*="wa.me"], a[href*="api.whatsapp.com"], a[href^="tel:"], a[href^="mailto:"], button) {
      /* marker only to help the :has() container below */
    }

    [id="contact"] :is(.actions, .contact-actions, .row, .buttons, div, section, header, nav) :has(> :is(a[href*="wa.me"], a[href*="api.whatsapp.com"], a[href^="tel:"], a[href^="mailto:"], button)) {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      gap: var(--contact-gap) !important;
      margin: 8px auto 24px !important;
      text-align: center !important;
    }

    /* 2) Base pill look for ALL three actions (works for <a> or <button>) */
    [id="contact"] :is(a[href*="wa.me"], a[href*="api.whatsapp.com"], a[href^="tel:"], a[href^="mailto:"], button) {
      appearance: none !important;
      text-decoration: none !important;
      border-radius: 9999px !important;
      min-height: var(--contact-pill-h) !important;
      padding: 10px 16px !important;
      font: 600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      white-space: nowrap !important;

      /* outlined accent by default */
      background: #fff !important;
      color: var(--brand-accent) !important;
      border: 1px solid color-mix(in srgb, var(--brand-accent) 72%, #ffffff 28%) !important;
      box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;

      transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease !important;
    }

    /* 3) Make WHATSAPP the primary solid button */
    /* Matches wa.me or api.whatsapp.com links */
    [id="contact"] :is(a[href*="wa.me"], a[href*="api.whatsapp.com"]) {
      background: var(--brand-accent) !important;
      color: #fff !important;
      border-color: transparent !important;
    }

    [id="contact"] :is(a[href*="wa.me"], a[href*="api.whatsapp.com"]):hover {
      background: color-mix(in srgb, var(--brand-accent) 90%, #ffffff 10%) !important;
    }

    /* 4) Hover for outlined (Call / Email) */
    [id="contact"] :is(a[href^="tel:"], a[href^="mailto:"], button):hover {
      background: color-mix(in srgb, var(--brand-accent) 8%, #ffffff 92%) !important;
      box-shadow: 0 2px 4px rgba(16, 24, 40, .10), 0 6px 16px rgba(16, 24, 40, .12) !important;
    }

    /* 5) Focus / Active */
    [id="contact"] :is(a[href*="wa.me"], a[href*="api.whatsapp.com"], a[href^="tel:"], a[href^="mailto:"], button):active {
      transform: translateY(1px) !important;
    }

    [id="contact"] :is(a[href*="wa.me"], a[href*="api.whatsapp.com"], a[href^="tel:"], a[href^="mailto:"], button):focus-visible {
      outline: none !important;
      box-shadow:
        0 0 0 3px #fff,
        0 0 0 6px color-mix(in srgb, var(--brand-accent) 35%, transparent) !important;
    }

    /* 6) Keep emoji aligned if present */
    [id="contact"] :is(a, button)>*:first-child {
      line-height: 0 !important;
    }

    /* 7) Small screens */
    @media (max-width:640px) {
      :root {
        --contact-pill-h: 42px;
        --contact-gap: 8px;
      }
    }

    /* ===== Contact Us modern layout ===== */
    #contact .contact-panel {
      position: relative;
      z-index: 0;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 22px 0 28px;
      overflow: visible;
    }

    #contact .contact-card,
    #contact .contact-success {
      width: min(100%, 980px);
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    #contact .contact-page-shell {
      width: min(100%, 820px);
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
    }

    #contact .contact-back-row {
      display: flex;
      justify-content: flex-start;
      margin: 0 0 18px;
      position: relative;
      z-index: 0;
    }

    #contact .contact-page-shell > .contact-back-row {
      justify-content: flex-start !important;
      margin: 0 0 14px !important;
      text-align: left !important;
    }

    #contact .contact-page-header {
      display: block !important;
      align-items: start !important;
      justify-content: stretch !important;
      flex-wrap: nowrap !important;
      text-align: left !important;
      margin-bottom: 18px;
      padding: 0;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      position: static;
    }

    #contact .contact-page-title h3 {
      margin: 0;
      font-size: clamp(1.65rem, 2.2vw, 2.15rem);
      line-height: 1.1;
      color: #111827;
      letter-spacing: -0.03em;
      text-align: left !important;
    }

    #contact .contact-page-title .intro {
      margin: 8px 0 0;
      max-width: 680px;
      color: #5b6472;
      font-size: 1rem;
      line-height: 1.6;
      text-align: left;
    }

    #contact .contact-purpose-helper {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: 8px 0 6px;
      line-height: 1.45;
    }

#contact .contact-purpose-helper .contact-problem-link {
      min-height: 32px;
      padding: 6px 10px;
      font-size: 0.85rem;
      border-radius: 999px;
    }

    .dashboard-shop-context {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      margin-bottom: 20px;
      border: 1px solid rgba(93, 159, 150, .22);
      border-left: 4px solid var(--brand-primary);
      border-radius: 18px;
      background: linear-gradient(135deg, #fff, rgba(93, 159, 150, .08));
      box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
    }

    .dashboard-context-label {
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .dashboard-context-value {
      margin-top: 3px;
      color: #0f172a;
      font-size: 1.25rem;
      font-weight: 900;
    }

    .dashboard-section {
      margin-top: 18px;
    }

    .dashboard-section-head {
      margin-bottom: 10px;
    }

    .dashboard-section-head h2 {
      margin: 0;
      color: #0f172a;
      font-size: 1.1rem;
      font-weight: 900;
    }

    .dashboard-section-head p {
      margin: 3px 0 0;
      color: #64748b;
    }

    .dashboard-grid-primary {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      align-items: stretch;
    }

    .dashboard-kpi-action {
      appearance: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      color: inherit;
      font: inherit;
    }

    .dashboard-kpi-action:focus-visible,
    .dashboard-switch-shop:focus-visible,
    .dashboard-quick-actions .btn:focus-visible,
    .dashboard-attention-item .btn:focus-visible {
      outline: 3px solid rgba(249, 115, 22, .38);
      outline-offset: 3px;
    }

    #admin-dashboard .dashboard-kpi {
      display: flex !important;
      flex-direction: column !important;
      min-height: 150px !important;
      height: 100% !important;
      max-height: none !important;
    }

    #admin-dashboard .dashboard-kpi .kpi-note {
      margin-top: auto !important;
    }

    #admin-dashboard .money-bank-card {
      min-height: 150px !important;
      height: auto !important;
      max-height: none !important;
      margin-bottom: 0 !important;
      padding: 18px 16px 16px !important;
      background: #fff !important;
      color: #0f172a !important;
      border: 1px solid var(--line) !important;
      border-bottom: 1px solid var(--line) !important;
      transform: none !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
    }

    #admin-dashboard .money-bank-card:hover {
      transform: translateY(-3px) !important;
      box-shadow: 0 16px 34px rgba(15, 23, 42, .10) !important;
    }

    #admin-dashboard .money-bank-card::before {
      animation: none !important;
      left: 0 !important;
      width: 100% !important;
      height: 4px !important;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt)) !important;
    }

    #admin-dashboard .money-bank-card::after {
      display: none !important;
    }

    #admin-dashboard #dashMoneyReceivedTotal {
      margin: 0 !important;
      color: #020617 !important;
      text-shadow: none !important;
      animation: none !important;
      transform: none !important;
      font-size: 1.7rem !important;
      line-height: 1 !important;
    }

    #admin-dashboard .money-bank-card .kpi-label,
    #admin-dashboard .money-bank-card .kpi-note,
    #admin-dashboard .dashboard-money-summary {
      color: #64748b !important;
      text-shadow: none !important;
    }

    #admin-dashboard .money-bank-card .kpi-label {
      margin-bottom: 6px !important;
    }

    #admin-dashboard .money-bank-card .kpi-note {
      margin-top: auto !important;
      font-size: 12px !important;
      line-height: 1.15 !important;
    }

    #admin-dashboard .dashboard-money-terminal {
      display: grid;
      gap: 2px;
      margin: 7px 0 6px;
      padding: 6px 8px;
      border-radius: 12px;
      background:
        linear-gradient(135deg, rgba(15, 23, 42, .98), rgba(30, 41, 59, .96));
      border: 1px solid rgba(249, 115, 22, .22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    #admin-dashboard .dashboard-money-terminal[hidden] {
      display: none !important;
    }

    #admin-dashboard .dashboard-money-terminal-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 13px;
      font-size: 10px;
      line-height: 1.15;
    }

    #admin-dashboard .dashboard-money-terminal-label {
      color: #cbd5e1;
      font-weight: 900;
      letter-spacing: .055em;
      text-transform: uppercase;
    }

    #admin-dashboard .dashboard-money-terminal-value {
      color: #ffffff;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    #admin-dashboard .dashboard-money-terminal-row:first-child .dashboard-money-terminal-label {
      color: #fed7aa;
    }

    #admin-dashboard .money-bank-list {
      max-height: none !important;
      margin-top: 10px;
      padding-right: 0 !important;
      overflow: visible !important;
    }

    #admin-dashboard .money-bank-row {
      min-height: auto !important;
      padding: 7px 9px !important;
      font-size: 12px !important;
    }

    #admin-dashboard .money-bank-row small {
      display: block;
      margin-left: 0;
    }

    #admin-dashboard .money-bank-more {
      margin: 8px 0 0 !important;
      padding: 0 !important;
      background: transparent !important;
      cursor: default;
      text-align: left;
      color: #cbd5e1;
      font-size: 12px;
    }

    .dashboard-attention-list {
      display: grid;
      gap: 10px;
    }

    .dashboard-attention-item,
    .dashboard-attention-empty {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid #fed7aa;
      border-radius: 16px;
      background: #fff7ed;
      color: #7c2d12;
    }

    .dashboard-attention-item p {
      margin: 3px 0 0;
      color: #9a3412;
    }

    .dashboard-attention-empty {
      justify-content: flex-start;
      border-color: #e2e8f0;
      background: #f8fafc;
      color: #475569;
      font-weight: 750;
    }

    .dashboard-quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    @media (max-width: 1100px) {
      .dashboard-grid-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 720px) {
      .dashboard-shop-context,
      .dashboard-attention-item {
        align-items: stretch;
        flex-direction: column;
      }

      .dashboard-grid-primary {
        grid-template-columns: 1fr !important;
      }

      .dashboard-quick-actions .btn {
        width: 100%;
      }
    }

    #contact .contact-back-button {
      min-width: auto !important;
      min-height: 36px !important;
      padding: 7px 12px !important;
      background: #fff !important;
      color: #334155 !important;
      border-color: rgba(148, 163, 184, 0.42) !important;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
      border-radius: 12px !important;
      font-size: 0.9rem !important;
      font-weight: 800 !important;
      position: static !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    #contact .contact-quick-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
      margin: 0 0 22px !important;
      text-align: left !important;
    }

    #contact .contact-action {
      justify-content: center !important;
      width: auto !important;
      max-width: 100%;
      border-radius: 999px !important;
      min-height: 40px !important;
      padding: 9px 14px !important;
      white-space: nowrap !important;
      line-height: 1.25 !important;
      background: #fff !important;
      color: #172033 !important;
      border-color: rgba(226, 232, 240, 0.95) !important;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
      font-size: 0.92rem !important;
    }

    #contact .contact-action.whatsapp {
      border-color: rgba(34, 197, 94, 0.28) !important;
      background: #f0fdf4 !important;
      color: #166534 !important;
    }

    #contact .contact-action.call {
      border-color: rgba(59, 130, 246, 0.24) !important;
      background: #eff6ff !important;
      color: #1d4ed8 !important;
    }

    #contact .contact-action.email {
      border-color: rgba(250, 115, 5, 0.28) !important;
      background: #fff7ed !important;
      color: #c2410c !important;
    }

    #contact #contactFormCard.contact-card {
      max-width: 820px !important;
      padding: 26px;
      border: 1px solid rgba(226, 232, 240, 0.96);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
      text-align: left;
    }

    #contact .contact-card h4 {
      margin: 0 0 16px;
      font-size: 1.22rem;
      color: #172033;
      letter-spacing: -0.02em;
    }

    #contact .contact-card .field {
      display: grid;
      gap: 8px;
      margin: 16px 0;
    }

    #contact .contact-card .field > label {
      font-weight: 700;
      color: #1f2937;
    }

    #contact .contact-card .input {
      min-height: 44px;
      border-radius: 14px;
      border-color: #d7dee9;
      background: #fff;
    }

    #contact .contact-card textarea.input {
      min-height: 140px;
      line-height: 1.5;
    }

    #contact .contact-card .helper {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #64748b;
      font-size: 0.9rem;
    }

    #contact .contact-pref-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    #contact .contact-pref-card {
      display: flex;
      align-items: center;
      gap: 9px;
      min-height: 46px;
      padding: 10px 12px;
      border: 1px solid #dbe3ee;
      border-radius: 14px;
      background: #f8fafc;
      color: #243244;
      font-weight: 700;
      cursor: pointer;
    }

    #contact .contact-pref-card:has(input:checked) {
      border-color: rgba(250, 115, 5, 0.55);
      background: #fff7ed;
      color: #c2410c;
      box-shadow: 0 0 0 3px rgba(250, 115, 5, 0.12);
    }

    #contact .contact-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 18px 0 4px;
      color: #374151;
      line-height: 1.45;
    }

    #contact .contact-submit-row {
      justify-content: flex-start !important;
      margin: 18px 0 0 !important;
    }

    #contact .contact-submit-button {
      min-height: 46px !important;
      padding: 12px 20px !important;
      border-radius: 14px !important;
      background: var(--brand-accent, #FA7305) !important;
      color: #fff !important;
      border-color: transparent !important;
      box-shadow: 0 10px 24px rgba(250, 115, 5, 0.24) !important;
    }

    #contact .contact-submit-helper {
      margin: 12px 0 0;
      line-height: 1.55;
    }

    @media (max-width: 720px) {
      #contact .contact-panel {
        padding: 14px 0 22px;
      }

      #contact .contact-page-header,
      #contact .contact-pref-grid {
        grid-template-columns: 1fr;
      }

      #contact .contact-quick-actions {
        align-items: stretch !important;
      }

      #contact .contact-action {
        width: 100% !important;
        white-space: normal !important;
      }

      #contact .contact-back-button {
        width: fit-content;
      }

      #contact #contactFormCard.contact-card {
        padding: 20px;
        border-radius: 20px;
      }

      #contact .contact-submit-button {
        width: 100%;
        justify-content: center !important;
      }
    }



    /* =========================
   INVENTORY — Filter Pills (Figma-style, on-brand)
   ========================= */

    /* Layout polish for the toolbar row (keeps your existing HTML) */
    #admin-inventoryTable .row:first-of-type {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    /* Base pill */
    #admin-inventoryTable .pill,
    #admin-inventoryTable #invLowBtn {
      --pill-bg: #fff;
      --pill-bd: #cbd5e1;
      --pill-fg: var(--ink);

      border-radius: 999px;
      padding: 8px 14px;
      border: 1px solid var(--pill-bd);
      background: var(--pill-bg);
      color: var(--pill-fg);
      font-weight: 600;
      line-height: 1;
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .06s ease;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    }

    /* Hover */
    #admin-inventoryTable .pill:hover,
    #admin-inventoryTable #invLowBtn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    /* Focus-visible (keyboard) */
    #admin-inventoryTable .pill:focus-visible,
    #admin-inventoryTable #invLowBtn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 28%, transparent);
      border-color: var(--brand-primary);
    }

    /* Active/pressed state (shared) */
    #admin-inventoryTable .pill.active,
    #admin-inventoryTable .pill[aria-pressed="true"],
    #admin-inventoryTable #invLowBtn.toggled,
    #admin-inventoryTable #invLowBtn[aria-pressed="true"] {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 22%, transparent);
    }

    /* Subtle press feedback */
    #admin-inventoryTable .pill:active,
    #admin-inventoryTable #invLowBtn:active {
      transform: translateY(1px);
    }

    /* Contextual color accents by filter type */
    #admin-inventoryTable #invExpAll.active,
    #admin-inventoryTable #invExpAll[aria-pressed="true"] {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
      color: #fff;
    }

    #admin-inventoryTable #invExpExp {
      /* default (not active) */
      color: var(--brand-red);
      border-color: color-mix(in srgb, var(--brand-red) 45%, #cbd5e1);
    }

    #admin-inventoryTable #invExpExp.active,
    #admin-inventoryTable #invExpExp[aria-pressed="true"] {
      background: var(--brand-red);
      border-color: var(--brand-red);
      color: #fff;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-red) 22%, transparent);
    }

    #admin-inventoryTable #invExpSoon {
      /* default (not active) */
      color: var(--brand-accent);
      border-color: color-mix(in srgb, var(--brand-accent) 45%, #cbd5e1);
      background: rgba(250, 115, 5, .06);
    }

    #admin-inventoryTable #invExpSoon.active,
    #admin-inventoryTable #invExpSoon[aria-pressed="true"] {
      background: var(--brand-accent);
      border-color: var(--brand-accent);
      color: #fff;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 22%, transparent);
    }

    #admin-inventoryTable #invExpNone {
      /* default (not active) */
      color: #334155;
    }

    /* Date range inputs styled like pills */
    #admin-inventoryTable #invExpFrom,
    #admin-inventoryTable #invExpTo {
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 8px 12px;
      background: #fff;
      font-size: 14px;
      transition: border-color .2s, box-shadow .2s;
    }

    #admin-inventoryTable #invExpFrom:focus,
    #admin-inventoryTable #invExpTo:focus {
      outline: none;
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
    }

    /* Clear button aligns with pills, but lighter */
    #admin-inventoryTable #invExpClear.btn {
      border-radius: 999px;
      padding: 8px 12px;
      background: #fff;
      border: 1px solid #cbd5e1;
      color: #334155;
      transition: background .2s, border-color .2s, box-shadow .2s;
    }

    #admin-inventoryTable #invExpClear.btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    #admin-inventoryTable #invExpClear.btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
    }

    /* Compact on small screens */
    @media (max-width: 560px) {

      #admin-inventoryTable .pill,
      #admin-inventoryTable #invLowBtn {
        padding: 8px 12px;
      }

      #admin-inventoryTable #invExpFrom,
      #admin-inventoryTable #invExpTo {
        width: 130px;
      }
    }


    /* ===== Receipt Lookup table alignment (scoped) ===== */
    #admin-receipts .table {
      width: 100%;
      border-collapse: collapse;
    }

    #admin-receipts .table th,
    #admin-receipts .table td {
      padding: 10px 12px;
      vertical-align: middle;
      white-space: nowrap;
    }

    /* Header styling */
    #admin-receipts .table thead th {
      text-align: left;
      font-weight: 700;
      color: #0f172a;
      /* matches --ink */
      border-bottom: 1px solid #e2e8f0;
      /* matches --line */
    }

    /* Row borders */
    #admin-receipts .table tbody td {
      border-top: 1px solid #f1f5f9;
    }

    /* Column alignment via nth-child (no markup changes) */
    #admin-receipts .table tbody td:nth-child(1),
    /* Sale */
    #admin-receipts .table thead th:nth-child(1) {
      text-align: left;
      width: 40%;
    }

    #admin-receipts .table tbody td:nth-child(2),
    /* Items */
    #admin-receipts .table thead th:nth-child(2) {
      text-align: right;
      width: 8%;
    }

    #admin-receipts .table tbody td:nth-child(3),
    /* Total */
    #admin-receipts .table thead th:nth-child(3) {
      text-align: right;
      width: 14%;
    }

    #admin-receipts .table tbody td:nth-child(4),
    /* Cashier */
    #admin-receipts .table thead th:nth-child(4) {
      text-align: left;
      width: 20%;
    }

    #admin-receipts .table tbody td:nth-child(5),
    /* Actions */
    #admin-receipts .table thead th:nth-child(5) {
      text-align: right;
      width: 18%;
    }

    /* Keep the date (second line in Sale cell) subtle and wrapped */
    #admin-receipts .table td:first-child .muted {
      display: block;
      white-space: normal;
      color: #64748b;
      /* slate-500ish */
    }

    /* Keep action buttons on one line, tidy spacing */
    #admin-receipts .table .row-actions {
      white-space: nowrap;
    }

    #admin-receipts .table .row-actions .btn+.btn {
      margin-left: 8px;
    }



    /* Center the Actions header + buttons */
    #admin-receipts .rcpt-table th.col-actions,
    #admin-receipts .rcpt-table td.col-actions {
      text-align: center !important;
    }

    /* Keep the buttons centered and tidy */
    #admin-receipts .rcpt-table td.col-actions .row-actions {
      display: inline-flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
      white-space: nowrap;
    }


    #admin-receipts table.rcpt-table th.col-items,
    #admin-receipts table.rcpt-table td.col-items {
      text-align: left !important;
      white-space: normal;
      word-break: break-word;
      max-width: 380px;
    }


    /* =========================
   RECEIPT LOOKUP — FIGMA-STYLE POLISH
   Scoped to #admin-receipts
   ========================= */

    /* Table base */
    #admin-receipts .rcpt-table {
      width: 100%;
      min-width: 980px;
      border-collapse: collapse;
      table-layout: fixed;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      /* rounded corners for header */
    }

    /* Header */
    #admin-receipts .rcpt-table thead th {
      background: linear-gradient(0deg, #f8fafc, #f8fafc);
      color: var(--ink);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: .02em;
      /* subtle tracking (Figma style) */
      text-transform: none;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
    }

    /* Sticky header for long lists (optional; remove if not desired) */
    @supports(position: sticky) {
      #admin-receipts .rcpt-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
      }
    }

    /* Cells */
    #admin-receipts .rcpt-table td {
      padding: 12px 14px;
      vertical-align: middle;
      border-top: 1px solid #f1f5f9;
      color: #0b1220;
    }

    /* Sale cell: allow date to wrap on next line */
    #admin-receipts .rcpt-table .col-sale .muted {
      display: block;
      white-space: normal;
      color: #64748b;
      margin-top: 2px;
      font-size: 12px;
    }

    /* Alignments (header + body) */
    #admin-receipts .rcpt-table .col-sale {
      text-align: left;
    }

    #admin-receipts .rcpt-table .col-items {
      text-align: left;
    }

    /* we show item name(s) */
    #admin-receipts .rcpt-table .col-total {
      text-align: right;
    }

    #admin-receipts .rcpt-table .col-cashier {
      text-align: left;
    }

    #admin-receipts .rcpt-table .col-actions {
      text-align: center;
    }

    /* Row hover */
    #admin-receipts .rcpt-table tbody tr:hover {
      background: #f8fafc;
    }

    /* Zebra (subtle) */
    #admin-receipts .rcpt-table tbody tr:nth-child(odd) {
      background: #fcfdff;
    }

    /* Action cell buttons inline + centered */
    #admin-receipts .rcpt-table .row-actions {
      white-space: nowrap;
    }

    #admin-receipts .rcpt-table .row-actions .btn+.btn {
      margin-left: 8px;
    }

    /* ------------- Buttons (Figma-style) ------------- */

    /* Base button token (used by clear + actions) */
    #admin-receipts .btn {
      --btn-bg: #fff;
      --btn-bd: #cbd5e1;
      --btn-fg: #0f172a;
      --btn-bg-hover: #f8fafc;
      --btn-bd-hover: #94a3b8;

      appearance: none;
      border: 1px solid var(--btn-bd);
      background: var(--btn-bg);
      color: var(--btn-fg);
      padding: 8px 12px;
      border-radius: 10px;
      font-weight: 600;
      line-height: 1;
      transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .06s ease;
      box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
      cursor: pointer;
    }

    #admin-receipts .btn:hover {
      background: var(--btn-bg-hover);
      border-color: var(--btn-bd-hover);
    }

    #admin-receipts .btn:active {
      transform: translateY(1px);
    }

    #admin-receipts .btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 25%, transparent);
      border-color: var(--brand-primary);
    }

    /* Clear button (secondary) */
    #admin-receipts #rcptClear.btn {
      --btn-bg: #fff;
      --btn-bd: #cbd5e1;
      --btn-fg: #334155;
    }

    /* View button (primary) */
    #admin-receipts .row-actions .btn[data-view] {
      --btn-bg: var(--brand-primary);
      --btn-bd: var(--brand-primary);
      --btn-fg: #fff;
    }

    #admin-receipts .row-actions .btn[data-view]:hover {
      box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-primary) 40%, transparent);
    }

    /* PDF button (accent) */
    #admin-receipts .row-actions .btn[data-pdf] {
      --btn-bg: var(--brand-accent);
      --btn-bd: var(--brand-accent);
      --btn-fg: #fff;
    }

    #admin-receipts .row-actions .btn[data-pdf]:hover {
      box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-accent) 40%, transparent);
    }

    /* Optional tiny icons via ::before (no markup changes) */
    #admin-receipts .row-actions .btn[data-view]::before {
      content: '👁️ ';
    }

    #admin-receipts .row-actions .btn[data-pdf]::before {
      content: '📄 ';
    }

    /* Keep Item(s) column readable and contained */
    #admin-receipts .rcpt-table th.col-items,
    #admin-receipts .rcpt-table td.col-items {
      white-space: normal;
      word-break: break-word;
      max-width: 420px;
    }

    /* Responsive tweaks */
    @media (max-width: 720px) {

      #admin-receipts .rcpt-table th,
      #admin-receipts .rcpt-table td {
        padding: 10px 10px;
      }

      #admin-receipts .rcpt-table td.col-items {
        max-width: 260px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #admin-receipts .btn {
        transition: none;
      }
    }


    /* =========================
   Receipt Lookup — make table header match tile gradient
   ========================= */

    /* If your design system already defines the tile gradient on .card-top,
   set a CSS variable once and reuse it. If not, COPY the exact gradient
   from your .card-top rule and put it in --tile-gradient below. */
    :root {
      --tile-gradient: linear-gradient(90deg, #5fa7a1 0%, #bde9f3 100%);
      /* <-- replace with your exact .card-top gradient */
    }

    #admin-receipts .rcpt-table {
      border-radius: 12px;
      overflow: hidden;
      /* so rounded corners apply to header background */
      border: 1px solid var(--line);
      background: #fff;
      table-layout: fixed;
      width: 100%;
    }

    /* Apply the same gradient as tiles to the header cells */
    #admin-receipts .rcpt-table thead th {
      background: var(--tile-gradient) !important;
      color: #fff !important;
      font-weight: 800;
      letter-spacing: .02em;
      padding: 12px 14px;
      border-bottom: 1px solid transparent;
      /* seamless edge */
    }

    /* Round the top corners (table already has overflow:hidden) */
    #admin-receipts .rcpt-table thead th:first-child {
      border-top-left-radius: 12px;
    }

    #admin-receipts .rcpt-table thead th:last-child {
      border-top-right-radius: 12px;
    }

    /* Keep body rows clean under the gradient header */
    #admin-receipts .rcpt-table tbody td {
      background: #fff;
      color: #0b1220;
      border-top: 1px solid #f1f5f9;
    }

    /* Optional: subtle divider shadow under header like tiles */
    #admin-receipts .rcpt-table thead {
      box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
    }



    /* === Receipt Lookup: header type size/weight === */
    #admin-receipts .rcpt-table thead th {
      font-size: 15px;
      /* was smaller */
      line-height: 1.25;
      font-weight: 800;
      /* bolder for readability */
      letter-spacing: .01em;
      padding: 14px 16px;
      /* a touch more breathing room */
    }

    /* === Keep colored buttons colored on hover === */
    /* The generic .btn:hover in your theme lightens buttons; override for View/PDF here. */
    #admin-receipts .row-actions .btn[data-view],
    #admin-receipts .row-actions .btn[data-pdf] {
      color: #fff;
      /* ensure white text */
    }

    /* View (primary/teal) — lock background on hover/focus */
    #admin-receipts .row-actions .btn[data-view]:hover,
    #admin-receipts .row-actions .btn[data-view]:focus-visible {
      background: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
      color: #fff !important;
      box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-primary) 40%, transparent);
    }

    /* PDF (accent/orange) — lock background on hover/focus */
    #admin-receipts .row-actions .btn[data-pdf]:hover,
    #admin-receipts .row-actions .btn[data-pdf]:focus-visible {
      background: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #fff !important;
      box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-accent) 40%, transparent);
    }

    /* Optional: slightly larger button text just in this table */
    #admin-receipts .row-actions .btn {
      font-size: 14px;
      padding: 9px 14px;
    }


    /* === Receipt Lookup: fix header size + prevent wrap, balance widths === */
    #admin-receipts table.rcpt-table thead th {
      font-size: 16px !important;
      /* force larger header text */
      line-height: 1.35 !important;
      font-weight: 800 !important;
      white-space: nowrap !important;
      /* keep "Item(s)" on one line */
      vertical-align: middle !important;
      padding: 14px 16px !important;
    }

    /* Rebalance column widths so headers don't wrap */
    #admin-receipts table.rcpt-table col.col-sale {
      width: 30% !important;
    }

    #admin-receipts table.rcpt-table col.col-items {
      width: 12% !important;
    }

    /* was too tight */
    #admin-receipts table.rcpt-table col.col-total {
      width: 14% !important;
    }

    #admin-receipts table.rcpt-table col.col-cashier {
      width: 20% !important;
    }

    #admin-receipts table.rcpt-table col.col-actions {
      width: 24% !important;
    }

    /* Keep body cells aligned with the header (no-wrap in header only) */
    #admin-receipts table.rcpt-table tbody td {
      vertical-align: middle;
    }

    /* Buttons: keep colors on hover (so they don't flip to white) */
    #admin-receipts .row-actions .btn[data-view],
    #admin-receipts .row-actions .btn[data-pdf] {
      color: #fff;
    }

    #admin-receipts .row-actions .btn[data-view]:hover,
    #admin-receipts .row-actions .btn[data-view]:focus-visible {
      background: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
      color: #fff !important;
    }

    #admin-receipts .row-actions .btn[data-pdf]:hover,
    #admin-receipts .row-actions .btn[data-pdf]:focus-visible {
      background: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #fff !important;
    }



    #admin-receipts .rcpt-table td.col-actions {
      overflow: visible !important;
    }

    #admin-receipts .rcpt-table td.col-actions .row-actions {
      display: flex !important;
      justify-content: center;
      gap: 10px;
      flex-wrap: nowrap;
    }

    #admin-receipts .rcpt-table td.col-actions .btn {
      white-space: nowrap;
    }

    #admin-receipts .panel {
      overflow-x: auto;
    }

    #admin-receipts .rcpt-table td.col-actions .row-actions {
      justify-content: flex-start;
    }





    /* ===== Admin Incidents — force full available width ===== */
    .admin-shell {
      width: 100%;
      max-width: none !important;
      grid-template-columns: 240px minmax(0, 1fr) !important;
    }

    .admin-shell-main,
    #admin-section-view {
      width: 100% !important;
      max-width: none !important;
      min-width: 0 !important;
      overflow: visible !important;
    }

    [id="admin-incidents"] {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    [id="admin-incidents"] .panel {
      width: 100% !important;
      max-width: none !important;
    }

    [id="admin-incidents"] #incidentListCard {
      width: 100% !important;
      max-width: none !important;
    }

    [id="admin-incidents"] .incident-table-wrap {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto;
    }


    /* ===== Reported Problems: allow full-width table area ===== */
    .admin-shell-main,
    #admin-section-view {
      overflow: visible !important;
    }

    #admin-incidents .panel {
      width: 100% !important;
      max-width: none !important;
    }

    #admin-incidents #incidentListCard {
      width: 100% !important;
      max-width: none !important;
    }

    #admin-incidents .incident-table-wrap {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
    }

    /* ===== Reported Problems layout cleanup ===== */
    #admin-incidents .incident-filters {
      display: grid !important;
      grid-template-columns: minmax(220px, 320px) 160px 160px !important;
      gap: 10px !important;
      align-items: center;
      margin-bottom: 16px !important;
    }

    #admin-incidents .incident-filters .input {
      width: 100% !important;
    }

    #admin-incidents .incident-table {
      min-width: 1180px !important;
    }

    #admin-incidents .incident-head,
    #admin-incidents .incident-row {
      grid-template-columns: 80px 120px 145px 150px 170px 130px 220px 130px 100px 170px 90px !important;
    }

    #admin-incidents .incident-table-wrap {
      overflow-x: auto !important;
      padding-bottom: 8px;
    }

    #admin-incidents .incident-bulk-actions {
      display: flex;
      justify-content: flex-end;
      margin: 0 0 12px;
    }

    #admin-incidents .incident-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    #admin-incidents .incident-filters {
      align-items: center !important;
    }

    #admin-incidents .incident-filters .incident-archive-btn {
      width: auto !important;
      min-width: 150px;
      height: 46px;
      white-space: nowrap;
    }


    .sidebar-group-toggle {
      width: 100%;
      border: 0;
      background: transparent;
      color: #475569;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: left;
      cursor: pointer;
      padding: 0;
      margin: 0 0 10px;
    }

    .sidebar-group-toggle::before {
      content: "▼ ";
    }

    .sidebar-panel.collapsed .sidebar-group-toggle::before {
      content: "▶ ";
    }

    .sidebar-panel.collapsed .sidebar-group-body {
      display: none;
    }



    #admin-incidents .incident-filters {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
    }

    #admin-incidents .incident-filters #incidentSearch {
      width: 320px !important;
      flex: 0 0 320px !important;
    }

    #admin-incidents .incident-filters #incidentStatusFilter,
    #admin-incidents .incident-filters #incidentChannelFilter {
      width: 180px !important;
      flex: 0 0 180px !important;
    }

    #admin-incidents .incident-filters .incident-archive-btn {
      width: auto !important;
      min-width: 140px !important;
      flex: 0 0 auto !important;
      white-space: nowrap !important;
    }

    #admin-incidents .incident-view-tabs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0 0 14px;
    }

    .sidebar-submenu-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin: 6px 0 0 14px;
    }

    .sidebar-subitem {
      font-size: 13px;
      padding-left: 18px !important;
      background: #f8fafc !important;
    }

    .sidebar-submenu-toggle {
      display: flex !important;
      justify-content: space-between;
      align-items: center;
    }

    .sidebar-submenu-body.hide {
      display: none !important;
    }

    .submenu-arrow {
      font-size: 12px;
    }

    .subscription-form-actions {
      display: flex;
      align-items: flex-end;
    }



    .subscriber-toolbar {
      display: flex;
      justify-content: flex-start;
      margin: 14px 0;
    }

    .subscriber-toolbar .input {
      max-width: 340px;
    }

    .subscriber-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      margin-top: 16px;
      flex-wrap: wrap;
    }


    .admin-subscriptions-table td[data-label="Notes"] {
      max-width: 220px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .admin-subscriptions-table td[data-label="Notes"]:hover {
      white-space: normal;
      overflow-wrap: anywhere;
    }


    /* ===== Final footer cleanup override ===== */
    footer.footer {
      padding: 22px 0 !important;
      margin-top: 32px !important;
    }

    footer.footer .wrap {
      max-width: 1180px !important;
    }

    footer.footer .footer-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr 1fr !important;
      gap: 34px !important;
      align-items: start !important;
    }

    footer.footer .foot-head {
      margin: 0 0 12px !important;
      font-size: 13px !important;
    }

    footer.footer .foot-links,
    footer.footer .foot-legal {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px 22px !important;
    }

    footer.footer .foot-links a,
    footer.footer .foot-legal a {
      margin: 0 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
    }

    footer.footer .footer-support {
      display: flex !important;
      flex-direction: column !important;
      gap: 8px !important;
      font-size: 15px !important;
    }

    footer.footer .footer-hours,
    footer.footer .footer-copy {
      margin: 18px 0 0 !important;
      font-size: 14px !important;
      line-height: 1.35 !important;
    }

    @media (max-width: 900px) {
      footer.footer .footer-grid {
        grid-template-columns: 1fr 1fr !important;
      }
    }

    @media (max-width: 600px) {
      footer.footer .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }
    }


    /* ===== Admin Inquiries table ===== */
    /* ===== Admin Inquiries table ===== */
    /* ===== Inquiries simplified table ===== */
    #admin-inquiries .inquiry-table-wrap {
      margin-top: 14px;
      width: 100%;
      overflow-x: visible !important;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    #admin-inquiries .inquiry-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }

    #admin-inquiries .inquiry-table th {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      text-align: left;
      padding: 14px 16px;
      font-weight: 850;
    }

    #admin-inquiries .inquiry-table th:nth-child(1),
    #admin-inquiries .inquiry-table td:nth-child(1) {
      width: 130px;
    }

    #admin-inquiries .inquiry-table th:nth-child(3),
    #admin-inquiries .inquiry-table td:nth-child(3) {
      width: 110px;
      text-align: center;
    }

    #admin-inquiries .inquiry-table td {
      padding: 14px 16px;
      border-top: 1px solid var(--line);
      vertical-align: middle;
    }

    #admin-inquiries .inquiry-preview {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }



    /* =========================================================
   SURETRACK ADMIN UI POLISH — GLOBAL OVERRIDE
   Safe pass: spacing, buttons, panels, forms, headers
   ========================================================= */

    /* Admin page breathing room */
    #admin {
      padding-bottom: 32px;
    }

    /* Main admin content area */
    .admin-shell-main,
    #admin-section-view {
      min-width: 0;
    }

    /* Standard admin section spacing */
    .admin-section {
      padding-top: 18px;
    }

    /* Standard panel/card look across admin pages */
    .admin-section .panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
    }

    /* Cleaner admin section title */
    .admin-section h3,
    .admin-section .admin-title {
      margin: 0 0 14px !important;
      padding: 14px 18px !important;
      border-radius: 14px !important;
      text-align: center !important;
      color: #fff !important;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt)) !important;
      font-size: 1.35rem !important;
      font-weight: 800 !important;
      letter-spacing: .04em !important;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .10) !important;
    }

    /* Subtitle spacing */
    .admin-subtitle,
    .admin-section .muted.admin-subtitle {
      margin: 0 0 16px !important;
      color: #475569 !important;
      font-size: 15px !important;
    }

    /* Close bar consistency */
    .admin-closebar {
      position: static !important;
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      margin: 0 0 18px !important;
      padding: 10px 12px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: #fff !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
    }

    .close-btn {
      border-radius: 10px !important;
      padding: 8px 14px !important;
      font-weight: 700 !important;
    }

    /* Admin cards inside sections */
    .admin-section .card {
      border-radius: 14px !important;
      border: 1px solid var(--line) !important;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
    }

    /* Standard buttons */
    .admin-section .btn {
      border-radius: 10px;
      padding: 9px 13px;
      font-weight: 650;
      border: 1px solid #cbd5e1;
      background: #fff;
      color: #0f172a;
      transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease;
    }

    .admin-section .btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
    }

    .admin-section .btn:active {
      transform: translateY(1px);
    }

    .admin-section .btn.primary {
      background: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #fff !important;
    }

    .admin-section .btn.primary:hover {
      filter: brightness(.96);
    }

    /* Danger-style buttons when needed */
    .admin-section .btn.danger,
    .admin-section .btn.btn-danger {
      border-color: var(--brand-red) !important;
      color: var(--brand-red) !important;
      background: rgba(217, 27, 36, .06) !important;
    }

    .admin-section .btn.danger:hover,
    .admin-section .btn.btn-danger:hover {
      background: rgba(217, 27, 36, .12) !important;
    }

    /* Disabled buttons */
    .admin-section .btn[disabled] {
      opacity: .55 !important;
      cursor: not-allowed !important;
      box-shadow: none !important;
      transform: none !important;
    }

    /* Inputs/selects/textarea */
    .admin-section .input,
    .admin-section select,
    .admin-section textarea {
      border-radius: 10px !important;
      border: 1px solid #cbd5e1 !important;
      background: #fff !important;
      font-size: 14px !important;
    }

    .admin-section .input:focus,
    .admin-section select:focus,
    .admin-section textarea:focus {
      outline: none !important;
      border-color: var(--brand-primary) !important;
      box-shadow: 0 0 0 3px rgba(93, 159, 150, .22) !important;
    }

    /* Field label consistency */
    .admin-section .field label {
      font-weight: 700;
      color: #334155;
      font-size: 13px;
    }

    /* Toolbars/filter rows */
    .admin-section .filters,
    .admin-section .sales-filters,
    .admin-section .incident-toolbar,
    .admin-section .inquiry-toolbar,
    .admin-section .subscription-tabs {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 14px 0 18px !important;
    }

    /* Pills/tabs */
    .admin-section .pill,
    .admin-section .tab {
      border-radius: 999px !important;
      padding: 8px 14px !important;
      font-weight: 700 !important;
    }

    .admin-section .pill.active,
    .admin-section .tab.active {
      background: var(--brand-primary) !important;
      border-color: var(--brand-primary) !important;
      color: #fff !important;
    }

    /* Table wrappers should not visually break panels */
    .admin-section .table-wrap,
    .admin-section .incident-table-wrap,
    .admin-section .inquiry-table-wrap,
    .admin-section .admin-users-table-wrap,
    .admin-section .admin-subscriptions-table-wrap {
      border-radius: 14px !important;
      border: 1px solid var(--line) !important;
      background: #fff !important;
      overflow-x: auto !important;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
    }

    /* Generic table polish, without changing column layout */
    .admin-section table {
      background: #fff;
    }

    .admin-section table th {
      font-weight: 800;
      color: #334155;
    }

    .admin-section table td,
    .admin-section table th {
      vertical-align: middle;
    }

    /* Empty states */
    .admin-section .empty,
    .admin-section .muted:only-child {
      color: #64748b;
    }

    /* Tags */
    .admin-section .tag {
      font-weight: 700;
      border-radius: 999px;
    }

    /* Tenant Support Access */
    #admin-supportAccess .tenant-support-access-page {
      display: grid;
      gap: 18px;
    }

    #admin-supportAccess .tenant-support-access-section {
      padding: 18px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    }

    #admin-supportAccess .tenant-support-access-head,
    #admin-supportAccess .tenant-support-access-pagination,
    #admin-supportAccess .tenant-support-access-policy-status {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    #admin-supportAccess .tenant-support-access-head h4 {
      margin: 0 0 4px;
    }

    #admin-supportAccess .tenant-support-access-filters {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      align-items: end;
      margin: 14px 0;
    }

    #admin-supportAccess .tenant-support-access-filters label,
    .tenant-support-access-modal-card label {
      display: grid;
      gap: 6px;
      color: #334155;
      font-size: 13px;
      font-weight: 800;
    }

    #admin-supportAccess .tenant-support-access-filter-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    #admin-supportAccess .tenant-support-access-table-wrap {
      margin-top: 12px;
      overflow-x: auto;
    }

    #admin-supportAccess .tenant-support-access-table {
      width: 100%;
      min-width: 920px;
      border-collapse: separate;
      border-spacing: 0;
    }

    #admin-supportAccess .tenant-support-access-table th,
    #admin-supportAccess .tenant-support-access-table td {
      padding: 12px 14px;
      text-align: left;
      border-bottom: 1px solid rgba(226, 232, 240, .9);
      vertical-align: top;
    }

    #admin-supportAccess .tenant-support-access-table th {
      color: #334155;
      font-size: 12px;
      font-weight: 900;
      background: #f8fafc;
      white-space: nowrap;
    }

    #admin-supportAccess .tenant-support-access-reason {
      max-width: 280px;
      color: #475569;
    }

    #admin-supportAccess .tenant-support-access-empty {
      padding: 16px;
      color: #64748b;
      background: #f8fafc;
      border: 1px dashed var(--line);
      border-radius: 14px;
    }

    #admin-supportAccess .tenant-support-access-policy-card {
      display: grid;
      gap: 14px;
    }

    .tenant-support-access-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
      margin: 12px 0;
    }

    .tenant-support-access-metric {
      display: grid;
      gap: 4px;
      padding: 12px;
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius: 12px;
    }

    .tenant-support-access-metric span {
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
    }

    .tenant-support-access-tag-success {
      color: #065f46;
      background: rgba(16, 185, 129, .14);
      border-color: rgba(16, 185, 129, .35);
    }

    .tenant-support-access-tag-warning {
      color: #92400e;
      background: rgba(245, 158, 11, .16);
      border-color: rgba(245, 158, 11, .4);
    }

    .tenant-support-access-tag-danger {
      color: #7f1d1d;
      background: rgba(239, 68, 68, .14);
      border-color: rgba(239, 68, 68, .35);
    }

    .tenant-support-access-tag-info {
      color: #1d4ed8;
      background: rgba(37, 99, 235, .12);
      border-color: rgba(37, 99, 235, .28);
    }

    .tenant-support-access-tag-neutral {
      color: #334155;
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .tenant-support-access-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .tenant-support-access-modal.show {
      display: flex;
    }

    .tenant-support-access-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, .45);
    }

    .tenant-support-access-modal-card {
      position: relative;
      z-index: 1;
      width: min(760px, 96vw);
      max-height: 90vh;
      overflow: auto;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(15, 23, 42, .24);
    }

    .tenant-support-access-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .tenant-support-access-modal-head h3 {
      margin: 0;
    }

    .tenant-support-access-modal-body {
      display: grid;
      gap: 14px;
    }

    .tenant-support-access-comparison {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
    }

    .tenant-support-access-error {
      min-height: 20px;
      margin: 0;
      color: #b91c1c;
      font-weight: 700;
    }

    /* Dashboard KPI polish */
    .dashboard-kpi {
      border-radius: 16px !important;
      box-shadow: 0 6px 20px rgba(15, 23, 42, .05) !important;
    }

    .dashboard-kpi:hover {
      transform: translateY(-1px);
      transition: transform .12s ease, box-shadow .12s ease;
      box-shadow: 0 10px 26px rgba(15, 23, 42, .09) !important;
    }

    /* Admin sidebar polish */
    .admin-shell-sidebar .sidebar-panel {
      border-radius: 16px !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    }

    .admin-shell-sidebar .sidebar-item {
      font-weight: 650;
    }

    .admin-shell-sidebar .sidebar-item:hover {
      background: rgba(93, 159, 150, .10) !important;
      border-color: rgba(93, 159, 150, .25) !important;
    }

    /* Mobile spacing */
    @media (max-width: 720px) {
      .admin-section .panel {
        padding: 14px;
      }

      .admin-section h3,
      .admin-section .admin-title {
        font-size: 1.15rem !important;
        padding: 12px 14px !important;
      }

      .admin-closebar {
        margin-bottom: 14px !important;
      }
    }




    /* ===== Subtle Admin Motion Polish ===== */
    .admin-section.show {
      animation: adminFadeIn .18s ease-out;
    }

    @keyframes adminFadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

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

    .dashboard-kpi:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 32px rgba(15, 23, 42, .12) !important;
    }

    .dashboard-warning {
      position: relative;
      overflow: hidden;
    }

    .dashboard-warning::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg,
          transparent,
          rgba(250, 115, 5, .08),
          transparent);
      transform: translateX(-100%);
      animation: warningSweep 3.6s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes warningSweep {

      0%,
      55% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .admin-section.show,
      .dashboard-warning::after {
        animation: none !important;
      }

      .dashboard-kpi {
        transition: none !important;
      }
    }


    /* =========================================================
   DASHBOARD KPI POLISH — hierarchy, accents, tighter spacing
   ========================================================= */

    .dashboard-grid {
      gap: 14px !important;
    }

    /* Base KPI card */
    .dashboard-kpi {
      position: relative;
      overflow: hidden;
      min-height: 150px !important;
      padding: 18px 16px 16px !important;
      border-radius: 16px !important;
      background: #fff !important;
      border: 1px solid var(--line) !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
    }

    /* Accent strip on every card */
    .dashboard-kpi::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
    }

    /* KPI label */
    .dashboard-kpi .kpi-label {
      margin: 0 0 12px !important;
      font-size: 12px !important;
      font-weight: 800 !important;
      letter-spacing: .06em !important;
      color: #334155 !important;
      text-transform: uppercase !important;
    }

    /* KPI number */
    .dashboard-kpi .kpi-value {
      font-size: 1.85rem !important;
      line-height: 1.05 !important;
      font-weight: 900 !important;
      color: #020617 !important;
    }

    /* KPI note */
    .dashboard-kpi .kpi-note {
      margin-top: 12px !important;
      font-size: 13px !important;
      line-height: 1.25 !important;
      color: #64748b !important;
    }

    /* Hover polish */
    .dashboard-kpi {
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }

    .dashboard-kpi:hover {
      transform: translateY(-3px);
      border-color: rgba(93, 159, 150, .35) !important;
      box-shadow: 0 16px 34px rgba(15, 23, 42, .10) !important;
    }

    /* Warning cards */
    .dashboard-kpi.dashboard-warning {
      background: #fffbeb !important;
      border-color: rgba(250, 115, 5, .35) !important;
    }

    .dashboard-kpi.dashboard-warning::before {
      background: var(--brand-accent);
    }

    .dashboard-kpi.dashboard-warning .kpi-value {
      color: #b45309 !important;
    }

    /* Danger KPI option */
    .dashboard-kpi.dashboard-danger {
      background: #fef2f2 !important;
      border-color: rgba(217, 27, 36, .32) !important;
    }

    .dashboard-kpi.dashboard-danger::before {
      background: var(--brand-red);
    }

    .dashboard-kpi.dashboard-danger .kpi-value {
      color: var(--brand-red) !important;
    }

    /* Success KPI option */
    .dashboard-kpi.dashboard-success {
      background: #f0fdf4 !important;
      border-color: rgba(34, 197, 94, .28) !important;
    }

    .dashboard-kpi.dashboard-success::before {
      background: #22c55e;
    }

    .dashboard-kpi.dashboard-success .kpi-value {
      color: #15803d !important;
    }

    /* Receipt queue button */
    .dashboard-kpi .queue-details-btn,
    .dashboard-kpi .btn {
      border-radius: 10px !important;
      font-weight: 750 !important;
    }

    /* Mobile */
    @media (max-width: 720px) {
      .dashboard-kpi {
        min-height: 132px !important;
      }

      .dashboard-kpi .kpi-value {
        font-size: 1.6rem !important;
      }
    }


    /* ===== Admin page header polish ===== */
    .admin-shell-main>h2,
    #admin-title {
      margin: 0 0 6px !important;
      font-size: 2rem !important;
      font-weight: 900 !important;
      letter-spacing: -.03em !important;
      color: #020617 !important;
    }

    .admin-shell-main>p,
    #admin-subtitle {
      margin: 0 0 22px !important;
      font-size: 15px !important;
      color: #475569 !important;
      line-height: 1.45 !important;
    }

    /* ===== Inventory form polish ===== */
    #admin-inventory .panel {
      max-width: 980px !important;
      margin: 0 auto !important;
    }

    #admin-inventory .card {
      border-radius: 16px !important;
      padding: 18px !important;
      background: #fff !important;
    }

    #admin-inventory .card h4 {
      margin: 0 0 8px !important;
      font-size: 1.05rem !important;
      font-weight: 850 !important;
      color: #0f172a !important;
    }

    #admin-inventory .card>.muted {
      margin: 0 0 18px !important;
      color: #64748b !important;
      font-size: 14px !important;
    }

    #admin-inventory .inv-form-grid {
      gap: 14px 18px !important;
    }

    #admin-inventory .inv-field label {
      font-size: 13px !important;
      font-weight: 800 !important;
      color: #0f172a !important;
    }

    #admin-inventory .input,
    #admin-inventory select,
    #admin-inventory textarea {
      height: 38px !important;
      border-radius: 10px !important;
    }

    #admin-inventory .inv-upload {
      min-height: 88px !important;
      border-radius: 12px !important;
      background: #f8fafc !important;
    }

    #admin-inventory .inv-actions {
      margin-top: 22px !important;
      padding-top: 16px !important;
      border-top: 1px solid var(--line) !important;
      justify-content: flex-end !important;
    }

    #admin-inventory .inv-actions .btn.primary {
      min-width: 150px !important;
      height: 42px !important;
      border-radius: 12px !important;
      font-weight: 800 !important;
    }

    /* ===== Admin close bar cleanup ===== */
    .admin-closebar {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      margin: 0 0 12px !important;
      justify-content: flex-end !important;
    }

    .admin-closebar .close-btn {
      background: #fff !important;
      border: 1px solid #cbd5e1 !important;
      color: #334155 !important;
      border-radius: 10px !important;
      padding: 7px 12px !important;
      font-weight: 800 !important;
      box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
    }

    .admin-closebar .close-btn:hover {
      background: #f8fafc !important;
      border-color: var(--brand-primary) !important;
      color: var(--brand-primary) !important;
    }


    /* ===== Inventory table polish ===== */
    #admin-inventoryTable .inv-head,
    #admin-inventoryTable .inv-row {
      grid-template-columns: 2.4fr 1.1fr .75fr .85fr 1fr 1fr 1fr .9fr !important;
      gap: 10px !important;
    }

    #admin-inventoryTable .inv-product .name,
    #admin-inventoryTable .inv-title,
    #admin-inventoryTable .inv-meta {
      min-width: 0 !important;
    }

    #admin-inventoryTable .inv-product .name,
    #admin-inventoryTable .inv-title {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    #admin-inventoryTable .inv-row {
      min-height: 58px;
    }

    #admin-inventoryTable .inv-actions .btn,
    #admin-inventoryTable button[onclick*="deleteProduct"] {
      border-color: var(--brand-red) !important;
      color: var(--brand-red) !important;
      background: rgba(217, 27, 36, .05) !important;
    }

    #admin-inventoryTable .inv-actions .btn:hover,
    #admin-inventoryTable button[onclick*="deleteProduct"]:hover {
      background: rgba(217, 27, 36, .12) !important;
    }


    /* ===== Inventory filter toolbar polish ===== */
    #admin-inventoryTable .inventory-filter-bar {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 10px !important;
      margin: 12px 0 14px !important;
    }

    #admin-inventoryTable .inventory-filter-bar .pill,
    #admin-inventoryTable .inventory-filter-bar .btn,
    #admin-inventoryTable .inventory-filter-bar input[type="date"] {
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      white-space: nowrap !important;
    }

    #admin-inventoryTable .inventory-filter-bar label,
    #admin-inventoryTable .inventory-filter-bar .filters-label {
      margin: 0 !important;
      color: #64748b !important;
      font-size: 13px !important;
      font-weight: 700 !important;
    }

    /* ===== Inventory Table toolbar fixed layout ===== */
    #admin-inventoryTable .inventory-table-toolbar {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #admin-inventoryTable .inventory-search-wrap {
      width: 100%;
    }

  #admin-inventoryTable .inventory-filter-bar {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 12px !important;
  row-gap: 10px !important;
  align-items: center !important;
  margin: 0 !important;
}

#admin-inventoryTable #invLowBtn {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

#admin-inventoryTable .inventory-filter-group {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

#admin-inventoryTable .inventory-date-group {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 0 !important;
}

#admin-inventoryTable .inventory-date-group input[type="date"] {
  width: 150px !important;
}

    #admin-inventoryTable .inventory-filter-bar .pill,
    #admin-inventoryTable .inventory-filter-bar .btn,
    #admin-inventoryTable .inventory-filter-bar input[type="date"] {
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      white-space: nowrap !important;
    }

    #admin-inventoryTable .inventory-date-group label {
      margin: 0 !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      color: #64748b !important;
    }

    #admin-inventoryTable .inventory-date-group input[type="date"] {
      width: 162px !important;
    }

    #admin-inventoryTable .inventory-table-meta {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      gap: 12px !important;
      margin-top: 0 !important;
    }

    #admin-inventoryTable .inventory-pagination {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: var(--space-3);
      margin: var(--space-4) var(--space-5) var(--space-2);
      flex-wrap: wrap;
    }

    #admin-inventoryTable .inventory-pagination.hide {
      display: none !important;
    }

    #admin-inventoryTable .inventory-pagination .btn {
      min-width: 110px;
      border-radius: var(--radius-md);
    }

    #admin-inventoryTable #invPageInfo {
      font-weight: 700;
      color: var(--st-muted);
    }

    @media (max-width: 720px) {
      #admin-inventoryTable .inventory-date-group input[type="date"] {
        width: 100% !important;
      }

      #admin-inventoryTable .inventory-table-meta {
        align-items: flex-start !important;
        flex-direction: column !important;
      }
    }






    /* ===== Archived Products page ===== */
    #admin-archivedProducts .archived-products-wrap {
      margin-top: 14px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    #admin-archivedProducts .archived-products-table {
      width: 100%;
      min-width: 920px;
      border-collapse: collapse;
    }

    #admin-archivedProducts .archived-products-table th {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      text-align: left;
      padding: 14px 16px;
      font-weight: 800;
      white-space: nowrap;
    }

    #admin-archivedProducts .archived-products-table td {
      padding: 14px 16px;
      border-top: 1px solid var(--line);
      vertical-align: middle;
    }

    #admin-archivedProducts .archived-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    #admin-archivedProducts .archived-actions .btn {
      white-space: nowrap;
    }

    #admin-archivedProducts .archived-actions .btn.danger {
      border-color: var(--brand-red) !important;
      color: var(--brand-red) !important;
      background: rgba(217, 27, 36, .06) !important;
    }

    #admin-archivedProducts .archived-actions .btn.danger:hover {
      background: rgba(217, 27, 36, .12) !important;
    }



    /* ===== Low Stock & Refill real polish override ===== */
    #admin-refillList .panel {
      max-width: 980px !important;
      margin: 0 auto !important;
    }

    #admin-refillList #refillSummary {
      margin: 14px 0 10px !important;
      font-size: 14px !important;
      color: #475569 !important;
    }

    #admin-refillList .card {
      margin: 14px 0 !important;
      padding: 0 !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      border: 1px solid var(--line) !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
    }

    #admin-refillList .refill-supplier-head {
      margin: 0 !important;
      padding: 16px 18px !important;
      background: #f8fafc !important;
      border-bottom: 1px solid var(--line) !important;
    }

    #admin-refillList .refill-supplier-email-line {
      font-size: 16px !important;
      font-weight: 900 !important;
      color: #0f172a !important;
    }

    #admin-refillList .refill-supplier-wa-line {
      margin-top: 3px !important;
      font-size: 12px !important;
      color: #64748b !important;
    }

    #admin-refillList .refill-supplier-head .row {
      margin: 0 !important;
      gap: 8px !important;
    }

    #admin-refillList .refill-cols {
      padding: 12px 18px !important;
      margin: 0 !important;
      background: #fff !important;
      border-bottom: 1px solid #eef2f7 !important;
      color: #334155 !important;
      font-size: 13px !important;
    }

    #admin-refillList .refill-items {
      padding: 12px 18px 16px !important;
      gap: 10px !important;
      max-height: none !important;
    }

    #admin-refillList .refill-item {
      padding: 14px 16px !important;
      border-radius: 14px !important;
      background: #fff !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: 0 3px 10px rgba(15, 23, 42, .035) !important;
    }

    #admin-refillList .refill-name {
      font-size: 15px !important;
      font-weight: 900 !important;
      color: #0f172a !important;
    }

    #admin-refillList .refill-stock {
      font-weight: 750 !important;
      color: #334155 !important;
    }

    #admin-refillList .refill-pill {
      padding: 6px 11px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
    }

    #admin-refillList .refill-pill-critical {
      background: #fef2f2 !important;
      color: #b91c1c !important;
      border-color: #fca5a5 !important;
    }

    #admin-refillList .refill-pill-low {
      background: #fff7ed !important;
      color: #c2410c !important;
      border-color: #fdba74 !important;
    }

    #admin-refillList .refill-draft-btn {
      background: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #fff !important;
      font-weight: 800 !important;
    }

    #admin-refillList .btn.small,
    #admin-refillList .btn {
      border-radius: 10px !important;
      font-weight: 750 !important;
    }


    /* ===== Stock Transfer polish ===== */
    #admin-transfer .panel {
      max-width: 980px !important;
      margin: 0 auto !important;
    }

    #admin-transfer .panel>p.muted {
      margin: 0 0 18px !important;
      font-size: 15px !important;
      color: #475569 !important;
    }

    #admin-transfer .row {
      align-items: flex-end !important;
      gap: 14px !important;
      margin: 0 0 14px !important;
    }

    #admin-transfer .field {
      flex: 1 1 220px !important;
      min-width: 220px !important;
    }

    #admin-transfer .field label {
      font-size: 14px !important;
      font-weight: 800 !important;
      color: #334155 !important;
    }

    #admin-transfer select,
    #admin-transfer input {
      height: 46px !important;
      border-radius: 12px !important;
      font-size: 15px !important;
      font-weight: 650 !important;
    }

    #admin-transfer .btn.primary {
      height: 46px !important;
      min-width: 170px !important;
      border-radius: 12px !important;
      font-weight: 850 !important;
      background: var(--brand-accent) !important;
      border-color: var(--brand-accent) !important;
      color: #fff !important;
    }

    #admin-transfer .btn.primary:hover {
      filter: brightness(.96);
    }

    @media (max-width: 760px) {
      #admin-transfer .row {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      #admin-transfer .field,
      #admin-transfer .btn.primary {
        width: 100% !important;
      }
    }


    #admin-transfer textarea#transferNote {
      min-height: 46px !important;
      height: auto !important;
      resize: vertical !important;
      line-height: 1.35 !important;
    }


    /* ===== Transfer History polish ===== */
    #admin-transferHistory .panel {
      max-width: 980px !important;
      margin: 0 auto !important;
    }

    #admin-transferHistory .panel>.muted,
    #admin-transferHistory #transferHistorySummary {
      margin: 12px 0 14px !important;
      color: #475569 !important;
      font-size: 14px !important;
    }

    /* Filters */
    #admin-transferHistory select,
    #admin-transferHistory input {
      height: 42px !important;
      border-radius: 10px !important;
      margin-bottom: 8px !important;
    }

    #admin-transferHistory .btn {
      border-radius: 10px !important;
      font-weight: 750 !important;
    }

    /* Reconciliation box */
    #admin-transferHistory .reconciliation-box,
    #admin-transferHistory #transferReconciliation {
      margin: 12px 0 16px !important;
      padding: 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: #fff !important;
      box-shadow: 0 4px 14px rgba(15, 23, 42, .04) !important;
    }

    /* Transfer history table wrapper */
    #admin-transferHistory #transferHistoryTable {
      width: 100% !important;
      overflow-x: auto !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: #fff !important;
    }

    /* If table is rendered using rows/divs */
    #admin-transferHistory .transfer-history-head,
    #admin-transferHistory .transfer-history-row {
      display: grid !important;
      grid-template-columns: 150px 110px 110px 150px 70px 100px minmax(220px, 1fr) !important;
      gap: 12px !important;
      align-items: center !important;
      padding: 12px 14px !important;
      min-width: 900px !important;
    }

    #admin-transferHistory .transfer-history-head {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt)) !important;
      color: #fff !important;
      font-weight: 850 !important;
    }

    #admin-transferHistory .transfer-history-row {
      border-top: 1px solid var(--line) !important;
    }

    #admin-transferHistory .transfer-history-row>div {
      min-width: 0 !important;
      overflow-wrap: anywhere !important;
    }

    /* If table is rendered as actual table */
    #admin-transferHistory table {
      width: 100% !important;
      min-width: 900px !important;
      border-collapse: collapse !important;
    }

    #admin-transferHistory table th {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt)) !important;
      color: #fff !important;
      text-align: left !important;
      padding: 12px 14px !important;
      font-weight: 850 !important;
      white-space: nowrap !important;
    }

    #admin-transferHistory table td {
      padding: 12px 14px !important;
      border-top: 1px solid var(--line) !important;
      vertical-align: top !important;
    }

    #admin-transferHistory table td:last-child {
      white-space: normal !important;
      min-width: 220px !important;
    }


    /* ===== Transfer History real table polish ===== */
    #admin-transfers .transfer-table-wrap {
      margin-top: 14px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    #admin-transfers .transfer-table {
      width: 100%;
      min-width: 900px;
      border-collapse: collapse;
    }

    #admin-transfers .transfer-table th {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      text-align: left;
      padding: 13px 14px;
      font-weight: 850;
      white-space: nowrap;
    }

    #admin-transfers .transfer-table td {
      padding: 13px 14px;
      border-top: 1px solid var(--line);
      vertical-align: top;
    }

    #admin-transfers .transfer-table .num {
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    #admin-transfers .transfer-snapshot {
      margin-top: 4px;
      font-size: 11px !important;
      line-height: 1.3;
    }

    #admin-transfers .transfer-table td:last-child {
      min-width: 220px;
      white-space: normal;
    }

    /* ===== Transfer reconciliation dashboard polish ===== */
    #admin-transfers #transferReconcileBox,
    #admin-transfers .transfer-reconcile-box,
    #admin-transfers .reconciliation-box {
      margin: 14px 0 18px !important;
      padding: 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 16px !important;
      background: #fff !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
    }

    #admin-transfers #transferReconcileBox h4,
    #admin-transfers .transfer-reconcile-box h4,
    #admin-transfers .reconciliation-box h4 {
      margin: 0 0 14px !important;
      font-size: 1rem !important;
      font-weight: 900 !important;
      color: #0f172a !important;
    }

    #admin-transfers #transferReconcileBox h5,
    #admin-transfers .transfer-reconcile-box h5,
    #admin-transfers .reconciliation-box h5 {
      margin: 14px 0 4px !important;
      font-size: .9rem !important;
      font-weight: 850 !important;
      color: #334155 !important;
    }

    #admin-transfers #transferReconcileBox .muted,
    #admin-transfers .transfer-reconcile-box .muted,
    #admin-transfers .reconciliation-box .muted {
      display: block !important;
      margin-bottom: 3px !important;
      color: #64748b !important;
      line-height: 1.25 !important;
    }


    /* ===== Transfer reconciliation dashboard real polish ===== */
    #admin-transfers .transfer-reconcile-card {
      margin: 14px 0 18px !important;
      padding: 16px !important;
      border: 1px solid var(--line) !important;
      border-radius: 16px !important;
      background: #fff !important;
      box-shadow: 0 6px 18px rgba(15, 23, 42, .05) !important;
    }

    #admin-transfers .transfer-reconcile-title {
      font-size: 16px !important;
      font-weight: 900 !important;
      color: #0f172a !important;
      margin-bottom: 14px !important;
    }

    #admin-transfers .transfer-reconcile-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 12px !important;
    }

    #admin-transfers .transfer-reconcile-section {
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      padding: 12px !important;
      background: #f8fafc !important;
    }

    #admin-transfers .transfer-reconcile-heading {
      font-weight: 850 !important;
      color: #334155 !important;
      margin-bottom: 8px !important;
    }

    #admin-transfers .transfer-reconcile-line {
      font-size: 13px !important;
      color: #475569 !important;
      line-height: 1.35 !important;
      margin-bottom: 4px !important;
    }

    #admin-transfers .transfer-reconcile-warning {
      background: #fffbeb !important;
      border-color: rgba(250, 115, 5, .35) !important;
    }

    @media (max-width: 900px) {
      #admin-transfers .transfer-reconcile-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* ===== Home + clickable brand polish ===== */
    .brand-home-btn {
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
    }

    .brand-home-btn:hover .highlight {
      filter: brightness(.95);
    }

    #home {
      padding: 0 !important;
    }

    #home .home-hero {
      width: min(100%, 1180px);
      margin: 42px auto 0;
      min-height: calc(100vh - 150px);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }

    #home .hero-inner {
      max-width: 760px !important;
    }

    #home .hero-inner h2 {
      letter-spacing: -.04em;
    }

    #home .home-actions {
      margin-top: 28px;
    }



    /* ===== Archived Products ===== */
    .archived-toolbar {
      margin-bottom: 14px;
    }

    .archived-table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
    }

    .archived-table {
      width: 100%;
      border-collapse: collapse;
    }

    .archived-table th {
      background: linear-gradient(90deg, var(--brand-primary), var(--brand-alt));
      color: #fff;
      text-align: left;
      padding: 13px 14px;
      font-weight: 850;
    }

    .archived-table td {
      padding: 14px;
      border-top: 1px solid var(--line);
      vertical-align: top;
    }

    .archived-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .archived-pagination {
      margin-top: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .btn.danger {
      border-color: #ef4444 !important;
      color: #ef4444 !important;
      background: rgba(239, 68, 68, .04) !important;
    }

    /* ===== Editable inventory fields ===== */
    .inv-editable {
      cursor: text;
      transition: background .12s ease, border-color .12s ease;
      border-radius: 6px;
      padding: 1px 4px;
    }

    .inv-editable:hover {
      background: #f8fafc;
    }

    .inv-editable:focus,
    .inv-editable.editing {
      background: #fff;
      outline: 2px solid rgba(250, 115, 5, .18);
    }

    .inv-editable.name:hover::after,
    .inv-meta-chip:hover::after,
    .inv-supplier-email:hover::after,
    .inv-supplier-wa:hover::after {
      content: " ✎";
      font-size: 11px;
      opacity: .55;
    }

    /* ===== Stronger editable inventory hover state ===== */
    .inv-editable {
      cursor: text;
      transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
      border-radius: 8px;
      padding: 3px 6px;
      border: 1px solid transparent;
    }

    .inv-editable:hover {
      background: #fff7ed !important;
      border-color: rgba(250, 115, 5, .35) !important;
      box-shadow: 0 0 0 3px rgba(250, 115, 5, .10) !important;
    }

    .inv-editable:hover::after,
    .inv-meta-chip:hover::after,
    .inv-supplier-email:hover::after,
    .inv-supplier-wa:hover::after {
      content: " ✎";
      font-size: 11px;
      opacity: .75;
      color: var(--brand-accent);
    }

    .inv-editable:focus,
    .inv-editable.editing {
      background: #fff !important;
      border-color: var(--brand-accent) !important;
      box-shadow: 0 0 0 3px rgba(250, 115, 5, .16) !important;
      outline: none !important;
    }


    /* ===== Inventory numeric input fix only ===== */
    #invTable .cell-num input,
    #invTable .inv-edit {
      min-width: 72px !important;
      text-align: center !important;
      padding: 0 8px !important;
    }



    /* ===== Inventory table: compact 7-column layout ===== */


    #invTable .inv-supplier {
      margin-top: 4px;
      font-size: 12px;
      color: #64748b;
    }

    #invTable .inv-supplier-email,
    #invTable .inv-supplier-wa {
      display: inline-block;
      max-width: 190px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: bottom;
    }

    #invTable .cell-num input,
    #invTable .inv-edit {
      min-width: 72px !important;
      text-align: center !important;
      padding: 0 8px !important;
    }


    /* ===== Inventory table spacing fix ===== */
    #invTable {
      overflow-x: auto;
    }

    #invTable .inv-head,
    #invTable .inv-row {
      min-width: 1050px !important;
      grid-template-columns:
        260px
        /* Product */
        110px
        /* Qty */
        120px
        /* Lowstock */
        120px
        /* Cost */
        120px
        /* Price */
        120px
        /* Margin */
        130px !important;
      /* Archive */
      gap: 14px !important;
    }

    #invTable .inv-row {
      align-items: center !important;
    }

    #invTable .cell-num input,
    #invTable .inv-edit {
      width: 96px !important;
      min-width: 96px !important;
    }

    #invTable .num-text {
      min-width: 96px !important;
      display: inline-block !important;
      text-align: center !important;
    }

    #invTable .inv-actions {
      display: flex !important;
      justify-content: center !important;
    }







    /* ===== Transfer note preview/modal ===== */
    #admin-transfers .transfer-note-preview {
      display: inline-block;
      max-width: 220px;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #admin-transfers .transfer-note-btn {
      margin-left: 8px;
      padding: 6px 10px !important;
      font-size: 13px !important;
    }

    .transfer-note-modal {
      position: fixed;
      inset: 0;
      z-index: 10070;
      background: rgba(15, 23, 42, .55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .transfer-note-card {
      position: relative;
      width: min(620px, 94vw);
      max-height: 84vh;
      overflow: auto;
      background: #fff;
      border-radius: 18px;
      padding: 24px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    }

    .transfer-note-card h3 {
      margin: 0 0 14px;
    }

    .transfer-note-card p,
    .transfer-note-full {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: normal;
      overflow: visible;
      text-overflow: clip;
      max-width: 100%;
      max-height: none;
      line-height: 1.45;
      margin: 0;
      color: #334155;
    }

    .transfer-note-close {
      position: absolute;
      top: 12px;
      right: 14px;
      border: none;
      background: transparent;
      font-size: 26px;
      cursor: pointer;
    }

    .transfer-note-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 18px;
    }




    /* ===== Transfer History pagination ===== */
    #admin-transfers .transfer-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      margin-top: 16px;
      flex-wrap: wrap;
    }

    #admin-transfers .transfer-pagination .btn {
      border-radius: 999px !important;
      font-weight: 800 !important;
    }





    /* ===== Contact success confirmation ===== */
    .contact-mode-banner {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin: 12px 0 18px;
      padding: 12px 14px;
      border: 1px solid rgba(37, 99, 235, .28);
      border-radius: 14px;
      background: rgba(37, 99, 235, .08);
      color: #1E3A8A;
      line-height: 1.45;
    }

    .contact-mode-banner strong {
      font-size: .94rem;
      font-weight: 900;
    }

    .contact-mode-banner span {
      font-size: .9rem;
      color: inherit;
    }

    .contact-mode-banner.contact-mode-banner-connected {
      border-color: rgba(22, 163, 74, .28);
      background: rgba(22, 163, 74, .08);
      color: #166534;
    }

    .contact-mode-banner.contact-mode-banner-prototype {
      border-color: rgba(217, 119, 6, .34);
      background: rgba(217, 119, 6, .1);
      color: #92400E;
    }

    .contact-success {
      width: min(720px, calc(100% - 32px));
      margin: 24px auto;
      padding: 28px 22px;
      text-align: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 12px 32px rgba(15, 23, 42, .08);
    }

    .contact-success-icon {
      width: 54px;
      height: 54px;
      margin: 0 auto 14px;
      border-radius: 999px;
      background: #dcfce7;
      color: #15803d;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 900;
    }

    .contact-success h3 {
      margin: 0 0 8px;
      font-size: 1.35rem;
      font-weight: 900;
    }

    .contact-success p {
      margin: 0 auto 10px;
      max-width: 560px;
      color: #475569;
      line-height: 1.45;
    }

    .contact-success-ref {
      margin-top: 14px !important;
      color: #0f172a !important;
    }

    .contact-success-actions {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
      flex-wrap: wrap;
    }


    /* ===== Inquiry search ===== */
    #admin-inquiries .inquiry-search-row {
      margin: 14px 0 12px;
    }

    #admin-inquiries .inquiry-search-row .search {
      width: 100%;
      height: 44px;
      border-radius: 12px;
    }


    /* ===== Center Inquiries pagination ===== */
    #admin-inquiries .inquiry-pagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 12px !important;
      width: 100% !important;
      margin: 16px auto 0 !important;
    }


    /* ===== Cashiers table scroll polish ===== */
    #admin-cashiers .cashiers-table-wrap,
    #admin-cashiers .table-wrap {
      max-height: 420px;
      overflow-y: auto;
      overflow-x: auto;
    }


    /* ===== SureTrack Header Final Override ===== */

    header .active-shop-badge {
      background: #ffffff !important;
      color: #111827 !important;
      border: 1px solid rgba(255, 255, 255, .35) !important;
      font-weight: 800 !important;
      opacity: 1 !important;
    }

    header .nav a:hover {
      color: var(--st-primary) !important;
      opacity: 1 !important;
    }

    header .nav a {
      opacity: 1 !important;
    }


    /* ===== SureTrack Button Final Override ===== */

    .btn.primary,
    .login-actions .btn.primary,
    #adminLoginModal .btn.primary,
    #adminPinModal .btn.primary,
    #adminIdleModal .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #fff !important;
    }

    .btn.primary:hover,
    .login-actions .btn.primary:hover,
    #adminLoginModal .btn.primary:hover,
    #adminPinModal .btn.primary:hover,
    #adminIdleModal .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
      color: #fff !important;
    }

    .btn.secondary,
    .login-actions .btn.secondary,
    #adminLoginModal .btn.secondary,
    #adminPinModal .btn.secondary,
    #adminIdleModal .btn.secondary {
      background: #fff !important;
      border-color: var(--st-border) !important;
      color: var(--st-text) !important;
    }

    .btn.secondary:hover,
    .login-actions .btn.secondary:hover,
    #adminLoginModal .btn.secondary:hover,
    #adminPinModal .btn.secondary:hover,
    #adminIdleModal .btn.secondary:hover {
      background: #F3F4F6 !important;
      border-color: #D1D5DB !important;
      color: var(--st-text) !important;
    }

    /* ===== SureTrack FINAL button hover fix ===== */

    button.btn.primary,
    a.btn.primary,
    .btn.primary,
    .login-actions .btn.primary,
    #adminLoginModal .btn.primary,
    #adminPinModal .btn.primary,
    #adminIdleModal .btn.primary,
    #cardTerminalModal .btn.primary,
    .receipt-actions .btn.primary,
    .row-actions .btn.primary {
      background: var(--st-primary) !important;
      background-image: none !important;
      border-color: var(--st-primary) !important;
      color: #fff !important;
    }

    button.btn.primary:hover,
    a.btn.primary:hover,
    .btn.primary:hover,
    .login-actions .btn.primary:hover,
    #adminLoginModal .btn.primary:hover,
    #adminPinModal .btn.primary:hover,
    #adminIdleModal .btn.primary:hover,
    #cardTerminalModal .btn.primary:hover,
    .receipt-actions .btn.primary:hover,
    .row-actions .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      background-image: none !important;
      border-color: var(--st-primary-hover) !important;
      color: #fff !important;
      box-shadow: 0 8px 20px rgba(249, 115, 22, .22) !important;
    }



    /* ===== SureTrack Phase 2 Final UI Overrides ===== */

    #adminLoginModal .login-head,
    #adminPinModal .login-head,
    #adminIdleModal .login-head {
      background: linear-gradient(90deg, var(--st-secondary), #1F2937) !important;
    }

    #adminLoginModal .btn.primary,
    #adminPinModal .btn.primary,
    #adminIdleModal .btn.primary,
    .login-actions .btn.primary {
      background: var(--st-primary) !important;
      background-image: none !important;
      border: 1px solid var(--st-primary) !important;
      color: #fff !important;
    }

    #adminLoginModal .btn.primary:hover,
    #adminPinModal .btn.primary:hover,
    #adminIdleModal .btn.primary:hover,
    .login-actions .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      background-image: none !important;
      border-color: var(--st-primary-hover) !important;
      color: #fff !important;
      box-shadow: 0 8px 20px rgba(249, 115, 22, .22) !important;
    }

    #adminLoginModal .btn.secondary,
    #adminPinModal .btn.secondary,
    #adminIdleModal .btn.secondary,
    .login-actions .btn.secondary {
      background: #fff !important;
      background-image: none !important;
      border: 1px solid var(--st-border) !important;
      color: var(--st-text) !important;
    }

    #adminLoginModal .btn.secondary:hover,
    #adminPinModal .btn.secondary:hover,
    #adminIdleModal .btn.secondary:hover,
    .login-actions .btn.secondary:hover {
      background: #F3F4F6 !important;
      background-image: none !important;
      border-color: #D1D5DB !important;
      color: var(--st-text) !important;
    }

    #home .home-hero {
      background: linear-gradient(135deg, var(--st-secondary), #1F2937) !important;
    }


    /* ===== SureTrack Home Final ===== */

    body #home {
      background: transparent !important;
    }

    body #home .home-hero {
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .24), transparent 28%),
        linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 55%, #9CA3AF 100%) !important;
      color: var(--st-text) !important;
    }

    body #home .home-hero h1,
    body #home .home-hero h2,
    body #home .home-hero p {
      color: var(--st-text) !important;
    }

    /* subscription card */

    body #home .subscription-card {
      background: rgba(255, 255, 255, .92) !important;
      border: 1px solid var(--st-border) !important;
      backdrop-filter: blur(10px);
    }

    /* report problem button */

    body #home .btn.secondary,
    body #home .btn.outline {
      background: #4B5563 !important;
      border: 1px solid #4B5563 !important;
      color: #fff !important;
    }

    body #home .btn.secondary:hover,
    body #home .btn.outline:hover {
      background: #374151 !important;
    }

    /* ===== SureTrack Report Problem Button Fix ===== */

    body #home .hero-cta--secondary {
      background: #111827 !important;
      border: 1px solid #111827 !important;
      color: #FFFFFF !important;
      opacity: 1 !important;
      text-shadow: none !important;
      box-shadow: 0 12px 28px rgba(17, 24, 39, .18) !important;
    }

    body #home .hero-cta--secondary:hover {
      background: #374151 !important;
      border-color: #374151 !important;
      color: #FFFFFF !important;
      opacity: 1 !important;
    }

    /* ===== SureTrack Navbar/Footer Soft Dark Override ===== */

    body header,
    body footer.footer {
      background: #1F2937 !important;
      border-color: #374151 !important;
    }

    body header .brand,
    body header .nav a,
    body footer.footer,
    body footer.footer p,
    body footer.footer a,
    body footer.footer small {
      color: #F9FAFB !important;
    }

    body header .nav a:hover,
    body footer.footer a:hover {
      color: var(--st-primary) !important;
    }

    /* ===== SureTrack Phase 3: Component System Foundation ===== */

    /* Page shell */
    .admin-section,
    #pos,
    #contact {
      color: var(--st-text);
    }

    /* Modern page panels */
    .panel {
      background: var(--st-surface) !important;
      border: 1px solid var(--st-border) !important;
      border-radius: 18px !important;
      box-shadow: 0 10px 30px rgba(17, 24, 39, .06) !important;
    }

    /* Cards */
    .card,
    .admin-card,
    .dashboard-kpi {
      background: #fff !important;
      border: 1px solid var(--st-border) !important;
      border-radius: 18px !important;
      box-shadow: 0 8px 24px rgba(17, 24, 39, .06) !important;
    }

    /* Card hover */
    .card:hover,
    .admin-card:hover {
      border-color: rgba(249, 115, 22, .35) !important;
      box-shadow: 0 16px 36px rgba(17, 24, 39, .10) !important;
    }

    /* Primary buttons */
    .btn.primary {
      background: var(--st-primary) !important;
      background-image: none !important;
      border: 1px solid var(--st-primary) !important;
      color: #fff !important;
      font-weight: 700 !important;
      border-radius: 12px !important;
    }

    .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    /* Secondary buttons */
    .btn.secondary,
    .btn:not(.primary):not(.danger):not(.logout) {
      border-radius: 12px !important;
    }

    /* Inputs */
    .input,
    select,
    textarea {
      border-radius: 12px !important;
      border: 1px solid var(--st-border) !important;
      background: #fff !important;
      color: var(--st-text) !important;
    }

    .input:focus,
    select:focus,
    textarea:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .16) !important;
    }

    /* Tables / rows */
    .table,
    #invTable,
    #salesTableBox,
    .incident-table,
    .rcpt-table {
      border-radius: 16px !important;
      overflow: hidden !important;
    }

    /* Section headings */
    .admin-section h3,
    .panel>h3 {
      background: linear-gradient(90deg, #1F2937, #374151) !important;
      color: #fff !important;
      border-radius: 14px !important;
      box-shadow: 0 10px 24px rgba(17, 24, 39, .12) !important;
    }

    /* Status tags */
    .tag {
      border-radius: 999px !important;
      font-weight: 700 !important;
    }



    /* ===== POS Basket Header Exact Fix ===== */

    #pos .panel .cart-head {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      padding: 14px 22px !important;
      margin: 0 0 14px !important;
    }

    #pos .panel .cart-head::before {
      margin: 0 !important;
      flex: 0 0 auto !important;
    }




    /* ===== Footer Heading Visibility Fix ===== */

    body footer.footer .foot-head {
      color: #F9FAFB !important;
      opacity: 1 !important;
      font-weight: 800 !important;
      letter-spacing: .06em !important;
    }


    /* ===== POS Panel Border Line Fix ===== */

    #pos .panel {
      overflow: hidden !important;
      border-radius: 18px !important;
    }

    #pos .panel::before {
      display: none !important;
      content: none !important;
    }

    #pos .panel .product-head,
    #pos .panel .cart-head {
      border-bottom: none !important;
      margin: 0 0 16px !important;
      padding: 18px 22px !important;
      border-radius: 16px !important;
      background: #FFFFFF !important;
    }

    #pos .panel .cart-head {
      background: linear-gradient(90deg, #1F2937, #374151) !important;
      color: #FFFFFF !important;
    }



    /* ===== Match POS panel headers ===== */

    #pos .panel .product-head,
    #pos .panel .cart-head {
      min-height: 74px !important;
      display: flex !important;
      align-items: center !important;
      padding: 18px 22px !important;
    }

    /* ===== POS Product Panel Contrast Fix ===== */

    #pos .panel {
      background: #F9FAFB !important;
    }

    #pos .panel .product-head {
      background: transparent !important;
    }

    #pos #productGrid .card,
    #pos .pos-card {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      box-shadow: 0 8px 22px rgba(17, 24, 39, .06) !important;
    }

    #pos .product-search input,
    #pos #search {
      background: #FFFFFF !important;
    }



    /* ===== POS Product Panel + Product Cards Polish ===== */

    #pos .two-col> :first-child .panel {
      background: #F9FAFB !important;
      padding: 24px !important;
    }

    #pos .panel .product-head {
      min-height: auto !important;
      padding: 10px 4px 20px !important;
      margin-bottom: 16px !important;
      background: transparent !important;
      color: var(--st-text) !important;
      box-shadow: none !important;
    }

    #pos .product-head::before {
      font-size: 24px !important;
    }

    #pos .product-search {
      margin-bottom: 14px !important;
    }

    #pos .product-search input,
    #pos #search {
      height: 52px !important;
      border-radius: 16px !important;
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      box-shadow: 0 4px 14px rgba(17, 24, 39, .04) !important;
      font-size: 15px !important;
    }

    #pos #productGrid {
      gap: 18px !important;
    }

    #pos #productGrid .card,
    #pos .pos-card {
      min-height: 260px !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 20px !important;
      padding: 14px !important;
      box-shadow: 0 8px 22px rgba(17, 24, 39, .06) !important;
      display: flex !important;
      flex-direction: column !important;
    }

    #pos #productGrid .card:hover,
    #pos .pos-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(249, 115, 22, .35) !important;
      box-shadow: 0 18px 38px rgba(17, 24, 39, .12) !important;
    }

    #pos .product-thumb {
      border-radius: 16px !important;
      background: #F3F4F6 !important;
      border: 1px solid #E5E7EB !important;
    }

    #pos .pos-card b,
    #pos #productGrid .card b {
      color: var(--st-text) !important;
      font-size: 16px !important;
      line-height: 1.3 !important;
    }

    #pos #productGrid .card .muted {
      color: var(--st-muted) !important;
      font-size: 13px !important;
      line-height: 1.4 !important;
    }

    #pos .ribbon-low {
      background: #FFF7ED !important;
      color: #C2410C !important;
      border: 1px solid #FDBA74 !important;
      box-shadow: 0 8px 18px rgba(17, 24, 39, .10) !important;
    }

    #pos .btn.add-btn {
      margin-top: auto !important;
      height: 44px !important;
      border-radius: 14px !important;
      font-weight: 800 !important;
    }



    /* ===== POS Basket / Cart Polish ===== */

    #pos .two-col> :last-child .panel {
      background: #F9FAFB !important;
      padding: 24px !important;
    }

    #pos .panel .cart-head {
      min-height: auto !important;
      padding: 10px 4px 20px !important;
      margin-bottom: 16px !important;
      background: transparent !important;
      color: var(--st-text) !important;
      box-shadow: none !important;
    }

    #pos .cart-head::before {
      font-size: 24px !important;
    }

    #pos #cartList {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      padding: 14px !important;
      box-shadow: 0 8px 22px rgba(17, 24, 39, .05) !important;
    }

    #pos #cartList p.muted {
      background: #F9FAFB !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 16px !important;
      padding: 18px !important;
      text-align: center !important;
      color: var(--st-muted) !important;
      font-weight: 600 !important;
    }

    #pos #cartList .row {
      background: #FFFFFF !important;
      border-bottom: 1px solid #F3F4F6 !important;
      padding: 10px 0 !important;
      margin: 0 !important;
    }

    #pos #cartList .row:last-child {
      border-bottom: none !important;
    }

    #pos #subtotal {
      color: var(--st-primary) !important;
      font-size: 20px !important;
      font-weight: 900 !important;
    }

    #pos .cart-block {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      box-shadow: 0 8px 22px rgba(17, 24, 39, .05) !important;
    }

    #pos .cart-cta,
    #pos #btnCheckoutOnly {
      height: 48px !important;
      border-radius: 14px !important;
      font-weight: 900 !important;
    }

    /* ===== POS Action Buttons Polish ===== */

    #pos #btnShareWA,
    #pos #btnShareTG,
    #pos #btnShareEmail,
    #pos #btnPrintPDF,
    #pos #btnCheckoutOnly,
    #pos .cart-notify,
    #pos .cart-cta {
      min-height: 46px !important;
      border-radius: 14px !important;
      font-weight: 800 !important;
    }

    #pos #btnCheckoutOnly,
    #pos .cart-cta {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #fff !important;
      box-shadow: 0 10px 24px rgba(249, 115, 22, .22) !important;
    }

    #pos #btnCheckoutOnly:hover,
    #pos .cart-cta:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    #pos #btnShareWA,
    #pos #btnShareTG,
    #pos #btnShareEmail,
    #pos #btnPrintPDF {
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: var(--st-text) !important;
      box-shadow: 0 6px 16px rgba(17, 24, 39, .05) !important;
    }

    #pos #btnShareWA:hover,
    #pos #btnShareTG:hover,
    #pos #btnShareEmail:hover,
    #pos #btnPrintPDF:hover {
      background: #F3F4F6 !important;
      border-color: #9CA3AF !important;
      color: var(--st-text) !important;
    }


    /* ===== Phase 3: Admin Dashboard KPI + Cards ===== */

    /* Dashboard spacing */

    .admin-home,
    .admin-dashboard,
    .admin-grid {
      gap: 24px !important;
    }

    /* KPI cards */

    .admin-card,
    .dashboard-kpi,
    .kpi-card {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 20px !important;
      padding: 22px !important;
      box-shadow: 0 10px 30px rgba(17, 24, 39, .06) !important;
      transition: all .2s ease !important;
      overflow: hidden !important;
    }

    .admin-card:hover,
    .dashboard-kpi:hover,
    .kpi-card:hover {
      transform: translateY(-2px) !important;
      border-color: rgba(249, 115, 22, .35) !important;
      box-shadow: 0 16px 36px rgba(17, 24, 39, .12) !important;
    }

    /* KPI values */

    .admin-card h2,
    .dashboard-kpi h2,
    .kpi-card h2 {
      font-size: 28px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
      margin-bottom: 8px !important;
    }

    /* KPI labels */

    .admin-card .muted,
    .dashboard-kpi .muted,
    .kpi-card .muted {
      color: var(--st-muted) !important;
      font-size: 13px !important;
    }

    /* Small icon area */

    .admin-card .icon,
    .dashboard-kpi .icon,
    .kpi-card .icon {
      width: 46px !important;
      height: 46px !important;
      border-radius: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: rgba(249, 115, 22, .12) !important;
      color: var(--st-primary) !important;
    }

    /* Section headers */

    .admin-section h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      font-size: 20px !important;
      font-weight: 800 !important;
      padding: 0 !important;
      box-shadow: none !important;
    }



    /* ===== Phase 3: Admin Sidebar Polish ===== */

    .admin-shell-sidebar {
      margin-top: 32px !important;
      gap: 16px !important;
    }

    .admin-shell-sidebar .sidebar-panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 20px !important;
      padding: 14px !important;
      box-shadow: 0 10px 28px rgba(17, 24, 39, .06) !important;
    }

    .admin-shell-sidebar .sidebar-label,
    .admin-shell-sidebar .sidebar-group-toggle {
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      margin: 0 0 10px !important;
      padding: 10px 12px !important;
      border: 0 !important;
      border-radius: 14px !important;
      background: #F9FAFB !important;
      color: #374151 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
    }

    .admin-shell-sidebar .sidebar-item {
      width: 100% !important;
      display: flex;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 10px !important;
      min-width: 0 !important;
      padding: 11px 12px !important;
      margin: 4px 0 !important;
      border-radius: 14px !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      color: #374151 !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      text-align: left !important;
      transition: background .18s ease, color .18s ease, border-color .18s ease, transform .08s ease !important;
    }

    .admin-shell-sidebar .sidebar-item:hover {
      background: #FFF7ED !important;
      border-color: rgba(249, 115, 22, .28) !important;
      color: #C2410C !important;
      transform: translateX(2px) !important;
    }

    .admin-shell-sidebar .sidebar-item.active,
    .admin-shell-sidebar .sidebar-item[aria-current="page"] {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
      box-shadow: 0 10px 22px rgba(249, 115, 22, .22) !important;
    }

    .admin-shell-sidebar .sidebar-submenu {
      margin-top: 4px !important;
    }

    .admin-shell-sidebar .sidebar-submenu-body {
      margin: 4px 0 8px 12px !important;
      padding-left: 10px !important;
      border-left: 2px solid #E5E7EB !important;
    }

    .admin-shell-sidebar .sidebar-subitem {
      font-size: 13px !important;
      padding: 9px 10px !important;
      color: #4B5563 !important;
    }

    .admin-shell-sidebar .submenu-arrow {
      margin-left: auto !important;
      font-size: 11px !important;
      opacity: .75 !important;
    }





    /* ===== Phase 3: Inventory Table Polish ===== */

    #admin-inventoryTable .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-inventoryTable .panel>h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    #admin-inventoryTable .row:first-of-type {
      padding: 14px 22px !important;
    }

    #admin-inventoryTable #invTable {
      margin: 12px 22px 22px !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      overflow: hidden !important;
      background: #FFFFFF !important;
    }

    #admin-inventoryTable .inv-head {
      background: #F9FAFB !important;
      color: #374151 !important;
      border-bottom: 1px solid #E5E7EB !important;
      border-radius: 0 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
    }

    #admin-inventoryTable .inv-row {
      background: #FFFFFF !important;
      border-bottom: 1px solid #F3F4F6 !important;
    }

    #admin-inventoryTable .inv-row:hover {
      background: #FFF7ED !important;
    }

    #admin-inventoryTable .inv-edit,
    #admin-inventoryTable .num-text {
      border-radius: 10px !important;
      border: 1px solid #E5E7EB !important;
      background: #F9FAFB !important;
    }

    #admin-inventoryTable .inv-edit:focus {
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #admin-inventoryTable .tag.low {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
      font-weight: 800 !important;
    }

    /* ===== Inventory Table Width Fix ===== */

    #admin-inventoryTable #invTable {
      overflow-x: auto !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    #admin-inventoryTable .inv-head,
    #admin-inventoryTable .inv-row {
      min-width: 1400px !important;
    }

    /* ===== Inventory Table Header Navbar Overlap Fix ===== */

    #admin-inventoryTable .inv-head {
      position: static !important;
      top: auto !important;
      z-index: auto !important;
    }

    #admin-inventoryTable .inv-row>*,
    #admin-inventoryTable .inv-head>* {
      white-space: nowrap !important;
    }

    #admin-inventoryTable .inv-row {
      overflow: visible !important;
    }


    /* ===== Inventory Filter Visual Fix ===== */

    /* Low stock is the main toggle */
    #admin-inventoryTable #invLowBtn.toggled,
    #admin-inventoryTable #invLowBtn[aria-pressed="true"] {
      background: #111827 !important;
      border-color: #111827 !important;
      color: #FFFFFF !important;
      box-shadow: 0 8px 20px rgba(17, 24, 39, .16) !important;
    }

    /* Expiry "All" should look neutral, not like a second strong active filter */
    #admin-inventoryTable #invExpAll.active,
    #admin-inventoryTable #invExpAll[aria-pressed="true"] {
      background: #FFFFFF !important;
      border-color: #CBD5E1 !important;
      color: #374151 !important;
      box-shadow: none !important;
    }

    /* Real expiry filters can stay highlighted */
    #admin-inventoryTable #invExpExp.active,
    #admin-inventoryTable #invExpExp[aria-pressed="true"],
    #admin-inventoryTable #invExpSoon.active,
    #admin-inventoryTable #invExpSoon[aria-pressed="true"],
    #admin-inventoryTable #invExpNone.active,
    #admin-inventoryTable #invExpNone[aria-pressed="true"] {
      box-shadow: 0 8px 18px rgba(17, 24, 39, .10) !important;
    }

    /* ===== Inventory Table Persistent Scrollbar Track Fix ===== */

    #admin-inventoryTable .panel,
    #admin-section-view,
    .admin-shell-main {
      overflow-x: hidden !important;
      max-width: 100% !important;
    }

    #admin-inventoryTable #invTable {
      display: block !important;
      width: calc(100% - 44px) !important;
      max-width: calc(100% - 44px) !important;
      margin: 12px 22px 22px !important;
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      border-radius: 18px !important;
      box-sizing: border-box !important;
      scrollbar-gutter: stable !important;
      padding-bottom: 8px !important;
    }

    #admin-inventoryTable #invTable .inv-head,
    #admin-inventoryTable #invTable .inv-row {
      width: 1250px !important;
      min-width: 1250px !important;
      max-width: 1250px !important;
    }

    /* Shared admin table scrollbar styling */
    #admin-inventoryTable #invTable::-webkit-scrollbar,
    #admin-archivedProducts .archived-table-wrap::-webkit-scrollbar,
    #admin-transfers .transfer-table-wrap::-webkit-scrollbar,
    #admin-salesTable .sales-table-scroll::-webkit-scrollbar,
    #admin-receipts .rcpt-table-wrap::-webkit-scrollbar,
    #subscriptionSubscribersView .admin-subscriptions-table-wrap::-webkit-scrollbar {
      height: 14px !important;
    }

    #admin-inventoryTable #invTable::-webkit-scrollbar-track,
    #admin-archivedProducts .archived-table-wrap::-webkit-scrollbar-track,
    #admin-transfers .transfer-table-wrap::-webkit-scrollbar-track,
    #admin-salesTable .sales-table-scroll::-webkit-scrollbar-track,
    #admin-receipts .rcpt-table-wrap::-webkit-scrollbar-track,
    #subscriptionSubscribersView .admin-subscriptions-table-wrap::-webkit-scrollbar-track {
      background: #E5E7EB !important;
      border-radius: 999px !important;
    }

    #admin-inventoryTable #invTable::-webkit-scrollbar-thumb,
    #admin-archivedProducts .archived-table-wrap::-webkit-scrollbar-thumb,
    #admin-transfers .transfer-table-wrap::-webkit-scrollbar-thumb,
    #admin-salesTable .sales-table-scroll::-webkit-scrollbar-thumb,
    #admin-receipts .rcpt-table-wrap::-webkit-scrollbar-thumb,
    #subscriptionSubscribersView .admin-subscriptions-table-wrap::-webkit-scrollbar-thumb {
      background: #9CA3AF !important;
      border-radius: 999px !important;
      border: 3px solid #E5E7EB !important;
    }

    #admin-inventoryTable #invTable::-webkit-scrollbar-thumb:hover,
    #admin-archivedProducts .archived-table-wrap::-webkit-scrollbar-thumb:hover,
    #admin-transfers .transfer-table-wrap::-webkit-scrollbar-thumb:hover,
    #admin-receipts .rcpt-table-wrap::-webkit-scrollbar-thumb:hover {
      background: #6B7280 !important;
    }


    /* ===== Inventory Table Zebra Rows + Hover Refinement ===== */

    #admin-inventoryTable .inv-row:nth-child(even) {
      background: #FFFFFF !important;
    }

    #admin-inventoryTable .inv-row:nth-child(odd) {
      background: #F9FAFB !important;
    }

    #admin-inventoryTable .inv-row:hover {
      background: #FFF7ED !important;
    }

    #admin-inventoryTable .inv-row:hover .inv-edit,
    #admin-inventoryTable .inv-row:hover .num-text {
      background: #FFFFFF !important;
      border-color: #FDBA74 !important;
    }


    /* ===== Inventory Table Empty State ===== */

    #admin-inventoryTable .inventory-empty-state {
      margin: 18px !important;
      padding: 34px 20px !important;
      text-align: center !important;
      background: #F9FAFB !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 18px !important;
      color: var(--st-text) !important;
    }

    #admin-inventoryTable .inventory-empty-icon {
      font-size: 34px !important;
      margin-bottom: 10px !important;
    }

    #admin-inventoryTable .inventory-empty-title {
      font-size: 18px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
      margin-bottom: 6px !important;
    }

    #admin-inventoryTable .inventory-empty-text {
      font-size: 14px !important;
      color: var(--st-muted) !important;
    }



    /* ===== Phase 3: Archived Products Polish ===== */

    #admin-archivedProducts .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-archivedProducts .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    #admin-archivedProducts .admin-subtitle {
      padding: 0 22px 14px !important;
      margin: 0 !important;
      color: var(--st-muted) !important;
    }

    #admin-archivedProducts .archived-toolbar {
      padding: 14px 22px !important;
    }

    #admin-archivedProducts #archivedProductsSearch {
      height: 44px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
      color: var(--st-text) !important;
    }

    #admin-archivedProducts #archivedProductsSearch:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #admin-archivedProducts .archived-table-wrap {
      margin: 0 22px 22px !important;
      overflow-x: auto !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
    }

    #admin-archivedProducts .archived-table {
      width: 100% !important;
      min-width: 920px !important;
      border-collapse: collapse !important;
    }

    #admin-archivedProducts .archived-table th {
      background: #F9FAFB !important;
      color: #374151 !important;
      text-align: left !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
      white-space: nowrap !important;
    }

    #admin-archivedProducts .archived-table td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      vertical-align: middle !important;
      color: var(--st-text) !important;
    }

    #admin-archivedProducts .archived-table tbody tr:nth-child(even) {
      background: #FFFFFF !important;
    }

    #admin-archivedProducts .archived-table tbody tr:nth-child(odd) {
      background: #F9FAFB !important;
    }

    #admin-archivedProducts .archived-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-archivedProducts .archived-actions {
      display: flex !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
    }

    #admin-archivedProducts .archived-actions .btn {
      border-radius: 12px !important;
      font-weight: 800 !important;
      white-space: nowrap !important;
    }

    #admin-archivedProducts .archived-actions .btn:not(.danger) {
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: var(--st-text) !important;
    }

    #admin-archivedProducts .archived-actions .btn:not(.danger):hover {
      background: #F3F4F6 !important;
    }

    #admin-archivedProducts .archived-actions .btn.danger {
      background: #FEF2F2 !important;
      border: 1px solid #FCA5A5 !important;
      color: #B91C1C !important;
    }

    #admin-archivedProducts .archived-actions .btn.danger:hover {
      background: #FEE2E2 !important;
    }

    #admin-archivedProducts .archived-pagination,
    #admin-transfers .transfer-pagination {
      margin: 18px 22px 24px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
    }

    #admin-archivedProducts .archived-pagination .btn {
      border-radius: 999px !important;
      font-weight: 800 !important;
    }



    /* ===== Archived Products Horizontal Scrollbar Only ===== */

    #admin-archivedProducts .archived-table-wrap {
      overflow-x: scroll !important;
      overflow-y: visible !important;
      max-width: 100% !important;
      max-height: none !important;
      scrollbar-gutter: stable !important;
      padding-bottom: 6px !important;
    }

    #admin-archivedProducts .archived-table {
      min-width: 980px !important;
    }

    /* ===== Archived Products Final Polish ===== */

    #admin-archivedProducts .archived-empty-state {
      margin: 18px 22px 24px !important;
      padding: 34px 20px !important;
      text-align: center !important;
      background: #F9FAFB !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 18px !important;
    }

    #admin-archivedProducts .archived-empty-icon {
      font-size: 34px !important;
      margin-bottom: 10px !important;
    }

    #admin-archivedProducts .archived-empty-title {
      font-size: 18px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
      margin-bottom: 6px !important;
    }

    #admin-archivedProducts .archived-empty-text {
      font-size: 14px !important;
      color: var(--st-muted) !important;
    }

    /* Restore should be the safer primary action */
    #admin-archivedProducts .archived-actions .btn:first-child {
      background: #FFF7ED !important;
      border: 1px solid #FDBA74 !important;
      color: #C2410C !important;
    }

    #admin-archivedProducts .archived-actions .btn:first-child:hover {
      background: #FFEDD5 !important;
    }

    /* ===== Phase 7.92N.18: Modern Archived Products ===== */

    #admin-archivedProducts .archived-toolbar {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      gap: 12px !important;
      align-items: center !important;
      padding: 12px 22px 14px !important;
    }

    #admin-archivedProducts .archived-search-wrap {
      width: min(520px, 100%) !important;
      max-width: 100% !important;
    }

    #admin-archivedProducts #archivedProductsSearch {
      width: 100% !important;
      height: 40px !important;
      min-height: 40px !important;
      border-radius: 999px !important;
    }

    #admin-archivedProducts .archived-result-count {
      margin: 0 !important;
      color: var(--st-muted) !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      text-align: right !important;
      white-space: nowrap !important;
    }

    #admin-archivedProducts .archived-modern-wrap {
      margin: 0 22px 22px !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      padding-bottom: 0 !important;
      border: 1px solid #E2E8F0 !important;
      border-radius: 20px !important;
      background: #FFFFFF !important;
      scrollbar-gutter: stable !important;
    }

    #admin-archivedProducts .archived-modern-table {
      display: block !important;
      width: 100% !important;
      min-width: 1040px !important;
      border-collapse: unset !important;
      background: #FFFFFF !important;
    }

    #admin-archivedProducts .archived-modern-head,
    #admin-archivedProducts .archived-modern-row {
      display: grid !important;
      grid-template-columns:
        minmax(220px, 1.3fr)
        minmax(200px, 1fr)
        minmax(100px, .45fr)
        minmax(120px, .55fr)
        minmax(170px, 1fr)
        118px !important;
      gap: 12px !important;
      align-items: center !important;
      box-sizing: border-box !important;
      min-width: 1040px !important;
    }

    #admin-archivedProducts .archived-modern-head {
      padding: 12px 14px !important;
      background: #F8FAFC !important;
      color: #475569 !important;
      border-bottom: 2px solid #CBD5E1 !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      line-height: 1.25 !important;
      text-transform: uppercase !important;
    }

    #admin-archivedProducts .archived-modern-head > div,
    #admin-archivedProducts .archived-modern-row > div {
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    #admin-archivedProducts .archived-modern-row {
      padding: 14px !important;
      background: #FFFFFF !important;
      border-bottom: 2px solid #E5E7EB !important;
    }

    #admin-archivedProducts .archived-modern-row:nth-child(even) {
      background: #FAFBFC !important;
    }

    #admin-archivedProducts .archived-modern-row:last-child {
      border-bottom: 0 !important;
    }

    #admin-archivedProducts .archived-modern-row:hover {
      background: #FFF7ED !important;
    }

    #admin-archivedProducts .archived-product-cell {
      display: grid !important;
      grid-template-columns: 42px minmax(0, 1fr) !important;
      gap: 10px !important;
      align-items: center !important;
    }

    #admin-archivedProducts .archived-product-initial {
      width: 42px !important;
      height: 42px !important;
      border-radius: 14px !important;
      border: 1px solid #DDE5EF !important;
      background: linear-gradient(135deg, #F1F5F9, #E0F2FE) !important;
      color: #0F766E !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 900 !important;
      flex: 0 0 42px !important;
    }

    #admin-archivedProducts .archived-product-name {
      min-width: 0 !important;
      color: var(--st-text) !important;
      font-size: 14px !important;
      font-weight: 900 !important;
      line-height: 1.28 !important;
      overflow-wrap: anywhere !important;
      white-space: normal !important;
    }

    #admin-archivedProducts .archived-details-cell {
      display: grid !important;
      gap: 8px !important;
    }

    #admin-archivedProducts .archived-detail-pair {
      display: grid !important;
      gap: 2px !important;
      min-width: 0 !important;
    }

    #admin-archivedProducts .archived-detail-label {
      color: #64748B !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      line-height: 1.1 !important;
      text-transform: uppercase !important;
    }

    #admin-archivedProducts .archived-detail-value,
    #admin-archivedProducts .archived-reason-cell {
      min-width: 0 !important;
      color: #334155 !important;
      font-size: 13px !important;
      font-weight: 750 !important;
      line-height: 1.35 !important;
      overflow-wrap: anywhere !important;
      white-space: normal !important;
    }

    #admin-archivedProducts .archived-money-pill {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 82px !important;
      max-width: 100% !important;
      padding: 6px 10px !important;
      border: 1px solid #BBF7D0 !important;
      border-radius: 999px !important;
      background: #F0FDF4 !important;
      color: #166534 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
      font-variant-numeric: tabular-nums !important;
      white-space: nowrap !important;
    }

    #admin-archivedProducts .archived-date-cell {
      color: #334155 !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      line-height: 1.35 !important;
      white-space: normal !important;
    }

    #admin-archivedProducts .archived-date-cell span {
      display: block !important;
      color: #64748B !important;
      font-size: 12px !important;
      font-weight: 800 !important;
    }

    #admin-archivedProducts .archived-modern-row .archived-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: stretch !important;
      min-width: 0 !important;
    }

    #admin-archivedProducts .archived-restore-btn {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      width: 100% !important;
      min-height: 38px !important;
      border-radius: 999px !important;
      border: 1px solid var(--st-primary) !important;
      background: var(--st-primary) !important;
      color: #FFFFFF !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
    }

    #admin-archivedProducts .archived-restore-btn:hover {
      background: var(--brand-alt) !important;
      border-color: var(--brand-alt) !important;
    }

    #admin-archivedProducts .archived-restore-btn:focus-visible {
      outline: 3px solid rgba(249, 115, 22, .28) !important;
      outline-offset: 2px !important;
    }

    #admin-archivedProducts .archived-restore-btn svg {
      width: 15px !important;
      height: 15px !important;
      flex: 0 0 15px !important;
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
    }

    @media (max-width: 760px) {
      #admin:has(#admin-archivedProducts.show) .admin-shell {
        grid-template-columns: 1fr !important;
      }

      #admin:has(#admin-archivedProducts.show) .admin-shell-sidebar {
        margin-top: 0 !important;
      }

      #admin-archivedProducts .archived-toolbar {
        grid-template-columns: 1fr !important;
      }

      #admin-archivedProducts .archived-result-count {
        text-align: left !important;
        white-space: normal !important;
      }

      #admin-archivedProducts .archived-modern-wrap {
        overflow: visible !important;
      }

      #admin-archivedProducts .archived-modern-table,
      #admin-archivedProducts .archived-modern-head,
      #admin-archivedProducts .archived-modern-row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }

      #admin-archivedProducts .archived-modern-head {
        display: none !important;
      }

      #admin-archivedProducts .archived-modern-body {
        display: grid !important;
        gap: 12px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
      }

      #admin-archivedProducts .archived-modern-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 18px !important;
      }

      #admin-archivedProducts .archived-modern-row > div::before {
        content: attr(data-archived-label) !important;
        display: block !important;
        margin-bottom: 4px !important;
        color: #64748B !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: .06em !important;
        text-transform: uppercase !important;
      }

      #admin-archivedProducts .archived-product-cell::before,
      #admin-archivedProducts .archived-actions::before {
        margin-bottom: 8px !important;
      }

      #admin-archivedProducts .archived-product-cell {
        grid-template-columns: 38px minmax(0, 1fr) !important;
      }

      #admin-archivedProducts .archived-product-initial {
        width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
      }

      #admin-archivedProducts .archived-restore-btn {
        width: 100% !important;
      }
    }


    /* ===== Phase 3: Low Stock & Refill Polish ===== */

    #admin-refillList .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-refillList .admin-title,
    #admin-refillList h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    #admin-refillList #refillSummary {
      margin: 0 22px 18px !important;
      padding: 12px 14px !important;
      background: #FFF7ED !important;
      border: 1px solid #FDBA74 !important;
      border-radius: 14px !important;
      color: #C2410C !important;
      font-weight: 800 !important;
    }

    #admin-refillList #refillListBox {
      padding: 0 22px 24px !important;
    }

    #admin-refillList .card {
      margin: 16px 0 !important;
      padding: 0 !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      border: 1px solid #E5E7EB !important;
      background: #FFFFFF !important;
      box-shadow: 0 10px 26px rgba(17, 24, 39, .06) !important;
    }

    #admin-refillList .refill-supplier-head {
      margin: 0 !important;
      padding: 16px 18px !important;
      background: #F9FAFB !important;
      border-bottom: 1px solid #E5E7EB !important;
      align-items: flex-start !important;
    }

    #admin-refillList .refill-supplier-email-line {
      font-size: 16px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
    }

    #admin-refillList .refill-supplier-wa-line {
      margin-top: 4px !important;
      font-size: 12px !important;
      color: var(--st-muted) !important;
    }

    #admin-refillList .refill-supplier-head .row {
      margin: 0 !important;
      gap: 8px !important;
      justify-content: flex-end !important;
      flex-wrap: wrap !important;
    }

    #admin-refillList .refill-supplier-head .btn {
      border-radius: 999px !important;
      font-weight: 800 !important;
      min-height: 36px !important;
      padding: 8px 12px !important;
    }

    #admin-refillList .refill-draft-btn {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
    }

    #admin-refillList .refill-draft-btn:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    #admin-refillList .refill-wa-btn {
      background: #ECFDF5 !important;
      border-color: #86EFAC !important;
      color: #166534 !important;
    }

    #admin-refillList .refill-wa-btn:hover {
      background: #DCFCE7 !important;
    }

    #admin-refillList .refill-select-all,
    #admin-refillList .refill-clear {
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-refillList .refill-select-all:hover,
    #admin-refillList .refill-clear:hover {
      background: #F3F4F6 !important;
    }

    #admin-refillList .refill-cols {
      padding: 12px 18px !important;
      margin: 0 !important;
      background: #FFFFFF !important;
      border-bottom: 1px solid #F3F4F6 !important;
      color: #374151 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .04em !important;
      text-transform: uppercase !important;
    }

    #admin-refillList .refill-items {
      padding: 12px 18px 16px !important;
      gap: 10px !important;
      max-height: none !important;
    }

    #admin-refillList .refill-item {
      padding: 14px 16px !important;
      border-radius: 16px !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      box-shadow: 0 4px 12px rgba(17, 24, 39, .04) !important;
    }

    #admin-refillList .refill-item:nth-child(odd) {
      background: #F9FAFB !important;
    }

    #admin-refillList .refill-item:hover {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
    }

    #admin-refillList .refill-check {
      width: 18px !important;
      height: 18px !important;
      accent-color: var(--st-primary) !important;
    }

    #admin-refillList .refill-name {
      font-size: 15px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
    }

    #admin-refillList .refill-stock {
      color: #374151 !important;
      font-weight: 800 !important;
    }

    #admin-refillList .refill-suggestion {
      margin-top: 6px !important;
      font-size: 12px !important;
      color: var(--st-muted) !important;
    }

    #admin-refillList .refill-pill {
      border-radius: 999px !important;
      padding: 6px 10px !important;
      font-weight: 900 !important;
    }

    #admin-refillList .refill-pill-low {
      background: #FEF3C7 !important;
      border: 1px solid #FBBF24 !important;
      color: #92400E !important;
    }

    #admin-refillList .refill-pill-critical {
      background: #FEE2E2 !important;
      border: 1px solid #FCA5A5 !important;
      color: #991B1B !important;
    }



    /* ===== Phase 3: Stock Transfer + Transfer History Polish ===== */

    /* Stock Transfer form panel */

    #admin-transfer .panel,
    #admin-transfers .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    /* Section titles */

    #admin-transfer h3,
    #admin-transfers h3,
    #admin-transfer .admin-title,
    #admin-transfers .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    /* Helper text */

    #admin-transfer .helper,
    #admin-transfers .helper {
      color: var(--st-muted) !important;
      font-size: 14px !important;
    }

    #admin-transfer .panel>.helper,
    #admin-transfers .panel>.helper {
      padding: 0 22px 14px !important;
      margin: 0 !important;
    }

    /* Form layout inside Stock Transfer */

    #admin-transfer .panel>.row {
      margin: 0 !important;
      padding: 14px 22px 22px !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
      gap: 16px !important;
      align-items: end !important;
    }

    /* Product and note can span wider */

    #admin-transfer .panel>.row .field:nth-child(3),
    #admin-transfer .panel>.row .field:nth-child(5) {
      grid-column: span 2 !important;
    }

    /* Inputs */

    #admin-transfer .input,
    #admin-transfer select,
    #admin-transfer textarea {
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
      color: var(--st-text) !important;
    }

    #admin-transfer .input:focus,
    #admin-transfer select:focus,
    #admin-transfer textarea:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    /* Labels */

    #admin-transfer label {
      color: #374151 !important;
      font-weight: 800 !important;
      font-size: 13px !important;
    }

    /* Preview button */


    /* Preview box */

    #admin-transfer #transferPreviewBox {
      margin: 0 22px 22px !important;
      padding: 14px 16px !important;
      border-radius: 16px !important;
      background: #F9FAFB !important;
      border: 1px dashed #D1D5DB !important;
      color: var(--st-muted) !important;
    }

    /* Transfer History table wrapper */

    #admin-transfers .transfer-table-wrap {
      margin: 14px 22px 22px !important;
      overflow-x: scroll !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      scrollbar-gutter: stable !important;
      padding-bottom: 6px !important;
    }

    /* Transfer History table */

    #admin-transfers .transfer-table {
      width: 100% !important;
      min-width: 960px !important;
      border-collapse: collapse !important;
    }

    /* Table header */

    #admin-transfers .transfer-table th {
      background: #F9FAFB !important;
      color: #374151 !important;
      text-align: left !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
      white-space: nowrap !important;
    }

    /* Table rows */

    #admin-transfers .transfer-table td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      vertical-align: top !important;
      color: var(--st-text) !important;
    }

    #admin-transfers .transfer-table tbody tr:nth-child(even) {
      background: #FFFFFF !important;
    }

    #admin-transfers .transfer-table tbody tr:nth-child(odd) {
      background: #F9FAFB !important;
    }

    #admin-transfers .transfer-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-transfers .transfer-table .num {
      color: var(--st-primary) !important;
      font-weight: 900 !important;
      font-variant-numeric: tabular-nums !important;
    }

    /* Transfer snapshot text */

    #admin-transfers .transfer-snapshot {
      color: var(--st-muted) !important;
      font-size: 12px !important;
      line-height: 1.4 !important;
    }

    /* Smaller screens */

    @media (max-width: 760px) {
      #admin-transfer .panel>.row {
        grid-template-columns: 1fr !important;
      }

      #admin-transfer .panel>.row .field:nth-child(3),
      #admin-transfer .panel>.row .field:nth-child(5) {
        grid-column: span 1 !important;
      }
    }

    /* ===== Stock Transfer Preview Spacing Fix ===== */

    #admin-transfer .transfer-preview {
      display: block !important;
      padding: 18px 20px !important;
      line-height: 1.45 !important;
    }

    #admin-transfer .transfer-preview-title {
      font-size: 16px !important;
      line-height: 1.3 !important;
      margin-bottom: 8px !important;
    }

    #admin-transfer .transfer-preview-text,
    #admin-transfer .transfer-preview-note {
      font-size: 14px !important;
      line-height: 1.5 !important;
      margin-bottom: 8px !important;
    }

    #admin-transfer .transfer-preview-actions {
      margin-top: 18px !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
      clear: both !important;
    }

    #admin-transfer .transfer-preview-actions .btn {
      min-height: 44px !important;
      padding: 10px 18px !important;
    }


    /* ===== Phase 3: Transfer History Final Polish ===== */

    #admin-transfers .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-transfers .admin-title,
    #admin-transfers h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      box-shadow: none !important;
    }

    #admin-transfers #transferSummary {
      margin: 0 22px 14px !important;
      padding: 12px 14px !important;
      background: #F9FAFB !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 14px !important;
      color: #374151 !important;
      font-weight: 700 !important;
    }

    #admin-transfers .transfer-table-wrap {
      margin: 14px 22px 22px !important;
      overflow-x: scroll !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      scrollbar-gutter: stable !important;
      padding-bottom: 6px !important;
    }

    #admin-transfers .transfer-table {
      width: 100% !important;
      min-width: 980px !important;
      border-collapse: collapse !important;
    }

    #admin-transfers .transfer-table th {
      background: #F9FAFB !important;
      color: #374151 !important;
      text-align: left !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-table td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      vertical-align: top !important;
      color: var(--st-text) !important;
    }

    #admin-transfers .transfer-table tbody tr:nth-child(even) {
      background: #FFFFFF !important;
    }

    #admin-transfers .transfer-table tbody tr:nth-child(odd) {
      background: #F9FAFB !important;
    }

    #admin-transfers .transfer-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-transfers .transfer-table .num {
      color: var(--st-primary) !important;
      font-weight: 900 !important;
      font-variant-numeric: tabular-nums !important;
    }

    #admin-transfers .transfer-snapshot {
      margin-top: 6px !important;
      padding: 6px 8px !important;
      background: #F3F4F6 !important;
      border-radius: 10px !important;
      color: #4B5563 !important;
      font-size: 12px !important;
      line-height: 1.35 !important;
    }

    #admin-transfers .transfer-note-preview {
      display: inline-block !important;
      max-width: 260px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      vertical-align: middle !important;
    }

    #admin-transfers .transfer-note-btn {
      margin-left: 8px !important;
      padding: 7px 11px !important;
      border-radius: 999px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-transfers .transfer-note-btn:hover {
      background: #F3F4F6 !important;
    }

    /* ===== Transfer History Note Button Alignment Fix ===== */

    #admin-transfers td .transfer-note-wrap {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: nowrap !important;
    }

    #admin-transfers .transfer-note-preview {
      flex: 1 !important;
      min-width: 0 !important;
      max-width: 240px !important;

      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-note-btn {
      flex-shrink: 0 !important;
      margin-left: 0 !important;
      min-height: 34px !important;
    }


    /* ===== Transfer History Note Button Alignment Fix ===== */

    #admin-transfers td .transfer-note-wrap {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: nowrap !important;
    }

    #admin-transfers .transfer-note-preview {
      flex: 1 !important;
      min-width: 0 !important;
      max-width: 240px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-note-btn {
      flex-shrink: 0 !important;
      margin-left: 0 !important;
      min-height: 34px !important;
    }


    /* ===== Transfer History View Note Button Final Override ===== */

    #admin-transfers .transfer-note-wrap .transfer-note-btn {
      flex-shrink: 0 !important;
      margin-left: 0 !important;
      min-height: 34px !important;

      background: #F9FAFB !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;

      border-radius: 999px !important;
      padding: 7px 12px !important;

      font-size: 12px !important;
      font-weight: 900 !important;

      transition: all .18s ease !important;
    }

    #admin-transfers .transfer-note-wrap .transfer-note-btn:hover {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
    }


    /* ===== Transfer History Table Balance Fix ===== */

    #admin-transfers .transfer-table {
      min-width: 1120px !important;
      table-layout: fixed !important;
    }

    #admin-transfers .transfer-table th:nth-child(1),
    #admin-transfers .transfer-table td:nth-child(1) {
      width: 150px !important;
    }

    #admin-transfers .transfer-table th:nth-child(2),
    #admin-transfers .transfer-table td:nth-child(2),
    #admin-transfers .transfer-table th:nth-child(3),
    #admin-transfers .transfer-table td:nth-child(3) {
      width: 100px !important;
    }

    #admin-transfers .transfer-table th:nth-child(4),
    #admin-transfers .transfer-table td:nth-child(4) {
      width: 160px !important;
    }

    #admin-transfers .transfer-table th:nth-child(5),
    #admin-transfers .transfer-table td:nth-child(5) {
      width: 190px !important;
    }

    #admin-transfers .transfer-table th:nth-child(6),
    #admin-transfers .transfer-table td:nth-child(6) {
      width: 100px !important;
    }

    #admin-transfers .transfer-table th:nth-child(7),
    #admin-transfers .transfer-table td:nth-child(7) {
      width: 320px !important;
    }

    #admin-transfers .transfer-table td {
      padding-top: 12px !important;
      padding-bottom: 12px !important;
    }

    #admin-transfers .transfer-note-wrap {
      width: 100% !important;
    }

    #admin-transfers .transfer-note-preview {
      max-width: 230px !important;
    }

    /* ===== Phase 7.92N: Modern Transfer History + Note Column Fix ===== */

    #admin-transfers .transfer-history-panel {
      background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%) !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      border-radius: 24px !important;
      box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
      overflow: hidden !important;
    }

    #admin-transfers .transfer-history-page-head {
      display: flex !important;
      justify-content: space-between !important;
      gap: 16px !important;
      padding: 24px 26px 14px !important;
      background:
        radial-gradient(circle at top right, rgba(249, 115, 22, .12), transparent 34%),
        linear-gradient(135deg, #fff7ed 0%, #ffffff 64%) !important;
      border-bottom: 1px solid rgba(226, 232, 240, .82) !important;
    }

    #admin-transfers .transfer-history-page-head h3 {
      padding: 0 !important;
      margin: 0 !important;
      font-size: 26px !important;
      line-height: 1.15 !important;
      color: var(--st-text) !important;
    }

    #admin-transfers .transfer-history-page-head .muted {
      margin: 8px 0 0 !important;
      color: #64748b !important;
      line-height: 1.45 !important;
    }

    #admin-transfers #transfersSummary {
      margin: 16px 26px 0 !important;
      padding: 11px 14px !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      border-radius: 14px !important;
      background: rgba(255, 255, 255, .88) !important;
      color: #475569 !important;
      font-weight: 750 !important;
    }

    #admin-transfers .transfer-history-toolbar {
      margin: 14px 26px 0 !important;
      padding: 14px !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      border-radius: 18px !important;
      background: rgba(255, 255, 255, .9) !important;
      align-items: center !important;
    }

    #admin-transfers .transfer-history-toolbar .input,
    #admin-transfers .transfer-history-toolbar .btn {
      min-height: 42px !important;
      border-radius: 12px !important;
    }

    #admin-transfers #txReconBox {
      margin: 16px 26px 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #admin-transfers .transfer-reconcile-card {
      margin: 0 !important;
      padding: 18px !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      border-radius: 20px !important;
      background: rgba(255, 255, 255, .94) !important;
      box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
    }

    #admin-transfers .transfer-reconcile-head {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      gap: 14px !important;
      margin-bottom: 14px !important;
    }

    #admin-transfers .transfer-reconcile-title {
      margin: 0 !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      color: #0f172a !important;
    }

    #admin-transfers .transfer-reconcile-count {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 30px !important;
      padding: 6px 10px !important;
      border-radius: 999px !important;
      background: #fff7ed !important;
      color: #c2410c !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-reconcile-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 14px !important;
    }

    #admin-transfers .transfer-reconcile-section {
      padding: 14px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
      min-width: 0 !important;
    }

    #admin-transfers .transfer-reconcile-heading {
      margin-bottom: 10px !important;
      color: #334155 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .045em !important;
      text-transform: uppercase !important;
    }

    #admin-transfers .transfer-reconcile-line {
      display: flex !important;
      justify-content: space-between !important;
      gap: 10px !important;
      align-items: baseline !important;
      color: #475569 !important;
      line-height: 1.35 !important;
      overflow-wrap: anywhere !important;
    }

    #admin-transfers .transfer-reconcile-line + .transfer-reconcile-line {
      margin-top: 8px !important;
    }

    #admin-transfers .transfer-reconcile-line strong {
      color: #0f172a !important;
      font-variant-numeric: tabular-nums !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-net-line {
      display: grid !important;
      grid-template-columns: 1fr auto !important;
    }

    #admin-transfers .transfer-net-line small {
      grid-column: 1 / -1 !important;
      color: #64748b !important;
      font-size: 12px !important;
    }

    #admin-transfers .transfer-net-positive {
      color: #15803d !important;
    }

    #admin-transfers .transfer-net-negative {
      color: #b91c1c !important;
    }

    #admin-transfers .transfer-net-neutral {
      color: #475569 !important;
    }

    #admin-transfers .transfer-reconcile-warning {
      background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%) !important;
      border-color: rgba(251, 146, 60, .45) !important;
    }

    #admin-transfers .transfer-flag-line {
      display: block !important;
      color: #92400e !important;
    }

    #admin-transfers .transfer-table-wrap {
      margin: 16px 26px 0 !important;
      overflow-x: auto !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      border-radius: 20px !important;
      background: #ffffff !important;
      box-shadow: 0 14px 32px rgba(15, 23, 42, .06) !important;
      scrollbar-gutter: stable !important;
      padding-bottom: 0 !important;
    }

    #admin-transfers .transfer-table {
      width: 100% !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      table-layout: fixed !important;
      background: transparent !important;
    }

    #admin-transfers .transfer-table-backend {
      min-width: 1180px !important;
    }

    #admin-transfers .transfer-table-local {
      min-width: 1080px !important;
    }

    #admin-transfers .transfer-table th {
      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
      color: #475569 !important;
      text-align: left !important;
      padding: 15px 18px !important;
      font-size: 11px !important;
      font-weight: 950 !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #e2e8f0 !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-table th:last-child {
      padding-right: 28px !important;
    }

    #admin-transfers .transfer-table td {
      padding: 16px 18px !important;
      border-top: 0 !important;
      border-bottom: 1px solid #f1f5f9 !important;
      vertical-align: middle !important;
      color: #1f2937 !important;
      background: transparent !important;
      min-width: 0 !important;
      overflow-wrap: anywhere !important;
    }

    #admin-transfers .transfer-table tbody tr {
      background: #ffffff !important;
      transition: background .16s ease !important;
    }

    #admin-transfers .transfer-table tbody tr:nth-child(even) {
      background: #f8fafc !important;
    }

    #admin-transfers .transfer-table tbody tr:hover {
      background: #fff7ed !important;
    }

    #admin-transfers .transfer-table tbody tr:last-child td {
      border-bottom: 0 !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(1),
    #admin-transfers .transfer-table-backend td:nth-child(1) {
      width: 150px !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(2),
    #admin-transfers .transfer-table-backend td:nth-child(2) {
      width: 120px !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(3),
    #admin-transfers .transfer-table-backend td:nth-child(3),
    #admin-transfers .transfer-table-backend th:nth-child(4),
    #admin-transfers .transfer-table-backend td:nth-child(4) {
      width: 130px !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(5),
    #admin-transfers .transfer-table-backend td:nth-child(5) {
      width: 240px !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(6),
    #admin-transfers .transfer-table-backend td:nth-child(6) {
      width: 76px !important;
      text-align: right !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(7),
    #admin-transfers .transfer-table-backend td:nth-child(7) {
      width: 120px !important;
    }

    #admin-transfers .transfer-table-backend th:nth-child(8),
    #admin-transfers .transfer-table-backend td:nth-child(8) {
      width: 214px !important;
      padding-right: 28px !important;
    }

    #admin-transfers .transfer-table-local th:nth-child(1),
    #admin-transfers .transfer-table-local td:nth-child(1) {
      width: 160px !important;
    }

    #admin-transfers .transfer-table-local th:nth-child(2),
    #admin-transfers .transfer-table-local td:nth-child(2),
    #admin-transfers .transfer-table-local th:nth-child(3),
    #admin-transfers .transfer-table-local td:nth-child(3) {
      width: 140px !important;
    }

    #admin-transfers .transfer-table-local th:nth-child(4),
    #admin-transfers .transfer-table-local td:nth-child(4) {
      width: 240px !important;
    }

    #admin-transfers .transfer-table-local th:nth-child(5),
    #admin-transfers .transfer-table-local td:nth-child(5) {
      width: 116px !important;
      text-align: right !important;
    }

    #admin-transfers .transfer-table-local th:nth-child(6),
    #admin-transfers .transfer-table-local td:nth-child(6) {
      width: 100px !important;
    }

    #admin-transfers .transfer-table-local th:nth-child(7),
    #admin-transfers .transfer-table-local td:nth-child(7) {
      width: 244px !important;
      padding-right: 28px !important;
    }

    #admin-transfers .transfer-qty-value {
      display: inline-flex !important;
      justify-content: flex-end !important;
      min-width: 36px !important;
      color: var(--st-primary) !important;
      font-weight: 950 !important;
      font-variant-numeric: tabular-nums !important;
    }

    #admin-transfers .transfer-status-badge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 28px !important;
      padding: 5px 10px !important;
      border-radius: 999px !important;
      font-size: 11px !important;
      font-weight: 950 !important;
      letter-spacing: .04em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }

    #admin-transfers .transfer-status-success {
      background: #dcfce7 !important;
      color: #166534 !important;
      border: 1px solid rgba(22, 101, 52, .16) !important;
    }

    #admin-transfers .transfer-status-warning {
      background: #fef3c7 !important;
      color: #92400e !important;
      border: 1px solid rgba(146, 64, 14, .16) !important;
    }

    #admin-transfers .transfer-status-info {
      background: #dbeafe !important;
      color: #1d4ed8 !important;
      border: 1px solid rgba(29, 78, 216, .16) !important;
    }

    #admin-transfers .transfer-status-muted {
      background: #f1f5f9 !important;
      color: #64748b !important;
      border: 1px solid rgba(100, 116, 139, .18) !important;
    }

    #admin-transfers .transfer-note-wrap {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      width: 100% !important;
      min-width: 0 !important;
      background: transparent !important;
    }

    #admin-transfers .transfer-note-preview {
      display: block !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      max-width: none !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      background: transparent !important;
      color: #475569 !important;
      line-height: 1.45 !important;
    }

    #admin-transfers button.transfer-note-preview {
      appearance: none !important;
      border: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
      text-align: left !important;
      cursor: pointer !important;
      font: inherit !important;
    }

    #admin-transfers button.transfer-note-preview:hover,
    #admin-transfers button.transfer-note-preview:focus-visible {
      color: #c2410c !important;
      text-decoration: underline !important;
      text-underline-offset: 3px !important;
      outline: none !important;
    }

    #admin-transfers button.transfer-note-preview:focus-visible {
      box-shadow: 0 0 0 3px rgba(249, 115, 22, .18) !important;
      border-radius: 8px !important;
    }

    #admin-transfers .transfer-note-empty .transfer-note-preview {
      color: #94a3b8 !important;
      font-weight: 800 !important;
    }

    #admin-transfers .transfer-note-wrap .transfer-note-btn {
      flex-shrink: 0 !important;
      min-height: 32px !important;
      padding: 6px 10px !important;
      border-radius: 999px !important;
      background: #f8fafc !important;
      border: 1px solid #cbd5e1 !important;
      color: #334155 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
    }

    #admin-transfers .transfer-pagination {
      margin: 14px 26px 24px !important;
      padding: 12px 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      border: 1px solid rgba(226, 232, 240, .95) !important;
      border-radius: 16px !important;
      background: rgba(255, 255, 255, .9) !important;
    }

    #admin-transfers .transfer-pagination-actions {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }

    #admin-transfers .transfer-pagination .btn {
      border-radius: 999px !important;
      min-height: 36px !important;
      padding: 8px 14px !important;
    }

    @media (max-width: 1100px) {
      #admin-transfers .transfer-reconcile-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 720px) {
      #admin-transfers .transfer-history-page-head,
      #admin-transfers #transfersSummary,
      #admin-transfers .transfer-history-toolbar,
      #admin-transfers #txReconBox,
      #admin-transfers .transfer-table-wrap,
      #admin-transfers .transfer-pagination {
        margin-left: 14px !important;
        margin-right: 14px !important;
      }

      #admin-transfers .transfer-history-page-head {
        padding: 20px 18px 14px !important;
      }

      #admin-transfers .transfer-reconcile-grid {
        grid-template-columns: 1fr !important;
      }

      #admin-transfers .transfer-pagination {
        align-items: stretch !important;
        flex-direction: column !important;
      }

      #admin-transfers .transfer-pagination-actions {
        justify-content: space-between !important;
      }
    }



    /* ===== Phase 7.92N.13: Modern Sales Table ===== */

    main.content>.wrap:has(#admin) {
      max-width: none !important;
      width: 100% !important;
    }

    #admin-salesTable,
    #admin-salesTable .panel,
    #admin-salesTable #salesTableBox {
      max-width: 100% !important;
    }

    #admin-salesTable .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 24px !important;
      box-shadow: 0 18px 40px rgba(15, 23, 42, .08) !important;
      overflow: visible !important;
    }

    #admin-salesTable h3 {
      color: #0F172A !important;
      font-size: 24px !important;
      font-weight: 900 !important;
      letter-spacing: -.02em !important;
      margin-bottom: 18px !important;
    }

    #admin-salesTable .helper-tight {
      align-items: center !important;
      color: #64748B !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      margin-top: 14px !important;
    }

    #admin-salesTable #salesTableBox {
      width: 100% !important;
      margin: 16px 0 22px !important;
      overflow: visible !important;
      border: 0 !important;
      background: transparent !important;
      padding: 0 !important;
    }

    #admin-salesTable .sales-table-scroll {
      width: 100% !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      background: #FFFFFF !important;
      box-shadow: 0 14px 34px rgba(15, 23, 42, .06) !important;
      box-sizing: border-box !important;
    }

    #admin-salesTable .sales-table-clean {
      width: 100% !important;
      min-width: 1180px !important;
      max-width: none !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      table-layout: fixed !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-product {
      width: 29% !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-qty {
      width: 11% !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-total {
      width: 12% !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-profit {
      width: 11% !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-payment {
      width: 12% !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-soldby {
      width: 12% !important;
    }

    #admin-salesTable .sales-table-clean col.sales-col-actions {
      width: 13% !important;
    }

    #admin-salesTable .sales-table-clean th,
    #admin-salesTable .sales-table-clean td {
      border-bottom: 1px solid #E2E8F0 !important;
      box-sizing: border-box !important;
      color: #0F172A !important;
      overflow: visible !important;
      padding: 18px 16px !important;
      text-align: left !important;
      vertical-align: middle !important;
      white-space: normal !important;
    }

    #admin-salesTable .sales-table-clean th {
      background: linear-gradient(180deg, #F8FAFC, #F1F5F9) !important;
      color: #475569 !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      letter-spacing: .09em !important;
      line-height: 1.1 !important;
      padding-bottom: 13px !important;
      padding-top: 13px !important;
      text-transform: uppercase !important;
    }

    #admin-salesTable .sales-table-clean th:first-child {
      border-top-left-radius: 22px !important;
    }

    #admin-salesTable .sales-table-clean th:last-child {
      border-top-right-radius: 22px !important;
    }

    #admin-salesTable .sales-table-clean tbody tr {
      background: #FFFFFF !important;
      transition: background .16s ease, box-shadow .16s ease !important;
    }

    #admin-salesTable .sales-table-clean tbody tr:nth-child(even) {
      background: #FCFCFD !important;
    }

    #admin-salesTable .sales-table-clean tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-salesTable .sales-table-clean tbody tr.sales-sale-group-end td {
      border-bottom: 2px solid #94A3B8 !important;
    }

    #admin-salesTable .sales-table-clean tbody tr.sales-sale-group-continue td {
      border-bottom: 1px dashed #CBD5E1 !important;
    }

    #admin-salesTable .sales-table-clean tbody tr.refunded {
      background: #FFF7F7 !important;
    }

    #admin-salesTable .sales-table-clean tbody tr.refunded:hover {
      background: #FFEFEF !important;
    }

    #admin-salesTable .sales-table-clean tbody tr:last-child td {
      border-bottom: 2px solid #94A3B8 !important;
    }

    #admin-salesTable .sales-product-cell {
      align-items: flex-start !important;
      display: grid !important;
      gap: 12px !important;
      grid-template-columns: 44px minmax(0, 1fr) !important;
      min-width: 0 !important;
    }

    #admin-salesTable .sales-product-thumb {
      align-items: center !important;
      background: linear-gradient(135deg, #FFF7ED, #FFEDD5) !important;
      border: 1px solid #FED7AA !important;
      border-radius: 14px !important;
      color: #C2410C !important;
      display: inline-flex !important;
      flex: 0 0 auto !important;
      font-size: 17px !important;
      font-weight: 900 !important;
      height: 44px !important;
      justify-content: center !important;
      width: 44px !important;
    }

    #admin-salesTable .sales-product-copy,
    #admin-salesTable .sales-qty-block,
    #admin-salesTable .sales-payment-block,
    #admin-salesTable .sales-soldby {
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
      line-height: 1.2 !important;
      min-width: 0 !important;
    }

    #admin-salesTable .sales-product-copy strong,
    #admin-salesTable .sales-qty-block strong,
    #admin-salesTable .sales-payment-block strong,
    #admin-salesTable .sales-soldby strong {
      color: #0F172A !important;
      font-size: 14px !important;
      font-weight: 900 !important;
      overflow-wrap: anywhere !important;
    }

    #admin-salesTable .sales-product-copy span,
    #admin-salesTable .sales-qty-block span,
    #admin-salesTable .sales-payment-block span,
    #admin-salesTable .sales-soldby span,
    #admin-salesTable .sales-line-note {
      color: #64748B !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      overflow-wrap: anywhere !important;
    }

    #admin-salesTable .sales-display-label {
      color: #9F1239 !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      letter-spacing: .07em !important;
      text-transform: uppercase !important;
    }

    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-product-copy strong,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-product-copy span,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-qty-block strong,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-qty-block span,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-money-pill,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-profit-pill,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-payment-block strong,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-payment-block span,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-soldby strong,
    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-soldby span {
      color: #64748B !important;
      text-decoration: line-through !important;
      text-decoration-thickness: 2px !important;
      text-decoration-color: #9F1239 !important;
    }

    #admin-salesTable .sales-table-clean tbody tr.refunded .sales-product-thumb {
      background: #F1F5F9 !important;
      border-color: #CBD5E1 !important;
      color: #64748B !important;
    }

    #admin-salesTable .sales-qty-cell,
    #admin-salesTable .sales-money-cell {
      font-variant-numeric: tabular-nums !important;
    }

    #admin-salesTable .sales-qty-block {
      align-items: flex-start !important;
    }

    #admin-salesTable .sales-money-cell {
      white-space: nowrap !important;
    }

    #admin-salesTable .sales-money-pill,
    #admin-salesTable .sales-profit-pill {
      border-radius: 999px !important;
      display: inline-flex !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      justify-content: center !important;
      line-height: 1 !important;
      padding: 8px 10px !important;
    }

    #admin-salesTable .sales-money-pill {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
    }

    #admin-salesTable .sales-profit-pill {
      background: #ECFDF5 !important;
      border-color: #A7F3D0 !important;
      color: #047857 !important;
    }

    #admin-salesTable .sales-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: visible !important;
      white-space: normal !important;
    }

    #admin-salesTable .sales-action-btn,
    #admin-salesTable .sales-status-pill {
      align-items: center !important;
      border-radius: 14px !important;
      display: inline-flex !important;
      flex: 0 0 auto !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      gap: 6px !important;
      justify-content: center !important;
      line-height: 1.05 !important;
      min-height: 38px !important;
      padding: 8px 10px !important;
      white-space: nowrap !important;
    }

    #admin-salesTable .sales-action-btn {
      background: #FFFFFF !important;
      border: 1px solid #CBD5E1 !important;
      color: #334155 !important;
      cursor: pointer !important;
      transition: background .16s ease, border-color .16s ease, color .16s ease, transform .08s ease !important;
    }

    #admin-salesTable .sales-action-btn:hover {
      background: #F8FAFC !important;
      border-color: #94A3B8 !important;
      transform: translateY(-1px) !important;
    }

    #admin-salesTable .sales-action-btn:focus-visible {
      outline: 3px solid rgba(251, 146, 60, .38) !important;
      outline-offset: 2px !important;
    }

    #admin-salesTable .sales-action-btn:disabled {
      cursor: not-allowed !important;
      opacity: .55 !important;
      transform: none !important;
    }

    #admin-salesTable .sales-action-icon,
    #admin-salesTable .sales-action-icon svg {
      display: inline-block !important;
      height: 16px !important;
      width: 16px !important;
    }

    #admin-salesTable .sales-action-icon svg {
      fill: none !important;
      stroke: currentColor !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
      stroke-width: 2 !important;
    }

    #admin-salesTable .sales-action-whatsapp {
      background: #ECFDF5 !important;
      border-color: #86EFAC !important;
      color: #047857 !important;
    }

    #admin-salesTable .sales-action-telegram {
      background: #EFF6FF !important;
      border-color: #93C5FD !important;
      color: #2563EB !important;
    }

    #admin-salesTable .sales-action-refund {
      background: #FFF1F2 !important;
      border-color: #FDA4AF !important;
      color: #BE123C !important;
    }

    #admin-salesTable .sales-status-pill {
      border-radius: 999px !important;
      border: 1px solid #D1D5DB !important;
      background: #F3F4F6 !important;
      color: #374151 !important;
    }

    #admin-salesTable .sales-status-refunded {
      background: #FFF1F2 !important;
      border-color: #FDA4AF !important;
      color: #BE123C !important;
    }

    #admin-salesTable #salesPaginationWrap.pagination {
      align-items: center !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 999px !important;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
      display: inline-flex !important;
      gap: 12px !important;
      justify-content: center !important;
      margin: 16px auto 0 !important;
      padding: 8px !important;
    }

    #admin-salesTable #salesPaginationWrap.pagination.hide {
      display: none !important;
    }

    #admin-salesTable #salesPaginationWrap .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 9px 14px !important;
    }

    #admin-salesTable #salesPageInfo {
      color: #475569 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      padding: 0 4px !important;
    }

    @media (max-width: 760px) {
      #admin-salesTable .sales-table-scroll {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow-x: visible !important;
      }

      #admin-salesTable .sales-table-clean,
      #admin-salesTable .sales-table-clean tbody,
      #admin-salesTable .sales-table-clean tr,
      #admin-salesTable .sales-table-clean td {
        display: block !important;
        width: 100% !important;
      }

      #admin-salesTable .sales-table-clean {
        min-width: 0 !important;
      }

      #admin-salesTable .sales-table-clean colgroup,
      #admin-salesTable .sales-table-clean thead {
        display: none !important;
      }

      #admin-salesTable .sales-table-clean tbody tr {
        border: 1px solid #E5E7EB !important;
        border-radius: 20px !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, .06) !important;
        margin-bottom: 14px !important;
        overflow: hidden !important;
      }

      #admin-salesTable .sales-table-clean tbody tr.sales-sale-group-end {
        border-color: #94A3B8 !important;
        border-bottom-width: 2px !important;
        margin-bottom: 18px !important;
      }

      #admin-salesTable .sales-table-clean tbody tr.sales-sale-group-continue {
        border-color: #CBD5E1 !important;
        border-style: dashed !important;
        margin-bottom: 8px !important;
      }

      #admin-salesTable .sales-table-clean tbody tr:nth-child(even) {
        background: #FFFFFF !important;
      }

      #admin-salesTable .sales-table-clean td {
        border-bottom: 1px solid #EEF2F7 !important;
        display: grid !important;
        gap: 12px !important;
        grid-template-columns: minmax(92px, 32%) minmax(0, 1fr) !important;
        padding: 13px 14px !important;
      }

      #admin-salesTable .sales-table-clean td::before {
        color: #64748B !important;
        content: attr(data-label) !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .08em !important;
        text-transform: uppercase !important;
      }

      #admin-salesTable .sales-table-clean td:last-child {
        border-bottom: 0 !important;
      }

      #admin-salesTable .sales-product-td {
        display: block !important;
      }

      #admin-salesTable .sales-product-td::before {
        display: block !important;
        margin-bottom: 10px !important;
      }

      #admin-salesTable .sales-product-cell {
        grid-template-columns: 40px minmax(0, 1fr) !important;
      }

      #admin-salesTable .sales-product-thumb {
        height: 40px !important;
        width: 40px !important;
      }

      #admin-salesTable .sales-actions {
        justify-content: flex-start !important;
      }

      #admin-salesTable .sales-action-btn {
        min-height: 40px !important;
      }

      #admin-salesTable #salesPaginationWrap.pagination {
        border-radius: 18px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
      }

      #admin-salesTable #salesPaginationWrap.pagination.hide {
        display: none !important;
      }
    }


    /* ===== Phase 3: Sales Summary Polish ===== */

    /* Let Sales Summary use the same full-width admin feel */
    #admin-salesReport {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Main panel */
    #admin-salesReport .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: visible !important;
    }

    /* Title */
    #admin-salesReport h3,
    #admin-salesReport .admin-title,
    #admin-salesReport .panel h3 {
      background: transparent !important;
      -webkit-background-clip: initial !important;
      background-clip: initial !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      letter-spacing: normal !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    /* Filters */
    #admin-salesReport .filters {
      padding: 14px 22px 6px !important;
      margin: 0 !important;
      gap: 10px !important;
    }

    #admin-salesReport .filters .pill {
      border-radius: 999px !important;
      padding: 9px 14px !important;
      font-weight: 800 !important;
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-salesReport .filters .pill:hover {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
    }

    #admin-salesReport .filters .pill.active {
      background: #111827 !important;
      border-color: #111827 !important;
      color: #FFFFFF !important;
    }

    /* KPI grid */
    #admin-salesReport .kpi-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
      gap: 18px !important;
      margin: 18px 22px 22px !important;
    }

    /* KPI cards */
    #admin-salesReport .kpi-card {
      background: linear-gradient(180deg, #FFFFFF, #F9FAFB) !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 20px !important;
      padding: 20px !important;
      box-shadow: 0 10px 26px rgba(17, 24, 39, .06) !important;
    }

    #admin-salesReport .kpi-label {
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
      color: var(--st-muted) !important;
    }

    #admin-salesReport .kpi-value {
      margin-top: 10px !important;
      font-size: 30px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
    }

    #admin-salesReport .kpi-value.emph-profit {
      color: var(--st-primary) !important;
    }

    #admin-salesReport .kpi-sub {
      margin-top: 8px !important;
      font-size: 13px !important;
      color: var(--st-muted) !important;
    }

    /* Report table wrapper */
    #admin-salesReport .rep-table {
      margin: 0 22px 22px !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      overflow: hidden !important;
      background: #FFFFFF !important;
    }

    /* Report rows */
    #admin-salesReport .rep-head,
    #admin-salesReport .rep-row {
      display: grid !important;
      grid-template-columns: 2fr 1fr 1fr 1fr !important;
      gap: 14px !important;
      align-items: center !important;
      padding: 14px 16px !important;
    }

    #admin-salesReport .rep-head {
      background: #F9FAFB !important;
      color: #374151 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-salesReport .rep-row {
      background: #FFFFFF !important;
      border-top: 1px solid #F3F4F6 !important;
    }

    #admin-salesReport .rep-row:nth-child(even) {
      background: #F9FAFB !important;
    }

    #admin-salesReport .rep-row:hover {
      background: #FFF7ED !important;
    }

    #admin-salesReport .rep-row .num {
      text-align: right !important;
      font-variant-numeric: tabular-nums !important;
    }

    /* Chips */
    #admin-salesReport .chip {
      display: inline-block !important;
      padding: 7px 11px !important;
      border-radius: 999px !important;
      font-weight: 900 !important;
      border: 1px solid #E5E7EB !important;
      background: #FFFFFF !important;
    }

    #admin-salesReport .chip.rev {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
    }

    #admin-salesReport .chip.cost {
      background: #F3F4F6 !important;
      border-color: #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-salesReport .chip.gp {
      background: #ECFDF5 !important;
      border-color: #86EFAC !important;
      color: #166534 !important;
    }

    /* Download CSV button */
    #admin-salesReport .download-btn,
    #admin-salesReport .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
    }

    /* Responsive */
    @media (max-width: 800px) {
      #admin-salesReport .kpi-grid {
        grid-template-columns: 1fr !important;
      }

      #admin-salesReport .rep-head,
      #admin-salesReport .rep-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
        min-width: 720px !important;
      }

      #admin-salesReport .rep-table {
        overflow-x: auto !important;
      }
    }

    /* ===== Sales Summary Modernisation ===== */
    #admin .report-section .panel {
      max-width: 1180px !important;
      margin: 0 auto !important;
      overflow: visible !important;
    }

    #admin .report-section .sales-summary-head {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 16px !important;
      padding: 22px 24px 6px !important;
      text-align: center !important;
      background:
        radial-gradient(circle at top left, rgba(93, 159, 150, .16), transparent 30%),
        linear-gradient(180deg, #fff, #fff7ed) !important;
      border-bottom: 1px solid #f3f4f6 !important;
    }

    #admin .report-section h3.admin-title {
      padding: 0 !important;
      margin: 0 !important;
      color: #111827 !important;
      font-size: clamp(1.45rem, 2vw, 2rem) !important;
      line-height: 1.15 !important;
      font-weight: 900 !important;
      text-align: center !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #admin .report-section .sales-summary-subtitle {
      margin: 8px 0 0 !important;
      color: #6b7280 !important;
      font-size: .95rem !important;
      line-height: 1.45 !important;
    }

    #admin .report-section .sales-summary-filters {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 14px !important;
      padding: 18px 24px 4px !important;
      background: #fff !important;
    }

    #admin .report-section .sales-summary-periods,
    #admin .report-section .sales-summary-custom-range {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 10px !important;
    }

    #admin .report-section .sales-summary-custom-range {
      padding: 8px !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 16px !important;
      background: #f9fafb !important;
    }

    #admin .report-section .sales-summary-custom-range .muted {
      margin: 0 !important;
      font-size: .78rem !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      color: #6b7280 !important;
    }

    #admin .report-section .sales-summary-custom-range input[type="date"] {
      min-height: 40px !important;
      border: 1px solid #d1d5db !important;
      border-radius: 12px !important;
      padding: 8px 10px !important;
      background: #fff !important;
      color: #111827 !important;
      font: inherit !important;
    }

    #admin .report-section .sales-summary-custom-range input[type="date"]:focus {
      outline: 3px solid rgba(93, 159, 150, .2) !important;
      border-color: var(--brand-primary) !important;
    }

    #admin .report-section .sales-summary-kpis {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 16px !important;
      margin: 20px 24px 16px !important;
    }

    #admin .report-section .sales-summary-kpi-card {
      position: relative !important;
      overflow: hidden !important;
      min-height: 142px !important;
      border-radius: 22px !important;
      padding: 20px !important;
      background: linear-gradient(180deg, #fff, #f8fafc) !important;
    }

    #admin .report-section .sales-summary-kpi-card::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 auto 0 0 !important;
      width: 5px !important;
      background: var(--brand-primary) !important;
    }

    #admin .report-section .sales-summary-kpi-card.is-refund::before {
      background: #f97316 !important;
    }

    #admin .report-section .sales-summary-kpi-card.is-net::before {
      background: var(--brand-accent) !important;
    }

    #admin .report-section .kpi-value.is-negative,
    #admin .report-section .profit-cell.is-negative,
    #admin .report-section .margin-cell.is-negative {
      color: #b91c1c !important;
    }

    #admin .report-section .profit-cell.is-positive,
    #admin .report-section .margin-cell.is-positive {
      color: #166534 !important;
    }

    #admin .report-section .profit-cell.is-neutral,
    #admin .report-section .margin-cell.is-neutral {
      color: #374151 !important;
    }

    #admin .report-section .sales-summary-actions {
      display: flex !important;
      justify-content: flex-end !important;
      gap: 10px !important;
      margin: 0 24px 18px !important;
    }

    #admin .report-section .download-btn {
      min-height: 40px !important;
      margin: 0 !important;
      padding: 9px 14px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(93, 159, 150, .45) !important;
      background: rgba(93, 159, 150, .08) !important;
      color: var(--brand-primary) !important;
      font-weight: 900 !important;
    }

    #admin .report-section .download-btn:hover {
      background: rgba(93, 159, 150, .16) !important;
    }

    #admin .report-section .sales-summary-table-card {
      margin: 0 24px 24px !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 22px !important;
      background: #fff !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .05) !important;
      overflow: visible !important;
    }

    #admin .report-section .sales-summary-table-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 14px !important;
      padding: 18px 20px !important;
      border-bottom: 1px solid #f3f4f6 !important;
      background: linear-gradient(180deg, #fff, #f9fafb) !important;
    }

    #admin .report-section .sales-summary-table-head h4 {
      margin: 0 !important;
      color: #111827 !important;
      font-size: 1rem !important;
      font-weight: 900 !important;
    }

    #admin .report-section .sales-summary-table-head p {
      margin: 5px 0 0 !important;
      color: #6b7280 !important;
      font-size: .86rem !important;
    }

    #admin .report-section .sales-summary-table-wrap {
      width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }

    #admin .report-section .sales-summary-table {
      width: 100% !important;
      min-width: 960px !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      table-layout: fixed !important;
      background: #fff !important;
    }

    #admin .report-section .sales-summary-table th,
    #admin .report-section .sales-summary-table td {
      padding: 14px 16px !important;
      border-bottom: 0 !important;
      vertical-align: middle !important;
      color: #111827 !important;
      font-size: .92rem !important;
      line-height: 1.35 !important;
    }

    #admin .report-section .sales-summary-table th {
      background: #f8fafc !important;
      color: #4b5563 !important;
      font-size: .75rem !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }

    #admin .report-section .sales-summary-table thead th {
      border-bottom: 1px solid #e5e7eb !important;
    }

    #admin .report-section .sales-summary-table tbody tr:not(:last-child) td {
      border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
    }

    #admin .report-section .sales-summary-table tbody tr:not(:last-child) td:first-child {
      box-shadow: inset 4px 0 0 rgba(93, 159, 150, .08) !important;
    }

    #admin .report-section .sales-summary-table tbody tr:nth-child(even) td {
      background: #fcfcfd !important;
    }

    #admin .report-section .sales-summary-table tbody tr:hover td {
      background: #fff7ed !important;
    }

    #admin .report-section .sales-summary-table .product-cell {
      width: 34% !important;
      min-width: 260px !important;
      font-weight: 850 !important;
      overflow-wrap: anywhere !important;
      word-break: normal !important;
    }

    #admin .report-section .sales-summary-table .num {
      text-align: right !important;
      font-variant-numeric: tabular-nums !important;
      white-space: nowrap !important;
    }

    #admin .report-section .sales-summary-pagination {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      width: fit-content !important;
      max-width: calc(100% - 32px) !important;
      margin: 16px auto 18px !important;
      padding: 8px !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 999px !important;
      background: #FFFFFF !important;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
    }

    #admin .report-section .sales-summary-pagination-summary {
      color: #475569 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      padding: 0 4px !important;
      white-space: nowrap !important;
    }

    #admin .report-section .sales-summary-page-size {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      color: #475569 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #admin .report-section .sales-summary-page-size select {
      min-height: 34px !important;
      border: 1px solid #CBD5E1 !important;
      border-radius: 999px !important;
      padding: 6px 28px 6px 12px !important;
      background: #fff !important;
      color: #0F172A !important;
      font-weight: 900 !important;
    }

    #admin .report-section .sales-summary-page-size select:focus {
      outline: 3px solid rgba(93, 159, 150, .2) !important;
      border-color: var(--brand-primary) !important;
    }

    #admin .report-section .sales-summary-page-actions {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 6px !important;
      flex-wrap: wrap !important;
    }

    #admin .report-section .sales-summary-page-btn {
      min-height: 38px !important;
      padding: 9px 14px !important;
      border-radius: 999px !important;
      border: 1px solid #CBD5E1 !important;
      background: #fff !important;
      color: #334155 !important;
      font-weight: 900 !important;
      cursor: pointer !important;
    }

    #admin .report-section .sales-summary-page-btn:hover:not(:disabled),
    #admin .report-section .sales-summary-page-btn:focus-visible {
      border-color: rgba(249, 115, 22, .55) !important;
      background: #fff7ed !important;
      color: #c2410c !important;
      outline: none !important;
    }

    #admin .report-section .sales-summary-page-btn.active {
      border-color: var(--brand-primary) !important;
      background: var(--brand-primary) !important;
      color: #fff !important;
    }

    #admin .report-section .sales-summary-page-btn:disabled {
      opacity: .5 !important;
      cursor: not-allowed !important;
    }

    #admin .report-section .sales-summary-page-ellipsis {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 24px !important;
      color: #94a3b8 !important;
      font-weight: 900 !important;
    }

    #admin .report-section .sales-summary-loading,
    #admin .report-section .sales-summary-empty,
    #admin .report-section .sales-summary-error {
      margin: 18px 24px !important;
      padding: 16px !important;
      border-radius: 16px !important;
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
    }

    #admin-moneyReceivedReport .money-received-kpis {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 12px !important;
      margin: 12px 24px 10px !important;
    }

    #admin-moneyReceivedReport .money-received-kpi-card {
      min-height: 92px !important;
      padding: 13px 16px !important;
      border-radius: 16px !important;
      border-top: 3px solid rgba(249, 115, 22, .42) !important;
      box-shadow: 0 8px 18px rgba(17, 24, 39, .04) !important;
    }

    #admin-moneyReceivedReport .money-received-kpi-card .kpi-label {
      margin-bottom: 6px !important;
      color: #64748b !important;
      font-size: .72rem !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      text-transform: uppercase !important;
    }

    #admin-moneyReceivedReport .money-received-kpi-card .kpi-value {
      color: #111827 !important;
      font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
      line-height: 1.05 !important;
      font-weight: 950 !important;
    }

    #admin-moneyReceivedReport .money-received-kpi-card .kpi-sub {
      margin-top: 6px !important;
      color: #64748b !important;
      font-size: .8rem !important;
      line-height: 1.3 !important;
    }

    #admin-moneyReceivedReport .money-received-kpi-card.is-net .kpi-value {
      color: var(--brand-primary) !important;
    }

    #admin-moneyReceivedReport .money-received-breakdown-card {
      margin-top: 10px !important;
      border-radius: 20px !important;
    }

    #admin-moneyReceivedReport .money-received-table {
      min-width: 780px !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }

    #admin-moneyReceivedReport .money-received-filterbar {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 18px !important;
      display: grid !important;
      gap: 12px !important;
      grid-template-columns: 1fr !important;
      margin-top: 14px !important;
      padding: 14px !important;
    }

    #admin-moneyReceivedReport .money-filter-row {
      align-items: flex-end !important;
      display: grid !important;
      gap: 12px !important;
      width: 100% !important;
    }

    #admin-moneyReceivedReport .money-filter-row-period {
      grid-template-columns: minmax(0, 1fr) auto !important;
    }

    #admin-moneyReceivedReport .money-filter-row-payment {
      grid-template-columns: minmax(180px, 240px) minmax(220px, 280px) auto !important;
      justify-content: start !important;
    }

    #admin-moneyReceivedReport .money-filter-group {
      align-items: center !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;
    }

    #admin-moneyReceivedReport .money-payment-filter {
      margin-left: 0 !important;
    }

    #admin-moneyReceivedReport .money-filter-field {
      align-items: stretch !important;
      display: grid !important;
      gap: 5px !important;
      margin: 0 !important;
      min-width: 180px !important;
    }

    #admin-moneyReceivedReport .money-filter-field[hidden] {
      display: none !important;
    }

    #admin-moneyReceivedReport .money-filter-label {
      color: #64748b !important;
      font-size: .68rem !important;
      font-weight: 900 !important;
      letter-spacing: .06em !important;
      line-height: 1 !important;
      text-transform: uppercase !important;
    }

    #admin-moneyReceivedReport .money-filter-field .input,
    #admin-moneyReceivedReport .money-payment-filter select {
      min-height: 38px !important;
      border-radius: 12px !important;
      font-weight: 800 !important;
    }

    #admin-moneyReceivedReport .money-clear-filters {
      align-self: flex-end !important;
      min-height: 38px !important;
      padding: 0 4px !important;
      white-space: nowrap !important;
    }

    #admin-moneyReceivedReport .money-received-filter-context {
      display: inline-flex !important;
      margin: 12px 24px 0 !important;
      padding: 6px 10px !important;
      border-radius: 999px !important;
      background: #fff7ed !important;
      color: #9a3412 !important;
      font-size: .76rem !important;
      font-weight: 900 !important;
    }

    #admin-moneyReceivedReport .money-received-table th:first-child,
    #admin-moneyReceivedReport .money-received-table td:first-child {
      width: 42% !important;
    }

    #admin-moneyReceivedReport .money-received-table th:nth-child(2),
    #admin-moneyReceivedReport .money-received-table td:nth-child(2) {
      width: 16% !important;
    }

    #admin-moneyReceivedReport .money-received-table th:nth-child(3),
    #admin-moneyReceivedReport .money-received-table td:nth-child(3) {
      width: 14% !important;
    }

    #admin-moneyReceivedReport .money-received-empty-card {
      margin-top: 16px !important;
    }

    #admin-moneyReceivedReport .money-source-cell {
      white-space: normal !important;
    }

    #admin-moneyReceivedReport .money-source-name {
      color: #111827 !important;
      display: block !important;
      font-weight: 950 !important;
      line-height: 1.25 !important;
      overflow-wrap: anywhere !important;
    }

    #admin-moneyReceivedReport .money-source-detail {
      color: #64748b !important;
      display: block !important;
      font-size: .78rem !important;
      font-weight: 750 !important;
      line-height: 1.35 !important;
      margin-top: 4px !important;
      overflow-wrap: anywhere !important;
    }

    #admin-moneyReceivedReport .money-method-badge {
      align-items: center !important;
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 999px !important;
      color: #475569 !important;
      display: inline-flex !important;
      font-size: .72rem !important;
      font-weight: 900 !important;
      justify-content: center !important;
      letter-spacing: .04em !important;
      line-height: 1 !important;
      min-height: 26px !important;
      padding: 6px 10px !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }

    #admin-moneyReceivedReport .money-refund-adjustment .money-source-name {
      color: #7c2d12 !important;
    }

    #admin-moneyReceivedReport .money-refund-adjustment .money-source-detail {
      color: #9a3412 !important;
    }

    #admin-moneyReceivedReport .money-received-count {
      justify-content: flex-end !important;
      margin: 12px 0 0 !important;
      width: 100% !important;
    }

    @media (max-width: 1100px) {
      #admin .report-section .panel {
        max-width: none !important;
      }

      #admin .report-section .sales-summary-filters {
        align-items: stretch !important;
      }

      #admin .report-section .sales-summary-custom-range {
        width: 100% !important;
      }

      #admin-moneyReceivedReport .money-filter-row-period {
        grid-template-columns: 1fr !important;
      }

      #admin-moneyReceivedReport .money-filter-row-payment {
        grid-template-columns: minmax(180px, 240px) minmax(220px, 280px) auto !important;
      }
    }

    @media (max-width: 760px) {
      #admin:has(.report-section.show) .admin-shell {
        grid-template-columns: 1fr !important;
      }

      #admin:has(.report-section.show) .admin-shell-sidebar {
        margin-top: 0 !important;
      }

      #admin:has(.report-section.show) .admin-shell-main,
      #admin:has(.report-section.show) #admin-section-view {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
      }

      #admin .report-section .sales-summary-head,
      #admin .report-section .sales-summary-filters,
      #admin .report-section .sales-summary-table-head {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      #admin .report-section .sales-summary-kpis,
      #admin .report-section .sales-summary-actions,
      #admin .report-section .sales-summary-table-card {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      #admin .report-section .sales-summary-kpis {
        grid-template-columns: 1fr !important;
      }

      #admin .report-section .sales-summary-periods,
      #admin .report-section .sales-summary-custom-range {
        width: 100% !important;
      }

      #admin .report-section .sales-summary-periods .pill {
        flex: 1 1 42% !important;
      }

      #admin .report-section .sales-summary-custom-range input[type="date"] {
        width: 100% !important;
      }

      #admin-moneyReceivedReport .money-filter-row,
      #admin-moneyReceivedReport .money-filter-row-period,
      #admin-moneyReceivedReport .money-filter-row-payment {
        grid-template-columns: 1fr !important;
      }

      #admin-moneyReceivedReport .money-filter-field,
      #admin-moneyReceivedReport .money-filter-field .input,
      #admin-moneyReceivedReport .money-payment-filter select {
        width: 100% !important;
      }

      #admin-moneyReceivedReport .money-clear-filters {
        justify-self: start !important;
      }

      #admin .report-section .sales-summary-actions,
      #admin .report-section .sales-summary-table-head {
        align-items: stretch !important;
        flex-direction: column !important;
      }

      #admin .report-section .sales-summary-pagination {
        border-radius: 18px !important;
        display: flex !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
      }

      #admin .report-section .sales-summary-page-size,
      #admin .report-section .sales-summary-page-actions {
        justify-content: center !important;
        width: 100% !important;
      }

      #admin .report-section .sales-summary-page-size {
        flex-wrap: wrap !important;
        white-space: normal !important;
      }

      #admin .report-section .download-btn {
        width: 100% !important;
      }

      #admin .report-section .sales-summary-table {
        min-width: 920px !important;
      }

      #admin-moneyReceivedReport .money-received-kpi-card {
        min-height: 96px !important;
      }

      #admin-moneyReceivedReport .money-received-table {
        min-width: 740px !important;
      }

      #admin-moneyReceivedReport .money-received-count {
        justify-content: center !important;
        text-align: center !important;
      }
    }

    #admin-salesReport .panel {
      max-width: 1180px !important;
      margin: 0 auto !important;
      overflow: visible !important;
    }

    #admin-salesReport .sales-summary-head {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 16px !important;
      padding: 22px 24px 6px !important;
      text-align: center !important;
      background:
        radial-gradient(circle at top left, rgba(93, 159, 150, .16), transparent 30%),
        linear-gradient(180deg, #fff, #fff7ed) !important;
      border-bottom: 1px solid #f3f4f6 !important;
    }

    #admin-salesReport h3.admin-title {
      padding: 0 !important;
      margin: 0 !important;
      color: #111827 !important;
      font-size: clamp(1.45rem, 2vw, 2rem) !important;
      line-height: 1.15 !important;
      font-weight: 900 !important;
      text-align: center !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    #admin-salesReport .sales-summary-subtitle {
      margin: 8px 0 0 !important;
      color: #6b7280 !important;
      font-size: .95rem !important;
      line-height: 1.45 !important;
    }

    #admin-salesReport .sales-summary-filters {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 14px !important;
      padding: 18px 24px 4px !important;
      background: #fff !important;
    }

    #admin-salesReport .sales-summary-periods,
    #admin-salesReport .sales-summary-custom-range {
      display: flex !important;
      flex-wrap: wrap !important;
      align-items: center !important;
      gap: 10px !important;
    }

    #admin-salesReport .sales-summary-custom-range {
      padding: 8px !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 16px !important;
      background: #f9fafb !important;
    }

    #admin-salesReport .sales-summary-custom-range .muted {
      margin: 0 !important;
      font-size: .78rem !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      color: #6b7280 !important;
    }

    #admin-salesReport .sales-summary-custom-range input[type="date"] {
      min-height: 40px !important;
      border: 1px solid #d1d5db !important;
      border-radius: 12px !important;
      padding: 8px 10px !important;
      background: #fff !important;
      color: #111827 !important;
      font: inherit !important;
    }

    #admin-salesReport .sales-summary-custom-range input[type="date"]:focus {
      outline: 3px solid rgba(93, 159, 150, .2) !important;
      border-color: var(--brand-primary) !important;
    }

    #admin-salesReport .sales-summary-kpis {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 16px !important;
      margin: 20px 24px 16px !important;
    }

    #admin-salesReport .sales-summary-kpi-card {
      position: relative !important;
      overflow: hidden !important;
      min-height: 142px !important;
      border-radius: 22px !important;
      padding: 20px !important;
      background: linear-gradient(180deg, #fff, #f8fafc) !important;
    }

    #admin-salesReport .sales-summary-kpi-card::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 auto 0 0 !important;
      width: 5px !important;
      background: var(--brand-primary) !important;
    }

    #admin-salesReport .sales-summary-kpi-card.is-refund::before {
      background: #f97316 !important;
    }

    #admin-salesReport .sales-summary-kpi-card.is-net::before {
      background: var(--brand-accent) !important;
    }

    #admin-salesReport .kpi-value.is-negative,
    #admin-salesReport .profit-cell.is-negative,
    #admin-salesReport .margin-cell.is-negative {
      color: #b91c1c !important;
    }

    #admin-salesReport .profit-cell.is-positive,
    #admin-salesReport .margin-cell.is-positive {
      color: #166534 !important;
    }

    #admin-salesReport .profit-cell.is-neutral,
    #admin-salesReport .margin-cell.is-neutral {
      color: #374151 !important;
    }

    #admin-salesReport .sales-summary-actions {
      display: flex !important;
      justify-content: flex-end !important;
      gap: 10px !important;
      margin: 0 24px 18px !important;
    }

    #admin-salesReport .download-btn {
      min-height: 40px !important;
      margin: 0 !important;
      padding: 9px 14px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(93, 159, 150, .45) !important;
      background: rgba(93, 159, 150, .08) !important;
      color: var(--brand-primary) !important;
      font-weight: 900 !important;
    }

    #admin-salesReport .download-btn:hover {
      background: rgba(93, 159, 150, .16) !important;
    }

    #admin-salesReport .sales-summary-table-card {
      margin: 0 24px 24px !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 22px !important;
      background: #fff !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .05) !important;
      overflow: visible !important;
    }

    #admin-salesReport .sales-summary-table-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 14px !important;
      padding: 18px 20px !important;
      border-bottom: 1px solid #f3f4f6 !important;
      background: linear-gradient(180deg, #fff, #f9fafb) !important;
    }

    #admin-salesReport .sales-summary-table-head h4 {
      margin: 0 !important;
      color: #111827 !important;
      font-size: 1rem !important;
      font-weight: 900 !important;
    }

    #admin-salesReport .sales-summary-table-head p {
      margin: 5px 0 0 !important;
      color: #6b7280 !important;
      font-size: .86rem !important;
    }

    #admin-salesReport .sales-summary-table-wrap {
      width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch !important;
    }

    #admin-salesReport .sales-summary-table {
      width: 100% !important;
      min-width: 960px !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      table-layout: fixed !important;
      background: #fff !important;
    }

    #admin-salesReport .sales-summary-table th,
    #admin-salesReport .sales-summary-table td {
      padding: 14px 16px !important;
      border-bottom: 0 !important;
      vertical-align: middle !important;
      color: #111827 !important;
      font-size: .92rem !important;
      line-height: 1.35 !important;
    }

    #admin-salesReport .sales-summary-table th {
      background: #f8fafc !important;
      color: #4b5563 !important;
      font-size: .75rem !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
    }

    #admin-salesReport .sales-summary-table thead th {
      border-bottom: 1px solid #e5e7eb !important;
    }

    #admin-salesReport .sales-summary-table tbody tr:not(:last-child) td {
      border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
    }

    #admin-salesReport .sales-summary-table tbody tr:not(:last-child) td:first-child {
      box-shadow: inset 4px 0 0 rgba(93, 159, 150, .08) !important;
    }

    #admin-salesReport .sales-summary-table tbody tr:nth-child(even) td {
      background: #fcfcfd !important;
    }

    #admin-salesReport .sales-summary-table tbody tr:hover td {
      background: #fff7ed !important;
    }

    #admin-salesReport .sales-summary-table .product-cell {
      width: 34% !important;
      min-width: 260px !important;
      font-weight: 850 !important;
      overflow-wrap: anywhere !important;
      word-break: normal !important;
    }

    #admin-salesReport .sales-summary-table .num {
      text-align: right !important;
      font-variant-numeric: tabular-nums !important;
      white-space: nowrap !important;
    }

    #admin-salesReport .sales-summary-pagination {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
      width: fit-content !important;
      max-width: calc(100% - 32px) !important;
      margin: 16px auto 18px !important;
      padding: 8px !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 999px !important;
      background: #FFFFFF !important;
      box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
    }

    #admin-salesReport .sales-summary-pagination-summary {
      color: #475569 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      padding: 0 4px !important;
      white-space: nowrap !important;
    }

    #admin-salesReport .sales-summary-page-size {
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      color: #475569 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #admin-salesReport .sales-summary-page-size select {
      min-height: 34px !important;
      border: 1px solid #CBD5E1 !important;
      border-radius: 999px !important;
      padding: 6px 28px 6px 12px !important;
      background: #fff !important;
      color: #0F172A !important;
      font-weight: 900 !important;
    }

    #admin-salesReport .sales-summary-page-size select:focus {
      outline: 3px solid rgba(93, 159, 150, .2) !important;
      border-color: var(--brand-primary) !important;
    }

    #admin-salesReport .sales-summary-page-actions {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 6px !important;
      flex-wrap: wrap !important;
    }

    #admin-salesReport .sales-summary-page-btn {
      min-height: 38px !important;
      padding: 9px 14px !important;
      border-radius: 999px !important;
      border: 1px solid #CBD5E1 !important;
      background: #fff !important;
      color: #334155 !important;
      font-weight: 900 !important;
      cursor: pointer !important;
    }

    #admin-salesReport .sales-summary-page-btn:hover:not(:disabled),
    #admin-salesReport .sales-summary-page-btn:focus-visible {
      border-color: rgba(249, 115, 22, .55) !important;
      background: #fff7ed !important;
      color: #c2410c !important;
      outline: none !important;
    }

    #admin-salesReport .sales-summary-page-btn.active {
      border-color: var(--brand-primary) !important;
      background: var(--brand-primary) !important;
      color: #fff !important;
    }

    #admin-salesReport .sales-summary-page-btn:disabled {
      opacity: .5 !important;
      cursor: not-allowed !important;
    }

    #admin-salesReport .sales-summary-page-ellipsis {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 24px !important;
      color: #94a3b8 !important;
      font-weight: 900 !important;
    }

    #admin-salesReport .sales-summary-loading,
    #admin-salesReport .sales-summary-empty,
    #admin-salesReport .sales-summary-error {
      margin: 18px 24px !important;
      padding: 16px !important;
      border-radius: 16px !important;
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
    }

    @media (max-width: 1100px) {
      #admin-salesReport .panel {
        max-width: none !important;
      }

      #admin-salesReport .sales-summary-filters {
        align-items: stretch !important;
      }

      #admin-salesReport .sales-summary-custom-range {
        width: 100% !important;
      }
    }

    @media (max-width: 760px) {
      #admin:has(#admin-salesReport.show) .admin-shell {
        grid-template-columns: 1fr !important;
      }

      #admin:has(#admin-salesReport.show) .admin-shell-sidebar {
        margin-top: 0 !important;
      }

      #admin:has(#admin-salesReport.show) .admin-shell-main,
      #admin:has(#admin-salesReport.show) #admin-section-view {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
      }

      #admin-salesReport .sales-summary-head,
      #admin-salesReport .sales-summary-filters,
      #admin-salesReport .sales-summary-table-head {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      #admin-salesReport .sales-summary-kpis,
      #admin-salesReport .sales-summary-actions,
      #admin-salesReport .sales-summary-table-card {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      #admin-salesReport .sales-summary-kpis {
        grid-template-columns: 1fr !important;
      }

      #admin-salesReport .sales-summary-periods,
      #admin-salesReport .sales-summary-custom-range {
        width: 100% !important;
      }

      #admin-salesReport .sales-summary-periods .pill {
        flex: 1 1 42% !important;
      }

      #admin-salesReport .sales-summary-custom-range input[type="date"] {
        width: 100% !important;
      }

      #admin-salesReport .sales-summary-actions,
      #admin-salesReport .sales-summary-table-head {
        align-items: stretch !important;
        flex-direction: column !important;
      }

      #admin-salesReport .sales-summary-pagination {
        border-radius: 18px !important;
        display: flex !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
      }

      #admin-salesReport .sales-summary-page-size,
      #admin-salesReport .sales-summary-page-actions {
        justify-content: center !important;
        width: 100% !important;
      }

      #admin-salesReport .sales-summary-page-size {
        flex-wrap: wrap !important;
        white-space: normal !important;
      }

      #admin-salesReport .download-btn {
        width: 100% !important;
      }

      #admin-salesReport .sales-summary-table {
        min-width: 920px !important;
      }
    }



    /* ===== Phase 3: Top Sellers Polish ===== */

    #admin-topSellers {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-topSellers .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-topSellers h3,
    #admin-topSellers .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-topSellers .tops-table {
      margin: 16px 22px 22px !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      overflow: hidden !important;
      background: #FFFFFF !important;
    }

    #admin-topSellers .tops-head,
    #admin-topSellers .tops-row {
      display: grid !important;
      grid-template-columns: 2fr 120px 170px 170px 120px !important;
      gap: 14px !important;
      align-items: center !important;
      padding: 14px 16px !important;
    }

    #admin-topSellers .tops-head {
      background: #F9FAFB !important;
      color: #374151 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-topSellers .tops-row {
      background: #FFFFFF !important;
      border-bottom: 1px solid #F3F4F6 !important;
    }

    #admin-topSellers .tops-row:nth-child(odd) {
      background: #F9FAFB !important;
    }

    #admin-topSellers .tops-row:hover {
      background: #FFF7ED !important;
    }

    #admin-topSellers .tops-product {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      min-width: 0 !important;
    }

    #admin-topSellers .tops-name {
      font-size: 15px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    #admin-topSellers .num {
      text-align: right !important;
      font-variant-numeric: tabular-nums !important;
    }

    #admin-topSellers .rank-badge {
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-weight: 900 !important;
    }

    #admin-topSellers .rank-1 {
      background: #FFF7ED !important;
      border: 1px solid #FDBA74 !important;
      color: #C2410C !important;
    }

    #admin-topSellers .rank-2 {
      background: #F3F4F6 !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-topSellers .rank-3 {
      background: #ECFDF5 !important;
      border: 1px solid #86EFAC !important;
      color: #166534 !important;
    }

    #admin-topSellers .rank-n {
      background: #F3F4F6 !important;
      border: 1px solid #E5E7EB !important;
      color: #374151 !important;
    }

    #admin-topSellers .chip.qty {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
      font-weight: 900 !important;
    }

    #admin-topSellers .chip.rev,
    #admin-topSellers .chip.gp {
      background: #ECFDF5 !important;
      border-color: #86EFAC !important;
      color: #166534 !important;
      font-weight: 900 !important;
    }

    #admin-topSellers .tops-empty {
      margin: 18px 22px 24px !important;
      padding: 34px 20px !important;
      text-align: center !important;
      background: #F9FAFB !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 18px !important;
    }


    /* ===== Phase 3: Receipt Lookup Polish + Pagination ===== */

    #admin-receipts {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-receipts .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-receipts h3,
    #admin-receipts .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-receipts #rcptHelper {
      margin: 14px 22px !important;
      color: var(--st-muted) !important;
    }

    #admin-receipts #rcptResults {
      margin: 0 0px 22px !important;
    }

    #admin-receipts .rcpt-table-wrap {
      overflow-x: auto !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
    }

    #admin-receipts .rcpt-table {
      width: 100% !important;
      min-width: 980px !important;
      border-collapse: collapse !important;
      table-layout: fixed !important;
    }

    #admin-receipts .rcpt-table thead th {
      background: #F9FAFB !important;
      color: #374151 !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-receipts .rcpt-table tbody td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      color: var(--st-text) !important;
    }

    #admin-receipts .rcpt-table tbody tr:nth-child(even) {
      background: #F9FAFB !important;
    }

    #admin-receipts .rcpt-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-receipts .rcpt-pagination {
      margin: 18px 0 4px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 12px !important;
    }

    #admin-receipts .rcpt-empty-state {
      padding: 34px 20px !important;
      text-align: center !important;
      background: #F9FAFB !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 18px !important;
    }

    #admin-receipts .rcpt-empty-icon {
      font-size: 34px !important;
      margin-bottom: 10px !important;
    }

    #admin-receipts .rcpt-empty-title {
      font-size: 18px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
      margin-bottom: 6px !important;
    }

    #admin-receipts .rcpt-empty-text {
      font-size: 14px !important;
      color: var(--st-muted) !important;
    }

    /* ===== Receipt Lookup Horizontal Scrollbar ===== */

    #admin-receipts .rcpt-table-wrap {
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      padding-bottom: 8px !important;
      scrollbar-gutter: stable !important;
    }

    #admin-receipts .rcpt-table {
      min-width: 1100px !important;
    }






    /* ===== Phase 3: Customer History Polish ===== */

    #admin-customerHistory {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-customerHistory .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-customerHistory h3,
    #admin-customerHistory .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-customerHistory .admin-subtitle {
      margin: 0 !important;
      padding: 0 22px 14px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
    }

    #admin-customerHistory .customer-history-search {
      display: grid !important;
      grid-template-columns: minmax(280px, 1fr) auto !important;
      gap: 14px !important;
      align-items: end !important;
      margin: 0 !important;
      padding: 16px 22px 20px !important;
      background: #F9FAFB !important;
      border-top: 1px solid #F3F4F6 !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-customerHistory .customer-history-search label {
      color: #374151 !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    #admin-customerHistory #customerHistorySearch {
      height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
    }

    #admin-customerHistory #customerHistorySearch:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #admin-customerHistory #customerHistorySearchBtn {
      height: 46px !important;
      border-radius: 14px !important;
      font-weight: 900 !important;
    }

    #admin-customerHistory .customer-history-body {
      margin: 0 !important;
      padding: 22px !important;
      background: #FFFFFF !important;
    }

    #admin-customerHistory .customer-history-count {
      margin: 0 0 16px !important;
      padding: 12px 14px !important;
      background: #F9FAFB !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 14px !important;
      color: #374151 !important;
      font-weight: 800 !important;
    }

    #admin-customerHistory .customer-history-card {
      margin: 0 0 16px !important;
      padding: 18px !important;
      border-radius: 20px !important;
      border: 1px solid #E5E7EB !important;
      background: linear-gradient(180deg, #FFFFFF, #F9FAFB) !important;
      box-shadow: 0 10px 26px rgba(17, 24, 39, .06) !important;
    }

    #admin-customerHistory .customer-history-card-top {
      display: flex !important;
      justify-content: space-between !important;
      gap: 14px !important;
      align-items: flex-start !important;
      margin-bottom: 14px !important;
    }

    #admin-customerHistory .customer-history-total {
      color: var(--st-primary) !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #admin-customerHistory .customer-history-meta {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
      margin: 14px 0 !important;
    }

    #admin-customerHistory .customer-history-meta>div {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 14px !important;
      padding: 10px 12px !important;
      color: #374151 !important;
    }

    #admin-customerHistory .customer-history-items {
      border-top: 1px solid #E5E7EB !important;
      padding-top: 12px !important;
      margin-top: 12px !important;
    }

    #admin-customerHistory .customer-history-item {
      display: flex !important;
      justify-content: space-between !important;
      gap: 12px !important;
      padding: 9px 0 !important;
      border-bottom: 1px solid #F3F4F6 !important;
      color: #374151 !important;
    }

    #admin-customerHistory .customer-history-item:last-child {
      border-bottom: none !important;
    }

    #admin-customerHistory .customer-history-actions {
      display: flex !important;
      justify-content: flex-end !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
      margin-top: 16px !important;
    }

    #admin-customerHistory .customer-history-actions .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
    }

    #admin-customerHistory .customer-history-wa-btn {
      background: #ECFDF5 !important;
      border: 1px solid #86EFAC !important;
      color: #166534 !important;
    }

    #admin-customerHistory .customer-history-wa-btn:hover {
      background: #DCFCE7 !important;
    }

    #admin-customerHistory .customer-history-pdf-btn {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
    }

    #admin-customerHistory .customer-history-pdf-btn:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }


    /* ===== Phase 3: Pending Receipt Shares Polish ===== */

    #admin-receiptQueue {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-receiptQueue .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-receiptQueue h3,
    #admin-receiptQueue .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      padding: 20px 22px 8px !important;
      margin: 0 !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-receiptQueue .admin-subtitle {
      margin: 0 !important;
      padding: 0 22px 18px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
    }

	    #admin-receiptQueue .queue-page-summary {
	      display: grid !important;
	      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	      gap: 12px !important;
	      margin: 0 !important;
	      padding: 16px 22px 18px !important;
	      background: #F9FAFB !important;
	      border-top: 1px solid #F3F4F6 !important;
	      border-bottom: 1px solid #E5E7EB !important;
	    }

    #admin-receiptQueue .queue-stat {
	      background: #FFFFFF !important;
	      border: 1px solid #E5E7EB !important;
	      border-radius: 16px !important;
	      padding: 13px 14px !important;
	      box-shadow: 0 6px 18px rgba(17, 24, 39, .045) !important;
	    }

    #admin-receiptQueue .queue-stat-label {
	      font-size: 12px !important;
	      font-weight: 900 !important;
	      color: var(--st-muted) !important;
	      letter-spacing: .06em !important;
	      text-transform: uppercase !important;
	      margin-bottom: 6px !important;
	    }

    #admin-receiptQueue .queue-stat-value {
	      font-size: 21px !important;
	      font-weight: 900 !important;
	      color: var(--st-text) !important;
	      font-variant-numeric: tabular-nums !important;
	    }

    #admin-receiptQueue #rqFailed {
      color: #B91C1C !important;
    }

    #admin-receiptQueue #rqPending,
    #admin-receiptQueue #rqQueued {
      color: #C2410C !important;
    }

    #admin-receiptQueue #rqSent {
      color: #166534 !important;
    }

	    #admin-receiptQueue #receiptQueueList {
	      padding: 22px !important;
	      margin: 0 !important;
	      background: #FFFFFF !important;
	    }

	    #admin-receiptQueue .receipt-share-help {
	      border: 1px solid #DDE5EF !important;
	      border-radius: 18px !important;
	      background: #F8FAFC !important;
	      color: var(--st-text) !important;
	      padding: 14px 16px !important;
	      margin-bottom: 14px !important;
	    }

	    #admin-receiptQueue .receipt-share-help strong {
	      display: block !important;
	      margin-bottom: 6px !important;
	      font-size: 15px !important;
	      font-weight: 900 !important;
	    }

	    #admin-receiptQueue .receipt-share-help p {
	      margin: 4px 0 0 !important;
	      color: var(--st-muted) !important;
	      font-size: 13px !important;
	      line-height: 1.45 !important;
	    }

	    #admin-receiptQueue .receipt-share-empty {
	      display: grid !important;
	      justify-items: center !important;
	      gap: 8px !important;
	      padding: 32px 18px !important;
	      border: 1px dashed #CBD5E1 !important;
	      border-radius: 20px !important;
	      background: #FFFFFF !important;
	      text-align: center !important;
	    }

	    #admin-receiptQueue .receipt-share-empty-icon {
	      display: inline-flex !important;
	      align-items: center !important;
	      justify-content: center !important;
	      min-width: 58px !important;
	      min-height: 34px !important;
	      padding: 0 12px !important;
	      border-radius: 999px !important;
	      background: #FFF7ED !important;
	      border: 1px solid #FDBA74 !important;
	      color: #9A3412 !important;
	      font-size: 12px !important;
	      font-weight: 900 !important;
	      text-transform: uppercase !important;
	      letter-spacing: .05em !important;
	    }

	    #admin-receiptQueue .receipt-share-empty strong {
	      font-size: 18px !important;
	      font-weight: 900 !important;
	      color: var(--st-text) !important;
	    }

	    #admin-receiptQueue .receipt-share-empty p {
	      max-width: 420px !important;
	      margin: 0 !important;
	      color: var(--st-muted) !important;
	      line-height: 1.5 !important;
	    }

    #admin-receiptQueue .queue-page-list {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
    }

	    #admin-receiptQueue .queue-page-item {
	      border: 1px solid #E5E7EB !important;
	      border-radius: 18px !important;
	      background: #FFFFFF !important;
	      padding: 16px !important;
	      box-shadow: 0 8px 22px rgba(17, 24, 39, .05) !important;
	    }
	
	    #admin-receiptQueue .queue-page-item:hover {
	      background: #F8FAFC !important;
	      border-color: #CBD5E1 !important;
	    }

    #admin-receiptQueue .queue-page-item-top {
      font-size: 15px !important;
      font-weight: 900 !important;
      color: var(--st-text) !important;
      margin-bottom: 6px !important;
    }

    #admin-receiptQueue .queue-page-item-meta {
      font-size: 13px !important;
	      color: var(--st-muted) !important;
	      line-height: 1.5 !important;
	    }

	    #admin-receiptQueue .receipt-share-grid {
	      display: grid !important;
	      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	      gap: 4px 14px !important;
	      margin-top: 8px !important;
	    }

	    #admin-receiptQueue .receipt-share-error {
	      margin-top: 8px !important;
	      color: #B91C1C !important;
	      font-weight: 800 !important;
	    }

	    #admin-receiptQueue .receipt-share-warning {
	      margin-top: 8px !important;
	      color: #92400E !important;
	      font-weight: 800 !important;
	    }

	    #admin-receiptQueue .receipt-share-actions {
	      display: flex !important;
	      flex-wrap: wrap !important;
	      gap: 8px !important;
	      margin-top: 12px !important;
	    }

	    #admin-receiptQueue .receipt-share-actions .btn {
	      border-radius: 999px !important;
	      min-height: 38px !important;
	      padding: 8px 13px !important;
	      font-weight: 900 !important;
	    }

	    #admin-receiptQueue .receipt-share-open {
	      background: var(--st-primary) !important;
	      border-color: var(--st-primary) !important;
	      color: #FFFFFF !important;
	    }

	    #admin-receiptQueue .receipt-share-open:disabled {
	      background: #E5E7EB !important;
	      border-color: #D1D5DB !important;
	      color: #6B7280 !important;
	      cursor: not-allowed !important;
	    }

	    #admin-receiptQueue .receipt-share-remove {
	      background: #FFFFFF !important;
	      border-color: #CBD5E1 !important;
	      color: #334155 !important;
	    }

    #admin-receiptQueue .queue-status {
      display: inline-flex !important;
      align-items: center !important;
      border-radius: 999px !important;
      padding: 4px 9px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      border: 1px solid #D1D5DB !important;
      background: #F9FAFB !important;
      color: #374151 !important;
    }

	    #admin-receiptQueue .muted {
	      color: var(--st-muted) !important;
	    }

	    @media (max-width: 820px) {
	      #admin-receiptQueue .queue-page-summary {
	        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	      }
	    }

	    @media (max-width: 520px) {
	      #admin-receiptQueue .queue-page-summary {
	        grid-template-columns: 1fr !important;
	        padding: 14px !important;
	      }

	      #admin-receiptQueue #receiptQueueList {
	        padding: 14px !important;
	      }

	      #admin-receiptQueue .receipt-share-grid {
	        grid-template-columns: 1fr !important;
	      }

	      #admin-receiptQueue .queue-page-item-top {
	        display: grid !important;
	        gap: 8px !important;
	      }

	      #admin-receiptQueue .receipt-share-actions {
	        display: grid !important;
	        grid-template-columns: 1fr !important;
	      }
	    }

    /* ===== Phase 3: Inquiry Polish ===== */

    #admin-inquiries {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-inquiries .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-inquiries h3,
    #admin-inquiries .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-inquiries .inquiry-search-row {
      margin: 0 !important;
      padding: 16px 22px !important;
      background: #F9FAFB !important;
      border-top: 1px solid #F3F4F6 !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-inquiries #inquirySearch {
      height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
    }

    #admin-inquiries #inquirySearch:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #admin-inquiries .inquiry-filters {
      display: flex !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
      padding: 16px 22px 6px !important;
    }

    #admin-inquiries .inquiry-filters .pill {
      border-radius: 999px !important;
      padding: 9px 14px !important;
      font-weight: 900 !important;
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-inquiries .inquiry-filters .pill:hover {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
    }

    #admin-inquiries .inquiry-filters .pill.active {
      background: #111827 !important;
      border-color: #111827 !important;
      color: #FFFFFF !important;
    }

    #admin-inquiries .inquiry-table-wrap {
      margin: 16px 22px 22px !important;
      overflow-x: scroll !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      padding-bottom: 8px !important;
    }

    #admin-inquiries .inquiry-table {
      width: 100% !important;
      min-width: 820px !important;
      border-collapse: collapse !important;
      table-layout: fixed !important;
    }

    #admin-inquiries .inquiry-table th {
      background: #F9FAFB !important;
      color: #374151 !important;
      text-align: left !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-inquiries .inquiry-table td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      color: var(--st-text) !important;
    }

    #admin-inquiries .inquiry-table tbody tr:nth-child(even) {
      background: #F9FAFB !important;
    }

    #admin-inquiries .inquiry-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-inquiries .inquiry-table th:nth-child(1),
    #admin-inquiries .inquiry-table td:nth-child(1) {
      width: auto !important;
    }

    #admin-inquiries .inquiry-table th:nth-child(2),
    #admin-inquiries .inquiry-table td:nth-child(2) {
      width: 190px !important;
    }

    #admin-inquiries .inquiry-table th:nth-child(3),
    #admin-inquiries .inquiry-table td:nth-child(3) {
      width: 170px !important;
      text-align: left !important;
    }

    #admin-inquiries .inquiry-table th:nth-child(4),
    #admin-inquiries .inquiry-table td:nth-child(4) {
      width: 120px !important;
      text-align: right !important;
    }

    #admin-inquiries .inquiry-preview {
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    #admin-inquiries .inquiry-table .tag {
      border-radius: 999px !important;
      padding: 5px 10px !important;
      font-weight: 900 !important;
    }

    #admin-inquiries .inquiry-table .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
    }

    #admin-inquiries .tenant-inquiries-intro {
      margin: 0 38px !important;
      padding: 20px 0 4px !important;
      text-align: left !important;
    }

    #admin-inquiries .tenant-inquiries-intro h4 {
      margin: 0 0 5px !important;
      color: #111827 !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      line-height: 1.25 !important;
      text-align: left !important;
    }

    #admin-inquiries .tenant-inquiries-intro p {
      margin: 0 !important;
      color: #6B7280 !important;
      font-size: 14px !important;
      line-height: 1.5 !important;
      text-align: left !important;
    }

    #admin-inquiries .tenant-inquiries-empty {
      margin: 22px 38px 28px !important;
      padding: 20px !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 16px !important;
      background: #F9FAFB !important;
      text-align: center !important;
    }

    #admin-inquiries .tenant-inquiry-topic {
      min-width: 0 !important;
    }

    #admin-inquiries .tenant-inquiry-topic strong,
    #admin-inquiries .tenant-inquiry-topic span {
      display: block !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    #admin-inquiries .tenant-inquiry-topic strong {
      color: #111827 !important;
      font-weight: 900 !important;
    }

    #admin-inquiries .tenant-inquiry-topic span {
      margin-top: 4px !important;
      color: #6B7280 !important;
      font-size: 13px !important;
    }

    #admin-inquiries .tenant-inquiry-status {
      display: inline-flex !important;
      align-items: center !important;
      border-radius: 999px !important;
      padding: 6px 11px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
    }

    #admin-inquiries .tenant-inquiry-status-received {
      background: #EFF6FF !important;
      color: #1D4ED8 !important;
    }

    #admin-inquiries .tenant-inquiry-status-being-handled {
      background: #FFF7ED !important;
      color: #C2410C !important;
    }

    #admin-inquiries .tenant-inquiry-status-resolved {
      background: #ECFDF5 !important;
      color: #047857 !important;
    }

    #admin-inquiries .inquiry-pagination {
      margin: 18px 22px 24px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 12px !important;
    }


    /* ===== Inquiry Final Real Alignment Fix ===== */

    #admin-inquiries .inquiry-search-row,
    #admin-inquiries .tenant-inquiries-intro,
    #admin-inquiries .inquiry-toolbar,
    #admin-inquiries .inquiry-table-wrap,
    #admin-inquiries .inquiry-pagination {
      width: calc(100% - 76px) !important;
      max-width: calc(100% - 76px) !important;
      margin-left: 38px !important;
      margin-right: 38px !important;
      box-sizing: border-box !important;
    }

    #admin-inquiries .inquiry-search-row {
      padding: 16px 0 !important;
    }

    #admin-inquiries .inquiry-toolbar {
      padding: 16px 0 12px !important;
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }

    #admin-inquiries #inquirySearch {
      width: 100% !important;
      display: block !important;
    }

    #admin-inquiries .inquiry-table-wrap {
      margin-top: 16px !important;
      margin-bottom: 22px !important;
    }

    #admin-inquiries .tenant-inquiry-table {
      min-width: 820px !important;
    }

    #admin-inquiries .inquiry-pagination {
      margin-top: 18px !important;
      margin-bottom: 24px !important;
    }

    @media (max-width: 720px) {
      #admin-inquiries .tenant-inquiries-intro,
      #admin-inquiries .inquiry-search-row,
      #admin-inquiries .inquiry-table-wrap,
      #admin-inquiries .inquiry-pagination {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      #admin-inquiries .tenant-inquiry-table {
        min-width: 0 !important;
      }

      #admin-inquiries .tenant-inquiry-table,
      #admin-inquiries .tenant-inquiry-table thead,
      #admin-inquiries .tenant-inquiry-table tbody,
      #admin-inquiries .tenant-inquiry-table tr,
      #admin-inquiries .tenant-inquiry-table th,
      #admin-inquiries .tenant-inquiry-table td {
        display: block !important;
        width: 100% !important;
      }

      #admin-inquiries .tenant-inquiry-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
      }

      #admin-inquiries .tenant-inquiry-table tr {
        padding: 12px 0 !important;
        border-top: 1px solid #F3F4F6 !important;
      }

      #admin-inquiries .tenant-inquiry-table td {
        border-top: 0 !important;
        padding: 7px 14px !important;
        text-align: left !important;
      }

      #admin-inquiries .tenant-inquiry-table td:nth-child(2)::before {
        content: "Sent";
      }

      #admin-inquiries .tenant-inquiry-table td:nth-child(3)::before {
        content: "Status";
      }

      #admin-inquiries .tenant-inquiry-table td:nth-child(4)::before {
        content: "View";
      }

      #admin-inquiries .tenant-inquiry-table td:nth-child(2)::before,
      #admin-inquiries .tenant-inquiry-table td:nth-child(3)::before,
      #admin-inquiries .tenant-inquiry-table td:nth-child(4)::before {
        display: block !important;
        margin-bottom: 4px !important;
        color: #6B7280 !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: .05em !important;
        text-transform: uppercase !important;
      }

      #admin-inquiries .tenant-inquiry-topic strong,
      #admin-inquiries .tenant-inquiry-topic span {
        white-space: normal !important;
      }

      #admin-inquiries .inquiry-pagination {
        flex-direction: column !important;
      }
    }

    /* ===== Receipt Lookup Alignment Polish ===== */

    #admin-receipts #rcptHelper {
      margin-bottom: 14px !important;
    }

    #admin-receipts #rcptResults {
      margin-top: 8px !important;
    }

    #admin-receipts .rcpt-table-wrap {
      margin-top: 8px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* ===== Reported Problems Safe Polish Only ===== */

    /* Remove black title bar */
    #admin-incidents h3,
    #admin-incidents .admin-title,
    #admin-incidents .panel>h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      text-align: center !important;
      font-size: 26px !important;
      font-weight: 900 !important;
      padding: 20px 22px 12px !important;
      margin: 0 !important;
    }

    /* Top action buttons */
    #admin-incidents .incident-toolbar .btn {
      border-radius: 999px !important;
      min-height: 44px !important;
      padding: 10px 18px !important;
      font-weight: 900 !important;
    }

    #admin-incidents .incident-toolbar .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #fff !important;
    }

    /* Filters only */
    #admin-incidents .incident-filters input,
    #admin-incidents .incident-filters select {
      height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
    }

    /* Table container only — no column changes */
    #admin-incidents .incident-table-wrap {
      border-radius: 18px !important;
      border: 1px solid #E5E7EB !important;
      background: #fff !important;
      padding-bottom: 8px !important;
    }

    /* Header/row visual only */
    #admin-incidents .incident-head {
      background: #F9FAFB !important;
      color: #374151 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
    }

    #admin-incidents .incident-row:hover {
      background: #FFF7ED !important;
    }

    /* Status dropdown only */
    #admin-incidents .incident-status {
      border-radius: 12px !important;
      font-weight: 800 !important;
    }

    /* View button only */
    #admin-incidents .incident-actions .btn,
    #admin-incidents .incident-row .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 8px 14px !important;
    }

    /* Pagination only */


    /* ===== Phase 3: Users Polish ===== */

    #admin-users {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-users .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-users h3,
    #admin-users .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-users .admin-subtitle {
      margin: 0 !important;
      padding: 0 22px 16px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
    }

    #admin-users .admin-users-form {
      margin: 0 !important;
      padding: 18px 22px 22px !important;
      background: #F9FAFB !important;
      border-top: 1px solid #F3F4F6 !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-users .admin-users-form label,
    #admin-cashiers .cashier-form label {
      color: #374151 !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    #admin-users .admin-users-form input,
    #admin-users .admin-users-form select,
    #admin-cashiers .cashier-form input,
    #admin-cashiers .cashier-form select,
    #admin-multiShop input,
    #admin-multiShop select {
      height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
    }

    #admin-users .admin-users-form input:focus,
    #admin-users .admin-users-form select:focus,
    #admin-cashiers .cashier-form input:focus,
    #admin-cashiers .cashier-form select:focus,
    #admin-multiShop input:focus,
    #admin-multiShop select:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #admin-users .admin-users-form .btn {
      height: 46px !important;
      border-radius: 14px !important;
      font-weight: 900 !important;
    }

    #admin-users .admin-users-table-wrap {
      margin: 22px !important;
      overflow-x: auto !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
    }

    #admin-users .admin-users-table {
      width: 100% !important;
      min-width: 780px !important;
      border-collapse: collapse !important;
    }

    #admin-users .admin-users-table thead th {
      background: #F9FAFB !important;
      color: #374151 !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-users .admin-users-table tbody td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      color: var(--st-text) !important;
    }

    #admin-users .admin-users-table tbody tr:nth-child(even) {
      background: #F9FAFB !important;
    }

    #admin-users .admin-users-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #admin-users .admin-users-actions,
    #admin-users .cell-actions {
      display: flex !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
    }

    #admin-users .admin-users-table .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
    }

    #admin-users .backend-users-summary-card {
      align-items: center !important;
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .12), transparent 34%),
        #fffaf5 !important;
      border: 1px solid rgba(249, 115, 22, .18) !important;
      border-radius: 18px !important;
      display: flex !important;
      gap: 14px !important;
      justify-content: space-between !important;
      margin: 18px 22px 0 !important;
      padding: 16px 18px !important;
    }

    #admin-users .backend-users-summary-card strong {
      color: #111827 !important;
      display: block !important;
      font-size: 1rem !important;
      font-weight: 950 !important;
    }

    #admin-users .backend-users-summary-card p {
      color: #64748b !important;
      font-weight: 750 !important;
      margin: 4px 0 0 !important;
    }

    #admin-users .backend-users-count-pill,
    #admin-users .backend-user-self-protected {
      align-items: center !important;
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 999px !important;
      color: #64748b !important;
      display: inline-flex !important;
      font-size: .76rem !important;
      font-weight: 900 !important;
      justify-content: center !important;
      padding: 7px 10px !important;
      white-space: nowrap !important;
    }

    #admin-users .backend-users-toolbar {
      align-items: center !important;
      display: grid !important;
      gap: 10px !important;
      grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) minmax(140px, 180px) auto !important;
      margin: 14px 22px 0 !important;
    }

    #admin-users .backend-users-toolbar .input {
      height: 44px !important;
      max-width: none !important;
      width: 100% !important;
    }

    #admin-users .backend-users-toolbar .btn {
      height: 44px !important;
      border-radius: 14px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #admin-users .backend-users-create {
      margin: 16px 22px 0 !important;
      padding: 18px !important;
      border-radius: 20px !important;
      border: 1px solid #e5e7eb !important;
      background: #ffffff !important;
      box-shadow: 0 10px 24px rgba(17, 24, 39, .045) !important;
    }

    #admin-users .backend-users-section-head h4 {
      color: #111827 !important;
      font-size: 1.05rem !important;
      font-weight: 950 !important;
      margin: 0 !important;
    }

    #admin-users .backend-users-section-head p {
      color: #64748b !important;
      margin: 4px 0 14px !important;
    }

    #admin-users .backend-user-form-grid,
    #admin-users .backend-user-assignment-grid {
      display: grid !important;
      gap: 14px !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #admin-users .backend-user-choice-list {
      display: grid !important;
      gap: 8px !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      margin-top: 8px !important;
    }

    #admin-users .backend-user-choice-card {
      align-items: flex-start !important;
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 14px !important;
      cursor: pointer !important;
      display: flex !important;
      gap: 10px !important;
      min-height: 58px !important;
      padding: 10px 12px !important;
    }

    #admin-users .backend-user-choice-card input {
      height: auto !important;
      margin-top: 3px !important;
      width: auto !important;
    }

    #admin-users .backend-user-choice-card strong,
    #admin-users .backend-user-shop-badge span {
      color: #111827 !important;
      display: block !important;
      font-weight: 900 !important;
      line-height: 1.2 !important;
    }

    #admin-users .backend-user-choice-card small,
    #admin-users .backend-user-shop-badge small {
      color: #64748b !important;
      display: block !important;
      font-size: .74rem !important;
      font-weight: 750 !important;
      margin-top: 2px !important;
    }

    #admin-users .backend-user-form-actions {
      align-items: center !important;
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
    }

    #admin-users .backend-user-form-actions .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #fff !important;
      min-width: 140px !important;
    }

    #admin-users .backend-user-identity-cell {
      align-items: center !important;
      display: flex !important;
      gap: 10px !important;
      min-width: 180px !important;
    }

    #admin-users .backend-user-avatar {
      align-items: center !important;
      background: #fff7ed !important;
      border: 1px solid rgba(249, 115, 22, .22) !important;
      border-radius: 14px !important;
      color: #9a3412 !important;
      display: inline-flex !important;
      flex: 0 0 38px !important;
      font-weight: 950 !important;
      height: 38px !important;
      justify-content: center !important;
      letter-spacing: .03em !important;
      width: 38px !important;
    }

    #admin-users .backend-user-you-badge {
      margin-left: 6px !important;
      vertical-align: middle !important;
    }

    #admin-users .backend-user-secondary {
      color: #64748b !important;
      font-size: .86rem !important;
      font-weight: 700 !important;
    }

    #admin-users .backend-user-chip-list,
    #admin-users .backend-user-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
    }

    #admin-users .backend-user-role-badge,
    #admin-users .backend-user-status-badge {
      align-items: center !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      font-size: .72rem !important;
      font-weight: 950 !important;
      line-height: 1 !important;
      padding: 7px 10px !important;
      white-space: nowrap !important;
    }

    #admin-users .backend-user-role-badge {
      background: #fff7ed !important;
      border: 1px solid rgba(249, 115, 22, .22) !important;
      color: #9a3412 !important;
    }

    #admin-users .backend-user-shop-badge {
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 12px !important;
      display: inline-flex !important;
      flex-direction: column !important;
      padding: 7px 9px !important;
      white-space: nowrap !important;
    }

    #admin-users .backend-user-actions-cell {
      min-width: 230px !important;
    }

    #admin-users .backend-user-actions .btn {
      background: #fff !important;
      border: 1px solid #e5e7eb !important;
      color: #374151 !important;
      padding: 7px 10px !important;
    }

    #admin-users .backend-user-actions .btn.danger {
      border-color: rgba(220, 38, 38, .24) !important;
      color: #b91c1c !important;
    }

    #admin-users .backend-users-footer {
      color: #64748b !important;
      font-size: .86rem !important;
      font-weight: 800 !important;
      margin: -10px 22px 22px !important;
      text-align: right !important;
    }

    @media (max-width: 1100px) {
      #admin-users .backend-users-toolbar {
        grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(140px, 1fr)) !important;
      }

      #admin-users .backend-users-toolbar .btn {
        grid-column: 1 / -1 !important;
        justify-self: flex-start !important;
      }
    }

    @media (max-width: 760px) {
      #admin-users .backend-users-summary-card {
        align-items: flex-start !important;
        flex-direction: column !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      #admin-users .backend-users-toolbar,
      #admin-users .backend-user-form-grid,
      #admin-users .backend-user-assignment-grid,
      #admin-users .backend-user-choice-list {
        grid-template-columns: 1fr !important;
      }

      #admin-users .backend-users-toolbar,
      #admin-users .backend-users-create,
      #admin-users .admin-users-table-wrap,
      #admin-users .backend-users-footer {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      #admin-users .backend-user-form-actions .btn {
        width: 100% !important;
      }

      #admin-users .admin-users-table {
        min-width: 980px !important;
      }

      #admin-users .backend-users-footer {
        text-align: center !important;
      }
    }


    /* ===== Phase 3: Cashiers Polish ===== */

    #admin-cashiers {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-cashiers .panel {
      width: 100% !important;
      max-width: none !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-cashiers h3,
    #admin-cashiers .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-cashiers .admin-subtitle {
      margin: 0 !important;
      padding: 0 22px 16px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
    }

    #admin-cashiers .cashier-form {
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 14px !important;
      align-items: end !important;
      margin: 0 !important;
      padding: 18px 22px 22px !important;
      background: #F9FAFB !important;
      border-top: 1px solid #F3F4F6 !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-cashiers .cashier-form .btn {
      height: 46px !important;
      border-radius: 14px !important;
      font-weight: 900 !important;
    }

    #admin-cashiers .cashier-form .input {
      height: 46px !important;
      max-width: none !important;
      width: 100% !important;
    }

    #admin-cashiers .cashiers-list-box {
      margin: 22px !important;
    }

    #admin-cashiers .cashier-summary-card {
      align-items: center !important;
      background:
        radial-gradient(circle at top left, rgba(249, 115, 22, .12), transparent 34%),
        #fffaf5 !important;
      border: 1px solid rgba(249, 115, 22, .18) !important;
      border-radius: 18px !important;
      display: flex !important;
      gap: 14px !important;
      justify-content: space-between !important;
      margin: 0 0 14px !important;
      padding: 16px 18px !important;
    }

    #admin-cashiers .cashier-summary-card b {
      color: #111827 !important;
      display: block !important;
      font-size: 1rem !important;
      font-weight: 950 !important;
    }

    #admin-cashiers .cashier-toolbar {
      align-items: center !important;
      display: grid !important;
      gap: 10px !important;
      grid-template-columns: minmax(220px, 1fr) minmax(140px, 180px) !important;
      margin: 0 0 14px !important;
    }

    #admin-cashiers .cashier-toolbar .input {
      height: 44px !important;
      max-width: none !important;
      width: 100% !important;
    }

    #admin-cashiers .cashiers-table {
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      overflow: hidden !important;
      background: #FFFFFF !important;
    }

    #admin-cashiers .cashiers-row {
      display: grid !important;
      grid-template-columns: minmax(240px, 1.55fr) minmax(110px, .7fr) minmax(88px, .55fr) minmax(150px, .85fr) minmax(240px, 1.35fr) !important;
      gap: 12px !important;
      padding: 14px 16px !important;
      border-bottom: 1px solid #F3F4F6 !important;
      align-items: center !important;
    }

    #admin-cashiers .cashiers-row:last-child {
      border-bottom: 0 !important;
    }

    #admin-cashiers .cashiers-head {
      background: #F9FAFB !important;
      color: #374151 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #admin-cashiers .cashiers-row:not(.cashiers-head):nth-child(even) {
      background: #F9FAFB !important;
    }

    #admin-cashiers .cashiers-row:not(.cashiers-head):hover {
      background: #FFF7ED !important;
    }

    #admin-cashiers .cashier-identity-cell {
      align-items: center !important;
      display: flex !important;
      gap: 10px !important;
      min-width: 0 !important;
    }

    #admin-cashiers .cashier-avatar {
      align-items: center !important;
      background: #fff7ed !important;
      border: 1px solid rgba(249, 115, 22, .22) !important;
      border-radius: 14px !important;
      color: #9a3412 !important;
      display: inline-flex !important;
      flex: 0 0 38px !important;
      font-weight: 950 !important;
      height: 38px !important;
      justify-content: center !important;
      letter-spacing: .03em !important;
      width: 38px !important;
    }

    #admin-cashiers .cashier-identity-cell b {
      color: #111827 !important;
      display: block !important;
      font-weight: 950 !important;
      line-height: 1.18 !important;
    }

    #admin-cashiers .cashier-identity-cell small {
      color: #64748b !important;
      display: block !important;
      font-size: .76rem !important;
      font-weight: 750 !important;
      line-height: 1.35 !important;
      margin-top: 3px !important;
      overflow-wrap: anywhere !important;
    }

    #admin-cashiers .cashier-status-badge {
      align-items: center !important;
      border-radius: 999px !important;
      display: inline-flex !important;
      font-size: .72rem !important;
      font-weight: 950 !important;
      line-height: 1 !important;
      padding: 7px 10px !important;
      white-space: nowrap !important;
    }

    #admin-cashiers .cashier-status-badge.active {
      background: #ecfdf5 !important;
      border: 1px solid rgba(22, 163, 74, .24) !important;
      color: #15803d !important;
    }

    #admin-cashiers .cashier-status-badge.disabled {
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
      color: #64748b !important;
    }

    #admin-cashiers .cashier-secondary {
      color: #64748b !important;
      font-size: .86rem !important;
      font-weight: 750 !important;
    }

    #admin-cashiers .cashier-actions {
      align-items: center !important;
      display: flex !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }

    #admin-cashiers .cashier-actions .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
      margin: 0 !important;
      min-width: 82px !important;
      padding: 8px 12px !important;
    }

    #admin-cashiers .cashier-actions .btn.secondary {
      background: #fff !important;
      border: 1px solid #e5e7eb !important;
      color: #374151 !important;
    }

    #admin-cashiers .cashier-actions .btn.danger {
      border-color: rgba(220, 38, 38, .24) !important;
      color: #b91c1c !important;
    }

    #admin-cashiers .cashiers-footer {
      color: #64748b !important;
      font-size: .86rem !important;
      font-weight: 800 !important;
      margin-top: 12px !important;
      text-align: right !important;
    }

    #admin-cashiers .cashier-empty-state {
      background: #f8fafc !important;
      border: 1px solid #e5e7eb !important;
      border-radius: 14px !important;
      padding: 14px 16px !important;
    }

    @media (max-width: 1100px) {
      #admin-cashiers .cashier-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }

      #admin-cashiers .cashiers-row {
        grid-template-columns: minmax(220px, 1.4fr) minmax(100px, .65fr) minmax(80px, .5fr) minmax(140px, .8fr) minmax(220px, 1.25fr) !important;
      }
    }

    @media (max-width: 760px) {
      #admin-cashiers .cashier-form,
      #admin-cashiers .cashier-toolbar {
        grid-template-columns: 1fr !important;
      }

      #admin-cashiers .cashier-form-action .btn {
        width: 100% !important;
      }

      #admin-cashiers .cashiers-list-box {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }

      #admin-cashiers .cashier-summary-card {
        align-items: flex-start !important;
        flex-direction: column !important;
      }

      #admin-cashiers .cashiers-table {
        overflow-x: auto !important;
      }

      #admin-cashiers .cashiers-row {
        min-width: 880px !important;
      }

      #admin-cashiers .cashiers-footer {
        text-align: center !important;
      }
    }

    /* ===== Shops Page Modernisation ===== */

    #admin-multiShop {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-multiShop .panel {
      width: 100% !important;
      max-width: none !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-multiShop h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 22px 24px 6px !important;
      font-size: 24px !important;
      font-weight: 900 !important;
      line-height: 1.15 !important;
      text-align: left !important;
      box-shadow: none !important;
    }

    #admin-multiShop .helper {
      display: block !important;
      margin: 0 !important;
      padding: 0 24px 16px !important;
      color: var(--st-muted) !important;
      font-size: 14px !important;
    }

    #admin-multiShop .shop-setting-toggle {
      margin: 0 24px 16px !important;
      padding: 12px 14px !important;
      width: calc(100% - 48px) !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 16px !important;
      background: #FFF7ED !important;
      color: var(--st-text) !important;
      align-items: center !important;
    }

    #admin-multiShop .shop-setting-toggle input {
      width: 18px !important;
      height: 18px !important;
      accent-color: var(--st-primary) !important;
      flex: 0 0 auto !important;
    }

    #admin-multiShop .shop-setting-toggle span {
      color: var(--st-text) !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
    }

    #admin-multiShop #shopListBox {
      padding: 0 24px 24px !important;
      display: grid !important;
      gap: 16px !important;
    }

    #admin-multiShop .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
      min-height: 38px !important;
    }

    #admin-multiShop .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
      box-shadow: 0 10px 22px rgba(234, 88, 12, .18) !important;
    }

    #admin-multiShop .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    #admin-multiShop .backend-shop-note,
    #admin-multiShop .backend-shop-form,
    #admin-multiShop .backend-shop-card,
    #admin-multiShop .backend-shop-error-card {
      border: 1px solid #E5E7EB !important;
      border-radius: 20px !important;
      background: #FFFFFF !important;
      box-shadow: 0 10px 24px rgba(17, 24, 39, .055) !important;
    }

    #admin-multiShop .backend-shop-note {
      display: flex !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      gap: 16px !important;
      padding: 16px !important;
      background: linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 62%) !important;
    }

    #admin-multiShop .backend-shop-note strong,
    #admin-multiShop .backend-shop-form strong {
      color: var(--st-text) !important;
      font-size: 16px !important;
      font-weight: 900 !important;
    }

    #admin-multiShop .backend-shop-archive-note {
      max-width: 470px !important;
      color: #7C2D12 !important;
      font-size: 13px !important;
      line-height: 1.45 !important;
      background: rgba(255, 237, 213, .72) !important;
      border: 1px solid #FED7AA !important;
      border-radius: 14px !important;
      padding: 10px 12px !important;
    }

    #admin-multiShop .backend-shop-form,
    #admin-multiShop .backend-shop-error-card {
      padding: 16px !important;
    }

    #admin-multiShop .backend-shop-form-head,
    #admin-multiShop .backend-shop-card-header {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      gap: 16px !important;
    }

    #admin-multiShop .backend-shop-form-grid {
      display: grid !important;
      grid-template-columns: minmax(190px, 1.2fr) minmax(120px, .7fr) minmax(200px, 1.4fr) minmax(150px, .9fr) minmax(190px, 1.1fr) !important;
      gap: 12px !important;
      align-items: end !important;
    }

    #admin-multiShop .backend-shop-form-grid label {
      display: grid !important;
      gap: 6px !important;
      color: var(--st-text) !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .02em !important;
    }

    #admin-multiShop .backend-shop-form-grid input {
      min-height: 42px !important;
      border-radius: 12px !important;
      border-color: #E5E7EB !important;
      background: #FFFFFF !important;
    }

    #admin-multiShop .backend-shop-form-actions {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }

    #admin-multiShop .backend-shop-section-title {
      margin: 6px 0 -4px !important;
      color: var(--st-text) !important;
      font-size: 15px !important;
      font-weight: 900 !important;
      letter-spacing: .01em !important;
    }

    #admin-multiShop .backend-shop-grid {
      display: grid !important;
      gap: 12px !important;
    }

    #admin-multiShop .backend-shop-card {
      padding: 16px !important;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    #admin-multiShop .backend-shop-card:hover {
      border-color: #FDBA74 !important;
      box-shadow: 0 14px 30px rgba(17, 24, 39, .08) !important;
      transform: translateY(-1px) !important;
    }

    #admin-multiShop .backend-shop-card.is-active-shop {
      border-color: #FB923C !important;
      background: linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 70%) !important;
    }

    #admin-multiShop .backend-shop-card.is-archived-shop {
      background: #F9FAFB !important;
    }

    #admin-multiShop .backend-shop-card-main {
      min-width: 0 !important;
      display: grid !important;
      gap: 8px !important;
    }

    #admin-multiShop .backend-shop-title-row {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-wrap: wrap !important;
    }

    #admin-multiShop .backend-shop-name {
      color: var(--st-text) !important;
      font-size: 18px !important;
      font-weight: 950 !important;
      line-height: 1.2 !important;
    }

    #admin-multiShop .backend-shop-status {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 26px !important;
      padding: 4px 10px !important;
      border-radius: 999px !important;
      background: #DCFCE7 !important;
      border: 1px solid #86EFAC !important;
      color: #166534 !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #admin-multiShop .backend-shop-status-muted {
      background: #E5E7EB !important;
      border-color: #D1D5DB !important;
      color: #374151 !important;
    }

    #admin-multiShop .backend-shop-code {
      color: #7C2D12 !important;
      font-size: 13px !important;
      font-weight: 900 !important;
    }

    #admin-multiShop .backend-shop-details,
    #admin-multiShop .backend-shop-meta {
      display: flex !important;
      gap: 8px 14px !important;
      flex-wrap: wrap !important;
      color: var(--st-muted) !important;
      font-size: 13px !important;
      line-height: 1.35 !important;
    }

    #admin-multiShop .backend-shop-details span,
    #admin-multiShop .backend-shop-meta span {
      overflow-wrap: anywhere !important;
    }

    #admin-multiShop .backend-shop-meta {
      font-size: 11px !important;
      opacity: .78 !important;
    }

    #admin-multiShop .backend-shop-actions {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
      flex: 0 0 auto !important;
      max-width: 360px !important;
    }

    #admin-multiShop .backend-shop-current {
      display: inline-flex !important;
      align-items: center !important;
      min-height: 38px !important;
      font-weight: 800 !important;
    }

    #admin-multiShop .backend-shop-switch-action {
      color: #9A3412 !important;
      border-color: #FDBA74 !important;
      background: #FFF7ED !important;
    }

    #admin-multiShop .backend-shop-switch-action:hover {
      color: #7C2D12 !important;
      border-color: #FB923C !important;
      background: #FFEDD5 !important;
    }

    #admin-multiShop .backend-shop-archive-action {
      color: #991B1B !important;
      border-color: #FECACA !important;
      background: #FEF2F2 !important;
    }

    #admin-multiShop .backend-shop-empty {
      padding: 14px 16px !important;
      border: 1px dashed #D1D5DB !important;
      border-radius: 16px !important;
      background: #F9FAFB !important;
    }

    #admin-multiShop #addShopBtn {
      margin: 0 24px 24px !important;
    }

    @media (max-width: 1180px) {
      #admin-multiShop .backend-shop-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 720px) {
      #admin-multiShop h3 {
        padding: 18px 16px 6px !important;
      }

      #admin-multiShop .helper {
        padding: 0 16px 14px !important;
      }

      #admin-multiShop .shop-setting-toggle {
        margin: 0 16px 14px !important;
        width: calc(100% - 32px) !important;
      }

      #admin-multiShop #shopListBox {
        padding: 0 16px 18px !important;
      }

      #admin-multiShop .backend-shop-note,
      #admin-multiShop .backend-shop-form-head,
      #admin-multiShop .backend-shop-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
      }

      #admin-multiShop .backend-shop-form-grid {
        grid-template-columns: 1fr !important;
      }

      #admin-multiShop .backend-shop-actions {
        justify-content: flex-start !important;
        max-width: none !important;
      }

      #admin-multiShop .backend-shop-actions .btn {
        flex: 1 1 130px !important;
      }

      #admin-multiShop #addShopBtn {
        margin: 0 16px 18px !important;
      }
    }






    /* ===== Phase 3: New Subscription Polish ===== */

    #subscriptionNewForm {
      width: 100% !important;
      max-width: none !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #subscriptionNewForm h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #subscriptionNewForm .admin-subtitle {
      margin: 0 !important;
      padding: 0 22px 16px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
    }

    #subscriptionNewForm .subscription-register-form {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
      gap: 16px !important;
      margin: 0 !important;
      padding: 22px !important;
      background: #F9FAFB !important;
      border-top: 1px solid #F3F4F6 !important;
    }

    #subscriptionNewForm .field {
      min-width: 0 !important;
    }

    #subscriptionNewForm label {
      color: #374151 !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    #subscriptionNewForm input,
    #subscriptionNewForm select,
    #subscriptionNewForm textarea {
      min-height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
      color: var(--st-text) !important;
    }

    #subscriptionNewForm input:focus,
    #subscriptionNewForm select:focus,
    #subscriptionNewForm textarea:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #subscriptionNewForm textarea,
    #subscriptionNewForm #subNotes {
      min-height: 110px !important;
      resize: vertical !important;
    }

    /* Make notes and actions span full width */
    #subscriptionNewForm .field:has(#subNotes),
    #subscriptionNewForm .subscription-form-actions {
      grid-column: 1 / -1 !important;
    }

    #subscriptionNewForm .subscription-form-actions {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      gap: 12px !important;
      margin-top: 4px !important;
    }

    #subscriptionNewForm .subscription-form-actions .btn,
    #subscriptionNewForm #subSaveBtn {
      min-height: 46px !important;
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 10px 18px !important;
    }

    #subscriptionNewForm #subSaveBtn {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
    }

    #subscriptionNewForm #subSaveBtn:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    @media (max-width: 760px) {
      #subscriptionNewForm .subscription-register-form {
        grid-template-columns: 1fr !important;
      }
    }




    /* ===== Phase 3: Subscribers Polish ===== */

    #subscriptionSubscribersView {
      width: 100% !important;
      max-width: none !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #subscriptionSubscribersView h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #subscriptionSubscribersView .admin-subtitle {
      margin: 0 !important;
      padding: 0 22px 16px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
    }

    #subscriptionSubscribersView .subscriber-toolbar {
      margin: 0 !important;
      padding: 16px 22px !important;
      background: #F9FAFB !important;
      border-top: 1px solid #F3F4F6 !important;
      border-bottom: 1px solid #E5E7EB !important;
    }

    #subscriptionSubscribersView #subscriberSearch {
      height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
      color: var(--st-text) !important;
    }

    #subscriptionSubscribersView #subscriberSearch:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #subscriptionSubscribersView #adminSubscriptionsBody {
      padding: 22px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table-wrap {
      margin: 0 !important;
      overflow-x: scroll !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #FFFFFF !important;
      padding-bottom: 8px !important;
      scrollbar-gutter: stable !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table {
      width: 100% !important;
      min-width: 1180px !important;
      border-collapse: collapse !important;
      table-layout: fixed !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table thead th {
      background: #F9FAFB !important;
      color: #374151 !important;
      padding: 14px 16px !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      letter-spacing: .05em !important;
      text-transform: uppercase !important;
      border-bottom: 1px solid #E5E7EB !important;
      white-space: nowrap !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table tbody td {
      padding: 14px 16px !important;
      border-top: 1px solid #F3F4F6 !important;
      color: var(--st-text) !important;
      vertical-align: middle !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table tbody tr:nth-child(even) {
      background: #F9FAFB !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table tbody tr:hover {
      background: #FFF7ED !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-customer-name {
      font-weight: 900 !important;
      color: var(--st-text) !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-customer-id {
      font-size: 12px !important;
      color: var(--st-muted) !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-status .tag {
      border-radius: 999px !important;
      padding: 5px 10px !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions {
      display: flex !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 8px 12px !important;
      white-space: nowrap !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn:first-child {
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn:first-child:hover {
      background: #FFF7ED !important;
      border-color: #FDBA74 !important;
      color: #C2410C !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn:nth-child(2) {
      background: #ECFDF5 !important;
      border: 1px solid #86EFAC !important;
      color: #166534 !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn:nth-child(2):hover {
      background: #DCFCE7 !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn:nth-child(3) {
      background: #FEF2F2 !important;
      border: 1px solid #FCA5A5 !important;
      color: #B91C1C !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn:nth-child(3):hover {
      background: #FEE2E2 !important;
    }

    #subscriptionSubscribersView .subscriber-pagination {
      margin: 18px 0 0 !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 12px !important;
      flex-wrap: wrap !important;
    }

    #admin-transfers .transfer-pagination .btn,
    #admin-receipts .rcpt-pagination .btn,
    #admin-inquiries .inquiry-pagination .btn,
    #admin-incidents .incident-pagination .btn,
    #subscriptionSubscribersView .subscriber-pagination .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
    }




    /* ===== Subscribers Table Stable Scroll Fix ===== */

    #subscriptionSubscribersView .admin-subscriptions-table-wrap {
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      padding-bottom: 8px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table {
      width: max-content !important;
      min-width: 1500px !important;
      table-layout: auto !important;
      border-collapse: collapse !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table th,
    #subscriptionSubscribersView .admin-subscriptions-table td {
      white-space: nowrap !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table th:nth-child(1),
    #subscriptionSubscribersView .admin-subscriptions-table td:nth-child(1) {
      min-width: 240px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table th:nth-child(2),
    #subscriptionSubscribersView .admin-subscriptions-table td:nth-child(2) {
      min-width: 160px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table th:nth-child(7),
    #subscriptionSubscribersView .admin-subscriptions-table td:nth-child(7) {
      min-width: 230px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table th:nth-child(8),
    #subscriptionSubscribersView .admin-subscriptions-table td:nth-child(8) {
      min-width: 90px !important;
      text-align: center !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-table th:nth-child(9),
    #subscriptionSubscribersView .admin-subscriptions-table td:nth-child(9) {
      min-width: 360px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
    }

    #subscriptionSubscribersView .admin-subscriptions-actions .btn {
      flex: 0 0 auto !important;
    }

    /* ===== Report a Problem Customer Page Polish ===== */

    #reportProblem {
      padding: 40px 0 !important;
    }

    #reportProblem .wrap {
      max-width: 900px !important;
      margin: 0 auto !important;
    }

    #reportProblem .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 24px !important;
      box-shadow: 0 18px 45px rgba(17, 24, 39, .08) !important;
      overflow: hidden !important;
      padding: 0 !important;
    }

    #reportProblem .panel>h3 {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 28px 28px 8px !important;
      font-size: 30px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #reportProblem .panel>.muted {
      margin: 0 !important;
      padding: 0 28px 22px !important;
      color: var(--st-muted) !important;
      text-align: center !important;
      font-size: 15px !important;
    }

    #reportProblem #customerReportFormCard {
      margin: 0 !important;
      padding: 26px 28px 28px !important;
      border: none !important;
      border-top: 1px solid #E5E7EB !important;
      border-radius: 0 !important;
      background: #F9FAFB !important;
      box-shadow: none !important;
    }

    #reportProblem #customerReportFormCard h4 {
      margin: 0 0 18px !important;
      color: var(--st-text) !important;
      font-size: 20px !important;
      font-weight: 900 !important;
    }

    #reportProblem #customerReportFormCard input,
    #reportProblem #customerReportFormCard select,
    #reportProblem #customerReportFormCard textarea {
      width: 100% !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
      color: var(--st-text) !important;
      font-size: 15px !important;
      margin-bottom: 14px !important;
    }

    #reportProblem #customerReportFormCard input,
    #reportProblem #customerReportFormCard select {
      min-height: 48px !important;
    }

    #reportProblem #customerReportFormCard textarea {
      min-height: 130px !important;
      resize: vertical !important;
    }

    #reportProblem #customerReportFormCard input:focus,
    #reportProblem #customerReportFormCard select:focus,
    #reportProblem #customerReportFormCard textarea:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #reportProblem #customerReportFormCard .row {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
      gap: 14px !important;
      margin: 0 !important;
    }

    #reportProblem #customerReportFormCard .row:last-of-type {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      gap: 12px !important;
      margin-top: 8px !important;
    }

    #reportProblem #customerReportFormCard .btn {
      min-height: 46px !important;
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 10px 18px !important;
    }

    #reportProblem #customerReportFormCard .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
    }

    #reportProblem #customerReportFormCard .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    #reportProblem #customerReportFormCard>.muted:last-child {
      margin: 18px 0 0 !important;
      padding: 12px 14px !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 14px !important;
      color: var(--st-muted) !important;
    }

    @media (max-width: 700px) {
      #reportProblem .wrap {
        padding: 0 14px !important;
      }

      #reportProblem #customerReportFormCard .row {
        grid-template-columns: 1fr !important;
      }

      #reportProblem #customerReportFormCard .row:last-of-type {
        justify-content: stretch !important;
      }

      #reportProblem #customerReportFormCard .row:last-of-type .btn {
        width: 100% !important;
      }
    }


    /* ===== Phase 3: Developer Tools Polish ===== */

    #admin-devUtils {
      width: 100% !important;
      max-width: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #admin-devUtils .panel {
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 22px !important;
      box-shadow: 0 12px 30px rgba(17, 24, 39, .06) !important;
      overflow: hidden !important;
    }

    #admin-devUtils h3,
    #admin-devUtils .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 !important;
      padding: 20px 22px 8px !important;
      font-size: 22px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #admin-devUtils .muted {
      color: var(--st-muted) !important;
    }

    #admin-devUtils .panel>.muted {
      margin: 0 !important;
      padding: 0 22px 18px !important;
      text-align: center !important;
    }

    #admin-devUtils .card,
    #admin-devUtils .dev-card {
      margin: 18px 22px !important;
      padding: 18px !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 18px !important;
      background: #F9FAFB !important;
      box-shadow: none !important;
    }

    #admin-devUtils .row {
      gap: 12px !important;
      margin: 10px 0 !important;
      align-items: center !important;
    }

    #admin-devUtils input,
    #admin-devUtils select,
    #admin-devUtils textarea {
      min-height: 46px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
    }

    #admin-devUtils input:focus,
    #admin-devUtils select:focus,
    #admin-devUtils textarea:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #admin-devUtils .btn {
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 10px 16px !important;
    }

    #admin-devUtils .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
    }

    #admin-devUtils .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }

    #admin-devUtils code,
    #admin-devUtils pre {
      background: #111827 !important;
      color: #E5E7EB !important;
      border-radius: 14px !important;
      padding: 12px 14px !important;
      overflow-x: auto !important;
    }

    /* Inventory table pagination */


    #admin-inventoryTable #invPaginationWrap .btn {
      min-width: 110px;
    }

    #admin-inventoryTable #invPageInfo {
      font-weight: 700;
      color: var(--st-muted);
    }

    #admin-inventoryTable #invPaginationWrap.pagination,
    #admin-salesTable #salesPaginationWrap.pagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center;
      gap: var(--space-4);
    }

    #admin-inventoryTable #invPaginationWrap.pagination {
      margin-top: var(--space-6);
    }





    #admin-salesTable #salesPaginationWrap.pagination {
      margin-top: var(--space-4);
    }


    #pos .pos-customer-block {
      display: grid !important;
      gap: var(--space-3) !important;
    }

    #pos .pos-customer-title {
      font-size: 13px;
      font-weight: 800;
      color: var(--st-text);
    }

    #pos .pos-customer-input {
      display: block !important;
      width: 100% !important;
      min-height: 46px !important;
      position: static !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    #pos .pos-checkout-btn {
      justify-self: center;
      min-width: 140px;
      margin-top: var(--space-2);
    }

    #pos .pos-receipt-actions {
      gap: var(--space-2);
      flex-wrap: wrap;
      justify-content: center;
    }

    #pos .pos-receipt-actions .btn {
      flex: 0 0 auto;
      min-width: 130px;
      padding: 10px 12px;
    }




    #admin-customerHistory .customer-list-section {
      padding: var(--space-5);
      background: var(--st-surface);
      border-top: 1px solid var(--st-border);
      border-bottom: 1px solid var(--st-border);
    }

    #admin-customerHistory .customer-list-header {
      display: flex;
      justify-content: space-between;
      gap: var(--space-4);
      align-items: flex-start;
      margin-bottom: var(--space-4);
    }

    #admin-customerHistory .customer-list-header h4 {
      margin: 0 0 var(--space-1);
      color: var(--st-text);
      font-size: 18px;
      font-weight: 800;
    }

    #admin-customerHistory .customer-list-table {
      display: grid;
      gap: var(--space-2);
    }

    #admin-customerHistory .customer-list-row {
      display: grid;
      grid-template-columns: minmax(160px, 1.4fr) minmax(120px, 1fr) 100px 120px minmax(150px, 1fr) 100px;
      gap: var(--space-3);
      align-items: center;
      padding: var(--space-3);
      border: 1px solid var(--st-border);
      border-radius: var(--radius-lg);
      background: var(--st-surface);
    }

    #admin-customerHistory .customer-list-row.customer-list-head {
      background: var(--st-bg);
      color: var(--st-muted);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    #admin-customerHistory .customer-list-name {
      font-weight: 800;
      color: var(--st-text);
    }

    #admin-customerHistory .customer-list-phone,
    #admin-customerHistory .customer-list-meta {
      color: var(--st-muted);
      font-size: 13px;
    }

    #admin-customerHistory .customer-list-actions {
      display: flex;
      justify-content: flex-end;
    }

    @media (max-width: 900px) {
      #admin-customerHistory .customer-list-row {
        grid-template-columns: 1fr;
      }

      #admin-customerHistory .customer-list-row.customer-list-head {
        display: none;
      }

      #admin-customerHistory .customer-list-actions {
        justify-content: flex-start;
      }
    }





    #admin-customerHistory .customer-list-row>div:nth-child(3),
    #admin-customerHistory .customer-list-row>div:nth-child(4),
    #admin-customerHistory .customer-list-row>div:nth-child(5) {
      text-align: center;
      justify-self: center;
    }

    #admin-customerHistory .customer-list-head>div:nth-child(3),
    #admin-customerHistory .customer-list-head>div:nth-child(4),
    #admin-customerHistory .customer-list-head>div:nth-child(5) {
      text-align: center;
      justify-self: center;
    }




    #admin-customerHistory #customerHistoryBackWrap {
      margin-top: var(--space-4);
      margin-bottom: var(--space-4);
    }

    #admin-customerHistory #customerHistoryBackWrap .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-weight: 800;
      border-color: var(--st-border);
      background: var(--st-bg);
      color: var(--st-text);
      box-shadow: var(--shadow-sm);
    }

    #admin-customerHistory #customerHistoryBackWrap .btn:hover {
      background: var(--st-surface);
      border-color: var(--st-primary);
    }



    #admin-customerHistory #customerListPagination.pagination {
      margin-top: var(--space-4);
      display: flex !important;
      justify-content: center;
      align-items: center;
      gap: var(--space-4);
    }




    /* ===== POS Cashier PIN Modal ===== */

    .cashier-pin-modal {
      position: fixed;
      inset: 0;
      z-index: 10060;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(3px);
    }

    .cashier-pin-modal.show {
      display: flex;
    }

    .cashier-pin-card {
      position: relative;
      width: min(420px, 94vw);
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 24px;
      padding: 28px;
      text-align: center;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    }

    .cashier-pin-close {
      position: absolute;
      top: 12px;
      right: 14px;
      border: none;
      background: transparent;
      color: #64748B;
      font-size: 26px;
      cursor: pointer;
    }

    .cashier-pin-icon {
      width: 54px;
      height: 54px;
      margin: 0 auto 12px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFF7ED;
      color: #C2410C;
      font-size: 26px;
    }

    .cashier-pin-card h3 {
      margin: 0 0 8px;
      color: var(--st-text);
      font-size: 24px;
      font-weight: 900;
    }

    .cashier-pin-card .muted {
      margin: 0 0 18px;
      color: var(--st-muted);
    }

    #cashierPinInput {
      height: 50px;
      text-align: center;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: 8px;
      border-radius: 16px;
      border: 1px solid #D1D5DB;
    }

    #cashierPinInput:focus {
      outline: none;
      border-color: var(--st-primary);
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14);
    }

    .cashier-pin-error {
      min-height: 20px;
      margin-top: 10px;
      color: #B91C1C;
      font-size: 13px;
      font-weight: 800;
    }

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

    .cashier-pin-actions .btn {
      border-radius: 999px;
      font-weight: 900;
    }







    /* ===== Contact Us Page Polish ===== */

    #contact {
      padding: 48px 0 !important;
    }

    #contact>* {
      max-width: 980px !important;
    }

    #contact h3,
    #contact .admin-title {
      background: transparent !important;
      color: var(--st-text) !important;
      margin: 0 0 10px !important;
      padding: 0 !important;
      font-size: 34px !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
    }

    #contact>p,
    #contact .muted {
      color: var(--st-muted) !important;
      text-align: center !important;
      font-size: 16px !important;
      line-height: 1.6 !important;
    }

    #contact .actions,
    #contact .contact-actions {
      margin: 24px auto 34px !important;
      display: flex !important;
      justify-content: center !important;
      gap: 14px !important;
      flex-wrap: wrap !important;
    }

    #contact .actions a,
    #contact .contact-actions a,
    #contact .actions .btn,
    #contact .contact-actions .btn {
      min-height: 46px !important;
      border-radius: 999px !important;
      padding: 11px 18px !important;
      font-weight: 900 !important;
      text-decoration: none !important;
    }

    #contact .actions a[href*="wa.me"],
    #contact .contact-actions a[href*="wa.me"] {
      background: #ECFDF5 !important;
      border: 1px solid #86EFAC !important;
      color: #166534 !important;
    }

    #contact .actions a[href^="tel:"],
    #contact .contact-actions a[href^="tel:"] {
      background: #FFF7ED !important;
      border: 1px solid #FDBA74 !important;
      color: #C2410C !important;
    }

    #contact .actions a[href^="mailto:"],
    #contact .contact-actions a[href^="mailto:"] {
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #contact form,
    #contact .contact-form,
    #contact .card {
      max-width: 760px !important;
      margin: 26px auto 0 !important;
      padding: 26px !important;
      background: #FFFFFF !important;
      border: 1px solid #E5E7EB !important;
      border-radius: 24px !important;
      box-shadow: 0 18px 45px rgba(17, 24, 39, .08) !important;
    }

    #contact form label,
    #contact .contact-form label,
    #contact .card label {
      color: #374151 !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    #contact input,
    #contact select,
    #contact textarea {
      min-height: 48px !important;
      border-radius: 14px !important;
      border: 1px solid #D1D5DB !important;
      background: #FFFFFF !important;
      color: var(--st-text) !important;
    }

    #contact textarea {
      min-height: 130px !important;
      resize: vertical !important;
    }

    #contact input:focus,
    #contact select:focus,
    #contact textarea:focus {
      outline: none !important;
      border-color: var(--st-primary) !important;
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14) !important;
    }

    #contact form .btn,
    #contact .contact-form .btn,
    #contact .card .btn {
      min-height: 46px !important;
      border-radius: 999px !important;
      font-weight: 900 !important;
      padding: 10px 18px !important;
    }

    #contact form .btn.primary,
    #contact .contact-form .btn.primary,
    #contact .card .btn.primary {
      background: var(--st-primary) !important;
      border-color: var(--st-primary) !important;
      color: #FFFFFF !important;
    }

    #contact form .btn.primary:hover,
    #contact .contact-form .btn.primary:hover,
    #contact .card .btn.primary:hover {
      background: var(--st-primary-hover) !important;
      border-color: var(--st-primary-hover) !important;
    }




    /* ===== Inventory Shelf / Location Field ===== */

    #admin-inventoryTable .inv-location-chip {
      display: inline-block !important;
      margin-top: 4px !important;
      color: #C2410C !important;
      font-weight: 800 !important;
    }




    /* ===== POS Product Shelf / Location Display ===== */

    #pos .pos-card .muted {
      line-height: 1.45 !important;
    }

    #pos .pos-card .muted:has(+ .muted) {
      margin-bottom: 2px !important;
    }



    #admin-stockTransfer .stock-transfer-action-center {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      margin-top: var(--space-4);
    }

    #admin-stockTransfer button#previewTransferBtn.btn.primary {
      width: fit-content !important;
      min-width: 180px !important;
      max-width: 220px !important;
      flex: 0 0 auto !important;
      padding: 12px 24px !important;
      font-size: 16px !important;
      font-weight: 800 !important;
      line-height: 1.2 !important;
      text-align: center !important;
      justify-content: center !important;
      align-items: center !important;
    }



    .top-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-4);
      margin-top: var(--space-6);
      flex-wrap: wrap;
    }

    .top-pagination .btn {
      min-width: 120px;
    }

    .top-page-label {
      font-weight: 600;
    }


    #admin-topSellers .top-pagination button.btn {
      background: var(--st-surface) !important;
      color: var(--st-text) !important;
      border: 1px solid var(--st-border) !important;
    }

    #admin-topSellers .top-pagination button.btn:hover:not(:disabled) {
      border-color: var(--st-primary) !important;
    }

    #admin-topSellers .top-pagination button.btn:disabled {
      opacity: 0.5;
    }


    #admin-incidents #incidentTable {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-gutter: stable !important;
    }

    #admin-incidents #incidentPagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: var(--space-4) !important;
      margin-top: var(--space-4) !important;
      margin-bottom: var(--space-4) !important;
      flex-wrap: wrap !important;
    }



    #admin-incidents #incidentTable {
      overflow: visible !important;
    }

    #admin-incidents .incident-scroll-area {
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-gutter: stable !important;
      padding-bottom: var(--space-2) !important;
    }



    #admin-incidents .incident-pagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: var(--space-4) !important;
      margin-top: var(--space-4) !important;
      margin-bottom: var(--space-4) !important;
      flex-wrap: wrap !important;
    }


    /* ===== FINAL FIX: Incident table scroll only, pagination fixed ===== */

    #admin-incidents #incidentTable.incident-table-wrap {
      overflow-x: visible !important;
      overflow-y: visible !important;
      padding-bottom: 0 !important;
    }

    #admin-incidents #incidentTable .incident-scroll-area {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-gutter: stable !important;
      padding-bottom: var(--space-3) !important;
    }

    #admin-incidents #incidentTable .incident-table {
      display: block !important;
      width: 2050px !important;
      min-width: 2050px !important;
      max-width: none !important;
    }

    #admin-incidents #incidentTable .incident-pagination {
      width: 100% !important;
      max-width: 100% !important;
      overflow: visible !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: var(--space-4) !important;
      margin-top: var(--space-4) !important;
      margin-bottom: var(--space-4) !important;
      flex-wrap: wrap !important;
    }



    /* ===== FINAL INCIDENT TABLE SCROLL FIX ===== */

    #admin-incidents .panel,
    #admin-incidents #incidentListCard,
    #admin-incidents #incidentTable.incident-table-wrap {
      overflow-x: hidden !important;
      overflow-y: visible !important;
    }

    #admin-incidents #incidentTable.incident-table-wrap {
      width: 100% !important;
      max-width: 100% !important;
      border-radius: var(--radius-xl) !important;
      border: 1px solid var(--st-border) !important;
      background: var(--st-surface) !important;
      padding: 0 !important;
    }

    #admin-incidents .incident-scroll-area {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      scrollbar-gutter: stable !important;
      padding-bottom: var(--space-3) !important;
    }

    #admin-incidents .incident-table {
      width: 1850px !important;
      min-width: 1850px !important;
    }

    #admin-incidents .incident-pagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 16px !important;

      padding: 16px 0 !important;
      margin: 0 !important;

      border-top: 1px solid var(--st-border) !important;
      background: transparent !important;
    }

    #admin-incidents .incident-pagination .btn {
      min-width: 110px !important;
    }



    /* ===== FINAL Reported Problems Scrollbar Fix ===== */

    #admin-incidents .panel,
    #admin-incidents #incidentListCard,
    #admin-incidents #incidentTable {
      overflow-x: hidden !important;
      overflow-y: visible !important;
    }

    #admin-incidents #incidentTable .incident-scroll-area {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      padding-bottom: 14px !important;
    }

    #admin-incidents #incidentTable .incident-table {
      width: 1500px !important;
      min-width: 1500px !important;
      max-width: none !important;
    }

    /* Pagination must never be part of horizontal scrolling */
    #admin-incidents #incidentTable .incident-pagination {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: visible !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: var(--space-4) !important;
      margin-top: var(--space-4) !important;
      padding-top: var(--space-4) !important;
      border-top: 1px solid var(--st-border) !important;
    }




    /* ===== FINAL Incident Table Width Fix ===== */

    #admin-incidents #incidentTable.incident-table-wrap {
      overflow: hidden !important;
      max-width: 100% !important;
    }

    #admin-incidents #incidentTable .incident-scroll-area {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: scroll !important;
      overflow-y: hidden !important;
      padding-bottom: 14px !important;
    }

    #admin-incidents #incidentTable .incident-table {
      display: block !important;
      width: 1900px !important;
      min-width: 1900px !important;
      max-width: none !important;
    }

    #admin-incidents #incidentTable .incident-head,
    #admin-incidents #incidentTable .incident-row {
      display: grid !important;
      width: 2050px !important;
      min-width: 2050px !important;
      grid-template-columns:
        80px 170px 180px 190px 190px 150px 300px 160px 140px 280px 180px !important;
      gap: 12px !important;
      align-items: center !important;
    }

    /* Keep Created text readable */
    #admin-incidents #incidentTable .incident-head>div:nth-child(10),
    #admin-incidents #incidentTable .incident-row>div:nth-child(10) {
      white-space: nowrap !important;
      overflow: visible !important;
      text-overflow: clip !important;
    }

    /* Keep View button visible */
    #admin-incidents #incidentTable .incident-actions {
      display: flex !important;
      justify-content: center !important;
      overflow: visible !important;
    }

    #admin-incidents #incidentTable .incident-actions .btn {
      min-width: 80px !important;
    }

    /* Visible horizontal scrollbar */
    #admin-incidents #incidentTable .incident-scroll-area::-webkit-scrollbar {
      height: 12px !important;
    }

    #admin-incidents #incidentTable .incident-scroll-area::-webkit-scrollbar-track {
      background: #F1F5F9 !important;
      border-radius: 999px !important;
    }

    #admin-incidents #incidentTable .incident-scroll-area::-webkit-scrollbar-thumb {
      background: #CBD5E1 !important;
      border-radius: 999px !important;
    }

    #admin-incidents #incidentTable .incident-scroll-area::-webkit-scrollbar-thumb:hover {
      background: #94A3B8 !important;
    }

    /* Pagination */
    #admin-incidents #incidentTable .incident-pagination {
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 14px !important;
      padding: 16px 0 !important;
      margin: 0 !important;
      border-top: 1px solid var(--st-border) !important;
    }


    /* ===== INCIDENT: force Actions/View column visible ===== */

    #admin-incidents #incidentTable .incident-table {
      width: 2250px !important;
      min-width: 2250px !important;
      max-width: none !important;
    }

    #admin-incidents #incidentTable .incident-head,
    #admin-incidents #incidentTable .incident-row {
      width: 2250px !important;
      min-width: 2250px !important;
      display: grid !important;
      grid-template-columns:
        80px 180px 190px 200px 200px 160px 320px 170px 150px 300px 220px !important;
      gap: 12px !important;
      align-items: center !important;
    }

    #admin-incidents #incidentTable .incident-actions {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      overflow: visible !important;
    }

    #admin-incidents #incidentTable .incident-actions .btn {
      display: inline-flex !important;
      min-width: 90px !important;
      justify-content: center !important;
    }


    /* ===== INCIDENT: align View button under Actions header ===== */

    #admin-incidents #incidentTable .incident-head>div:nth-child(11),
    #admin-incidents #incidentTable .incident-row>div:nth-child(11) {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }

    #admin-incidents #incidentTable .incident-actions {
      justify-content: center !important;
      justify-self: center !important;
      width: 100% !important;
    }



    /* ===== INCIDENT: reduce Created → Actions gap ===== */

    #admin-incidents #incidentTable .incident-head,
    #admin-incidents #incidentTable .incident-row {
      grid-template-columns:
        80px 180px 190px 200px 200px 160px 320px 170px 150px 240px 140px !important;
    }

    #admin-incidents #incidentTable .incident-head>div:nth-child(10),
    #admin-incidents #incidentTable .incident-row>div:nth-child(10) {
      justify-self: start !important;
    }

    #admin-incidents #incidentTable .incident-head>div:nth-child(11),
    #admin-incidents #incidentTable .incident-row>div:nth-child(11) {
      justify-self: center !important;
    }





    /* ===== SureTrack Global Confirm Modal ===== */

    .st-confirm-modal {
      position: fixed;
      inset: 0;
      z-index: 10070;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(3px);
    }

    .st-confirm-modal.show {
      display: flex;
    }

    .st-confirm-card {
      position: relative;
      width: min(430px, 94vw);
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 24px;
      padding: 28px;
      text-align: center;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    }

    .st-confirm-close {
      position: absolute;
      top: 12px;
      right: 14px;
      border: none;
      background: transparent;
      color: #64748B;
      font-size: 26px;
      cursor: pointer;
    }

    .st-confirm-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 12px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFF7ED;
      color: #C2410C;
      font-size: 28px;
    }

    .st-confirm-card h3 {
      margin: 0 0 8px;
      color: var(--st-text);
      font-size: 24px;
      font-weight: 900;
    }

    .st-confirm-card p {
      margin: 0;
      color: var(--st-muted);
      font-size: 15px;
      line-height: 1.55;
    }

    .st-confirm-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 22px;
    }

    .st-confirm-actions .btn {
      border-radius: 999px;
      font-weight: 900;
    }

    .st-confirm-actions .btn.danger {
      background: #DC2626 !important;
      border-color: #DC2626 !important;
      color: #FFFFFF !important;
    }

    .st-confirm-actions .btn.danger:hover {
      background: #B91C1C !important;
      border-color: #B91C1C !important;
    }

    .st-input-card {
      text-align: left;
    }

    .st-input-card h3,
    .st-input-card p {
      text-align: left;
    }

    .st-input-label {
      display: block;
      margin-top: 18px;
      margin-bottom: 6px;
      color: var(--st-text);
      font-size: 13px;
      font-weight: 900;
    }

    .st-input-field {
      width: 100%;
    }

    #stInputTextarea {
      min-height: 110px;
      resize: vertical;
    }

    .st-input-error {
      min-height: 18px;
      margin-top: 7px;
      color: #DC2626;
      font-size: 13px;
      font-weight: 800;
    }




    /* ===== SureTrack Add Shop Modal ===== */

    .st-shop-modal {
      position: fixed;
      inset: 0;
      z-index: 10075;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(3px);
    }

    .st-shop-modal.show {
      display: flex;
    }

    .st-shop-card {
      position: relative;
      width: min(430px, 94vw);
      background: #FFFFFF;
      border: 1px solid #E5E7EB;
      border-radius: 24px;
      padding: 28px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    }

    .st-shop-close {
      position: absolute;
      top: 12px;
      right: 14px;
      border: none;
      background: transparent;
      color: #64748B;
      font-size: 26px;
      cursor: pointer;
    }

    .st-shop-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 12px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFF7ED;
      color: #C2410C;
      font-size: 28px;
    }

    .st-shop-card h3 {
      margin: 0 0 8px;
      text-align: center;
      color: var(--st-text);
      font-size: 24px;
      font-weight: 900;
    }

    .st-shop-card .muted {
      margin: 0 0 18px;
      text-align: center;
      color: var(--st-muted);
    }

    .st-shop-card label {
      display: block;
      margin-bottom: 6px;
      color: #374151;
      font-size: 13px;
      font-weight: 800;
    }

    #stShopNameInput {
      height: 48px;
      border-radius: 14px;
    }

    #stShopNameInput:focus {
      outline: none;
      border-color: var(--st-primary);
      box-shadow: 0 0 0 4px rgba(249, 115, 22, .14);
    }

    .st-shop-error {
      min-height: 20px;
      margin-top: 10px;
      color: #B91C1C;
      font-size: 13px;
      font-weight: 800;
    }

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

    .st-shop-actions .btn {
      border-radius: 999px;
      font-weight: 900;
    }

    /* ===== Confirm Modal Summary List ===== */

    .st-summary-list {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      text-align: left;
    }

    .st-summary-list div {
      display: grid;
      grid-template-columns: 130px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      padding: 8px 10px;
      border: 1px solid #E5E7EB;
      border-radius: 12px;
      background: #F9FAFB;
    }

    .st-summary-list span {
      color: var(--st-muted);
      font-size: 12px;
      font-weight: 800;
    }

    .st-summary-list strong {
      color: var(--st-text);
      font-size: 13px;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    /* ===== Inventory Actions: Edit + Archive ===== */

    #invTable .inv-actions {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
    }

    #invTable .inv-actions .btn {
      border-radius: 999px !important;
      font-weight: 800 !important;
      padding: 8px 12px !important;
    }

    #invTable .inv-actions .btn:first-child {
      background: #FFFFFF !important;
      border: 1px solid #D1D5DB !important;
      color: #374151 !important;
    }

    #invTable .inv-actions .btn:last-child {
      background: #FFF7ED !important;
      border: 1px solid #FDBA74 !important;
      color: #C2410C !important;
    }



    /* ===== Inventory Table Product Column Fix ===== */

#admin-inventoryTable .inv-head,
#admin-inventoryTable .inv-row {
  grid-template-columns: minmax(380px, 2.6fr) 0.7fr 0.7fr 0.9fr 0.9fr 0.9fr 1fr !important;
}

#admin-inventoryTable .inv-product {
  min-width: 0 !important;
  overflow: hidden !important;
}

#admin-inventoryTable .inv-meta,
#admin-inventoryTable .inv-meta-line,
#admin-inventoryTable .inv-supplier-line {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#admin-inventoryTable .cell-num {
  justify-content: center !important;
}

#admin-inventoryTable .num-text {
  min-width: 110px !important;
}


/* ===== Edit Product Modal ===== */

.st-product-edit-card {
  width: min(760px, 96vw) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}

.st-product-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 18px;
  text-align: left;
}

.st-product-edit-grid label {
  display: grid;
  gap: 6px;
  color: #374151;
  font-size: 13px;
  font-weight: 800;
}

.st-product-edit-grid input {
  min-height: 46px;
  border-radius: 14px;
}

@media (max-width: 700px) {
  .st-product-edit-grid {
    grid-template-columns: 1fr;
  }
}


#admin-inventoryTable .inventory-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

#admin-inventoryTable .inventory-filter-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#admin-inventoryTable #invExpFrom,
#admin-inventoryTable #invExpTo {
  width: 150px !important;
}

/* Inventory spacing: filters to count/table */
#admin-inventoryTable .inventory-filter-bar {
  margin-bottom: 22px !important;
}

#admin-inventoryTable .inventory-meta-row,
#admin-inventoryTable #invCount {
  margin-top: 5px !important;
}




#admin-salesTable .sales-empty-state {
  margin: 22px 0 28px;
  padding: 32px 18px;
  border: 1px dashed #CBD5E1;
  border-radius: 18px;
  background: #F8FAFC;
  text-align: center;
}

#admin-salesTable .sales-empty-icon {
  font-size: 34px;
  margin-bottom: 10px;
}

#admin-salesTable .sales-empty-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--st-text);
}

#admin-salesTable .sales-empty-text {
  margin-top: 6px;
  color: var(--st-muted);
}


/* ===== Low Stock & Refill exact column alignment ===== */

#admin-refillList .refill-cols,
#admin-refillList .refill-item {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 140px 120px !important;
  align-items: center !important;
  column-gap: 16px !important;
}

#admin-refillList .refill-cols {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#admin-refillList .refill-check {
  justify-self: center !important;
}

#admin-refillList .refill-name {
  min-width: 0 !important;
}

#admin-refillList .refill-stock,
#admin-refillList .refill-cols-stock {
  justify-self: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#admin-refillList .refill-pill,
#admin-refillList .refill-cols-status {
  justify-self: center !important;
  white-space: nowrap !important;
}



/* ===== FINAL Low Stock & Refill Alignment Override ===== */

#admin-refillList .refill-cols,
#admin-refillList .refill-item {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 120px 110px !important;
  gap: 12px !important;
  align-items: center !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

#admin-refillList .refill-items {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#admin-refillList .refill-stock,
#admin-refillList .refill-cols-stock {
  text-align: center !important;
  justify-self: center !important;
}

#admin-refillList .refill-pill,
#admin-refillList .refill-cols-status {
  justify-self: center !important;
}


/* ===== POS Scanner Input ===== */

/* ===== Phase 7.92N.24: Low Stock & Refill modern layout ===== */

#admin-refillList .panel {
  max-width: 1120px !important;
}

/* ===== Customers Modernisation + View History containment ===== */
#admin-customerHistory {
  width: 100% !important;
  max-width: none !important;
}

#admin-customerHistory .customers-modern-panel {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .07) !important;
  overflow: hidden !important;
}

#admin-customerHistory .customers-page-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 22px 24px 18px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%) !important;
  border-bottom: 1px solid #FED7AA !important;
}

#admin-customerHistory .customers-page-head h3 {
  padding: 0 !important;
  margin: 0 0 6px !important;
  text-align: left !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  color: #0F172A !important;
}

#admin-customerHistory .customers-page-head .admin-subtitle {
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  max-width: 520px !important;
  color: #64748B !important;
  line-height: 1.45 !important;
}

#admin-customerHistory .customers-page-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
}

#admin-customerHistory .customers-page-actions .btn {
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#admin-customerHistory .customer-history-search {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto !important;
  gap: 14px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  background: #F8FAFC !important;
  border-top: 0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

#admin-customerHistory .customer-history-search .field {
  min-width: 0 !important;
}

#admin-customerHistory .customer-history-search label {
  display: block !important;
  margin-bottom: 7px !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

#admin-customerHistory #customerHistorySearch {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border-radius: 16px !important;
  border: 1px solid #CBD5E1 !important;
  background: #FFFFFF !important;
}

#admin-customerHistory #customerHistorySearchBtn {
  min-height: 46px !important;
  min-width: 122px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

#admin-customerHistory .customer-history-body {
  padding: 18px 24px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
}

#admin-customerHistory .customer-history-tip {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 560px !important;
  padding: 11px 14px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 16px !important;
  background: #EFF6FF !important;
  color: #1E3A8A !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
}

#admin-customerHistory .customer-list-section {
  padding: 22px 24px 24px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  border-bottom: 0 !important;
}

#admin-customerHistory .customer-list-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
}

#admin-customerHistory .customer-list-header h4 {
  margin: 0 0 4px !important;
  color: #0F172A !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#admin-customerHistory .backend-customer-controls {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

#admin-customerHistory .backend-customer-controls .input {
  min-width: 150px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

#admin-customerHistory .customer-list-body {
  width: 100% !important;
  max-width: 100% !important;
}

#admin-customerHistory .customer-list-table {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 0 0 4px !important;
}

#admin-customerHistory .customer-list-row {
  display: grid !important;
  grid-template-columns:
    minmax(220px, 1.35fr)
    minmax(130px, .75fr)
    minmax(220px, 1fr)
    minmax(94px, .45fr)
    minmax(150px, .65fr)
    minmax(220px, max-content) !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 980px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px 16px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
}

#admin-customerHistory .customer-list-row.customer-list-head {
  min-height: 42px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  background: #FFF7ED !important;
  border-color: #FED7AA !important;
  color: #9A3412 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

#admin-customerHistory .customer-list-row > div {
  min-width: 0 !important;
  justify-self: stretch !important;
  text-align: left !important;
}

#admin-customerHistory .customer-list-identity {
  display: grid !important;
  gap: 4px !important;
}

#admin-customerHistory .customer-list-name {
  color: #0F172A !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#admin-customerHistory .customer-list-phone,
#admin-customerHistory .customer-list-email,
#admin-customerHistory .customer-list-created,
#admin-customerHistory .customer-list-meta {
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#admin-customerHistory .customer-list-created,
#admin-customerHistory .customer-list-meta {
  color: #64748B !important;
}

#admin-customerHistory .customer-list-status .tag {
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#admin-customerHistory .customer-list-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding-right: 2px !important;
}

#admin-customerHistory .customer-list-actions .btn {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  padding: 8px 13px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#admin-customerHistory .customer-list-actions .customer-history-action {
  border-color: #FDBA74 !important;
  background: #FFF7ED !important;
  color: #9A3412 !important;
}

#admin-customerHistory .customer-list-actions .customer-history-action:hover,
#admin-customerHistory .customer-list-actions .customer-history-action:focus-visible {
  background: #FFEDD5 !important;
  color: #7C2D12 !important;
}

#admin-customerHistory .customer-empty-state {
  padding: 24px !important;
  border: 1px dashed #CBD5E1 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  color: #64748B !important;
  text-align: center !important;
  font-weight: 800 !important;
}

#admin-customerHistory #customerListPagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 14px !important;
  padding: 12px 2px 0 !important;
}

#admin-customerHistory #customerListPagination.hide {
  display: none !important;
}

#admin-customerHistory #customerListPagination .btn {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

@media (max-width: 1180px) {
  #admin-customerHistory .customer-list-row {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  #admin-customerHistory .customer-list-row.customer-list-head {
    display: none !important;
  }

  #admin-customerHistory .customer-list-row > div[data-label]:not(.customer-list-actions) {
    display: grid !important;
    grid-template-columns: minmax(112px, .34fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  #admin-customerHistory .customer-list-row > div[data-label]:not(.customer-list-actions)::before,
  #admin-customerHistory .customer-list-actions[data-label]::before {
    content: attr(data-label) !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
  }

  #admin-customerHistory .customer-list-actions {
    justify-content: flex-start !important;
  }

  #admin-customerHistory .customer-list-actions[data-label] {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap !important;
  }

  #admin-customerHistory .customer-list-actions[data-label]::before {
    flex: 1 0 100% !important;
  }
}

@media (max-width: 900px) {
  #admin-customerHistory .customers-page-head,
  #admin-customerHistory .customer-list-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #admin-customerHistory .customers-page-actions,
  #admin-customerHistory .backend-customer-controls {
    justify-content: flex-start !important;
  }

  #admin-customerHistory .customer-history-search {
    grid-template-columns: 1fr !important;
  }

  #admin-customerHistory #customerHistorySearchBtn,
  #admin-customerHistory .customers-page-actions .btn,
  #admin-customerHistory .backend-customer-controls .input {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #admin:has(#admin-customerHistory.show) .admin-shell {
    grid-template-columns: 1fr !important;
  }

  #admin:has(#admin-customerHistory.show) .admin-shell-sidebar {
    width: 100% !important;
    max-width: 100% !important;
  }

  #admin:has(#admin-customerHistory.show) .admin-shell-main,
  #admin:has(#admin-customerHistory.show) #admin-section-view {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #admin-customerHistory .customers-page-head,
  #admin-customerHistory .customer-history-search,
  #admin-customerHistory .customer-history-body,
  #admin-customerHistory .customer-list-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #admin-customerHistory .customer-history-tip {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #admin-customerHistory .customer-list-table {
    overflow-x: visible !important;
  }

  #admin-customerHistory .customer-list-row {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  #admin-customerHistory .customer-list-row.customer-list-head {
    display: none !important;
  }

  #admin-customerHistory .customer-list-row > div[data-label]:not(.customer-list-actions) {
    grid-template-columns: minmax(94px, .42fr) minmax(0, 1fr) !important;
  }

  #admin-customerHistory .customer-list-actions {
    justify-content: stretch !important;
  }

  #admin-customerHistory .customer-list-actions .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  #admin-customerHistory #customerListPagination {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

#admin-refillList h3 {
  padding-bottom: 4px !important;
}

#admin-refillList #refillSummary {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin: 0 22px 12px !important;
  padding: 10px 12px !important;
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #9a3412 !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#admin-refillList .refill-summary-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #fed7aa !important;
  color: #9a3412 !important;
  font-weight: 900 !important;
}

#admin-refillList #refillListBox {
  padding-top: 0 !important;
}

#admin-refillList .refill-supplier-card {
  margin: 14px 0 18px !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .065) !important;
}

#admin-refillList .refill-supplier-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #fff7ed 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

#admin-refillList .refill-supplier-email {
  min-width: 0 !important;
}

#admin-refillList .refill-supplier-email-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}

#admin-refillList .refill-supplier-contact {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 7px !important;
  font-size: 12px !important;
  color: #475569 !important;
}

#admin-refillList .refill-contact-chip,
#admin-refillList .refill-supplier-missing > span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #dbe3ef !important;
  color: #334155 !important;
  font-weight: 750 !important;
}

#admin-refillList .refill-supplier-missing > span {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
}

#admin-refillList .refill-supplier-help {
  width: 100% !important;
  color: #64748b !important;
  font-weight: 650 !important;
}

#admin-refillList .refill-supplier-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#admin-refillList .refill-supplier-actions .btn {
  min-height: 34px !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

#admin-refillList .refill-cols,
#admin-refillList .refill-item {
  display: grid !important;
  grid-template-columns: 46px minmax(172px, 1fr) 112px minmax(242px, 1.25fr) 68px 150px !important;
  align-items: center !important;
  column-gap: 12px !important;
}

#admin-refillList .refill-cols:not(:has(.refill-cols-qty)),
#admin-refillList .refill-supplier-card:not(:has([data-backend-refill-receive])) .refill-item {
  grid-template-columns: 46px minmax(200px, 1.4fr) 96px minmax(220px, 1fr) 82px !important;
}

#admin-refillList .refill-cols {
  padding: 10px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #edf2f7 !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
}

#admin-refillList .refill-items {
  display: block !important;
  padding: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

#admin-refillList .refill-item-shell {
  background: #fff !important;
  border-bottom: 1px solid #edf2f7 !important;
}

#admin-refillList .refill-item {
  min-height: 84px !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid #edf2f7 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
}

#admin-refillList .refill-item:nth-child(odd),
#admin-refillList .refill-item-shell:nth-child(odd) {
  background: #fbfdff !important;
}

#admin-refillList .refill-item:last-child,
#admin-refillList .refill-item-shell:last-child {
  border-bottom: 0 !important;
}

#admin-refillList .refill-item:hover,
#admin-refillList .refill-item-shell:hover {
  background: #fff7ed !important;
  border-color: #fed7aa !important;
}

#admin-refillList .refill-item-shell .refill-item,
#admin-refillList .refill-item-shell:hover .refill-item {
  background: transparent !important;
  border-bottom: 0 !important;
}

#admin-refillList .refill-select-cell,
#admin-refillList .refill-cols-select {
  display: flex !important;
  justify-content: center !important;
}

#admin-refillList .refill-check {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--st-primary) !important;
}

#admin-refillList .refill-name {
  min-width: 0 !important;
  color: #0f172a !important;
}

#admin-refillList .refill-product-title {
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

#admin-refillList .refill-product-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  margin-top: 5px !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

#admin-refillList .refill-stock,
#admin-refillList .refill-reorder,
#admin-refillList .refill-suggestion {
  display: grid !important;
  gap: 2px !important;
  color: #0f172a !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
}

#admin-refillList .refill-stock,
#admin-refillList .refill-reorder,
#admin-refillList .refill-suggestion,
#admin-refillList .refill-status,
#admin-refillList .refill-receive-qty,
#admin-refillList .refill-receive-action,
#admin-refillList .refill-cols-stock,
#admin-refillList .refill-cols-reorder,
#admin-refillList .refill-cols-suggested,
#admin-refillList .refill-cols-status,
#admin-refillList .refill-cols-qty,
#admin-refillList .refill-cols-action {
  justify-self: stretch !important;
  text-align: left !important;
}

#admin-refillList .refill-metric-label,
#admin-refillList .refill-receive-qty label > span:first-child {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

#admin-refillList .refill-metric-label,
#admin-refillList .refill-receive-qty label > span:first-child {
  display: none !important;
}

#admin-refillList .refill-stock strong,
#admin-refillList .refill-reorder strong,
#admin-refillList .refill-suggestion strong {
  font-size: 16px !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
}

#admin-refillList .refill-suggestion small {
  display: block !important;
  color: #64748b !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

#admin-refillList .refill-why {
  margin-top: 5px !important;
  color: #475569 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

#admin-refillList .refill-why summary {
  width: fit-content !important;
  cursor: pointer !important;
  color: var(--st-primary) !important;
  font-weight: 900 !important;
}

#admin-refillList .refill-why summary:focus-visible {
  outline: 2px solid rgba(14, 165, 233, .55) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}

#admin-refillList .refill-why div {
  display: grid !important;
  gap: 2px !important;
  margin-top: 5px !important;
}

#admin-refillList .refill-why:not([open]) div {
  display: none !important;
}

#admin-refillList .refill-why p {
  margin: 0 !important;
}

#admin-refillList .refill-status {
  display: flex !important;
  align-items: center !important;
}

#admin-refillList .refill-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

#admin-refillList .refill-receive-qty,
#admin-refillList .refill-receive-action {
  box-sizing: border-box !important;
}

#admin-refillList .refill-receive-qty label {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
}

#admin-refillList .refill-qty-stepper {
  display: grid !important;
  grid-template-columns: 34px minmax(66px, 1fr) 34px !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
}

#admin-refillList .refill-qty-step-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  touch-action: manipulation !important;
}

#admin-refillList .backend-refill-receive-qty {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 8px 6px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

#admin-refillList .refill-row-order-qty {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 8px 6px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

#admin-refillList .refill-order-quantity-cell small {
  display: block !important;
  margin-top: 3px !important;
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

#admin-refillList .refill-receive-action {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding-right: 16px !important;
}

#admin-refillList .refill-receive-strip {
  display: grid !important;
  grid-template-columns: 46px minmax(172px, 1fr) 112px minmax(242px, 1.25fr) 68px 150px !important;
  align-items: center !important;
  column-gap: 12px !important;
  padding: 9px 16px 12px !important;
  border-top: 1px solid #ffedd5 !important;
  background: linear-gradient(90deg, rgba(255, 247, 237, .45), rgba(255, 255, 255, .9)) !important;
}

#admin-refillList .refill-receive-strip-label {
  grid-column: 2 / 6 !important;
  justify-self: end !important;
  color: #9a3412 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

#admin-refillList .refill-receive-strip .refill-receive-btn {
  grid-column: 6 !important;
  justify-self: start !important;
}

#admin-refillList .refill-receive-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  background: #fff7ed !important;
  border: 1px solid #fdba74 !important;
  color: #9a3412 !important;
  box-shadow: 0 6px 14px rgba(249, 115, 22, .10) !important;
}

#admin-refillList .refill-receive-btn:hover {
  background: #ffedd5 !important;
  border-color: #fb923c !important;
  color: #7c2d12 !important;
}

#admin-refillList .refill-receive-btn:focus-visible {
  outline: 2px solid rgba(249, 115, 22, .35) !important;
  outline-offset: 2px !important;
}

#admin-refillList .refill-receive-btn svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

@media (max-width: 1400px) {
  #admin-refillList .refill-supplier-card {
    --refill-scroll-content-width: 960px;
    overflow-x: auto !important;
  }

  #admin-refillList .refill-supplier-head,
  #admin-refillList .refill-cols,
  #admin-refillList .refill-item-shell,
  #admin-refillList .refill-item,
  #admin-refillList .refill-receive-strip {
    min-width: var(--refill-scroll-content-width) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 760px) {
  #admin:has(#admin-refillList.show) .admin-shell {
    grid-template-columns: 1fr !important;
  }

  #admin:has(#admin-refillList.show) .admin-shell-sidebar {
    margin-top: 0 !important;
  }

  #admin:has(#admin-refillList.show) .admin-shell-main,
  #admin:has(#admin-refillList.show) #admin-section-view {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #admin-refillList .panel {
    border-radius: 18px !important;
  }

  #admin-refillList h3 {
    padding: 18px 16px 6px !important;
  }

  #admin-refillList #refillSummary {
    margin: 0 16px 12px !important;
  }

  #admin-refillList #refillListBox {
    padding: 0 16px 18px !important;
  }

  #admin-refillList .refill-supplier-card {
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  #admin-refillList .refill-supplier-head {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  #admin-refillList .refill-supplier-actions {
    justify-content: flex-start !important;
  }

  #admin-refillList .refill-cols {
    display: none !important;
  }

  #admin-refillList .refill-item,
  #admin-refillList .refill-supplier-card:not(:has([data-backend-refill-receive])) .refill-item {
    min-width: 0 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #admin-refillList .refill-item-shell {
    min-width: 0 !important;
  }

  #admin-refillList .refill-select-cell {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: start !important;
    padding-top: 2px !important;
  }

  #admin-refillList .refill-name,
  #admin-refillList .refill-stock,
  #admin-refillList .refill-reorder,
  #admin-refillList .refill-suggestion,
  #admin-refillList .refill-status,
  #admin-refillList .refill-receive-qty,
  #admin-refillList .refill-receive-action,
  #admin-refillList .refill-receive-strip {
    grid-column: 2 !important;
  }

  #admin-refillList .refill-stock,
  #admin-refillList .refill-reorder,
  #admin-refillList .refill-suggestion,
  #admin-refillList .refill-status {
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  #admin-refillList .refill-receive-qty,
  #admin-refillList .refill-receive-action {
    padding-top: 2px !important;
    padding-right: 0 !important;
  }

  #admin-refillList .refill-receive-action {
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 4px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  #admin-refillList .refill-receive-action::before {
    content: "Receiving" !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 7px !important;
    color: #64748b !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
  }

  #admin-refillList .refill-receive-strip {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding: 14px !important;
    border-top: 1px solid #fed7aa !important;
    background: #fff7ed !important;
  }

  #admin-refillList .refill-receive-strip-label,
  #admin-refillList .refill-receive-strip .refill-receive-btn {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }

  #admin-refillList .refill-receive-strip-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  #admin-refillList .refill-metric-label,
  #admin-refillList .refill-receive-qty label > span:first-child {
    display: block !important;
  }

  #admin-refillList .refill-qty-stepper {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  }

  #admin-refillList .refill-qty-step-btn {
    min-height: 40px !important;
  }

  #admin-refillList .backend-refill-receive-qty {
    min-height: 40px !important;
  }

  #admin-refillList .refill-receive-btn {
    width: 100% !important;
  }
}

.refill-receive-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .58);
}

.refill-receive-modal.show {
  display: flex;
}

.refill-receive-card {
  width: min(480px, 94vw);
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(249, 115, 22, .18);
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(2, 6, 23, .34);
}

.refill-receive-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px 14px;
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, .14), transparent 34%),
    linear-gradient(135deg, #fff7ed 0%, #fff 62%);
  border-bottom: 1px solid #fed7aa;
}

.refill-receive-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.refill-receive-close {
  min-width: 38px;
  min-height: 38px;
  padding: 8px 12px;
}

.refill-receive-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px 16px;
}

.refill-receive-body p {
  margin: 0;
}

.refill-receive-product-card,
.refill-receive-facts > div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
}

.refill-receive-product-card span,
.refill-receive-facts span,
.refill-receive-quantity > span:first-child {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.refill-receive-product-card strong,
.refill-receive-facts strong {
  font-size: 16px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.refill-receive-product-card small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.refill-receive-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.refill-receive-quantity {
  display: grid;
  gap: 8px;
  margin: 0;
}

.refill-receive-stepper {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.refill-receive-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

@media (max-width: 520px) {
  .refill-receive-facts {
    grid-template-columns: 1fr;
  }

  .refill-receive-actions {
    flex-direction: column-reverse;
  }

  .refill-receive-actions .btn {
    width: 100%;
  }
}

.refill-order-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .58);
}

.refill-order-modal.show {
  display: flex;
}

.refill-order-card {
  width: min(840px, 94vw);
  max-height: min(720px, 90vh);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(249, 115, 22, .18);
  border-radius: 24px;
  box-shadow: 0 26px 80px rgba(2, 6, 23, .34);
  padding: 0;
}

.refill-order-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 14px;
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, .16), transparent 34%),
    linear-gradient(135deg, #fff7ed 0%, #fff 62%);
  border-bottom: 1px solid #fed7aa;
}

.refill-order-kicker {
  margin: 0 0 4px;
  color: var(--st-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.refill-order-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.refill-order-close {
  min-width: 38px;
  min-height: 38px;
  padding: 8px 12px;
}

#refillOrderIntro {
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 24px 14px;
  max-width: 620px;
  font-size: 13px;
  line-height: 1.45;
}

.refill-order-supplier,
.refill-order-summary {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(96px, auto);
  gap: 0;
  margin: 0 24px 12px;
  padding: 0;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  background: #fffaf5;
  overflow: hidden;
}

.refill-order-supplier > div,
.refill-order-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid #fed7aa;
}

.refill-order-supplier > div:last-child,
.refill-order-summary > div:last-child {
  border-right: 0;
}

.refill-order-supplier span,
.refill-order-summary span,
.refill-order-stock span,
.refill-order-recommended span,
.refill-order-quantity > span:first-child {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.refill-order-supplier strong,
.refill-order-summary strong,
.refill-order-stock strong,
.refill-order-recommended strong {
  overflow-wrap: anywhere;
}

.refill-order-supplier-count strong,
.refill-order-summary strong,
.refill-order-stock strong,
.refill-order-recommended strong {
  font-size: 18px;
  line-height: 1.15;
}

.refill-order-lines {
  display: grid;
  gap: 0;
  margin: 0 24px;
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
}

.refill-order-list-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(110px, .65fr) minmax(150px, .75fr) minmax(178px, .85fr);
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.refill-order-line {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(110px, .65fr) minmax(150px, .75fr) minmax(178px, .85fr);
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.refill-order-line:hover {
  background: #fffaf5;
}

.refill-order-line:last-child {
  border-bottom: 0;
}

.refill-order-line-main {
  min-width: 0;
}

.refill-order-line-main > strong {
  display: block;
  overflow-wrap: anywhere;
}

.refill-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
  color: #64748b;
  font-size: 12px;
}

.refill-order-stock,
.refill-order-recommended,
.refill-order-quantity {
  display: grid !important;
  gap: 4px;
  min-width: 0;
}

.refill-order-stock > span:first-child,
.refill-order-recommended > span:first-child,
.refill-order-quantity > span:first-child {
  display: none;
}

.refill-order-recommended em {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: #ffedd5;
  color: #9a3412;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

.refill-order-stepper {
  display: grid !important;
  grid-template-columns: 36px minmax(68px, 1fr) 36px !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100%;
  max-width: 178px;
}

.refill-order-stepper .refill-qty-step-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.refill-order-qty {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 8px 6px;
  text-align: center;
  font-weight: 850;
}

.refill-order-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.refill-order-contact-note {
  flex: 0 0 auto;
  margin: 0 24px;
  padding: 10px 12px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: #fff7ed;
}

.refill-order-contact-note p {
  margin: 0;
}

.refill-order-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  padding: 14px 24px 20px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
}

@media (max-width: 760px) {
  .refill-order-modal {
    align-items: stretch;
    padding: 10px;
  }

  .refill-order-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    overflow: hidden;
    border-radius: 20px;
  }

  .refill-order-head {
    gap: 10px;
    padding: 16px 16px 10px;
  }

  .refill-order-head h3 {
    font-size: 22px;
  }

  #refillOrderIntro {
    padding: 10px 16px 12px;
  }

  .refill-order-supplier,
  .refill-order-summary {
    grid-template-columns: 1fr;
    flex: none;
    gap: 0;
    margin-right: 16px;
    margin-left: 16px;
    margin-bottom: 10px;
  }

  .refill-order-supplier > div,
  .refill-order-summary > div {
    padding: 9px 12px;
    border-right: 0;
    border-bottom: 1px solid #fed7aa;
  }

  .refill-order-supplier > div:last-child,
  .refill-order-summary > div:last-child {
    border-bottom: 0;
  }

  .refill-order-lines {
    display: grid;
    margin-right: 16px;
    margin-left: 16px;
    flex: 1 1 auto;
    min-height: 150px;
    max-height: none;
    overflow: auto;
    padding-bottom: 0;
  }

  .refill-order-list-head {
    display: none;
  }

  .refill-order-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 12px;
    min-height: 286px;
  }

  .refill-order-line-main {
    grid-column: 1 / -1;
  }

  .refill-order-stock,
  .refill-order-recommended,
  .refill-order-quantity {
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
  }

  .refill-order-stock > span:first-child,
  .refill-order-recommended > span:first-child,
  .refill-order-quantity > span:first-child {
    display: block;
  }

  .refill-order-quantity {
    grid-column: 1 / -1;
    min-height: 62px;
  }

  .refill-order-stepper {
    max-width: none;
  }

  .refill-order-contact-note {
    margin-right: 16px;
    margin-left: 16px;
    padding: 8px 10px;
  }

  .refill-order-actions {
    padding: 12px 16px 16px;
  }

  .refill-order-actions .btn {
    flex: 1 1 100%;
  }
}


.pos-scan-box {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  max-width: 360px;
}

.pos-scan-box label {
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 900;
}

#posScannerInput {
  border: 2px dashed #FDBA74 !important;
  background: #FFF7ED !important;
  font-weight: 800 !important;
}

#posScannerInput:focus {
  border-color: var(--st-primary) !important;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .16) !important;
}


/* ===== Scanner feedback ===== */

#posScannerInput.scanner-success {
  border-color: #16a34a !important;
  background: #dcfce7 !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18) !important;
}

#posScannerInput.scanner-error {
  border-color: #dc2626 !important;
  background: #fee2e2 !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.18) !important;
}


/* ===== POS Last Scan History ===== */

.pos-last-scan-card {
  margin-top: 10px;
  max-width: 360px;
  padding: 12px 14px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
}

.pos-last-scan-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--st-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pos-last-scan-details {
  display: grid;
  gap: 6px;
}

.pos-last-scan-details div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.pos-last-scan-details span {
  color: var(--st-muted);
  font-weight: 800;
}

.pos-last-scan-details strong {
  color: var(--st-text);
  font-weight: 900;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ===== POS Scanner Row ===== */

.pos-scan-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos-scan-row #posScannerInput {
  flex: 1;
}

.pos-scan-row .btn {
  white-space: nowrap;
}


.st-camera-card {
  width: min(560px, 94vw) !important;
}

.camera-placeholder {
  height: 280px;
  border: 2px dashed #CBD5E1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
  font-weight: 800;
  color: #64748B;
}

.pos-scan-row .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===== Inventory label selection column ===== */

#admin-inventoryTable .inv-head,
#admin-inventoryTable .inv-row {
  grid-template-columns: 80px minmax(380px, 2.6fr) 0.7fr 0.7fr 0.9fr 0.9fr 0.9fr 1fr !important;
}

#admin-inventoryTable .inv-select-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#admin-inventoryTable .label-select {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

/* ===== Print Labels Preview Modal ===== */

.print-labels-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  max-height: 280px;
  overflow-y: auto;
}

.print-label-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  background: #F9FAFB;
}

.print-label-preview-row strong {
  color: var(--st-text);
  overflow-wrap: anywhere;
}

.print-label-preview-row span {
  color: var(--st-muted);
  font-weight: 900;
  white-space: nowrap;
}

#printLabelsModal .st-shop-card {
  max-height: 88vh !important;
  overflow: hidden !important;
}

#printLabelsModal .print-labels-list {
  max-height: 180px !important;
  overflow-y: scroll !important;
  padding-right: 4px;
}

.print-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.print-toolbar h2 {
  margin: 0;
  font-size: 20px;
}

.print-toolbar button {
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: #F97316;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.print-toolbar button:hover {
  background: #EA580C;
}

@media print {
  .print-toolbar {
    display: none;
  }
}

@media print {

  .print-toolbar {
    display: none !important;
  }

  body {
    padding: 8mm;
  }

  .barcode-label {
    break-inside: avoid;
  }
}

#printLabelsModal .print-label-preview-row {
  align-items: center;
}

#printLabelsModal .print-label-preview-row > div {
  display: grid;
  gap: 4px;
}

#printLabelsModal .print-label-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

#printLabelsModal .print-label-qty input {
  width: 70px;
  height: 38px;
  border: 1px solid #D1D5DB;
  border-radius: 12px;
  padding: 6px 8px;
  font-weight: 900;
  text-align: center;
}

.payment-account-form {
  display: flex;
  gap: 10px;
  margin: 18px 0;
  flex-wrap: wrap;
}

.payment-account-form .input {
  max-width: 360px;
}

.payment-accounts-list {
  display: grid;
  gap: 10px;
}

.payment-account-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  background: #FFFFFF;
}

.payment-accounts-shell {
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.payment-accounts-heading {
  align-items: flex-start;
}

.payment-accounts-heading .btn {
  flex: 0 0 auto;
}

.payment-accounts-security-copy {
  margin-top: 6px;
}

.payment-accounts-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 210px) auto;
  gap: 10px;
  align-items: center;
}

.payment-account-search,
.payment-account-search .input {
  min-width: 0;
  width: 100%;
}

.payment-account-editor h4 {
  margin: 0 0 4px;
  color: var(--st-text);
}

.payment-account-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-account-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.payment-account-form-grid label small {
  color: var(--st-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.payment-account-card {
  align-items: flex-start;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}

.payment-account-card-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.payment-account-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.payment-account-card-head strong {
  color: var(--st-text);
  font-size: 15px;
}

.payment-account-provider {
  color: var(--st-muted);
  font-size: 13px;
  font-weight: 700;
}

.payment-account-masked-number {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: #F8FAFC;
  border: 1px solid #E5E7EB;
  color: #0F172A;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 5px 10px;
}

.payment-account-provider.is-muted,
.payment-account-masked-number.is-muted {
  border-color: transparent;
  background: transparent;
  color: var(--st-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 0;
}

.payment-account-holder,
.payment-account-meta {
  color: var(--st-muted);
  font-size: 12px;
  line-height: 1.35;
}

.payment-account-status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.payment-account-status-badge.is-active {
  background: #DCFCE7;
  color: #166534;
}

.payment-account-status-badge.is-disabled {
  background: #F1F5F9;
  color: #475569;
}

.payment-account-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  min-width: 180px;
}

.payment-account-empty-state {
  display: grid;
  gap: 4px;
  padding: 18px;
  border: 1px dashed #CBD5E1;
  border-radius: 16px;
  background: #F8FAFC;
  color: var(--st-muted);
}

.payment-account-empty-state strong {
  color: var(--st-text);
}

@media (max-width: 860px) {
  .payment-accounts-toolbar {
    grid-template-columns: 1fr;
  }

  .payment-accounts-toolbar .btn,
  .payment-accounts-toolbar .input {
    width: 100%;
    max-width: none;
  }

  .payment-account-form-grid {
    grid-template-columns: 1fr;
  }

  .payment-account-row {
    align-items: stretch;
    flex-direction: column;
  }

  .payment-account-actions {
    justify-content: flex-start;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .payment-accounts-heading {
    flex-direction: column;
  }

  .payment-accounts-heading .btn,
  .payment-account-actions .btn {
    width: 100%;
  }
}

/* ===== Mini Bank Tile: Money Received Today ===== */

#dashMoneyReceivedTotal{
  font-size:34px;
  font-weight:900;
  color:#fff !important;
  text-shadow:0 0 18px rgba(249,115,22,.45);
  animation: totalGlow 2.5s ease-in-out infinite;
  line-height: 1.05 !important;
  margin-top: 22px !important;
  margin-bottom: 16px !important;
}

@keyframes totalGlow{
  0%,100%{
    transform:scale(1);
  }
  50%{
    transform:scale(1.03);
  }
}

.money-bank-card {
  position: relative !important;
  overflow:hidden;
  background:linear-gradient(135deg,#0f172a,#1e293b) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  width: 100%;
  max-width: none !important;
  margin-bottom: 20px;
  height: 560px !important;
  max-height: 560px !important;
  padding-bottom: 28px !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 8px 0 #020617,
    0 28px 65px rgba(15, 23, 42, .48),
    0 0 45px rgba(249, 115, 22, .18) !important;
  border-bottom: 4px solid rgba(2, 6, 23, .75) !important;
}

.money-bank-card::before{
  content:"";
  position:absolute;
  top:0;
  left:-150%;
  width:120%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  animation: bankShine 5s linear infinite;
}

@keyframes bankShine{
  from{ left:-150%; }
  to{ left:150%; }
}

.money-bank-card:hover {
  transform: translateY(-10px) !important;
  box-shadow:
    0 14px 0 #020617,
    0 40px 90px rgba(15, 23, 42, .58),
    0 0 60px rgba(249, 115, 22, .28) !important;
}

.money-bank-card::after {
  content: "";
  position: absolute;
  inset: auto 18px -16px 18px;
  height: 18px;
  background: rgba(2, 6, 23, .45);
  filter: blur(16px);
  border-radius: 50%;
  z-index: -1;
}

.money-bank-card .kpi-label{
  color:#e2e8f0 !important;
}

.money-bank-card .kpi-note {
  color:#cbd5e1 !important;
  margin-top: 16px !important;
  line-height: 1.25 !important;
}

.money-bank-list {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  max-height: 345px !important;
  overflow-y: hidden !important;
  padding-right: 6px !important;
}

.money-bank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  background:rgba(255,255,255,.12) !important;
  color:#f8fafc !important;
  padding: 10px 14px !important;
  min-height: 52px !important;
  font-size: 13px !important;
}

@keyframes accountFlow {
  0% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.money-bank-row.transfer-moving {
  animation: accountFlow 1.8s infinite ease-in-out;
}

.money-bank-row span:first-child{
  color:#f8fafc !important;
  font-weight:800 !important;
}

.money-bank-row span:last-child{
  color:#fff !important;
  font-weight:900 !important;
}

.money-bank-row small {
  margin-left: 8px;
  font-size: 11px;
  color: #86efac;
  font-weight: 800;
}

.money-bank-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.money-bank-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(34,197,94,.22) !important;
  color:#22c55e !important;
  font-size:11px;
  font-weight:900 !important;
}

.money-bank-status::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  animation:pulseDot 1.5s infinite;
}

.money-bank-subtitle{
  font-size:12px;
  color:#cbd5e1 !important;
  margin-top: 8px !important;
  margin-bottom: 18px !important;
  line-height: 1.2 !important;
}

@keyframes pulseDot{
  0%{opacity:1;}
  50%{opacity:.35;}
  100%{opacity:1;}
}

.money-bank-last {
  margin: 10px 0 14px;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(249, 115, 22, .16);
  color: #fed7aa;
  font-size: 13px;
  font-weight: 800;
}

.money-bank-more {
  width: 100%;
  margin-top: 12px !important;
  margin-bottom: 18px !important;
  padding: 12px 14px !important;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.money-bank-more:hover {
  background: rgba(255, 255, 255, .18);
}

.money-modal-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  max-height: 55vh;
  overflow-y: auto;
}

.money-modal-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #f8fafc;
}

.money-modal-row span {
  font-weight: 800;
}

.money-modal-row small {
  color: #64748b;
  font-weight: 700;
}

/* Phase 7.83A: tenant sidebar group polish and My Subscription account layout */
.admin-shell-sidebar {
  gap: 0 !important;
  margin-top: 24px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}

.admin-shell-sidebar .sidebar-panel {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.admin-shell-sidebar .sidebar-panel + .sidebar-panel {
  border-top: 1px solid #f1f5f9 !important;
}

.admin-shell-sidebar .sidebar-group-toggle::before {
  content: none !important;
}

.admin-shell-sidebar .sidebar-label,
.admin-shell-sidebar .sidebar-group-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 12px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.admin-shell-sidebar .sidebar-group-toggle:hover,
.admin-shell-sidebar .sidebar-group-toggle:focus-visible {
  background: #f8fafc !important;
  color: #c2410c !important;
  outline: none !important;
}

.admin-shell-sidebar .sidebar-group-toggle:focus-visible,
.admin-shell-sidebar .sidebar-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .22) !important;
}

.admin-shell-sidebar .sidebar-group-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

.admin-shell-sidebar .sidebar-group-icon,
.admin-shell-sidebar .sidebar-group-chevron {
  position: relative !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

.admin-shell-sidebar .sidebar-group-chevron {
  flex-basis: 16px !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: auto !important;
}

.admin-shell-sidebar .sidebar-group-chevron::before {
  content: "" !important;
  position: absolute !important;
  width: 7px !important;
  height: 7px !important;
  top: 3px !important;
  left: 3px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
  transition: transform .18s ease !important;
}

.admin-shell-sidebar .sidebar-panel.collapsed .sidebar-group-chevron::before {
  transform: rotate(-45deg) !important;
}

.admin-shell-sidebar .sidebar-group-body {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 8px !important;
  padding: 0 0 0 12px !important;
  border-left: 1px solid #e2e8f0 !important;
}

.admin-shell-sidebar .sidebar-panel.collapsed .sidebar-group-body {
  display: none !important;
}

.admin-shell-sidebar .sidebar-item {
  position: relative !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 9px 12px 9px 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.admin-shell-sidebar .sidebar-item:hover {
  background: #fff7ed !important;
  color: #c2410c !important;
  transform: none !important;
}

.admin-shell-sidebar .sidebar-item.active,
.admin-shell-sidebar .sidebar-item[aria-current="page"] {
  background: #fff7ed !important;
  border-color: transparent !important;
  color: #c2410c !important;
  box-shadow: none !important;
}

.admin-shell-sidebar .sidebar-item.active::before,
.admin-shell-sidebar .sidebar-item[aria-current="page"]::before {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 999px !important;
  background: #f97316 !important;
}

/* Phase 7.90Q: authenticated tenant onboarding */
.tenant-onboarding {
  width: 100%;
}

.st-onboarding-active main.content {
  background: linear-gradient(180deg, #fff7ed 0, #f8fafc 220px, #f8fafc 100%);
}

.onboarding-shell {
  display: grid;
  gap: 18px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 0 40px;
}

.onboarding-card,
.onboarding-item,
.onboarding-note {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.onboarding-card {
  padding: 22px;
}

.onboarding-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: 20px;
  align-items: stretch;
}

.onboarding-hero h1,
.onboarding-progress-card h2,
.onboarding-help h2 {
  margin: 0;
  color: #0f172a;
}

.onboarding-trial-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  background: #fff7ed;
}

.onboarding-trial-card dl,
.onboarding-trial-card div,
.onboarding-item-title-row {
  display: grid;
  gap: 4px;
  margin: 0;
}

.onboarding-trial-card dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.onboarding-trial-card dd {
  margin: 0;
  color: #1e293b;
  font-weight: 800;
}

.onboarding-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.onboarding-progress-head strong {
  color: #f97316;
  font-size: 28px;
}

.onboarding-progress-track {
  height: 10px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #ffedd5;
}

.onboarding-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f97316, #16a34a);
}

.onboarding-note {
  padding: 14px 16px;
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
  font-weight: 700;
}

.onboarding-list {
  display: grid;
  gap: 12px;
}

.onboarding-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.onboarding-check {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  color: #16a34a;
  font-weight: 900;
}

.onboarding-item-complete .onboarding-check {
  border-color: #16a34a;
  background: #f0fdf4;
}

.onboarding-item-title-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.onboarding-item h3 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
}

.onboarding-item p,
.onboarding-help p {
  margin: 4px 0 0;
  color: #64748b;
}

.onboarding-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.onboarding-status-complete {
  color: #166534;
  background: #f0fdf4;
}

.onboarding-status-incomplete {
  color: #9a3412;
  background: #fff7ed;
}

.onboarding-status-optional {
  color: #1d4ed8;
  background: #eff6ff;
}

.onboarding-item-actions {
  display: flex;
  justify-content: flex-end;
}

.onboarding-footer-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.onboarding-dashboard-prompt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #fed7aa;
  border-radius: 18px;
  background: #fff7ed;
  color: #7c2d12;
}

.onboarding-dashboard-prompt div {
  display: grid;
  gap: 2px;
}

.onboarding-dashboard-prompt span {
  color: #9a3412;
  font-size: 13px;
}

@media (max-width: 820px) {
  .onboarding-shell {
    padding: 18px 0 32px;
  }

  .onboarding-hero,
  .onboarding-item {
    grid-template-columns: 1fr;
  }

  .onboarding-check {
    display: none;
  }

  .onboarding-item-title-row,
  .onboarding-progress-head,
  .onboarding-dashboard-prompt {
    grid-template-columns: 1fr;
    display: grid;
  }

  .onboarding-item-actions,
  .onboarding-footer-actions {
    justify-content: stretch;
  }

  .onboarding-action,
  .onboarding-footer-actions .btn,
  .onboarding-dashboard-prompt .btn {
    width: 100%;
  }
}

.admin-shell-sidebar .sidebar-group-icon::before,
.admin-shell-sidebar .sidebar-group-icon::after {
  content: "" !important;
  position: absolute !important;
  box-sizing: border-box !important;
}

.admin-shell-sidebar .sidebar-icon-overview::before {
  inset: 2px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
}

.admin-shell-sidebar .sidebar-icon-overview::after {
  width: 6px !important;
  height: 2px !important;
  left: 9px !important;
  top: 8px !important;
  background: currentColor !important;
  transform: rotate(-35deg) !important;
  transform-origin: left center !important;
}

.admin-shell-sidebar .sidebar-icon-sales::before {
  width: 14px !important;
  height: 10px !important;
  left: 2px !important;
  top: 4px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.admin-shell-sidebar .sidebar-icon-sales::after {
  width: 12px !important;
  height: 2px !important;
  left: 1px !important;
  top: 2px !important;
  background: currentColor !important;
  transform: rotate(-16deg) !important;
}

.admin-shell-sidebar .sidebar-icon-products::before {
  inset: 3px !important;
  border: 2px solid currentColor !important;
  border-radius: 3px !important;
}

.admin-shell-sidebar .sidebar-icon-products::after {
  width: 12px !important;
  height: 2px !important;
  left: 3px !important;
  top: 7px !important;
  background: currentColor !important;
  transform: rotate(25deg) !important;
}

.admin-shell-sidebar .sidebar-icon-transfers::before,
.admin-shell-sidebar .sidebar-icon-transfers::after {
  width: 14px !important;
  height: 2px !important;
  background: currentColor !important;
  left: 2px !important;
}

.admin-shell-sidebar .sidebar-icon-transfers::before {
  top: 5px !important;
  box-shadow: 8px -3px 0 -1px currentColor !important;
}

.admin-shell-sidebar .sidebar-icon-transfers::after {
  top: 12px !important;
  box-shadow: -8px 3px 0 -1px currentColor !important;
}

.admin-shell-sidebar .sidebar-icon-customers::before {
  width: 8px !important;
  height: 8px !important;
  left: 5px !important;
  top: 1px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
}

.admin-shell-sidebar .sidebar-icon-customers::after {
  width: 16px !important;
  height: 8px !important;
  left: 1px !important;
  bottom: 1px !important;
  border: 2px solid currentColor !important;
  border-radius: 10px 10px 3px 3px !important;
}

.admin-shell-sidebar .sidebar-icon-reports::before {
  width: 3px !important;
  height: 12px !important;
  left: 3px !important;
  bottom: 2px !important;
  background: currentColor !important;
  box-shadow: 5px -4px 0 currentColor, 10px -8px 0 currentColor !important;
  border-radius: 2px !important;
}

.admin-shell-sidebar .sidebar-icon-admin::before {
  inset: 3px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
}

.admin-shell-sidebar .sidebar-icon-admin::after {
  width: 4px !important;
  height: 4px !important;
  left: 7px !important;
  top: 7px !important;
  background: currentColor !important;
  border-radius: 50% !important;
}

.admin-shell-sidebar .sidebar-icon-support::before {
  inset: 3px 2px 5px !important;
  border: 2px solid currentColor !important;
  border-radius: 8px !important;
}

.admin-shell-sidebar .sidebar-icon-support::after {
  width: 6px !important;
  height: 6px !important;
  left: 5px !important;
  bottom: 2px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: skew(-25deg) !important;
}

.admin-shell-sidebar .sidebar-icon-development::before {
  width: 7px !important;
  height: 7px !important;
  left: 2px !important;
  top: 5px !important;
  border-left: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
}

.admin-shell-sidebar .sidebar-icon-development::after {
  width: 7px !important;
  height: 7px !important;
  right: 2px !important;
  top: 5px !important;
  border-right: 2px solid currentColor !important;
  border-top: 2px solid currentColor !important;
  transform: rotate(45deg) !important;
}

#admin-subscriptions .subscription-account {
  display: grid;
  gap: 18px;
}

#admin-subscriptions .subscription-account-hero,
#admin-subscriptions .subscription-account-card {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

#admin-subscriptions .subscription-account-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  background: linear-gradient(135deg, #fff7ed, #ffffff 58%);
}

#admin-subscriptions .subscription-account-hero h3,
#admin-subscriptions .subscription-account-card h4 {
  margin: 0 0 6px;
}

#admin-subscriptions .subscription-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#admin-subscriptions .subscription-account-card {
  padding: 18px;
}

#admin-subscriptions .subscription-summary-card {
  border-color: rgba(249, 115, 22, .28);
}

#admin-subscriptions .subscription-detail-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

#admin-subscriptions .subscription-detail-list div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
}

#admin-subscriptions .subscription-detail-list div:last-child {
  border-bottom: 0;
}

#admin-subscriptions .subscription-detail-list dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#admin-subscriptions .subscription-detail-list dd {
  margin: 0;
  color: #0f172a;
  font-weight: 800;
  text-align: right;
  overflow-wrap: anywhere;
}

#admin-subscriptions .subscription-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#admin-subscriptions .subscription-feature-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
  font-size: 12px;
}

#admin-subscriptions .subscription-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

#admin-subscriptions .subscription-section-head,
#admin-subscriptions .subscription-plan-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#admin-subscriptions .subscription-plan-selector-card,
#admin-subscriptions .subscription-billing-history-card {
  overflow: hidden;
}

#admin-subscriptions .subscription-billing-toggle,
#admin-subscriptions .subscription-history-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

#admin-subscriptions .subscription-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

#admin-subscriptions .subscription-plan-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
}

#admin-subscriptions .subscription-plan-card.is-current {
  border-color: rgba(16, 185, 129, .4);
  box-shadow: 0 12px 24px rgba(16, 185, 129, .08);
}

#admin-subscriptions .subscription-plan-price strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 950;
}

#admin-subscriptions .subscription-plan-price span {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

#admin-subscriptions .subscription-plan-action {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

#admin-subscriptions .subscription-self-service-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}

#admin-subscriptions .subscription-self-service-warning,
.tenant-subscription-modal .subscription-self-service-warning {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  background: #fff7ed;
  color: #7c2d12;
  font-size: 13px;
  line-height: 1.45;
}

#admin-subscriptions .subscription-self-service-warning p,
.tenant-subscription-modal .subscription-self-service-warning p {
  margin: 0;
}

#admin-subscriptions .subscription-cleanup-list,
.tenant-subscription-modal .subscription-cleanup-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

#admin-subscriptions .subscription-cleanup-list li,
.tenant-subscription-modal .subscription-cleanup-list li {
  padding-left: 2px;
}

#admin-subscriptions .subscription-cleanup-list span,
.tenant-subscription-modal .subscription-cleanup-list span {
  display: block;
}

#admin-subscriptions .subscription-pending-change-card {
  border-color: rgba(59, 130, 246, .3);
}

#admin-subscriptions .subscription-history-table-wrap {
  margin-top: 14px;
}

#admin-subscriptions .subscription-history-table td {
  overflow-wrap: anywhere;
}

.tenant-subscription-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .58);
}

.tenant-subscription-modal.show {
  display: flex;
}

.tenant-subscription-modal-card {
  width: min(560px, 96vw);
  max-height: min(760px, 92vh);
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
  padding: 22px;
}

.tenant-subscription-modal-head,
.tenant-subscription-modal-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tenant-subscription-modal-head h3 {
  margin: 0;
}

.tenant-subscription-modal-body {
  margin-top: 16px;
}

.tenant-subscription-modal-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 18px;
}

.subscription-self-service-error {
  min-height: 20px;
  margin: 12px 0 0;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 900px) {
  #admin-subscriptions .subscription-account-grid {
    grid-template-columns: 1fr;
  }

  #admin-subscriptions .subscription-account-hero {
    flex-direction: column;
  }

  #admin-subscriptions .subscription-plan-grid {
    grid-template-columns: 1fr;
  }

  #admin-subscriptions .subscription-section-head,
  #admin-subscriptions .subscription-plan-card-head {
    flex-direction: column;
  }
}

/* Phase 7.83B: final connected Tenant sidebar correction. */
#admin .admin-shell-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 240px !important;
  max-width: 240px !important;
  margin-top: 24px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}

#admin .admin-shell-sidebar .sidebar-panel {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#admin .admin-shell-sidebar .sidebar-panel + .sidebar-panel {
  border-top: 1px solid #f1f5f9 !important;
}

#admin .admin-shell-sidebar .sidebar-label,
#admin .admin-shell-sidebar .sidebar-group-toggle {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--st-primary) !important;
  font-weight: 900 !important;
  text-align: left !important;
}

#admin .admin-shell-sidebar .sidebar-group-toggle:hover,
#admin .admin-shell-sidebar .sidebar-group-toggle:focus-visible {
  color: var(--st-primary-hover) !important;
}

#admin .admin-shell-sidebar .sidebar-group-toggle::before,
#admin .admin-shell-sidebar .sidebar-label::before {
  content: none !important;
}

#admin .admin-shell-sidebar .sidebar-group-icon {
  flex: 0 0 18px !important;
  color: currentColor !important;
}

#admin .admin-shell-sidebar .sidebar-group-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
}

#admin .admin-shell-sidebar .sidebar-group-chevron {
  flex: 0 0 16px !important;
  margin-left: auto !important;
  color: currentColor !important;
}

#admin .admin-shell-sidebar .sidebar-group-body {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 8px !important;
  padding: 0 0 0 12px !important;
  border-left: 1px solid #e2e8f0 !important;
}

#admin .admin-shell-sidebar .sidebar-panel.collapsed .sidebar-group-body {
  display: none !important;
}

#admin .admin-shell-sidebar .sidebar-item {
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 9px 12px 9px 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #475569 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

#admin .admin-shell-sidebar .sidebar-item.active,
#admin .admin-shell-sidebar .sidebar-item[aria-current="page"] {
  background: #fff7ed !important;
  color: #c2410c !important;
}

/* Warehouse Management is intentionally scoped to the new tenant admin section. */
#admin-warehouseManagement .warehouse-page {
  display: grid;
  gap: 16px;
}

#admin-warehouseManagement .warehouse-intro,
#admin-warehouseManagement .warehouse-toolbar,
#admin-warehouseManagement .warehouse-actions,
#admin-warehouseManagement .warehouse-pagination,
#admin-warehouseManagement .warehouse-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#admin-warehouseManagement .warehouse-intro {
  justify-content: space-between;
}

#admin-warehouseManagement .warehouse-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 2px;
}

#admin-warehouseManagement .warehouse-tab {
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-weight: 700;
  padding: 8px 13px;
  white-space: nowrap;
}

#admin-warehouseManagement .warehouse-tab.active,
#admin-warehouseManagement .warehouse-tab[aria-selected="true"] {
  border-color: #fdba74;
  background: #fff7ed;
  color: #c2410c;
}

#admin-warehouseManagement .warehouse-body,
#admin-warehouseManagement .warehouse-two-column,
#admin-warehouseManagement .warehouse-form-card,
#admin-warehouseManagement .warehouse-panel {
  display: grid;
  gap: 14px;
}

#admin-warehouseManagement .warehouse-two-column {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: start;
}

#admin-warehouseManagement .warehouse-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#admin-warehouseManagement .warehouse-kpi,
#admin-warehouseManagement .warehouse-form-card,
#admin-warehouseManagement .warehouse-empty {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  padding: 14px;
}

#admin-warehouseManagement .warehouse-kpi strong {
  display: block;
  color: #0f172a;
  font-size: 1.45rem;
  line-height: 1.2;
  margin-top: 4px;
}

#admin-warehouseManagement .warehouse-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

#admin-warehouseManagement .warehouse-block-label {
  display: grid;
  gap: 6px;
}

#admin-warehouseManagement .warehouse-lines {
  display: grid;
  gap: 8px;
}

#admin-warehouseManagement .warehouse-line .input {
  min-width: 160px;
}

#admin-warehouseManagement .warehouse-line-product {
  flex: 1 1 260px;
}

#admin-warehouseManagement .warehouse-line-quantity {
  flex: 0 1 140px;
}

#admin-warehouseManagement .warehouse-inline-error {
  color: #b91c1c;
  font-weight: 700;
  min-height: 20px;
}

#admin-warehouseManagement .warehouse-inline-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 12px;
  color: #9a3412;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 12px;
}

#admin-warehouseManagement .warehouse-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

#admin-warehouseManagement .warehouse-table th,
#admin-warehouseManagement .warehouse-table td {
  vertical-align: top;
}

#admin-warehouseManagement .warehouse-tag {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 9px;
  white-space: nowrap;
}

#admin-warehouseManagement .warehouse-tag-success {
  background: #dcfce7;
  color: #166534;
}

#admin-warehouseManagement .warehouse-tag-warning {
  background: #fef3c7;
  color: #92400e;
}

#admin-warehouseManagement .warehouse-tag-info {
  background: #dbeafe;
  color: #1d4ed8;
}

#admin-warehouseManagement .warehouse-tag-muted {
  background: #f1f5f9;
  color: #475569;
}

#admin-warehouseManagement .warehouse-subtext {
  color: #64748b;
  font-size: 0.82rem;
  margin-top: 3px;
}

#admin-warehouseManagement .warehouse-detail {
  display: grid;
  gap: 12px;
}

#admin-warehouseManagement .warehouse-detail-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

#admin-warehouseManagement .warehouse-error {
  border-color: #fecaca;
  background: #fff1f2;
}

#admin-warehouseManagement .warehouse-modal-panel {
  width: min(760px, calc(100vw - 28px));
}

#admin-warehouseManagement .warehouse-operation-card {
  width: min(980px, calc(100vw - 28px));
}

#admin-warehouseManagement .warehouse-operation-summary {
  margin-top: 14px;
}

@media (max-width: 900px) {
  #admin-warehouseManagement .warehouse-two-column {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  #admin-warehouseManagement .warehouse-intro,
  #admin-warehouseManagement .warehouse-toolbar,
  #admin-warehouseManagement .warehouse-actions,
  #admin-warehouseManagement .warehouse-pagination,
  #admin-warehouseManagement .warehouse-line {
    align-items: stretch;
    flex-direction: column;
  }

  #admin-warehouseManagement .warehouse-intro .btn,
  #admin-warehouseManagement .warehouse-toolbar .btn,
  #admin-warehouseManagement .warehouse-actions .btn,
  #admin-warehouseManagement .warehouse-pagination .btn,
  #admin-warehouseManagement .warehouse-line .btn,
  #admin-warehouseManagement .warehouse-line .input {
    width: 100%;
  }
}

/* ===== Phase 7.92M Tenant Polish ===== */

.backend-pos-card .product-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(15, 23, 42, .08) 0 20%, transparent 21%),
    linear-gradient(135deg, #f8fafc, #eef2f7);
}

.backend-pos-card .product-thumb-placeholder::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, transparent 43%, #94a3b8 44% 56%, transparent 57%),
    linear-gradient(45deg, transparent 43%, #94a3b8 44% 56%, transparent 57%);
  opacity: .52;
}

.money-bank-card {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 22px !important;
}

.money-bank-list {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.money-bank-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.money-bank-row {
  display: grid !important;
  gap: 5px !important;
  align-content: start;
  min-height: 88px !important;
  padding: 12px 14px !important;
}

.money-bank-row span:first-child {
  font-size: 11px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.money-bank-row span:last-of-type {
  font-size: 16px !important;
}

.money-bank-row small {
  display: block;
  margin-left: 0 !important;
  color: #bbf7d0 !important;
}

.money-bank-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  color: #e2e8f0;
  font-weight: 800;
}

#dashActiveSubs.kpi-value-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 1.2rem !important;
  line-height: 1.2 !important;
}

#dashActiveSubs.kpi-value-compact .tag {
  font-size: 11px !important;
  padding: 4px 9px;
  text-transform: uppercase;
}

#dashExpiringSubs,
#dashExpiredSubs,
#dashActiveShop {
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
}

#admin-receipts .rcpt-filter-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(138px, auto) minmax(138px, auto) auto;
  gap: 12px;
  align-items: end;
  margin: 18px 22px 8px;
  padding: 16px;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

#admin-receipts .rcpt-filter-card .field {
  min-width: 0;
}

#admin-receipts .rcpt-filter-card label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
}

#admin-receipts .rcpt-search-input-wrap {
  position: relative;
}

#admin-receipts .rcpt-search-input-wrap .input {
  width: 100%;
  padding-left: 42px !important;
}

#admin-receipts .rcpt-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: #64748B;
  pointer-events: none;
}

#admin-receipts .rcpt-search-icon svg,
#admin-receipts .receipt-lookup-icon svg,
#admin-receipts .receipt-action-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#admin-receipts .rcpt-delivery-note {
  margin: 0 22px 12px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  background: #F8FAFC;
  color: #64748B;
  font-size: 13px;
  font-weight: 700;
}

#admin-receipts .rcpt-table-wrap {
  margin: 0 22px 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
  border: 1px solid #DDE5EF !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}

#admin-receipts .rcpt-modern-table {
  width: 100% !important;
  min-width: 900px !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
  background: #FFFFFF !important;
}

#admin-receipts .rcpt-modern-table col.col-details {
  width: 42% !important;
}

#admin-receipts .rcpt-modern-table col.col-total {
  width: 14% !important;
}

#admin-receipts .rcpt-modern-table col.col-cashier {
  width: 14% !important;
}

#admin-receipts .rcpt-modern-table col.col-actions {
  width: 30% !important;
}

#admin-receipts .rcpt-modern-table thead th {
  background: #F8FAFC !important;
  color: #475569 !important;
  padding: 13px 16px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #CBD5E1 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

#admin-receipts .rcpt-modern-table th.col-total,
#admin-receipts .rcpt-modern-table td.col-total {
  text-align: center !important;
}

#admin-receipts .rcpt-modern-table th.col-cashier,
#admin-receipts .rcpt-modern-table td.col-cashier {
  text-align: left !important;
}

#admin-receipts .rcpt-modern-table th.col-actions,
#admin-receipts .rcpt-modern-table td.col-actions {
  text-align: left !important;
}

#admin-receipts .rcpt-modern-table tbody tr,
#admin-receipts .rcpt-modern-table tbody tr:nth-child(even),
#admin-receipts .rcpt-modern-table tbody tr:nth-child(odd) {
  background: #FFFFFF !important;
}

#admin-receipts .rcpt-modern-table tbody tr:hover,
#admin-receipts .rcpt-modern-table tbody tr:hover td {
  background: #F8FAFC !important;
}

#admin-receipts .rcpt-modern-table tbody td {
  padding: 13px 16px !important;
  border-top: 0 !important;
  border-bottom: 1.5px solid #E2E8F0 !important;
  color: #0F172A !important;
  vertical-align: middle !important;
  background: transparent !important;
  white-space: normal !important;
}

#admin-receipts .rcpt-modern-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

#admin-receipts .receipt-details-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#admin-receipts .receipt-lookup-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #0F766E;
  background: #ECFDF5;
  border: 1px solid #B7E4D8;
}

#admin-receipts .receipt-lookup-icon-refund {
  color: #B45309;
  background: #FFF7ED;
  border-color: #FED7AA;
}

#admin-receipts .receipt-details-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#admin-receipts .receipt-details-copy strong {
  font-size: 15px;
  font-weight: 900;
  color: #0F172A;
  overflow-wrap: anywhere;
}

#admin-receipts .receipt-details-copy span {
  color: #64748B;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#admin-receipts .receipt-money-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #9A3412;
  background: #FFF7ED;
  border: 1px solid #FDBA74;
  font-weight: 900;
  white-space: nowrap;
}

#admin-receipts .receipt-cashier-name {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: #1E293B;
  font-size: 14px;
  font-weight: 850;
}

#admin-receipts .receipt-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

#admin-receipts .receipt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 13px;
  border: 1px solid #CBD5E1;
  background: #FFFFFF;
  color: #0F172A;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: background .16s ease, border-color .16s ease, transform .06s ease, box-shadow .16s ease;
}

#admin-receipts .receipt-action-btn:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
}

#admin-receipts .receipt-action-btn:active {
  transform: translateY(1px);
}

#admin-receipts .receipt-action-btn:focus-visible {
  outline: none;
  border-color: #0F766E;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .22);
}

#admin-receipts .receipt-action-btn:disabled {
  cursor: wait;
  opacity: .72;
}

#admin-receipts .receipt-action-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

#admin-receipts .receipt-action-whatsapp {
  color: #047857;
  border-color: #A7F3D0;
  background: #ECFDF5;
}

#admin-receipts .receipt-action-telegram {
  color: #0369A1;
  border-color: #BAE6FD;
  background: #EFF6FF;
}

#admin-receipts .receipt-action-print {
  color: #334155;
}

#admin-receipts .rcpt-pagination {
  margin: 16px 22px 4px !important;
  padding: 12px;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
}

@media (max-width: 1024px) {
  #admin-receipts .rcpt-filter-card {
    grid-template-columns: minmax(240px, 1fr) minmax(132px, auto) minmax(132px, auto) auto;
    gap: 10px;
  }

  #admin-receipts .rcpt-modern-table {
    min-width: 860px !important;
  }

  #admin-receipts .receipt-action-btn {
    padding-inline: 9px;
  }
}

@media (max-width: 640px) {
  #admin-receipts .rcpt-filter-card {
    grid-template-columns: 1fr;
    margin-inline: 14px;
    padding: 14px;
  }

  #admin-receipts #rcptHelper,
  #admin-receipts .rcpt-delivery-note,
  #admin-receipts .rcpt-table-wrap,
  #admin-receipts .rcpt-pagination {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  #admin-receipts .rcpt-table-wrap {
    overflow-x: visible !important;
    border: 0 !important;
    box-shadow: none;
    background: transparent !important;
  }

  #admin-receipts .rcpt-modern-table {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
    background: transparent !important;
  }

  #admin-receipts .rcpt-modern-table colgroup,
  #admin-receipts .rcpt-modern-table thead {
    display: none !important;
  }

  #admin-receipts .rcpt-modern-table tbody,
  #admin-receipts .rcpt-modern-table tr,
  #admin-receipts .rcpt-modern-table td {
    display: block;
    width: 100% !important;
  }

  #admin-receipts .rcpt-modern-table tbody tr {
    margin-bottom: 14px;
    border: 1px solid #DDE5EF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
  }

  #admin-receipts .rcpt-modern-table tbody td {
    padding: 12px 14px !important;
    border-bottom: 1px solid #E2E8F0 !important;
  }

  #admin-receipts .rcpt-modern-table tbody td:last-child {
    border-bottom: 0 !important;
  }

  #admin-receipts .rcpt-modern-table tbody td:not(.col-details)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    color: #64748B;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #admin-receipts .rcpt-modern-table th.col-total,
  #admin-receipts .rcpt-modern-table td.col-total,
  #admin-receipts .rcpt-modern-table th.col-actions,
  #admin-receipts .rcpt-modern-table td.col-actions {
    text-align: left !important;
  }

  #admin-receipts .receipt-action-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #admin-receipts .receipt-action-btn {
    width: 100%;
  }
}

#admin-customerHistory .customer-list-row {
  grid-template-columns: minmax(180px, 1.3fr) minmax(100px, .65fr) minmax(150px, 1fr) minmax(82px, .4fr) minmax(110px, .55fr) minmax(238px, max-content) !important;
}

#admin-customerHistory .customer-list-actions {
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

#admin-customerHistory .customer-list-actions .btn {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

#admin-customerHistory #backendCustomerModal.customer-edit-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10060 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(4px) !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#admin-customerHistory #backendCustomerModal.customer-edit-modal-backdrop.hide {
  display: none !important;
}

#admin-customerHistory #backendCustomerModal .customer-edit-modal-card {
  width: min(520px, 100%) !important;
  max-height: calc(100vh - 40px) !important;
  overflow: auto !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 24px !important;
  background: #FFFFFF !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .30) !important;
}

#admin-customerHistory #backendCustomerModal .modal-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid #FED7AA !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF7ED 100%) !important;
}

#admin-customerHistory #backendCustomerModal .modal-head h3 {
  margin: 0 0 6px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #0F172A !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

#admin-customerHistory #backendCustomerModal .customer-edit-modal-subtitle {
  margin: 0 !important;
  color: #64748B !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

#admin-customerHistory #backendCustomerModal .customer-edit-modal-close {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  color: #64748B !important;
  font-size: 24px !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

#admin-customerHistory #backendCustomerModal .customer-edit-modal-close:hover,
#admin-customerHistory #backendCustomerModal .customer-edit-modal-close:focus-visible {
  border-color: #FDBA74 !important;
  color: #9A3412 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(250, 115, 5, .20) !important;
}

#admin-customerHistory #backendCustomerModal .modal-body {
  display: grid !important;
  gap: 16px !important;
  padding: 22px 24px 10px !important;
}

#admin-customerHistory #backendCustomerModal .field {
  display: grid !important;
  gap: 7px !important;
}

#admin-customerHistory #backendCustomerModal label {
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

#admin-customerHistory #backendCustomerModal .input {
  width: 100% !important;
  min-height: 46px !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

#admin-customerHistory #backendCustomerModal .input:focus {
  border-color: #F97316 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(250, 115, 5, .18) !important;
}

#admin-customerHistory #backendCustomerModal #backendCustomerModalError {
  min-height: 18px !important;
  margin: 0 !important;
  color: #B91C1C !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#admin-customerHistory #backendCustomerModal .modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 24px 24px !important;
}

#admin-customerHistory #backendCustomerModal .modal-actions .btn {
  min-height: 42px !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 900 !important;
}

@media (max-width: 640px) {
  #admin-customerHistory #backendCustomerModal.customer-edit-modal-backdrop {
    align-items: flex-start !important;
    padding: 14px !important;
  }

  #admin-customerHistory #backendCustomerModal .customer-edit-modal-card {
    max-height: calc(100vh - 28px) !important;
    border-radius: 20px !important;
  }

  #admin-customerHistory #backendCustomerModal .modal-head,
  #admin-customerHistory #backendCustomerModal .modal-body {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #admin-customerHistory #backendCustomerModal .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #admin-customerHistory #backendCustomerModal .modal-actions .btn {
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  #admin-customerHistory .customer-list-row {
    grid-template-columns: 1fr !important;
  }

  #admin-customerHistory .customer-list-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 1200px) {
  #admin-customerHistory .customer-list-row {
    grid-template-columns: 1fr !important;
  }

  #admin-customerHistory .customer-list-row.customer-list-head {
    display: none;
  }
}

@media (max-width: 640px) {
  .money-bank-tiles {
    grid-template-columns: 1fr;
  }

}

/* ===== Phase 7.92N.17: Modern Inventory Table ===== */

#admin-inventoryTable .panel {
  overflow: hidden !important;
}

#admin-inventoryTable .panel > h3 {
  padding-bottom: 4px !important;
}

#admin-inventoryTable .inventory-table-subtitle {
  margin: 0 !important;
  padding: 0 22px 14px !important;
  color: var(--st-muted) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

#admin-inventoryTable .inventory-table-toolbar {
  display: grid !important;
  gap: 14px !important;
  padding: 14px 22px 18px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #F1F5F9 !important;
  border-bottom: 1px solid #E5E7EB !important;
}

#admin-inventoryTable .inventory-search-wrap {
  width: min(100%, 620px) !important;
}

#admin-inventoryTable #invSearch {
  min-height: 44px !important;
}

#admin-inventoryTable .inventory-filter-bar {
  display: grid !important;
  grid-template-columns: minmax(160px, auto) 1fr !important;
  gap: 12px !important;
  align-items: start !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
}

#admin-inventoryTable .inventory-filter-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#admin-inventoryTable .inventory-filter-bar .pill,
#admin-inventoryTable .inventory-filter-bar .btn,
#admin-inventoryTable .inventory-filter-bar input[type="date"] {
  min-height: 38px !important;
  border-radius: 999px !important;
}

#admin-inventoryTable .inventory-filter-bar label {
  align-self: center !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

#admin-inventoryTable #invExpFrom,
#admin-inventoryTable #invExpTo {
  width: 145px !important;
}

#admin-inventoryTable .inventory-table-meta {
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#admin-inventoryTable #invCount {
  margin: 0 !important;
  color: var(--st-text) !important;
  font-weight: 900 !important;
}

#admin-inventoryTable #invActiveShopLabel {
  justify-self: center !important;
  margin: 0 !important;
}

#admin-inventoryTable .inventory-table-meta .btn {
  justify-self: end !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

#admin-inventoryTable .scroll-area {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}

#admin-inventoryTable #invTable {
  display: block !important;
  width: calc(100% - 44px) !important;
  max-width: calc(100% - 44px) !important;
  margin: 16px 22px 22px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable #invTable .inv-head,
#admin-inventoryTable #invTable .inv-row {
  display: grid !important;
  grid-template-columns:
    58px
    minmax(300px, 2.2fr)
    minmax(70px, .52fr)
    minmax(100px, .68fr)
    minmax(108px, .78fr)
    minmax(108px, .78fr)
    minmax(112px, .82fr)
    minmax(150px, .9fr) !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 1040px !important;
  max-width: none !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable #invTable .inv-head {
  padding: 12px 14px !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  border-bottom: 2px solid #CBD5E1 !important;
  border-radius: 20px 20px 0 0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

#admin-inventoryTable #invTable .inv-head > div {
  min-width: 0 !important;
  white-space: normal !important;
  text-align: left !important;
  justify-self: stretch !important;
}

#admin-inventoryTable #invTable .inv-head .num {
  text-align: center !important;
  justify-self: stretch !important;
}

#admin-inventoryTable #invTable .inv-row {
  padding: 14px !important;
  background: #FFFFFF !important;
  border-bottom: 2px solid #E5E7EB !important;
  transition: background-color .16s ease, box-shadow .16s ease !important;
}

#admin-inventoryTable #invTable .inv-row:nth-child(odd) {
  background: #FFFFFF !important;
}

#admin-inventoryTable #invTable .inv-row:nth-child(even) {
  background: #FAFBFC !important;
}

#admin-inventoryTable #invTable .inv-row:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 20px 20px !important;
}

#admin-inventoryTable #invTable .inv-row:hover {
  background: #FFF7ED !important;
}

#admin-inventoryTable .inv-select-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-select-unavailable {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  color: #94A3B8 !important;
  background: #F1F5F9 !important;
}

#admin-inventoryTable .label-select {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

#admin-inventoryTable .inv-product-cell,
#admin-inventoryTable .inv-product,
#admin-inventoryTable .inv-meta {
  min-width: 0 !important;
}

#admin-inventoryTable .inv-product-cell {
  overflow: hidden !important;
}

#admin-inventoryTable .inv-product {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

#admin-inventoryTable .mini-thumb {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #DDE5EF !important;
  background: linear-gradient(135deg, #F1F5F9, #E0F2FE) !important;
  color: #0F766E !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex: 0 0 42px !important;
  font-weight: 900 !important;
}

#admin-inventoryTable .mini-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#admin-inventoryTable .inv-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-product .name,
#admin-inventoryTable .inv-title .name {
  min-width: 0 !important;
  color: var(--st-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#admin-inventoryTable .inv-meta-line,
#admin-inventoryTable .inv-supplier-line,
#admin-inventoryTable .inv-expiry-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  color: var(--st-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: hidden !important;
}

#admin-inventoryTable .inv-meta-line span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#admin-inventoryTable .tag.low {
  flex: 0 0 auto !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #FFF7ED !important;
  border: 1px solid #FDBA74 !important;
  color: #9A3412 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#admin-inventoryTable .cell-num {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-value,
#admin-inventoryTable .num-text {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 6px 8px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 999px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  box-shadow: none !important;
  white-space: normal !important;
}

#admin-inventoryTable .inv-cost-cell .inv-value,
#admin-inventoryTable .inv-price-cell .inv-value,
#admin-inventoryTable .inv-margin-cell .inv-value {
  border-radius: 14px !important;
  min-width: 92px !important;
  background: #FFFFFF !important;
}

#admin-inventoryTable .inv-margin-cell .inv-value {
  border-color: #BBF7D0 !important;
  background: #F0FDF4 !important;
  color: #166534 !important;
}

#admin-inventoryTable .inv-value-warning {
  border-color: #FDBA74 !important;
  background: #FFF7ED !important;
  color: #9A3412 !important;
}

#admin-inventoryTable .inv-value-note {
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

#admin-inventoryTable .inv-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-action-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable .inv-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#admin-inventoryTable .inv-action-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#admin-inventoryTable .inv-action-edit {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

#admin-inventoryTable .inv-action-adjust {
  background: var(--st-primary) !important;
  border: 1px solid var(--st-primary) !important;
  color: #FFFFFF !important;
}

#admin-inventoryTable .inv-action-archive {
  background: #FFF7ED !important;
  border: 1px solid #FDBA74 !important;
  color: #C2410C !important;
}

#admin-inventoryTable .inv-action-btn:focus-visible,
#admin-inventoryTable .label-select:focus-visible {
  outline: 3px solid rgba(249, 115, 22, .28) !important;
  outline-offset: 2px !important;
}

#admin-inventoryTable #invPaginationWrap {
  margin: 16px 22px 22px !important;
}

@media (max-width: 1180px) {
  #admin-inventoryTable .scroll-area {
    overflow-x: auto !important;
  }
}

@media (max-width: 760px) {
  #admin:has(#admin-inventoryTable.show) .admin-shell {
    grid-template-columns: 1fr !important;
  }

  #admin:has(#admin-inventoryTable.show) .admin-shell-sidebar {
    margin-top: 0 !important;
  }

  #admin-inventoryTable .inventory-table-toolbar {
    padding: 14px !important;
  }

  #admin-inventoryTable .inventory-filter-bar,
  #admin-inventoryTable .inventory-table-meta {
    grid-template-columns: 1fr !important;
  }

  #admin-inventoryTable #invActiveShopLabel,
  #admin-inventoryTable .inventory-table-meta .btn {
    justify-self: stretch !important;
  }

  #admin-inventoryTable .inventory-table-meta .btn {
    width: 100% !important;
  }

  #admin-inventoryTable .scroll-area {
    overflow-x: hidden !important;
  }

  #admin-inventoryTable #invTable {
    width: calc(100% - 28px) !important;
    max-width: calc(100% - 28px) !important;
    margin: 14px !important;
    border: 0 !important;
    background: transparent !important;
    display: grid !important;
    gap: 12px !important;
  }

  #admin-inventoryTable #invTable .inv-head {
    display: none !important;
  }

  #admin-inventoryTable #invTable .inv-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #E2E8F0 !important;
    border-bottom: 2px solid #CBD5E1 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
  }

  #admin-inventoryTable .inv-select-cell {
    justify-content: flex-start !important;
  }

  #admin-inventoryTable .cell-num,
  #admin-inventoryTable .inv-actions-cell {
    display: grid !important;
    grid-template-columns: minmax(92px, .42fr) 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  #admin-inventoryTable .cell-num::before,
  #admin-inventoryTable .inv-actions-cell::before,
  #admin-inventoryTable .inv-product-cell::before {
    content: attr(data-inv-label) !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  #admin-inventoryTable .inv-product-cell {
    display: grid !important;
    gap: 6px !important;
  }

  #admin-inventoryTable .inv-value,
  #admin-inventoryTable .num-text {
    justify-self: start !important;
  }

  #admin-inventoryTable .inv-actions {
    width: 100% !important;
  }

  #admin-inventoryTable #invTable .inv-row > .inv-actions-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  #admin-inventoryTable .inv-action-stack {
    grid-column: 1 !important;
  }

  #admin-inventoryTable .inv-action-btn {
    min-height: 40px !important;
  }

  #admin-inventoryTable #invPaginationWrap {
    margin: 12px 14px 18px !important;
  }
}

/* ===== Phase 7.92N.17A: Inventory Table Corrective Layout Rebuild ===== */

#admin-inventoryTable .panel {
  overflow: hidden !important;
}

#admin-inventoryTable .inventory-table-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  padding: 14px 22px 18px !important;
  background: #F8FAFC !important;
  border-top: 1px solid #F1F5F9 !important;
  border-bottom: 1px solid #E5E7EB !important;
}

#admin-inventoryTable .inventory-search-wrap {
  width: 100% !important;
  max-width: none !important;
}

#admin-inventoryTable #invSearch {
  width: 100% !important;
  min-height: 44px !important;
}

#admin-inventoryTable .inventory-filter-bar {
  display: grid !important;
  grid-template-columns: auto auto !important;
  grid-template-areas:
    "stock stock"
    "expiry dates" !important;
  gap: 12px 16px !important;
  align-items: end !important;
  justify-content: start !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable .inventory-filter-row {
  min-width: 0 !important;
}

#admin-inventoryTable .inventory-filter-left {
  display: contents !important;
}

#admin-inventoryTable .inventory-filter-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  grid-area: stock !important;
}

#admin-inventoryTable .inventory-filter-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: stretch !important;
}

#admin-inventoryTable .inventory-expiry-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  grid-area: expiry !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inventory-date-range {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: end !important;
  grid-area: dates !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inventory-date-control {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 7px !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#admin-inventoryTable .inventory-date-control span,
#admin-inventoryTable .inventory-filter-bar label {
  color: #64748B !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .05em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

#admin-inventoryTable .inventory-filter-bar .pill,
#admin-inventoryTable .inventory-filter-bar .btn,
#admin-inventoryTable .inventory-filter-bar input[type="date"] {
  min-height: 38px !important;
  border-radius: 999px !important;
}

#admin-inventoryTable #invLowBtn {
  min-width: max-content !important;
  width: auto !important;
}

#admin-inventoryTable #invExpSoon {
  min-width: 0 !important;
  width: auto !important;
  white-space: nowrap !important;
}

#admin-inventoryTable #invExpFrom,
#admin-inventoryTable #invExpTo {
  box-sizing: border-box !important;
  flex: 0 0 156px !important;
  width: 156px !important;
  min-width: 156px !important;
}

#admin-inventoryTable .inventory-table-meta {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, auto) minmax(180px, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#admin-inventoryTable #invCount {
  justify-self: start !important;
  margin: 0 !important;
  color: var(--st-text) !important;
  font-weight: 900 !important;
}

#admin-inventoryTable #invActiveShopLabel {
  justify-self: center !important;
  margin: 0 !important;
  text-align: center !important;
}

#admin-inventoryTable .inventory-table-meta .btn {
  justify-self: end !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
}

#admin-inventoryTable .scroll-area {
  max-width: 100% !important;
  padding: 16px 22px 22px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable #invTable {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable #invTable.inventory-backend-table {
  min-width: 1018px !important;
}

#admin-productsTable .panel {
  border-radius: 28px !important;
  overflow: hidden !important;
}

#admin-productsTable .products-table-toolbar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin: 0 0 16px !important;
}

#admin-productsTable .products-search-wrap {
  width: 100% !important;
  min-width: 0 !important;
}

#admin-productsTable #productsSearch {
  width: 100% !important;
}

#admin-productsTable .products-table-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 24px !important;
  white-space: nowrap !important;
  padding-left: 2px !important;
}

#admin-productsTable .products-scroll-area {
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
}

#admin-productsTable .products-admin-table {
  width: 100% !important;
  max-width: none !important;
  min-width: 1328px !important;
  margin: 0 !important;
}

#admin-productsTable .products-admin-head,
#admin-productsTable .products-admin-row {
  display: grid !important;
  grid-template-columns:
    minmax(280px, 1.5fr)
    minmax(180px, .95fr)
    minmax(120px, .58fr)
    minmax(92px, .42fr)
    minmax(112px, .5fr)
    minmax(210px, 1.05fr)
    minmax(82px, .36fr)
    minmax(134px, max-content) !important;
  gap: 12px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#admin-productsTable .products-admin-head {
  padding: 13px 16px !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  border-bottom: 2px solid #CBD5E1 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

#admin-productsTable .products-admin-head .num {
  text-align: right !important;
}

#admin-productsTable .products-admin-row {
  padding: 16px !important;
  border-bottom: 2px solid #E5E7EB !important;
  background: #FFFFFF !important;
}

#admin-productsTable .products-admin-row:nth-child(odd) {
  background: #FAFBFC !important;
}

#admin-productsTable .products-admin-row:last-child {
  border-bottom: 0 !important;
}

#admin-productsTable .products-admin-row:hover {
  background: #F8FAFF !important;
}

#admin-productsTable .products-product {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#admin-productsTable .products-product-badge {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #EEF2FF, #DBEAFE) !important;
  border: 1px solid #C7D2FE !important;
  color: #3730A3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
}

#admin-productsTable .products-product-meta,
#admin-productsTable .products-identifier-lines,
#admin-productsTable .products-supplier-lines {
  min-width: 0 !important;
}

#admin-productsTable .products-product-name {
  color: #0F172A !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

#admin-productsTable .products-product-sub,
#admin-productsTable .products-identifier-lines,
#admin-productsTable .products-supplier-lines,
#admin-productsTable .products-empty-value {
  color: #64748B !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#admin-productsTable .products-supplier-cell .products-empty-value {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  font-weight: 800 !important;
}

#admin-productsTable .products-identifier-lines,
#admin-productsTable .products-supplier-lines {
  display: grid !important;
  gap: 4px !important;
}

#admin-productsTable .products-identifier-lines span,
#admin-productsTable .products-supplier-lines span {
  overflow-wrap: anywhere !important;
}

#admin-productsTable .products-identifier-lines strong {
  display: block !important;
  color: #334155 !important;
  font-size: 10px !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

#admin-productsTable .products-category-cell {
  color: #334155 !important;
  font-weight: 800 !important;
}

#admin-productsTable .products-money-cell {
  text-align: right !important;
  color: #0F172A !important;
  font-weight: 900 !important;
}

#admin-productsTable .products-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #DCFCE7 !important;
  color: #166534 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#admin-productsTable .products-action-stack {
  display: grid !important;
  gap: 8px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

#admin-productsTable .products-action-btn {
  min-height: 34px !important;
  justify-content: center !important;
  gap: 7px !important;
}

#admin-productsTable .products-action-btn svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

#admin-productsTable .products-action-edit {
  border-color: #BFDBFE !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
}

#admin-productsTable .products-action-archive {
  border-color: #FED7AA !important;
  background: #FFF7ED !important;
  color: #C2410C !important;
}

#admin-productsTable #productsPaginationWrap {
  margin-top: 16px !important;
}

#admin-productsTable .products-empty-state {
  padding: 34px 20px !important;
  text-align: center !important;
  color: #64748B !important;
}

#admin-productsTable .products-empty-title {
  color: #0F172A !important;
  font-weight: 900 !important;
  margin-bottom: 6px !important;
}

@media (max-width: 760px) {
  .admin-page-title-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-page-actions {
    justify-content: flex-start;
    padding-top: 0;
  }

  .products-add-action {
    width: 100% !important;
    justify-content: center !important;
  }

  #admin-productsTable .products-table-toolbar {
    grid-template-columns: 1fr !important;
  }

  #admin-productsTable .products-table-meta {
    justify-content: flex-start !important;
    white-space: normal !important;
  }

  #admin-productsTable .products-scroll-area {
    overflow-x: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  #admin-productsTable .products-admin-table {
    width: 100% !important;
    min-width: 0 !important;
  }

  #admin-productsTable .products-admin-head {
    display: none !important;
  }

  #admin-productsTable .products-admin-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06) !important;
  }

  #admin-productsTable .products-admin-row > div:not(.products-product-cell)::before {
    content: attr(data-products-label) !important;
    display: block !important;
    margin-bottom: 4px !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
  }

  #admin-productsTable .products-money-cell {
    text-align: left !important;
  }

  #admin-productsTable .products-action-stack {
    grid-template-columns: 1fr !important;
    padding-right: 0 !important;
  }
}

#admin-inventoryTable #invTable.inventory-local-table {
  min-width: 1018px !important;
}

#admin-inventoryTable #invTable .inv-head,
#admin-inventoryTable #invTable .inv-row {
  display: grid !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable #invTable.inventory-backend-table .inv-head,
#admin-inventoryTable #invTable.inventory-backend-table .inv-row {
  grid-template-columns:
    44px
    minmax(260px, 1fr)
    minmax(66px, .22fr)
    minmax(92px, .28fr)
    minmax(96px, .32fr)
    minmax(96px, .32fr)
    minmax(96px, .32fr)
    150px !important;
  min-width: 1018px !important;
}

#admin-inventoryTable #invTable.inventory-local-table .inv-head,
#admin-inventoryTable #invTable.inventory-local-table .inv-row {
  grid-template-columns:
    44px
    minmax(260px, 1fr)
    minmax(66px, .22fr)
    minmax(92px, .28fr)
    minmax(96px, .32fr)
    minmax(96px, .32fr)
    minmax(96px, .32fr)
    150px !important;
  min-width: 1018px !important;
}

#admin-inventoryTable #invTable .inv-head {
  padding: 12px 14px !important;
  background: #F8FAFC !important;
  color: #475569 !important;
  border-bottom: 2px solid #CBD5E1 !important;
  border-radius: 20px 20px 0 0 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .06em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

#admin-inventoryTable #invTable .inv-head > div {
  min-width: 0 !important;
  white-space: normal !important;
  text-align: left !important;
  justify-self: stretch !important;
}

#admin-inventoryTable #invTable .inv-head .num {
  text-align: center !important;
}

#admin-inventoryTable #invTable .inv-row {
  padding: 14px !important;
  background: #FFFFFF !important;
  border-bottom: 2px solid #E5E7EB !important;
  transition: background-color .16s ease, box-shadow .16s ease !important;
}

#admin-inventoryTable #invTable .inv-row:nth-child(even) {
  background: #FAFBFC !important;
}

#admin-inventoryTable #invTable .inv-row:last-child {
  border-bottom: 0 !important;
  border-radius: 0 0 20px 20px !important;
}

#admin-inventoryTable #invTable .inv-row:hover {
  background: #FFF7ED !important;
}

#admin-inventoryTable .inv-select-cell {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
}

#admin-inventoryTable .label-select {
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

#admin-inventoryTable .inv-product-cell,
#admin-inventoryTable .inv-product,
#admin-inventoryTable .inv-meta {
  min-width: 0 !important;
}

#admin-inventoryTable .inv-product-cell {
  overflow: visible !important;
}

#admin-inventoryTable .inv-product {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

#admin-inventoryTable .mini-thumb {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid #DDE5EF !important;
  background: linear-gradient(135deg, #F1F5F9, #E0F2FE) !important;
  color: #0F766E !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex: 0 0 42px !important;
  font-weight: 900 !important;
}

#admin-inventoryTable .mini-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#admin-inventoryTable .inv-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-product .name,
#admin-inventoryTable .inv-title .name {
  min-width: 0 !important;
  color: var(--st-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

#admin-inventoryTable .inv-meta-line,
#admin-inventoryTable .inv-expiry-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  color: var(--st-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: hidden !important;
}

#admin-inventoryTable .inv-meta-line span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#admin-inventoryTable .tag.low {
  flex: 0 0 auto !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #FFF7ED !important;
  border: 1px solid #FDBA74 !important;
  color: #9A3412 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#admin-inventoryTable .cell-num {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-value,
#admin-inventoryTable .num-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 6px 8px !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 999px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  box-shadow: none !important;
  white-space: normal !important;
}

#admin-inventoryTable .inv-cost-cell .inv-value,
#admin-inventoryTable .inv-price-cell .inv-value,
#admin-inventoryTable .inv-margin-cell .inv-value {
  border-radius: 14px !important;
  min-width: 88px !important;
  background: #FFFFFF !important;
}

#admin-inventoryTable .inv-margin-cell .inv-value {
  border-color: #BBF7D0 !important;
  background: #F0FDF4 !important;
  color: #166534 !important;
}

#admin-inventoryTable .inv-value-warning {
  border-color: #FDBA74 !important;
  background: #FFF7ED !important;
  color: #9A3412 !important;
}

#admin-inventoryTable .inv-value-note {
  margin-top: 2px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

#admin-inventoryTable .inv-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-width: 0 !important;
}

#admin-inventoryTable .inv-action-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#admin-inventoryTable .inv-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#admin-inventoryTable .inv-action-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#admin-inventoryTable .inv-action-edit {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #334155 !important;
}

#admin-inventoryTable .inv-action-adjust {
  background: var(--st-primary) !important;
  border: 1px solid var(--st-primary) !important;
  color: #FFFFFF !important;
}

#admin-inventoryTable .inv-action-archive {
  background: #FFF7ED !important;
  border: 1px solid #FDBA74 !important;
  color: #C2410C !important;
}

#admin-inventoryTable .inv-action-btn:focus-visible,
#admin-inventoryTable .label-select:focus-visible {
  outline: 3px solid rgba(249, 115, 22, .28) !important;
  outline-offset: 2px !important;
}

#admin-inventoryTable #invPaginationWrap {
  margin: 16px 22px 22px !important;
}

@media (max-width: 1120px) {
  #admin-inventoryTable .inventory-filter-bar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "stock"
      "expiry"
      "dates" !important;
  }

  #admin-inventoryTable .inventory-expiry-pills {
    flex-wrap: wrap !important;
  }

  #admin-inventoryTable .inventory-date-range {
    justify-content: flex-start !important;
  }
}

@media (max-width: 760px) {
  #admin:has(#admin-inventoryTable.show) .admin-shell {
    grid-template-columns: 1fr !important;
  }

  #admin:has(#admin-inventoryTable.show) .admin-shell-sidebar {
    margin-top: 0 !important;
  }

  #admin-inventoryTable .inventory-table-toolbar {
    padding: 14px !important;
  }

  #admin-inventoryTable .inventory-filter-bar,
  #admin-inventoryTable .inventory-table-meta {
    grid-template-columns: 1fr !important;
  }

  #admin-inventoryTable .inventory-expiry-pills {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #admin-inventoryTable .inventory-date-range {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #admin-inventoryTable .inventory-expiry-pills .pill,
  #admin-inventoryTable #invExpClear {
    width: fit-content !important;
    max-width: 100% !important;
  }

  #admin-inventoryTable .inventory-date-control {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    width: 100% !important;
  }

  #admin-inventoryTable #invExpFrom,
  #admin-inventoryTable #invExpTo {
    width: 100% !important;
    min-width: 0 !important;
  }

  #admin-inventoryTable #invActiveShopLabel,
  #admin-inventoryTable .inventory-table-meta .btn {
    justify-self: stretch !important;
  }

  #admin-inventoryTable .inventory-table-meta .btn {
    width: 100% !important;
  }

  #admin-inventoryTable .scroll-area {
    padding: 14px !important;
    overflow-x: hidden !important;
  }

  #admin-inventoryTable #invTable {
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: grid !important;
    gap: 12px !important;
  }

  #admin-inventoryTable #invTable.inventory-backend-table,
  #admin-inventoryTable #invTable.inventory-local-table {
    min-width: 0 !important;
    width: 100% !important;
  }

  #admin-inventoryTable #invTable .inv-head {
    display: none !important;
  }

  #admin-inventoryTable #invTable .inv-row,
  #admin-inventoryTable #invTable.inventory-backend-table .inv-row,
  #admin-inventoryTable #invTable.inventory-local-table .inv-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #E2E8F0 !important;
    border-bottom: 2px solid #CBD5E1 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
  }

  #admin-inventoryTable .inv-select-cell {
    justify-content: flex-start !important;
  }

  #admin-inventoryTable .cell-num,
  #admin-inventoryTable .inv-actions-cell {
    display: grid !important;
    grid-template-columns: minmax(92px, .42fr) 1fr !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
  }

  #admin-inventoryTable .cell-num::before,
  #admin-inventoryTable .inv-actions-cell::before,
  #admin-inventoryTable .inv-product-cell::before {
    content: attr(data-inv-label) !important;
    color: #64748B !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
  }

  #admin-inventoryTable .inv-product-cell {
    display: grid !important;
    gap: 6px !important;
  }

  #admin-inventoryTable .inv-value,
  #admin-inventoryTable .num-text {
    justify-self: start !important;
  }

  #admin-inventoryTable #invTable .inv-row > .inv-actions-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  #admin-inventoryTable .inv-action-stack {
    grid-column: 1 !important;
  }

  #admin-inventoryTable .inv-action-btn {
    min-height: 40px !important;
  }

  #admin-inventoryTable #invPaginationWrap {
    margin: 12px 14px 18px !important;
  }
}