/* ======================================
   IMS — Inventory Management System
   Responsive CSS for Windows / iOS / Android
   ====================================== */

/* Font loaded via <link> in index.html for better caching;
   system font fallback ensures offline readability */

/* ============================================================
   LOGIN SCREEN
   ============================================================ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070b18;
  padding: 1rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  overflow: auto;
}

.login-screen.hidden { display: none; }

/* ---------- Login Window Controls (Electron) ---------- */
.login-window-controls {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  z-index: 10001;
  -webkit-app-region: drag;
}

.login-win-drag {
  flex: 1;
}

.login-win-btn {
  -webkit-app-region: no-drag;
  background: none;
  border: none;
  color: rgba(255,255,255,.55);
  width: 46px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.login-win-btn:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.login-win-close:hover {
  background: #e81123;
  color: #fff;
}

/* ---------- Floating Background Shapes ---------- */
.login-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}

.login-shape-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.25), transparent 70%);
  top: -15%; right: -10%;
  animation: loginFloat 12s ease-in-out infinite alternate;
}

.login-shape-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(124,58,237,.2), transparent 70%);
  bottom: -15%; left: -8%;
  animation: loginFloat 15s ease-in-out infinite alternate-reverse;
}

.login-shape-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(6,182,212,.15), transparent 70%);
  top: 40%; left: 30%;
  animation: loginFloat 10s ease-in-out infinite alternate;
}

.login-shape-4 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(236,72,153,.12), transparent 70%);
  top: 10%; left: 15%;
  animation: loginFloat 13s ease-in-out infinite alternate-reverse;
}

.login-shape-5 {
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(37,99,235,.15), transparent 70%);
  bottom: 15%; right: 20%;
  animation: loginFloat 11s ease-in-out infinite alternate;
}

@keyframes loginFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, -30px) scale(1.15); }
}

/* ---------- Login Card (Split Layout) ---------- */
.login-card {
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255,255,255,.03);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden;
  animation: loginCardIn .6s cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* ---------- Left Panel (Branding) ---------- */
.login-panel-left {
  background: linear-gradient(160deg, #1a3a8f 0%, #2563eb 35%, #4f46e5 75%, #6d28d9 100%);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.login-panel-left::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -40%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
  animation: panelGlow 8s ease-in-out infinite alternate;
}

.login-panel-left::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0,0,0,.15), transparent);
  pointer-events: none;
}

@keyframes panelGlow {
  from { transform: translate(0, 0); }
  to { transform: translate(-20px, 20px); }
}

.login-panel-content {
  position: relative;
  z-index: 1;
}

.login-brand-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.2);
}

.login-brand-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .03em;
  line-height: 1.1;
  margin-bottom: .4rem;
}

.login-brand-subtitle {
  font-size: .95rem;
  color: rgba(255,255,255,.75);
  font-weight: 500;
  letter-spacing: .01em;
}

.login-brand-divider {
  width: 48px;
  height: 3px;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  margin: 1.5rem 0;
}

/* Feature list on left panel */
.login-features {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.login-feature-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  font-weight: 500;
}

.login-feature-item svg {
  color: rgba(255,255,255,.6);
  flex-shrink: 0;
}

.login-panel-version {
  position: relative;
  z-index: 1;
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  margin-top: 2.5rem;
  letter-spacing: .04em;
}

/* ---------- Right Panel (Form) ---------- */
.login-panel-right {
  background: #fff;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
}

.login-form-header {
  margin-bottom: 1.75rem;
}

.login-form-header h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.02em;
  margin-bottom: .3rem;
}

.login-form-header p {
  font-size: .88rem;
  color: #64748b;
  font-weight: 400;
}

/* Login form */
.login-form {
  padding: 0;
}

.login-field {
  margin-bottom: 1.2rem;
}

.login-field label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: .45rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.login-input-wrapper {
  display: flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

.login-input-wrapper:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.08);
  background: #fff;
}

.login-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .2rem 0 .85rem;
  color: #94a3b8;
  flex-shrink: 0;
  transition: color .25s;
}

.login-input-wrapper:focus-within .login-input-icon {
  color: #2563eb;
}

.login-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  padding: .75rem .65rem;
  font-size: 1rem;
  outline: none;
  color: #0f172a;
  font-weight: 500;
}

.login-input-wrapper input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}

.login-eye-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: #94a3b8;
  padding: .5rem .75rem;
  display: flex;
  align-items: center;
  transition: color .2s;
}

.login-eye-btn:hover { color: #475569; }

/* Login options */
.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  color: #475569;
  cursor: pointer;
  font-weight: 500;
}

.login-remember input {
  accent-color: #2563eb;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

/* Login button */
.login-btn {
  width: 100%;
  padding: .9rem 1.5rem;
  font-size: .95rem;
  font-weight: 700;
  border-radius: 12px;
  letter-spacing: .01em;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(37,99,235,.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  position: relative;
  overflow: hidden;
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s;
}

.login-btn:hover::before {
  left: 100%;
}

.login-btn:hover {
  box-shadow: 0 8px 28px rgba(37,99,235,.45);
  transform: translateY(-2px);
}

.login-btn:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}

.login-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

.login-btn svg {
  transition: transform .25s;
}

.login-btn:hover svg {
  transform: translateX(3px);
}

/* Biometric login button */
.login-btn-biometric {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  box-shadow: 0 4px 16px rgba(15,23,42,.35);
  border: 1px solid rgba(255,255,255,.08);
}
.login-btn-biometric:hover {
  box-shadow: 0 8px 28px rgba(15,23,42,.5);
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}
.login-btn-biometric:hover svg {
  transform: scale(1.1);
}

/* Login divider (or) */
.login-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0;
  color: #94a3b8;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

/* Login footer */
.login-footer {
  text-align: center;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}

.login-secure-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 500;
  color: #16a34a;
  background: #f0fdf4;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid #dcfce7;
}

.login-hint {
  font-size: .75rem;
  color: #94a3b8;
}

.login-hint strong {
  color: #64748b;
  font-weight: 600;
}

/* Login alert */
.login-alert {
  padding: .75rem 1rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 500;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.login-alert.error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.login-alert.success {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

/* Logged-in indicator in topbar */
.logged-in-user {
  font-size: .78rem;
  color: var(--text-secondary);
  margin-right: .5rem;
  display: none;
}

/* Danger dropdown item */
.dropdown-item-danger { color: #dc2626 !important; }
.dropdown-item-danger:hover { background: #fee2e2 !important; }

/* ---------- Dark Mode Login ---------- */
[data-theme="dark"] .login-panel-right {
  background: #151e30;
}

[data-theme="dark"] .login-form-header h2 {
  color: #f1f5f9;
}

[data-theme="dark"] .login-form-header p {
  color: #94a3b8;
}

[data-theme="dark"] .login-field label {
  color: #94a3b8;
}

[data-theme="dark"] .login-input-wrapper {
  border-color: #1e3048;
  background: #0c1222;
}

[data-theme="dark"] .login-input-wrapper:focus-within {
  border-color: #3b82f6;
  background: #162032;
}

[data-theme="dark"] .login-input-wrapper input {
  color: #f1f5f9;
}

[data-theme="dark"] .login-input-wrapper input::placeholder {
  color: #475569;
}

[data-theme="dark"] .login-remember {
  color: #94a3b8;
}

[data-theme="dark"] .login-hint {
  color: #64748b;
}

[data-theme="dark"] .login-hint strong {
  color: #94a3b8;
}

[data-theme="dark"] .login-secure-badge {
  background: rgba(22,163,74,.1);
  border-color: rgba(22,163,74,.2);
  color: #4ade80;
}

[data-theme="dark"] .login-alert.error {
  background: rgba(220,38,38,.12);
  border-color: rgba(220,38,38,.25);
}

[data-theme="dark"] .login-divider {
  color: #64748b;
}
[data-theme="dark"] .login-divider::before,
[data-theme="dark"] .login-divider::after {
  background: #1e3048;
}

/* ---------- Login Responsive ---------- */
@media (max-width: 768px) {
  .login-card {
    grid-template-columns: 1fr;
    max-width: 440px;
    border-radius: 20px;
  }

  .login-panel-left {
    padding: 1.75rem 1.75rem 1.25rem;
  }

  .login-brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    margin-bottom: 1rem;
  }

  .login-brand-icon svg {
    width: 32px;
    height: 32px;
  }

  .login-brand-title {
    font-size: 1.75rem;
  }

  .login-brand-subtitle {
    font-size: .82rem;
  }

  .login-brand-divider,
  .login-features,
  .login-panel-version {
    display: none;
  }

  .login-panel-right {
    padding: 1.75rem;
    padding-bottom: max(1.75rem, env(safe-area-inset-bottom));
  }

  .login-form-header {
    margin-bottom: 1.25rem;
  }

  .login-form-header h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 420px) {
  .login-screen {
    padding: 0;
    padding-top: env(safe-area-inset-top);
    align-items: stretch;
  }

  .login-card {
    border-radius: 0;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .login-panel-left {
    padding: 1.5rem 1.25rem 1rem;
    padding-top: max(1.5rem, env(safe-area-inset-top));
  }

  .login-panel-right {
    padding: 1.5rem 1.25rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    flex: 1;
  }

  .login-form-header h2 {
    font-size: 1.2rem;
  }

  .login-form-header p {
    font-size: .82rem;
  }

  .login-field label {
    font-size: .72rem;
  }

  .login-btn {
    padding: .8rem 1.25rem;
    font-size: .9rem;
  }

  .login-footer {
    margin-top: 1rem;
  }
}

/* ============================================================
   ELECTRON CUSTOM TITLEBAR
   ============================================================ */
.electron-titlebar {
  -webkit-app-region: drag;
  height: 32px;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  -webkit-user-select: none;
  user-select: none;
  padding-left: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.titlebar-drag {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  overflow: hidden;
}

.titlebar-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #60a5fa;
}

.titlebar-icon svg {
  width: 16px;
  height: 16px;
}

.titlebar-title {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
}

.titlebar-controls {
  -webkit-app-region: no-drag;
  display: flex;
  height: 100%;
}

.titlebar-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  width: 46px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.titlebar-btn:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

.titlebar-btn-close:hover {
  background: #e81123;
  color: #fff;
}

/* Electron body — no separate titlebar, topbar IS the titlebar */
body.electron-app {
  padding-top: 0;
}

body.electron-app .login-screen {
  top: 0;
  height: 100vh;
  height: 100dvh;
}

body.electron-app .update-banner {
  top: 0;
}

/* Electron: topbar acts as titlebar (drag area) */
body.electron-app .topbar {
  -webkit-app-region: drag;
}

body.electron-app .topbar-nav,
body.electron-app .topbar-right,
body.electron-app .topbar button,
body.electron-app .topbar a,
body.electron-app .topbar input,
body.electron-app .topbar .user-dropdown-wrapper {
  -webkit-app-region: no-drag;
}

body.electron-app .notif-panel {
  top: 42px;
}

/* In Electron, remove topbar-right padding so window controls reach edge */
body.electron-app .topbar-right {
  padding-right: 0;
}

/* Dark mode titlebar */
[data-theme="dark"] .electron-titlebar,
.electron-titlebar {
  background: #0a0f1e;
  border-bottom-color: rgba(255,255,255,.04);
}

/* ============================================================
   CONNECTION STATUS INDICATOR
   ============================================================ */
.connection-status {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .35rem;
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: background .3s ease, box-shadow .3s ease;
}

.connection-dot.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,.5);
}

.connection-dot.offline {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,.5);
  animation: offlinePulse 1.5s ease-in-out infinite;
}

@keyframes offlinePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(239,68,68,.3); }
  50% { box-shadow: 0 0 12px rgba(239,68,68,.7); }
}

.connection-label {
  font-size: .7rem;
  opacity: .8;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Topbar connection indicator */
.topbar-connection {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .35rem;
  cursor: default;
  position: relative;
}

.topbar-connection .connection-dot {
  width: 9px;
  height: 9px;
}

/* ============================================================
   OFFLINE STATUS CHIP (subtle indicator)
   ============================================================ */
.offline-chip {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9998;
  background: rgba(30, 30, 30, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: .35rem .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: opacity .3s ease, transform .3s ease;
}

.offline-chip.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.offline-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
  animation: offlineChipPulse 2s ease-in-out infinite;
}

@keyframes offlineChipPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ============================================================
   CLOUD SYNC STATUS CHIP
   ============================================================ */
.sync-chip {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9998;
  background: rgba(30, 30, 30, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  padding: .35rem .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: opacity .3s ease, transform .3s ease;
}
.sync-chip.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
.sync-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: syncChipPulse 2s ease-in-out infinite;
}
@keyframes syncChipPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

/* ============================================================
   ABOUT MODAL UPDATE SECTION
   ============================================================ */
.about-update-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.about-update-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: .75rem;
}

.about-last-check {
  margin-left: .5rem;
  font-size: .72rem;
  opacity: .6;
}

.about-check-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
  font-size: .82rem !important;
  padding: .45rem 1rem !important;
  margin: 0 auto;
}

.about-check-btn.checking svg {
  animation: updateSpin 1s linear infinite;
}

.about-check-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.about-update-result {
  margin-top: .65rem;
  font-size: .78rem;
  min-height: 1.2em;
  text-align: center;
}

.about-update-result.success {
  color: #22c55e;
}

.about-update-result.info {
  color: #3b82f6;
}

.about-update-result.error {
  color: #ef4444;
}

/* ---------- About Developer ---------- */
.about-developer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e7eb);
  text-align: center;
}
.about-developer h4 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted, #9ca3af);
  margin-bottom: .5rem;
  font-weight: 600;
}
.about-dev-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text, #111827);
  margin-bottom: .6rem;
}
.about-dev-contacts {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
}
.about-dev-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--primary, #6366f1);
  text-decoration: none;
  transition: color .2s;
}
.about-dev-link:hover {
  color: var(--primary-dark, #4f46e5);
  text-decoration: underline;
}
.about-dev-link svg {
  flex-shrink: 0;
  opacity: .7;
}

/* ============================================================
   SETTINGS UPDATE CARD
   ============================================================ */
.settings-update-info {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.settings-update-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
}

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

.settings-update-label {
  font-size: .82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.settings-update-value {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ============================================================
   UPDATE BANNER
   ============================================================ */
.update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  animation: updateSlideDown .4s cubic-bezier(.4,0,.2,1);
}

@keyframes updateSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

.update-banner-content {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem 1.25rem;
  background: linear-gradient(135deg, #1e40af, #4f46e5);
  color: #fff;
  font-size: .88rem;
}

.update-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: updatePulse 2s ease-in-out infinite;
}

@keyframes updatePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.2); }
  50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

.update-banner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.update-banner-text strong {
  font-size: .9rem;
  font-weight: 700;
}

.update-banner-text span {
  font-size: .78rem;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.update-banner-actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}

.update-btn-later {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.update-btn-later:hover {
  background: rgba(255,255,255,.25) !important;
}

.update-btn-now {
  background: #fff !important;
  color: #1e40af !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .35rem !important;
}

.update-btn-now:hover {
  background: #f0f4ff !important;
  transform: translateY(-1px);
}

.update-btn-now svg {
  animation: updateSpin 1.5s linear infinite;
  animation-play-state: paused;
}

.update-btn-now:hover svg {
  animation-play-state: running;
}

@keyframes updateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Download progress bar in update banner */
.update-progress-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .35rem;
  width: 100%;
}
.update-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,.2);
  border-radius: 3px;
  overflow: hidden;
}
.update-progress-fill {
  height: 100%;
  background: #fff;
  border-radius: 3px;
  transition: width .3s ease;
}
.update-progress-text {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  min-width: 2.5rem;
  text-align: right;
}

@media (max-width: 600px) {
  .update-banner-content {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .update-banner-icon { display: none; }
  .update-banner-actions { width: 100%; }
  .update-banner-actions .btn { flex: 1; justify-content: center; }
}

/* ---------- CSS Variables ---------- */
:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #e0e7ff;
  --primary-gradient: linear-gradient(135deg, #6366f1, #4f46e5);
  --success: #059669;
  --success-light: #d1fae5;
  --warning: #d97706;
  --warning-light: #fef3c7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --purple: #7c3aed;
  --purple-light: #ede9fe;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border: #e5e7eb;
  --sidebar-bg: linear-gradient(180deg, #111827 0%, #1e2333 100%);
  --sidebar-text: #9ca3af;
  --sidebar-active: #6366f1;
  --sidebar-width: 260px;
  --topbar-height: 42px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.03);
  --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.04);
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Topbar theme tokens (light mode — Deep Teal) */
  --topbar-bg: #0f766e;
  --topbar-bg-gradient: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  --topbar-text: #f0fdfa;
  --topbar-text-soft: rgba(240,253,250,.65);
  --topbar-text-muted: rgba(240,253,250,.4);
  --topbar-border: #0d6b63;
  --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.1);
  --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12);
  --topbar-search-focus-bg: rgba(255,255,255,.15);
  --topbar-search-focus-border: rgba(94,234,212,.6);
  --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(240,253,250,.55);
  --topbar-tab-hover-text: rgba(240,253,250,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1);
  --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #ccfbf1;
  --topbar-tab-active-bg: linear-gradient(135deg, rgba(20,184,166,.25), rgba(13,148,136,.18));
  --topbar-tab-active-border: rgba(94,234,212,.35);
  --topbar-tab-active-shadow: 0 1px 6px rgba(20,184,166,.2);
  --topbar-tab-active-icon: #5eead4;
  --topbar-icon-text: rgba(240,253,250,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1);
  --topbar-badge-border: #0f766e;
  --topbar-user-name: rgba(240,253,250,.92);
  --topbar-user-chevron: rgba(240,253,250,.4);
  --topbar-role-bg: rgba(94,234,212,.2);
  --topbar-role-text: #99f6e4;
  --topbar-separator: rgba(255,255,255,.12);
  --topbar-kbd-text: rgba(240,253,250,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08);
  --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(240,253,250,.65);
  --topbar-brand-name: #f0fdfa;
  --topbar-brand-sub: rgba(240,253,250,.5);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- Sidebar (overlay only, hidden by default) ---------- */
.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  height: 100dvh;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform var(--transition);
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
  transform: translateX(-100%);
}

.sidebar.open {
  transform: translateX(0);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-family: var(--font-display);
}

.logo svg {
  filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.4));
}

.sidebar-close {
  display: block;
  color: var(--sidebar-text);
  font-size: 1.75rem;
  line-height: 1;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  color: var(--sidebar-text);
  transition: all var(--transition);
  border-left: 3px solid transparent;
  font-size: .9rem;
  font-weight: 500;
  position: relative;
}

.nav-item:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  padding-left: 1.65rem;
}

.nav-item.active {
  color: #fff;
  background: rgba(99,102,241,.18);
  border-left-color: var(--sidebar-active);
  font-weight: 600;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--sidebar-active);
  border-radius: 3px 0 0 3px;
}

.sidebar-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
  color: var(--text-muted);
}

/* ---------- Main Content ---------- */
.main-content {
  margin-left: 0;
  flex: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar — Professional Two-Tier Header ---------- */
.topbar {
  /* Sticky position offset by the safe-area inset so on scroll the topbar
     sticks BELOW the status bar (not under it). On initial load, the
     #mainContent padding-top below offsets the topbar's natural position. */
  position: sticky;
  top: env(safe-area-inset-top, 0);
  background: var(--topbar-bg-gradient);
  display: flex;
  flex-direction: column;
  z-index: 50;
  color: var(--topbar-text);
  -webkit-user-select: none;
  user-select: none;
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  /* NO padding-top here — that pushed content (logo/badge/bell/avatar)
     to the bottom of the topbar's visible area. Instead, the safe-area
     offset is applied OUTSIDE the topbar (via #mainContent padding-top
     and the fixed body::before strip), so .topbar-primary's 48px row
     naturally centers its content in the visible header area. */
}

/* Push the main content down by the safe-area so the topbar's natural
   (non-sticky) position starts below the status bar, not under it. */
#mainContent {
  padding-top: env(safe-area-inset-top, 0);
}

/* Belt-and-suspenders: paint a fixed gradient strip behind the status
   bar so the safe-area region always matches the topbar gradient. Uses
   --topbar-bg-gradient so user-selectable header themes (Teal, Rose,
   Emerald, etc.) automatically propagate up here too. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0);
  background: var(--topbar-bg-gradient);
  z-index: 49;
  pointer-events: none;
}

/* Push scrollable areas above the gesture/nav bar on Android 15+ so the
   bottom of pages and the login screen aren't clipped. ~20-30px on
   gesture-nav phones, 0 elsewhere. */
.login-screen,
#mainContent {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* — Primary Row — */
.topbar-primary {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 .75rem;
  gap: .5rem;
  background: var(--topbar-bg-gradient);
  border-bottom: 1px solid var(--topbar-border-soft);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--topbar-text);
}

.topbar-brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,.3);
}

.topbar-brand-icon svg {
  color: #fff;
  width: 18px;
  height: 18px;
}

.topbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.topbar-brand-name {
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--topbar-brand-name);
  font-family: var(--font-display);
}

.topbar-brand-sub {
  font-size: .62rem;
  font-weight: 500;
  color: var(--topbar-brand-sub);
  letter-spacing: .02em;
  margin-top: 1px;
}

/* — Global Search Bar — */
.topbar-search {
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-search-icon {
  position: absolute;
  left: 10px;
  color: var(--topbar-text-muted);
  pointer-events: none;
  flex-shrink: 0;
}

.topbar-search-input {
  width: 100%;
  height: 32px;
  padding: 0 2.6rem 0 2rem;
  background: var(--topbar-search-bg);
  border: 1px solid var(--topbar-search-border);
  border-radius: 8px;
  color: var(--topbar-text);
  font-size: .78rem;
  font-family: var(--font-body);
  outline: none;
  transition: all .2s ease;
}

.topbar-search-input::placeholder {
  color: var(--topbar-text-muted);
}

.topbar-search-input:focus {
  background: var(--topbar-search-focus-bg);
  border-color: var(--topbar-search-focus-border);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

.topbar-search-kbd {
  position: absolute;
  right: 8px;
  padding: 1px 5px;
  font-size: .6rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--topbar-kbd-text);
  background: var(--topbar-kbd-bg);
  border: 1px solid var(--topbar-kbd-border);
  border-radius: 4px;
  line-height: 1.4;
  pointer-events: none;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  margin-left: auto;
}

.topbar-separator {
  width: 1px;
  height: 22px;
  background: var(--topbar-separator);
  margin: 0 .25rem;
}

.hamburger { display: none; }

/* — Navigation Row — */
.topbar-nav {
  height: 40px;
  padding: 0 .75rem;
  background: var(--topbar-nav-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.topbar-nav-track {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
}

.topbar-nav-track::-webkit-scrollbar { display: none; }

.topbar-tab {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 500;
  color: var(--topbar-tab-text);
  white-space: nowrap;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  line-height: 1;
  letter-spacing: .01em;
}

.topbar-tab svg {
  flex-shrink: 0;
  opacity: .5;
  width: 14px;
  height: 14px;
  transition: all .22s ease;
}

.topbar-tab:hover {
  color: var(--topbar-tab-hover-text);
  background: var(--topbar-tab-hover-bg);
  border-color: var(--topbar-tab-hover-border);
}

.topbar-tab:hover svg { opacity: .75; }

.topbar-tab.active {
  color: var(--topbar-tab-active-text);
  background: var(--topbar-tab-active-bg);
  border-color: var(--topbar-tab-active-border);
  font-weight: 600;
  box-shadow: var(--topbar-tab-active-shadow);
}

.topbar-tab.active svg { opacity: 1; color: var(--topbar-tab-active-icon); }

/* — Topbar icon buttons — */
.topbar-icon-btn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--topbar-icon-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .18s ease;
}

.topbar-icon-btn:hover {
  background: var(--topbar-icon-hover-bg);
  color: var(--topbar-text);
}

.topbar-icon-btn:active {
  transform: scale(.93);
}

/* Notification badge */
.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  background: var(--danger);
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--topbar-badge-border);
  line-height: 1;
}

.notif-badge:empty, .notif-badge[data-count="0"] { display: none; }

/* — User button — */
.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .25rem .45rem .25rem .25rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all .18s ease;
  color: var(--topbar-text);
}

.topbar-user-btn:hover {
  background: var(--topbar-hover-bg);
  border-color: var(--topbar-border-soft);
}

.topbar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--primary-gradient);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.topbar-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.topbar-user-name {
  font-size: .76rem;
  font-weight: 600;
  color: var(--topbar-user-name);
  white-space: nowrap;
  line-height: 1;
}

.topbar-user-role-badge {
  font-size: .56rem;
  font-weight: 600;
  padding: .08rem .35rem;
  border-radius: 3px;
  background: var(--topbar-role-bg);
  color: var(--topbar-role-text);
  white-space: nowrap;
  line-height: 1.3;
}

.topbar-user-chevron {
  color: var(--topbar-user-chevron);
  flex-shrink: 0;
  transition: transform .2s ease;
}

.topbar-user-btn:has(+ .user-dropdown.active) .topbar-user-chevron {
  transform: rotate(180deg);
}

/* ---------- Topbar Window Controls (Electron) ---------- */
.topbar-window-controls {
  display: flex;
  align-items: center;
  height: 48px;
}

.topbar-win-btn {
  background: none;
  border: none;
  color: var(--topbar-win-text);
  width: 42px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.topbar-win-btn:hover {
  background: var(--topbar-hover-bg);
  color: var(--topbar-text);
}

.topbar-win-close:hover {
  background: #e81123;
  color: #fff;
}

/* Legacy btn-icon kept for compatibility */
.btn-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.btn-icon:hover {
  background: var(--bg);
  color: var(--primary);
  transform: scale(1.05);
}

/* ---------- User Dropdown ---------- */
.user-dropdown-wrapper {
  position: relative;
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 270px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.15);
  z-index: 200;
  overflow: hidden;
  animation: dropdownFade .2s cubic-bezier(.4,0,.2,1);
}

@keyframes dropdownFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.user-dropdown.active { display: block; }

.dropdown-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1rem;
  background: linear-gradient(135deg, #0f766e, #115e59);
  color: #fff;
}

.dropdown-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font-family: var(--font-display);
  border: 2px solid rgba(255,255,255,.25);
}

.dropdown-user-info { display: flex; flex-direction: column; gap: .15rem; }
.dropdown-user-name { font-weight: 700; font-size: .88rem; font-family: var(--font-display); color: #fff; }
.dropdown-user-role {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.15);
  padding: .1rem .45rem;
  border-radius: 4px;
  width: fit-content;
  letter-spacing: .02em;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  font-size: .85rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition);
  font-weight: 500;
}

.dropdown-item:hover { background: var(--bg); padding-left: 1.1rem; }

.dropdown-item svg { color: var(--text-secondary); flex-shrink: 0; }
.dropdown-item:hover svg { color: var(--primary); }

.dropdown-item-badge {
  margin-left: auto;
  font-size: .7rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Toggle Switch ---------- */
.toggle-switch {
  margin-left: auto;
  width: 38px;
  height: 20px;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}

.toggle-switch.active { background: var(--primary); }

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.toggle-switch.active .toggle-knob {
  transform: translateX(18px);
}

/* ---------- Dark Mode ---------- */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #1a1d2e;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: #2a2d3e;
  --sidebar-bg: linear-gradient(180deg, #0a0c14 0%, #111425 100%);
  --primary-light: rgba(99, 102, 241, 0.15);
  --success-light: rgba(5, 150, 105, 0.15);
  --warning-light: rgba(217, 119, 6, 0.15);
  --danger-light: rgba(220, 38, 38, 0.15);
  --purple-light: rgba(124, 58, 237, 0.15);
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.4);
  --shadow-card: 0 1px 3px rgba(0,0,0,.2), 0 6px 20px rgba(0,0,0,.18);

  /* Topbar dark tokens */
  --topbar-bg: #12141f;
  --topbar-bg-gradient: linear-gradient(135deg, #12141f 0%, #1a1d2e 100%);
  --topbar-text: #f1f5f9;
  --topbar-text-soft: rgba(241,245,249,.55);
  --topbar-text-muted: rgba(241,245,249,.35);
  --topbar-border: #2a2d3e;
  --topbar-border-soft: rgba(255,255,255,.04);
  --topbar-hover-bg: rgba(255,255,255,.06);
  --topbar-search-bg: rgba(255,255,255,.05);
  --topbar-search-border: rgba(255,255,255,.08);
  --topbar-search-focus-bg: rgba(255,255,255,.08);
  --topbar-search-focus-border: rgba(99,102,241,.5);
  --topbar-nav-bg: rgba(255,255,255,.015);
  --topbar-tab-text: rgba(241,245,249,.45);
  --topbar-tab-hover-text: rgba(241,245,249,.8);
  --topbar-tab-hover-bg: rgba(255,255,255,.06);
  --topbar-tab-hover-border: rgba(255,255,255,.08);
  --topbar-tab-active-text: #e0e7ff;
  --topbar-tab-active-bg: linear-gradient(135deg, rgba(99,102,241,.2), rgba(79,70,229,.15));
  --topbar-tab-active-border: rgba(99,102,241,.3);
  --topbar-tab-active-shadow: 0 1px 6px rgba(99,102,241,.18);
  --topbar-tab-active-icon: #a5b4fc;
  --topbar-icon-text: rgba(241,245,249,.55);
  --topbar-icon-hover-bg: rgba(255,255,255,.08);
  --topbar-badge-border: #12141f;
  --topbar-user-name: rgba(241,245,249,.9);
  --topbar-user-chevron: rgba(241,245,249,.35);
  --topbar-role-bg: rgba(99,102,241,.2);
  --topbar-role-text: #a5b4fc;
  --topbar-separator: rgba(255,255,255,.08);
  --topbar-kbd-text: rgba(241,245,249,.25);
  --topbar-kbd-bg: rgba(255,255,255,.06);
  --topbar-kbd-border: rgba(255,255,255,.08);
  --topbar-win-text: rgba(241,245,249,.65);
  --topbar-brand-name: #f1f5f9;
  --topbar-brand-sub: rgba(241,245,249,.4);
}

[data-theme="dark"] .modal { background: var(--surface); }
[data-theme="dark"] .data-table th { background: rgba(0,0,0,.15); }
[data-theme="dark"] .stat-card { background: var(--surface); }
[data-theme="dark"] .card { background: var(--surface); }
[data-theme="dark"] .data-table { background: var(--surface); }
[data-theme="dark"] .sale-badge.wholesale { background: rgba(13,148,136,.15); color: #5eead4; }
[data-theme="dark"] .breakdown-card.wholesale-card { background: rgba(13,148,136,.12); }
[data-theme="dark"] .breakdown-card.wholesale-card .breakdown-value { color: #5eead4; }

/* Dark mode dropdown overrides */
[data-theme="dark"] .user-dropdown {
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}
[data-theme="dark"] .dropdown-header {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
}
[data-theme="dark"] .dropdown-avatar {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.15);
}
[data-theme="dark"] .dropdown-user-role {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
}
[data-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .dropdown-item-danger:hover { background: rgba(220,38,38,.12) !important; }

/* ---------- Header Color Swatches (Settings) ---------- */
.stg-color-swatches {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.stg-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 2px solid transparent; border-radius: 12px;
  padding: 8px 12px; cursor: pointer; transition: all .2s ease;
  min-width: 72px;
}
.stg-swatch:hover { background: var(--bg-muted, rgba(0,0,0,.04)); }
.stg-swatch.active { border-color: var(--primary); background: var(--primary-light); }
.stg-swatch-color {
  width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: transform .15s ease;
}
.stg-swatch:hover .stg-swatch-color { transform: scale(1.1); }
.stg-swatch.active .stg-swatch-color {
  box-shadow: 0 0 0 3px var(--primary), 0 2px 8px rgba(0,0,0,.18);
}
.stg-swatch-label {
  font-size: .7rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
}
.stg-icon-teal { background: rgba(15,118,110,.12); color: #0f766e; }
[data-theme="dark"] .stg-icon-teal { background: rgba(94,234,212,.12); color: #5eead4; }

/* ─── Topbar Color Themes (light mode overrides) ─── */

/* Indigo (the previous dark navy) */
[data-topbar-theme="indigo"] {
  --topbar-bg: #1e2235; --topbar-bg-gradient: linear-gradient(135deg,#1e2235,#252a42);
  --topbar-text: #f0f2f8; --topbar-text-soft: rgba(240,242,248,.6); --topbar-text-muted: rgba(240,242,248,.38);
  --topbar-border: #2d3352; --topbar-border-soft: rgba(255,255,255,.06);
  --topbar-hover-bg: rgba(255,255,255,.07); --topbar-search-bg: rgba(255,255,255,.08);
  --topbar-search-border: rgba(255,255,255,.1); --topbar-search-focus-bg: rgba(255,255,255,.12);
  --topbar-search-focus-border: rgba(129,140,248,.55); --topbar-nav-bg: rgba(0,0,0,.12);
  --topbar-tab-text: rgba(240,242,248,.5); --topbar-tab-hover-text: rgba(240,242,248,.85);
  --topbar-tab-hover-bg: rgba(255,255,255,.07); --topbar-tab-hover-border: rgba(255,255,255,.1);
  --topbar-tab-active-text: #e0e7ff;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(99,102,241,.22),rgba(79,70,229,.14));
  --topbar-tab-active-border: rgba(129,140,248,.3); --topbar-tab-active-shadow: 0 1px 6px rgba(99,102,241,.15);
  --topbar-tab-active-icon: #a5b4fc; --topbar-icon-text: rgba(240,242,248,.55);
  --topbar-icon-hover-bg: rgba(255,255,255,.08); --topbar-badge-border: #1e2235;
  --topbar-user-name: rgba(240,242,248,.92); --topbar-user-chevron: rgba(240,242,248,.35);
  --topbar-role-bg: rgba(129,140,248,.18); --topbar-role-text: #c7d2fe;
  --topbar-separator: rgba(255,255,255,.1); --topbar-kbd-text: rgba(240,242,248,.28);
  --topbar-kbd-bg: rgba(255,255,255,.06); --topbar-kbd-border: rgba(255,255,255,.1);
  --topbar-win-text: rgba(240,242,248,.6); --topbar-brand-name: #f0f2f8; --topbar-brand-sub: rgba(240,242,248,.45);
}

/* Slate */
[data-topbar-theme="slate"] {
  --topbar-bg: #334155; --topbar-bg-gradient: linear-gradient(135deg,#334155,#475569);
  --topbar-text: #f1f5f9; --topbar-text-soft: rgba(241,245,249,.6); --topbar-text-muted: rgba(241,245,249,.38);
  --topbar-border: #3e4f66; --topbar-border-soft: rgba(255,255,255,.06);
  --topbar-hover-bg: rgba(255,255,255,.08); --topbar-search-bg: rgba(255,255,255,.08);
  --topbar-search-border: rgba(255,255,255,.1); --topbar-search-focus-bg: rgba(255,255,255,.14);
  --topbar-search-focus-border: rgba(148,163,184,.6); --topbar-nav-bg: rgba(0,0,0,.12);
  --topbar-tab-text: rgba(241,245,249,.5); --topbar-tab-hover-text: rgba(241,245,249,.85);
  --topbar-tab-hover-bg: rgba(255,255,255,.08); --topbar-tab-hover-border: rgba(255,255,255,.1);
  --topbar-tab-active-text: #e2e8f0;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(148,163,184,.22),rgba(100,116,139,.16));
  --topbar-tab-active-border: rgba(148,163,184,.3); --topbar-tab-active-shadow: 0 1px 6px rgba(100,116,139,.18);
  --topbar-tab-active-icon: #cbd5e1; --topbar-icon-text: rgba(241,245,249,.55);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #334155;
  --topbar-user-name: rgba(241,245,249,.92); --topbar-user-chevron: rgba(241,245,249,.35);
  --topbar-role-bg: rgba(148,163,184,.2); --topbar-role-text: #cbd5e1;
  --topbar-separator: rgba(255,255,255,.1); --topbar-kbd-text: rgba(241,245,249,.28);
  --topbar-kbd-bg: rgba(255,255,255,.06); --topbar-kbd-border: rgba(255,255,255,.1);
  --topbar-win-text: rgba(241,245,249,.6); --topbar-brand-name: #f1f5f9; --topbar-brand-sub: rgba(241,245,249,.45);
}

/* Violet */
[data-topbar-theme="violet"] {
  --topbar-bg: #5b21b6; --topbar-bg-gradient: linear-gradient(135deg,#5b21b6,#7c3aed);
  --topbar-text: #f5f3ff; --topbar-text-soft: rgba(245,243,255,.65); --topbar-text-muted: rgba(245,243,255,.4);
  --topbar-border: #6d28d9; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.1); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.16);
  --topbar-search-focus-border: rgba(196,181,253,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(245,243,255,.5); --topbar-tab-hover-text: rgba(245,243,255,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #ede9fe;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(167,139,250,.25),rgba(139,92,246,.18));
  --topbar-tab-active-border: rgba(196,181,253,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(139,92,246,.2);
  --topbar-tab-active-icon: #c4b5fd; --topbar-icon-text: rgba(245,243,255,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #5b21b6;
  --topbar-user-name: rgba(245,243,255,.92); --topbar-user-chevron: rgba(245,243,255,.4);
  --topbar-role-bg: rgba(196,181,253,.2); --topbar-role-text: #ddd6fe;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(245,243,255,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(245,243,255,.65); --topbar-brand-name: #f5f3ff; --topbar-brand-sub: rgba(245,243,255,.5);
}

/* Emerald */
[data-topbar-theme="emerald"] {
  --topbar-bg: #065f46; --topbar-bg-gradient: linear-gradient(135deg,#065f46,#047857);
  --topbar-text: #ecfdf5; --topbar-text-soft: rgba(236,253,245,.65); --topbar-text-muted: rgba(236,253,245,.4);
  --topbar-border: #047852; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.1); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.15);
  --topbar-search-focus-border: rgba(110,231,183,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(236,253,245,.55); --topbar-tab-hover-text: rgba(236,253,245,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #d1fae5;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(52,211,153,.25),rgba(16,185,129,.18));
  --topbar-tab-active-border: rgba(110,231,183,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(16,185,129,.2);
  --topbar-tab-active-icon: #6ee7b7; --topbar-icon-text: rgba(236,253,245,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #065f46;
  --topbar-user-name: rgba(236,253,245,.92); --topbar-user-chevron: rgba(236,253,245,.4);
  --topbar-role-bg: rgba(110,231,183,.2); --topbar-role-text: #a7f3d0;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(236,253,245,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(236,253,245,.65); --topbar-brand-name: #ecfdf5; --topbar-brand-sub: rgba(236,253,245,.5);
}

/* Charcoal */
[data-topbar-theme="charcoal"] {
  --topbar-bg: #1c1917; --topbar-bg-gradient: linear-gradient(135deg,#1c1917,#292524);
  --topbar-text: #fafaf9; --topbar-text-soft: rgba(250,250,249,.6); --topbar-text-muted: rgba(250,250,249,.38);
  --topbar-border: #332e2a; --topbar-border-soft: rgba(255,255,255,.06);
  --topbar-hover-bg: rgba(255,255,255,.08); --topbar-search-bg: rgba(255,255,255,.08);
  --topbar-search-border: rgba(255,255,255,.1); --topbar-search-focus-bg: rgba(255,255,255,.14);
  --topbar-search-focus-border: rgba(168,162,158,.5); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(250,250,249,.5); --topbar-tab-hover-text: rgba(250,250,249,.85);
  --topbar-tab-hover-bg: rgba(255,255,255,.08); --topbar-tab-hover-border: rgba(255,255,255,.1);
  --topbar-tab-active-text: #e7e5e4;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(168,162,158,.2),rgba(120,113,108,.14));
  --topbar-tab-active-border: rgba(168,162,158,.3); --topbar-tab-active-shadow: 0 1px 6px rgba(120,113,108,.18);
  --topbar-tab-active-icon: #d6d3d1; --topbar-icon-text: rgba(250,250,249,.55);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #1c1917;
  --topbar-user-name: rgba(250,250,249,.92); --topbar-user-chevron: rgba(250,250,249,.35);
  --topbar-role-bg: rgba(168,162,158,.18); --topbar-role-text: #d6d3d1;
  --topbar-separator: rgba(255,255,255,.1); --topbar-kbd-text: rgba(250,250,249,.28);
  --topbar-kbd-bg: rgba(255,255,255,.06); --topbar-kbd-border: rgba(255,255,255,.1);
  --topbar-win-text: rgba(250,250,249,.6); --topbar-brand-name: #fafaf9; --topbar-brand-sub: rgba(250,250,249,.45);
}

/* Rose */
[data-topbar-theme="rose"] {
  --topbar-bg: #e11d48; --topbar-bg-gradient: linear-gradient(135deg,#e11d48,#be123c);
  --topbar-text: #fff1f2; --topbar-text-soft: rgba(255,241,242,.65); --topbar-text-muted: rgba(255,241,242,.4);
  --topbar-border: #c81040; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.12); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.16);
  --topbar-search-focus-border: rgba(253,164,175,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(255,241,242,.55); --topbar-tab-hover-text: rgba(255,241,242,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #ffe4e6;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(251,113,133,.25),rgba(244,63,94,.18));
  --topbar-tab-active-border: rgba(253,164,175,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(244,63,94,.2);
  --topbar-tab-active-icon: #fda4af; --topbar-icon-text: rgba(255,241,242,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #e11d48;
  --topbar-user-name: rgba(255,241,242,.92); --topbar-user-chevron: rgba(255,241,242,.4);
  --topbar-role-bg: rgba(253,164,175,.2); --topbar-role-text: #fecdd3;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(255,241,242,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(255,241,242,.65); --topbar-brand-name: #fff1f2; --topbar-brand-sub: rgba(255,241,242,.5);
}

/* Blue */
[data-topbar-theme="blue"] {
  --topbar-bg: #1d4ed8; --topbar-bg-gradient: linear-gradient(135deg,#1d4ed8,#1e40af);
  --topbar-text: #eff6ff; --topbar-text-soft: rgba(239,246,255,.65); --topbar-text-muted: rgba(239,246,255,.4);
  --topbar-border: #1a44c0; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.1); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.16);
  --topbar-search-focus-border: rgba(147,197,253,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(239,246,255,.55); --topbar-tab-hover-text: rgba(239,246,255,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #dbeafe;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(96,165,250,.25),rgba(59,130,246,.18));
  --topbar-tab-active-border: rgba(147,197,253,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(59,130,246,.2);
  --topbar-tab-active-icon: #93c5fd; --topbar-icon-text: rgba(239,246,255,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #1d4ed8;
  --topbar-user-name: rgba(239,246,255,.92); --topbar-user-chevron: rgba(239,246,255,.4);
  --topbar-role-bg: rgba(147,197,253,.2); --topbar-role-text: #bfdbfe;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(239,246,255,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(239,246,255,.65); --topbar-brand-name: #eff6ff; --topbar-brand-sub: rgba(239,246,255,.5);
}

/* Amber */
[data-topbar-theme="amber"] {
  --topbar-bg: #b45309; --topbar-bg-gradient: linear-gradient(135deg,#b45309,#92400e);
  --topbar-text: #fffbeb; --topbar-text-soft: rgba(255,251,235,.65); --topbar-text-muted: rgba(255,251,235,.4);
  --topbar-border: #9a4508; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.12); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.16);
  --topbar-search-focus-border: rgba(252,211,77,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(255,251,235,.55); --topbar-tab-hover-text: rgba(255,251,235,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #fef3c7;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(251,191,36,.25),rgba(245,158,11,.18));
  --topbar-tab-active-border: rgba(252,211,77,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(245,158,11,.2);
  --topbar-tab-active-icon: #fcd34d; --topbar-icon-text: rgba(255,251,235,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #b45309;
  --topbar-user-name: rgba(255,251,235,.92); --topbar-user-chevron: rgba(255,251,235,.4);
  --topbar-role-bg: rgba(252,211,77,.2); --topbar-role-text: #fde68a;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(255,251,235,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(255,251,235,.65); --topbar-brand-name: #fffbeb; --topbar-brand-sub: rgba(255,251,235,.5);
}

/* Cyan */
[data-topbar-theme="cyan"] {
  --topbar-bg: #0e7490; --topbar-bg-gradient: linear-gradient(135deg,#0e7490,#155e75);
  --topbar-text: #ecfeff; --topbar-text-soft: rgba(236,254,255,.65); --topbar-text-muted: rgba(236,254,255,.4);
  --topbar-border: #0c6680; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.1); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.15);
  --topbar-search-focus-border: rgba(103,232,249,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(236,254,255,.55); --topbar-tab-hover-text: rgba(236,254,255,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #cffafe;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(34,211,238,.25),rgba(6,182,212,.18));
  --topbar-tab-active-border: rgba(103,232,249,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(6,182,212,.2);
  --topbar-tab-active-icon: #67e8f9; --topbar-icon-text: rgba(236,254,255,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #0e7490;
  --topbar-user-name: rgba(236,254,255,.92); --topbar-user-chevron: rgba(236,254,255,.4);
  --topbar-role-bg: rgba(103,232,249,.2); --topbar-role-text: #a5f3fc;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(236,254,255,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(236,254,255,.65); --topbar-brand-name: #ecfeff; --topbar-brand-sub: rgba(236,254,255,.5);
}

/* Pink */
[data-topbar-theme="pink"] {
  --topbar-bg: #db2777; --topbar-bg-gradient: linear-gradient(135deg,#db2777,#be185d);
  --topbar-text: #fdf2f8; --topbar-text-soft: rgba(253,242,248,.65); --topbar-text-muted: rgba(253,242,248,.4);
  --topbar-border: #c2206a; --topbar-border-soft: rgba(255,255,255,.08);
  --topbar-hover-bg: rgba(255,255,255,.12); --topbar-search-bg: rgba(255,255,255,.1);
  --topbar-search-border: rgba(255,255,255,.12); --topbar-search-focus-bg: rgba(255,255,255,.16);
  --topbar-search-focus-border: rgba(249,168,212,.6); --topbar-nav-bg: rgba(0,0,0,.15);
  --topbar-tab-text: rgba(253,242,248,.55); --topbar-tab-hover-text: rgba(253,242,248,.88);
  --topbar-tab-hover-bg: rgba(255,255,255,.1); --topbar-tab-hover-border: rgba(255,255,255,.12);
  --topbar-tab-active-text: #fce7f3;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(244,114,182,.25),rgba(236,72,153,.18));
  --topbar-tab-active-border: rgba(249,168,212,.35); --topbar-tab-active-shadow: 0 1px 6px rgba(236,72,153,.2);
  --topbar-tab-active-icon: #f9a8d4; --topbar-icon-text: rgba(253,242,248,.6);
  --topbar-icon-hover-bg: rgba(255,255,255,.1); --topbar-badge-border: #db2777;
  --topbar-user-name: rgba(253,242,248,.92); --topbar-user-chevron: rgba(253,242,248,.4);
  --topbar-role-bg: rgba(249,168,212,.2); --topbar-role-text: #fbcfe8;
  --topbar-separator: rgba(255,255,255,.12); --topbar-kbd-text: rgba(253,242,248,.3);
  --topbar-kbd-bg: rgba(255,255,255,.08); --topbar-kbd-border: rgba(255,255,255,.12);
  --topbar-win-text: rgba(253,242,248,.65); --topbar-brand-name: #fdf2f8; --topbar-brand-sub: rgba(253,242,248,.5);
}

/* Navy */
[data-topbar-theme="navy"] {
  --topbar-bg: #1e3a5f; --topbar-bg-gradient: linear-gradient(135deg,#1e3a5f,#172554);
  --topbar-text: #eff6ff; --topbar-text-soft: rgba(239,246,255,.6); --topbar-text-muted: rgba(239,246,255,.38);
  --topbar-border: #1a3355; --topbar-border-soft: rgba(255,255,255,.06);
  --topbar-hover-bg: rgba(255,255,255,.08); --topbar-search-bg: rgba(255,255,255,.08);
  --topbar-search-border: rgba(255,255,255,.1); --topbar-search-focus-bg: rgba(255,255,255,.14);
  --topbar-search-focus-border: rgba(147,197,253,.55); --topbar-nav-bg: rgba(0,0,0,.12);
  --topbar-tab-text: rgba(239,246,255,.5); --topbar-tab-hover-text: rgba(239,246,255,.85);
  --topbar-tab-hover-bg: rgba(255,255,255,.08); --topbar-tab-hover-border: rgba(255,255,255,.1);
  --topbar-tab-active-text: #dbeafe;
  --topbar-tab-active-bg: linear-gradient(135deg,rgba(96,165,250,.22),rgba(59,130,246,.14));
  --topbar-tab-active-border: rgba(147,197,253,.3); --topbar-tab-active-shadow: 0 1px 6px rgba(59,130,246,.15);
  --topbar-tab-active-icon: #93c5fd; --topbar-icon-text: rgba(239,246,255,.55);
  --topbar-icon-hover-bg: rgba(255,255,255,.08); --topbar-badge-border: #1e3a5f;
  --topbar-user-name: rgba(239,246,255,.92); --topbar-user-chevron: rgba(239,246,255,.35);
  --topbar-role-bg: rgba(147,197,253,.18); --topbar-role-text: #bfdbfe;
  --topbar-separator: rgba(255,255,255,.1); --topbar-kbd-text: rgba(239,246,255,.28);
  --topbar-kbd-bg: rgba(255,255,255,.06); --topbar-kbd-border: rgba(255,255,255,.1);
  --topbar-win-text: rgba(239,246,255,.6); --topbar-brand-name: #eff6ff; --topbar-brand-sub: rgba(239,246,255,.45);
}

/* ---------- Language List ---------- */
.lang-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1rem;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  font-size: .88rem;
}

.lang-option:hover { background: var(--bg); }

.lang-option input[type="radio"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}

/* ---------- Permission Table ---------- */
.perm-table-wrap { max-height: 65vh; overflow-y: auto; }
.perm-table { border-collapse: collapse; width: 100%; min-width: 780px; }
.perm-table th,
.perm-table td {
  text-align: center;
  padding: .35rem .25rem;
  font-size: .82rem;
}

.perm-table thead tr:first-child th:not(:first-child) {
  border-bottom: none;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
}

.perm-action-row th {
  font-weight: 500;
  font-size: .72rem;
  color: var(--text-secondary);
  padding-top: 0;
}

.perm-table th:first-child,
.perm-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  background: var(--card-bg);
  z-index: 1;
  font-weight: 600;
  white-space: nowrap;
  padding-left: .6rem;
}

.perm-check-cell { padding: .3rem .15rem !important; }

.perm-table input[type="checkbox"] {
  accent-color: var(--primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Role group separators */
.perm-table td:nth-child(5n+2) { border-left: 2px solid var(--border-color); }


/* ---------- License Info ---------- */
.license-info { text-align: left; }

.license-badge {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--success-light);
  color: var(--success);
  font-weight: 700;
  font-size: .82rem;
  margin-bottom: 1rem;
}

.license-table {
  width: 100%;
  border-collapse: collapse;
}

.license-table td {
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--border);
  font-size: .88rem;
}

.license-table td:first-child {
  color: var(--text-secondary);
  width: 130px;
}

/* License Activation System */
.license-status-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.license-badge.active {
  background: var(--success-light);
  color: var(--success);
}

.license-badge.expired {
  background: var(--danger-light, #fef2f2);
  color: var(--danger);
}

.license-badge.free {
  background: rgba(245,158,11,.08);
  color: var(--warning, #f59e0b);
  border: 1px solid rgba(245,158,11,.2);
}

.license-expiry-tag {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.license-expiry-tag.warning {
  color: var(--warning);
}

.license-expiry-tag.danger {
  color: var(--danger);
}

.license-section-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}

.license-device-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1.25rem;
}

.license-device-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.license-device-id {
  flex: 1;
  padding: .5rem .75rem;
  background: var(--surface, var(--card));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Courier New', Courier, monospace;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.license-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.license-hint {
  font-size: .76rem;
  color: var(--text-muted);
  margin-top: .4rem;
  line-height: 1.4;
}

.license-activate-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.license-key-row {
  display: flex;
  gap: .5rem;
}

.license-key-input {
  flex: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: .88rem;
  letter-spacing: .04em;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}

.license-key-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.license-activate-error {
  font-size: .78rem;
  color: var(--danger);
  min-height: 1.1em;
  margin-top: .35rem;
}

.license-deactivate-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Device List */
.device-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: .4rem;
  background: var(--bg);
  transition: background .15s;
}
.device-list-item:hover { background: var(--bg-hover, var(--border)); }
.device-list-current {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
}
.device-list-info { flex: 1; min-width: 0; }
.device-list-platform {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  font-size: .85rem;
}
.device-list-platform svg { flex-shrink: 0; opacity: .7; }
.device-list-me { font-weight: 400; font-size: .78rem; color: var(--primary); }
.device-list-meta {
  font-size: .76rem;
  color: var(--text-secondary);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-list-remove { flex-shrink: 0; }
.btn-xs {
  font-size: .72rem;
  padding: .2rem .5rem;
  border-radius: 4px;
}

/* Admin Generate Section */
.license-admin-section {
  margin-top: 1.5rem;
}

/* Hard hide the admin license-generation section for any non-admin user.
   The renderer also sets style.display=none, but a body-class rule means
   a manager can't reveal it by un-hiding the inline style in DevTools or by
   hitting a render race where the modal opens before the session is read.
   `body.role-admin` is toggled by _updateRoleBodyClass() on every session
   change. */
body:not(.role-admin) .license-admin-section {
  display: none !important;
}

.license-admin-divider {
  border-top: 2px dashed var(--border);
  margin-bottom: 1.25rem;
}

.license-gen-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}

.license-gen-form .form-group {
  margin-bottom: .75rem;
}

.license-gen-form .form-row {
  display: flex;
  gap: .75rem;
}

.license-gen-form .form-row .form-group {
  flex: 1;
}

.license-gen-output {
  margin-top: 1rem;
}

.license-gen-key {
  background: var(--success-light) !important;
  border-color: var(--success) !important;
  color: var(--success) !important;
  font-size: .92rem;
}

/* ---------- Topbar License Badge ---------- */
.topbar-license-badge {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  cursor: default;
  white-space: nowrap;
  line-height: 1.4;
  margin-right: 4px;
}
.topbar-license-badge.license-active {
  background: rgba(34,197,94,.18);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.3);
}
.topbar-license-badge.license-expired {
  background: rgba(239,68,68,.18);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,.3);
}
.topbar-license-badge.license-free {
  background: rgba(245,158,11,.12);
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.25);
}

/* ---------- License Expiry Banner ---------- */
.license-expiry-banner {
  /* `body` is display:flex (row) so this banner used to land as a flex
   * column, blowing up to half-viewport width on the left. Lifting it out
   * of the body flow with position:fixed pins it as a true top bar that
   * spans the full width — independent of the sidebar/main flex layout. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border-bottom: 1px solid #f59e0b;
  padding: 8px 1.5rem;
  font-size: .82rem;
  color: #92400e;
  z-index: 1000;
}
.license-expiry-banner.hidden { display: none; }
/* When banner is visible, push the rest of the app down so the topbar
 * isn't covered. :has() works in all modern WebViews (Chrome 105+,
 * Safari 15.4+) — covers every Android the closed-test will touch. */
body:has(#licenseExpiryBanner:not(.hidden)) .sidebar,
body:has(#licenseExpiryBanner:not(.hidden)) #mainContent {
  padding-top: 40px;
}
.license-banner-icon {
  flex-shrink: 0;
  color: #f59e0b;
}
.license-banner-text {
  flex: 1;
}
.license-banner-text strong {
  margin-right: .4rem;
}
.license-banner-btn {
  flex-shrink: 0;
  background: #f59e0b;
  color: #fff;
  border: none;
  padding: 4px 14px;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.license-banner-btn:hover {
  background: #d97706;
}

/* ---------- Nav Premium Lock ---------- */
.nav-premium-locked {
  opacity: .55;
  position: relative;
}
.nav-premium-lock {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  color: var(--text-light, #9ca3af);
  flex-shrink: 0;
}
.sidebar .nav-premium-lock {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Dark mode adjustments */
[data-theme="dark"] .topbar-license-badge.license-active {
  background: rgba(34,197,94,.15);
  color: #4ade80;
  border-color: #4ade80;
}
[data-theme="dark"] .topbar-license-badge.license-expired {
  background: rgba(239,68,68,.15);
  color: #f87171;
  border-color: #f87171;
}
[data-theme="dark"] .topbar-license-badge.license-free {
  background: rgba(245,158,11,.1);
  color: #fbbf24;
  border-color: rgba(245,158,11,.25);
}
[data-theme="dark"] .license-expiry-banner {
  background: linear-gradient(90deg, #451a03, #78350f);
  border-color: #b45309;
  color: #fde68a;
}
[data-theme="dark"] .license-banner-icon {
  color: #fbbf24;
}

/* ---------- Help Sections ---------- */
.help-sections { display: flex; flex-direction: column; gap: 1rem; }

.help-item {
  padding: .75rem 1rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.help-item h4 {
  font-size: .9rem;
  margin-bottom: .3rem;
  color: var(--primary);
}

.help-item p {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.help-item kbd {
  display: inline-block;
  padding: .15rem .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .75rem;
  font-family: monospace;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ---------- About Logo ---------- */
.about-logo {
  margin-bottom: .5rem;
}

.badge {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--danger);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge:empty, .badge[data-count="0"] { display: none; }

/* ---------- Pages ---------- */
.page {
  display: none;
  padding: 1.75rem;
  flex: 1;
  animation: fadeIn .35s cubic-bezier(.4,0,.2,1);
}

.page.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Stats Grid ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity var(--transition);
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.stat-card:hover::before { opacity: 1; }

.stat-card.blue::before { background: var(--primary-gradient); }
.stat-card.green::before { background: linear-gradient(135deg, #059669, #10b981); }
.stat-card.teal::before { background: linear-gradient(135deg, #0d9488, #14b8a6); }
.stat-card.orange::before { background: linear-gradient(135deg, #d97706, #f59e0b); }
.stat-card.purple::before { background: linear-gradient(135deg, #7c3aed, #a78bfa); }

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition);
}

.stat-card:hover .stat-icon { transform: scale(1.1); }

.stat-card.blue .stat-icon { background: var(--primary-light); color: var(--primary); }
.stat-card.green .stat-icon { background: var(--success-light); color: var(--success); }
.stat-card.teal .stat-icon { background: #ccfbf1; color: #0d9488; }
.stat-card.orange .stat-icon { background: var(--warning-light); color: var(--warning); }
.stat-card.purple .stat-icon { background: var(--purple-light); color: var(--purple); }

.stat-info { display: flex; flex-direction: column; }
.stat-label { font-size: .7rem; color: var(--text-muted); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stat-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.025em; font-family: var(--font-display); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition);
  border: 1px solid var(--border);
}

.card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.07);
}

.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 { font-size: .92rem; font-weight: 700; letter-spacing: -.01em; font-family: var(--font-display); }

/* Dashboard card filter/search controls */
.dash-filter-group {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.dash-search {
  width: 120px;
  padding: .32rem .55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-size: .78rem;
  outline: none;
  transition: border-color .2s;
}
.dash-search:focus { border-color: var(--primary); }
.dash-select,
.dash-date {
  padding: .32rem .45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card);
  color: var(--text);
  font-size: .78rem;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.dash-select:focus,
.dash-date:focus { border-color: var(--primary); }
.dash-date { width: 120px; }

@media (max-width: 768px) {
  .card-header { flex-wrap: wrap; gap: .5rem; }
  .dash-filter-group { width: 100%; }
  .dash-search { flex: 1; min-width: 0; }
  .dash-select { flex: 1; min-width: 0; }
  .dash-date { flex: 1; min-width: 0; }
}

.card-body { padding: 1.15rem 1.25rem; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.reports-grid .full-width { grid-column: 1 / -1; }

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* ============================================================
   SETTINGS — MODERN CARD-BASED LAYOUT
   ============================================================ */
.stg-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 .5rem;
}

/* Page header */
.stg-header {
  margin-bottom: 1.5rem;
}
.stg-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text-primary);
}
.stg-header-sub {
  font-size: .82rem;
  color: var(--text-muted);
  margin: .25rem 0 0;
}

/* Card grid */
.stg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.stg-card-wide {
  grid-column: 1 / -1;
}

/* Card */
.stg-card {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.stg-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  border-color: rgba(99,102,241,.2);
}

/* Card header */
.stg-card-head {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 1.15rem .65rem;
}
.stg-card-head h3 {
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.stg-card-desc {
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Icon pill */
.stg-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stg-icon-blue  { background: rgba(59,130,246,.1);  color: #3b82f6; }
.stg-icon-violet { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.stg-icon-amber  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.stg-icon-green  { background: rgba(16,185,129,.1);  color: #10b981; }
.stg-icon-red    { background: rgba(239,68,68,.08);  color: #ef4444; }
.stg-icon-indigo { background: rgba(99,102,241,.1);  color: #6366f1; }

/* Card body */
.stg-card-body {
  padding: 0 1.15rem .65rem;
  flex: 1;
}

/* Card footer */
.stg-card-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.15rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.015);
  border-radius: 0 0 12px 12px;
}
.stg-card-foot-danger {
  background: rgba(239,68,68,.03);
}

/* ─── Navigation Reorder ─── */
.stg-nav-reorder {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stg-nav-reorder-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition: box-shadow .15s, border-color .15s, background .15s;
}
.stg-nav-reorder-item:hover {
  border-color: rgba(99,102,241,.3);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.stg-nav-reorder-item.dragging {
  opacity: .55;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  border-color: #6366f1;
  background: rgba(99,102,241,.04);
}
.stg-nav-reorder-item.drag-over {
  border-color: #6366f1;
  background: rgba(99,102,241,.06);
}
.stg-nav-reorder-grip {
  color: var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.stg-nav-reorder-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,.08);
  color: #6366f1;
  flex-shrink: 0;
}
.stg-nav-reorder-label {
  flex: 1;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-primary);
}
.stg-nav-reorder-num {
  font-size: .7rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 20px;
  text-align: center;
}
[data-theme="dark"] .stg-nav-reorder-item {
  background: var(--surface);
}
[data-theme="dark"] .stg-nav-reorder-item:hover {
  border-color: rgba(129,140,248,.35);
}
[data-theme="dark"] .stg-nav-reorder-item.dragging {
  background: rgba(99,102,241,.08);
  border-color: #818cf8;
}
[data-theme="dark"] .stg-nav-reorder-item.drag-over {
  background: rgba(99,102,241,.1);
  border-color: #818cf8;
}
[data-theme="dark"] .stg-nav-reorder-icon {
  background: rgba(129,140,248,.12);
  color: #a5b4fc;
}
[data-theme="dark"] .stg-icon-indigo {
  background: rgba(129,140,248,.12);
  color: #a5b4fc;
}

/* Logo upload area */
.stg-biz-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.stg-logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
}
.stg-logo-preview {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.stg-logo-preview:hover {
  border-color: var(--primary);
  background: rgba(99,102,241,.04);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.stg-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stg-logo-placeholder {
  color: var(--text-muted);
  opacity: .4;
}
.stg-logo-actions {
  display: flex;
  gap: .35rem;
}
.stg-logo-hint {
  font-size: .65rem;
  color: var(--text-muted);
}
.stg-checkbox-row {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .72rem; color: var(--text-secondary); -webkit-user-select: none; user-select: none;
}
.stg-checkbox-row input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer;
}
.stg-biz-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* ── Payment QR Code Grid ── */
.stg-qr-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.stg-qr-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  flex: 1;
  min-width: 120px;
  max-width: 180px;
}
.stg-qr-preview {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.stg-qr-preview:hover {
  border-color: var(--primary);
  background: rgba(99,102,241,.04);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.stg-qr-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.stg-qr-placeholder {
  color: var(--text-muted);
  opacity: .35;
}
.stg-qr-label-input {
  width: 120px;
  padding: 4px 8px;
  font-size: .72rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  outline: none;
  transition: border-color .2s;
}
.stg-qr-label-input:focus {
  border-color: var(--primary);
}
.stg-qr-actions {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── QR Image Editor Modal ── */
.qred-cam-viewport {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
.qred-cam-viewport video {
  width: 100%;
  display: block;
}
.qred-cam-guide {
  position: absolute;
  top: 50%; left: 50%;
  width: 60%; height: 0;
  padding-bottom: 60%;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 10px;
  pointer-events: none;
}
.qred-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  background: var(--bg-secondary, #f9fafb);
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
}
.qred-canvas-wrap canvas {
  display: block;
  border-radius: 4px;
}
.qred-crop-box {
  position: absolute;
  cursor: move;
  touch-action: none;
}
.qred-crop-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: #6366f1;
  border: 2px solid #fff;
  border-radius: 50%;
  touch-action: none;
  z-index: 2;
}
.qred-crop-nw { top: -7px; left: -7px; cursor: nw-resize; }
.qred-crop-ne { top: -7px; right: -7px; cursor: ne-resize; }
.qred-crop-sw { bottom: -7px; left: -7px; cursor: sw-resize; }
.qred-crop-se { bottom: -7px; right: -7px; cursor: se-resize; }
.qred-controls {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qred-size-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.qred-size-row label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.qred-size-input {
  width: 68px;
  padding: 4px 6px;
  font-size: .78rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.qred-size-input:focus {
  border-color: var(--primary);
}
.qred-size-x {
  font-size: .8rem;
  color: var(--text-muted);
}
.qred-lock-label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--text-secondary);
}
.qred-lock-label input { display: none; }
.qred-lock-label svg { opacity: .5; transition: opacity .2s, color .2s; }
.qred-lock-label input:checked + svg { opacity: 1; color: var(--primary); }
.qred-btn-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.btn-ghost {
  background: none;
  border: none;
  color: var(--danger, #ef4444);
  font-size: .72rem;
  padding: .2rem .45rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.btn-ghost:hover {
  background: rgba(239,68,68,.08);
}
.btn-outline {
  background: none;
  border: 1.5px solid var(--border);
  color: var(--text-secondary);
  font-size: .72rem;
  padding: .22rem .6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-xs {
  font-size: .72rem;
  padding: .22rem .6rem;
}

/* Settings fields */
.stg-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.stg-field label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.stg-field input,
.stg-field select,
.stg-select {
  padding: .5rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: .84rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.stg-field input:focus,
.stg-field select:focus,
.stg-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.stg-input-short {
  max-width: 120px;
}
.stg-exchange-row {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.stg-exchange-prefix,
.stg-exchange-suffix {
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.stg-exchange-suffix {
  font-size: 1rem;
  color: var(--primary);
}
.stg-input-rate {
  width: 110px;
  padding: .5rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: .84rem;
  font-weight: 600;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.stg-input-rate:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.stg-input-size {
  width: 68px;
  padding: .5rem .5rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: .84rem;
  outline: none;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
}
.stg-input-size:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.stg-field-hint {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: .1rem;
}

/* Font groups */
.stg-font-group {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .6rem;
  padding: .55rem .7rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.stg-font-lang {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 95px;
  flex-shrink: 0;
}
.stg-font-controls {
  display: flex;
  gap: .4rem;
  flex: 1;
  align-items: center;
}
.stg-font-controls .stg-select {
  flex: 1;
}

/* Font preview */
.stg-font-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .6rem .85rem;
  margin-top: .15rem;
}
.stg-font-preview p {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.stg-font-preview p + p {
  margin-top: .25rem;
}

/* Metadata grid (updates) */
.stg-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .15rem .65rem;
  margin-bottom: .25rem;
  padding: .5rem .65rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.stg-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem 0;
}
.stg-meta-label {
  font-size: .74rem;
  color: var(--text-muted);
}
.stg-meta-value {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* Data info block */
.stg-data-info {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .65rem .75rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.stg-data-info svg {
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: .1rem;
}
.stg-data-info p {
  margin: 0;
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* URL field */
.stg-field-url {
  margin-bottom: .6rem;
}
.stg-url-row {
  display: flex;
  gap: .4rem;
  align-items: center;
}
.stg-url-row input {
  flex: 1;
  padding: .5rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: .8rem;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.stg-url-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.stg-url-row input::placeholder {
  font-family: inherit;
  opacity: .5;
}

/* Local Server Card */
.lsrv-toggle-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.lsrv-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.lsrv-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.lsrv-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 22px;
  transition: background .25s;
}

.lsrv-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.lsrv-switch input:checked + .lsrv-slider {
  background: var(--success);
}

.lsrv-switch input:checked + .lsrv-slider::before {
  transform: translateX(18px);
}

.lsrv-toggle-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.lsrv-status-badge {
  margin-left: auto;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .18rem .55rem;
  border-radius: 99px;
  background: var(--bg);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.lsrv-badge-running {
  background: rgba(5,150,105,.08);
  color: #059669;
  border-color: rgba(5,150,105,.2);
}

.lsrv-url {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: .75rem;
  letter-spacing: -.01em;
  -webkit-user-select: all;
  user-select: all;
}

.lsrv-checkbox-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.lsrv-checkbox-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
}

/* Responsive: stack on small */
@media (max-width: 768px) {
  .stg-grid { grid-template-columns: 1fr; }
  .stg-card-wide { grid-column: auto; }
}
@media (max-width: 600px) {
  .stg-biz-layout { flex-direction: column; }
  .stg-logo-area { flex-direction: row; gap: .6rem; align-items: center; }
  .stg-font-group { flex-direction: column; align-items: stretch; }
  .stg-font-lang { min-width: auto; }
  .stg-meta-grid { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
  border: none;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  letter-spacing: -.005em;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,.1), transparent);
  pointer-events: none;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,.25); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(79,70,229,.35); transform: translateY(-1px); }

.btn-secondary { background: var(--surface); color: var(--text-primary); border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--bg); border-color: var(--text-muted); }

.btn-danger { background: var(--danger); color: #fff; box-shadow: 0 2px 8px rgba(220,38,38,.2); }
.btn-danger:hover { background: #b91c1c; box-shadow: 0 4px 14px rgba(220,38,38,.3); transform: translateY(-1px); }

.btn-accent { background: #16a34a; color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.22); }
.btn-accent:hover { background: #15803d; box-shadow: 0 4px 14px rgba(22,163,74,.32); transform: translateY(-1px); }

.btn-danger-outline { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.btn-danger-outline:hover { background: var(--danger); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.25); transform: translateY(-1px); }

.btn-sm { padding: .38rem .8rem; font-size: .78rem; }
.btn-small { padding: .32rem .7rem; font-size: .76rem; }
.btn-link { color: var(--primary); font-weight: 600; font-size: .84rem; }
.btn-link:hover { text-decoration: underline; }
.btn-link::after { display: none; }

/* ---------- Page Actions ---------- */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.filter-group select,
.filter-group input[type="date"] {
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--text-primary);
  font-size: .85rem;
}

/* ---------- Date Picker Icon (iOS / Android WebView) ---------- */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 18px 18px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1;
  background: transparent;
  color: transparent;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
[data-theme="dark"] input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* ---------- Data Table ---------- */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  /* Prevent table from shrinking below content on Android */
  min-width: max-content;
}

.data-table thead { background: var(--bg); }

.data-table th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

.data-table td {
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  vertical-align: middle;
  word-break: break-word;
}

.data-table tbody tr {
  transition: background var(--transition);
}

.data-table tbody tr:nth-child(even) { background: rgba(0,0,0,.012); }
.data-table tbody tr:hover { background: rgba(99,102,241,.04); }

[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: rgba(255,255,255,.015); }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(99,102,241,.07); }

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.status-badge.in-stock { background: var(--success-light); color: var(--success); }
.status-badge.low-stock { background: var(--warning-light); color: var(--warning); }
.status-badge.out-of-stock { background: var(--danger-light); color: var(--danger); }

.action-btns {
  display: flex;
  gap: .35rem;
}

.action-btns button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.action-btns .btn-edit:hover { background: var(--primary-light); color: var(--primary); transform: scale(1.1); }
.action-btns .btn-delete:hover { background: var(--danger-light); color: var(--danger); transform: scale(1.1); }

/* ---------- Multi-Select ---------- */
.ms-bar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--primary);
  color: #fff;
  padding: .55rem 1rem;
  border-radius: 10px;
  margin-bottom: .75rem;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 4px 18px rgba(79,70,229,.25);
  animation: ms-bar-in .2s ease;
}
.ms-bar.active { display: flex; }
@keyframes ms-bar-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.ms-bar .ms-count { font-weight: 700; font-size: .92rem; white-space: nowrap; }
.ms-bar .ms-spacer { flex: 1; }
.ms-bar .btn-ms-delete {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  padding: .35rem .9rem;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: background .15s;
}
.ms-bar .btn-ms-delete:hover { background: var(--danger); border-color: var(--danger); }
.ms-bar .btn-ms-cancel {
  background: transparent;
  color: rgba(255,255,255,.85);
  border: none;
  padding: .35rem .7rem;
  border-radius: 7px;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s;
}
.ms-bar .btn-ms-cancel:hover { color: #fff; }

.ms-check {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.data-table th .ms-check { margin: 0; }
.data-table td .ms-check { margin: 0; }

.category-card .ms-check-wrap {
  position: absolute;
  top: .55rem;
  right: .55rem;
}
.category-card { position: relative; }

/* ---------- Category View Toggle ---------- */
.cat-view-toggle {
  display: flex;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px;
}
.btn-view {
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  padding: 6px 8px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  transition: background var(--transition), color var(--transition);
}
.btn-view:hover { background: var(--hover); }
.btn-view.active {
  background: var(--primary);
  color: #fff;
}

/* ---------- Categories Table Color Swatch ---------- */
.cat-color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  border: 1px solid var(--border);
}

/* ---------- Categories Grid ---------- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.category-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.2rem;
  border-left: 4px solid var(--primary);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: transform var(--transition), box-shadow var(--transition);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
}

.category-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.category-card h4 { font-size: 1rem; font-weight: 600; }

.category-card .product-count { font-size: .85rem; color: var(--text-secondary); }

/* ---------- Forms ---------- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .85rem;
}

.form-group label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: .01em;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: .6rem .85rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  font-size: .85rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.form-group textarea { resize: vertical; }

/* Numeric text inputs — typeable number fields */
input[data-numeric] {
  font-variant-numeric: tabular-nums;
  font-family: 'Inter', var(--font-display), system-ui, sans-serif;
  letter-spacing: .01em;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* ---------- Modals ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  display: none;
  align-items: center;
  justify-content: center;
  /* Above .login-screen (z-index: 10000) and .login-win-drag (10001) so
     the license modal opened from the "Activate License" button on the
     login screen is actually visible. Toasts at 99999 still cover this. */
  z-index: 10002;
  padding: 1rem;
}

.modal-overlay.active { display: flex; }

.modal {
  background: var(--surface);
  border-radius: 16px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 64px rgba(0,0,0,.18);
  animation: modalSlideUp .3s cubic-bezier(.4,0,.2,1);
  border: 1px solid var(--border);
}

.modal-sm { max-width: 440px; }
.modal-xs { max-width: 380px; }

@keyframes modalSlideUp { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; font-family: var(--font-display); }

.modal-close {
  font-size: 1.5rem;
  color: var(--text-muted);
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition);
}

.modal-close:hover { color: var(--text-primary); background: var(--bg); }

.modal-body {
  padding: 1.5rem;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.modal-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  margin-top: .5rem;
}
.modal-actions > * + * { margin-left: .75rem; }

/* ---------- Notification Panel ---------- */
.notif-panel {
  position: fixed;
  top: 42px;
  right: 0;
  width: 380px;
  max-height: calc(100vh - 42px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,.1);
  z-index: 150;
  display: none;
  flex-direction: column;
  animation: notifSlide .25s cubic-bezier(.4,0,.2,1);
}

@keyframes notifSlide { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.notif-panel.active { display: flex; }

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.notif-header h3 { font-size: 1rem; }

.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: .75rem;
}

.notif-item {
  display: flex;
  gap: .75rem;
  padding: .75rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  margin-bottom: .25rem;
}

.notif-item:hover { background: var(--bg); }

.notif-item .notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  margin-top: .4rem;
}

.notif-item .notif-text { font-size: .85rem; color: var(--text-secondary); line-height: 1.4; }
.notif-item .notif-text strong { color: var(--text-primary); }

/* ---------- Toast ---------- */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 300;
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
}

.toast {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.15rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  font-size: .84rem;
  font-weight: 500;
  animation: toastIn .3s cubic-bezier(.4,0,.2,1);
  max-width: 380px;
  border: 1px solid var(--border);
}

.toast.success { border-left: 4px solid var(--success); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--warning); }
.toast.info { border-left: 4px solid var(--primary); }

@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-size: .92rem;
  font-weight: 500;
}

/* ---------- Chart / Bars ---------- */
.chart-container { min-height: 200px; }

.bar-chart {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.bar-label {
  width: 100px;
  font-size: .8rem;
  text-align: right;
  color: var(--text-secondary);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-track {
  flex: 1;
  height: 26px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  min-width: 2px;
  background-image: linear-gradient(90deg, rgba(255,255,255,.15) 0%, transparent 100%);
}

.bar-value {
  width: 50px;
  font-size: .8rem;
  font-weight: 600;
  text-align: right;
}

/* ---------- Export ---------- */
.export-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.import-btn { cursor: pointer; }

/* ---------- Summary ---------- */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.summary-item .label { font-size: .8rem; color: var(--text-secondary); }
.summary-item .value { font-size: 1.25rem; font-weight: 700; }

/* ---------- Low Stock Item ---------- */
.low-stock-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
}

.low-stock-item:last-child { border-bottom: none; }
.low-stock-item .product-name { font-weight: 600; font-size: .9rem; }
.low-stock-item .product-qty { font-size: .85rem; color: var(--danger); font-weight: 600; }

/* ---------- Transaction Item ---------- */
.trans-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
}

.trans-item:last-child { border-bottom: none; }
.trans-item .trans-info { display: flex; flex-direction: column; gap: .15rem; }
.trans-item .trans-product { font-weight: 600; font-size: .9rem; }
.trans-item .trans-date { color: var(--text-muted); font-size: .78rem; }
.trans-item .trans-badge {
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
}

.trans-badge.stock-in { background: var(--success-light); color: var(--success); }
.trans-badge.stock-out { background: var(--danger-light); color: var(--danger); }
.trans-badge.adjustment { background: var(--primary-light); color: var(--primary); }

/* ---------- Top Products ---------- */
.top-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
}

.top-product-row:last-child { border-bottom: none; }
.top-product-row .rank { width: 30px; font-weight: 700; color: var(--text-muted); }
.top-product-row .name { flex: 1; font-weight: 600; }
.top-product-row .value { font-weight: 700; color: var(--primary); }

/* =========================================
   RESPONSIVE — MOBILE (< 768px)
   ========================================= */
@media (max-width: 768px) {
  .hamburger { display: flex; }

  .topbar-nav { display: none; }
  .topbar-brand-text { display: none; }
  .topbar-search { display: none; }

  .topbar-user-info { display: none; }
  .topbar-user-chevron { display: none; }
  .topbar-user-btn { padding: .2rem; }

  .user-dropdown { width: 240px; right: 0; max-width: calc(100vw - 1rem); }

  .page { padding: 1rem; }

  .dashboard-grid,
  .reports-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .stg-panel { max-width: 100%; }

  .form-row { grid-template-columns: 1fr; }

  .page-actions { flex-direction: column; align-items: stretch; }

  .filter-group { flex-direction: column; }

  /* Hide less-important columns on mobile; keep Type (retail/wholesale) visible */
  #salesTable th:nth-child(6),
  #salesTable td:nth-child(6),
  #salesTable th:nth-child(8),
  #salesTable td:nth-child(8) { display: none; }

  .table-wrapper {
    overflow-x: auto;
  }

  .notif-panel { width: 100%; }

  .stat-card { padding: 1rem; }
  .stat-value { font-size: 1.25rem; }
}

/* =========================================
   RESPONSIVE — TABLET (769 – 1024)
   ========================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-tab span { display: none; }
  .topbar-brand-sub { display: none; }
  .topbar-search { max-width: 260px; }
}

/* =========================================
   SAFE AREAS (iOS notch support)
   ========================================= */
@supports (padding: env(safe-area-inset-top)) {
  .topbar-primary { padding-top: env(safe-area-inset-top); }
  .sidebar { padding-top: env(safe-area-inset-top); }
  .toast-container { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Scrollbar Styling ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ---------- Selection ---------- */
::selection { background: rgba(99,102,241,.18); color: inherit; }

/* ---------- Focus-Visible ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .modal-overlay, .toast-container, .notif-panel { display: none !important; }
  .main-content { margin-left: 0; }
  .page { display: block !important; }
}

/* =========================================
   SALES MODULE STYLES
   ========================================= */

/* ---------- Button Group ---------- */
.btn-group { display: flex; gap: .5rem; }

.btn-wholesale { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: .5rem; padding: .65rem 1.35rem; border-radius: var(--radius-sm); font-size: .875rem; font-weight: 600; -webkit-transition: all .2s ease; transition: all .2s ease; white-space: nowrap; border: none; box-shadow: 0 2px 8px rgba(13,148,136,.25); -webkit-tap-highlight-color: transparent; }
.btn-wholesale svg { margin-right: .15rem; } /* gap fallback for older Android WebView */
@media (hover: hover) and (pointer: fine) {
  .btn-wholesale:hover { background: linear-gradient(135deg, #0f766e, #0d9488); box-shadow: 0 4px 14px rgba(13,148,136,.35); transform: translateY(-1px); }
}
.btn-wholesale:active { transform: scale(0.97); }

/* ---------- Sales Summary Bar ---------- */
.sales-summary-bar {
  display: flex;
  gap: 1rem;
  padding: 1.15rem;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.sales-summary-item {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-align: center;
  padding: .5rem;
}

.sales-summary-item .label { font-size: .78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.sales-summary-item .value { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }

.retail-color { color: var(--primary); }
.wholesale-color { color: #0d9488; }
.profit-color { color: var(--success); }

/* ---------- Sales Stat Grid (Icon-based) ---------- */
.sales-stat-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.sales-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  box-shadow: var(--shadow-card);
  border-left: 4px solid #e5e7eb;
  -webkit-transition: transform .2s ease, box-shadow .2s ease;
  transition: transform .2s ease, box-shadow .2s ease;
  flex: 1 1 calc(25% - .75rem);
  min-width: 200px;
  box-sizing: border-box;
}

/* Flexbox gap fallback for older iOS Safari */
.sales-stat-icon {
  margin-right: .85rem;
}

/* Only apply hover effects on devices with hover capability (not touch) */
@media (hover: hover) and (pointer: fine) {
  .sales-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
}

/* Touch feedback for mobile (iOS + Android) */
.sales-stat-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.sales-stat-card {
  -webkit-tap-highlight-color: transparent;
}

.sales-stat-card.ss-today { border-left-color: #3b82f6; }
.sales-stat-card.ss-retail { border-left-color: #4f46e5; }
.sales-stat-card.ss-wholesale { border-left-color: #0d9488; }
.sales-stat-card.ss-profit { border-left-color: #10b981; }

.sales-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.sales-stat-card.ss-today .sales-stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.sales-stat-card.ss-retail .sales-stat-icon { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }
.sales-stat-card.ss-wholesale .sales-stat-icon { background: rgba(13, 148, 136, 0.1); color: #0d9488; }
.sales-stat-card.ss-profit .sales-stat-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.sales-stat-info {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}
.sales-stat-info > * + * { margin-top: .1rem; }
.sales-stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.sales-stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); overflow: hidden; text-overflow: ellipsis; }

.sales-stat-card.ss-today .sales-stat-value { color: #3b82f6; }
.sales-stat-card.ss-retail .sales-stat-value { color: #4f46e5; }
.sales-stat-card.ss-wholesale .sales-stat-value { color: #0d9488; }
.sales-stat-card.ss-profit .sales-stat-value { color: #10b981; }

@media (max-width: 1024px) {
  .sales-stat-card { flex: 1 1 calc(50% - .5rem); min-width: 160px; }
}

@media (max-width: 768px) {
  .sales-stat-card { flex: 1 1 100%; min-width: 0; }
}

@media (max-width: 480px) {
  .sales-stat-card { padding: .85rem; }
  .sales-stat-icon { width: 38px; height: 38px; margin-right: .65rem; }
  .sales-stat-value { font-size: 1.15rem; }
  .sales-stat-label { font-size: .7rem; }
}

/* ---------- Sale Items in Modal ---------- */
.sale-items-section { margin-bottom: 1rem; }

.sale-items-header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  margin-bottom: .75rem;
}

.sale-items-header h4 { font-size: .95rem; }

.sale-items-list {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.sale-items-list > * + * { margin-top: .5rem; }

.sale-item-row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: center;
  align-items: center;
  padding: .6rem .75rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
  box-sizing: border-box;
}
/* Flex-gap fallback — margin-based spacing for iOS Safari */
.sale-item-row > select { margin-bottom: .5rem; }
.sale-item-row > :nth-child(n+3) { margin-left: .5rem; }

.sale-item-row select {
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  min-width: 0;
}

.sale-item-row input {
  -webkit-flex: 1 1 55px;
  flex: 1 1 55px;
  min-width: 0;
  max-width: 110px;
}

.sale-item-row select,
.sale-item-row input {
  padding: .45rem .55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .82rem;
  background: var(--surface);
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
}

.sale-item-row .item-total {
  font-size: .85rem;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

.sale-item-row .remove-item {
  color: var(--danger);
  font-size: 1.2rem;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-transition: background .2s ease;
  transition: background .2s ease;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .sale-item-row .remove-item:hover { background: var(--danger-light); }
}
.sale-item-row .remove-item:active { background: var(--danger-light); }

/* ---------- Sale Totals ---------- */
.sale-totals {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1rem;
}

.sale-total-row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: baseline;
  align-items: baseline;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .35rem 0;
  font-size: .9rem;
  max-width: 100%;
}
.sale-total-row > * + * { margin-left: .75rem; }
.sale-total-row > span:last-child,
.sale-total-row > #saleSubtotal,
.sale-total-row > #saleTotal,
.sale-total-row > #saleProfit {
  text-align: right;
  word-break: break-all;
  min-width: 0;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

.sale-total-row.total {
  border-top: 2px solid var(--border);
  padding-top: .75rem;
  margin-top: .35rem;
  font-size: 1.1rem;
  font-weight: 700;
}

.sale-total-row.profit-row { color: var(--success); font-weight: 600; }

.sale-total-row input {
  width: 80px;
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: right;
  font-size: .85rem;
  background: var(--surface);
  color: var(--text-primary);
}

/* ---------- Sale Type Badges ---------- */
.sale-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.sale-badge.retail { background: var(--primary-light); color: var(--primary); }
.sale-badge.wholesale { background: #ccfbf1; color: #0d9488; }

@media screen and (max-width: 480px) {
  .sale-badge {
    padding: .15rem .45rem;
    font-size: .62rem;
  }
}

/* Sale Payment Status Badges */
.sale-pay-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sale-pay-paid { background: #dcfce7; color: #16a34a; }
.sale-pay-partial { background: #fef3c7; color: #d97706; }
.sale-pay-unpaid { background: #fee2e2; color: #dc2626; }

[data-theme="dark"] .sale-pay-paid { background: rgba(22,163,74,.15); color: #4ade80; }
[data-theme="dark"] .sale-pay-partial { background: rgba(217,119,6,.15); color: #fbbf24; }
[data-theme="dark"] .sale-pay-unpaid { background: rgba(220,38,38,.15); color: #f87171; }

/* Pay Invoice button in sales action column */
.btn-pay-invoice {
  background: none; border: none; cursor: pointer; padding: .3rem;
  color: #16a34a; border-radius: .3rem; transition: background .15s;
}
.btn-pay-invoice:hover { background: rgba(22,163,74,.1); }
[data-theme="dark"] .btn-pay-invoice { color: #4ade80; }
[data-theme="dark"] .btn-pay-invoice:hover { background: rgba(74,222,128,.1); }

/* Sale detail: payment summary */
.sale-payment-summary {
  margin-top: .8rem;
  padding: .6rem .8rem;
  border-radius: .5rem;
  background: var(--background, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
}
.sale-payment-summary .row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .25rem 0;
  font-size: .85rem;
  word-break: break-all;
}

/* Sale detail: payment history mini-table */
.sale-payments-history { margin-top: .6rem; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mini-table th, .mini-table td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid var(--border-light, #e2e8f0); }
.mini-table th { font-weight: 600; color: var(--text-secondary); font-size: .75rem; text-transform: uppercase; }

/* Invoice balance hint in payment modal */
.invoice-balance-hint {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  font-weight: 500;
}

/* ---------- Sale Detail ---------- */
.sale-detail-header {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sale-detail-header > * + * { margin-left: .75rem; }

.sale-detail-info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-width: 0;
}
.sale-detail-info > * + * { margin-top: .2rem; }
.sale-detail-info .label { font-size: .78rem; color: var(--text-secondary); }
.sale-detail-info .value { font-weight: 600; word-break: break-word; }

.sale-detail-items {
  margin: 1rem 0;
  overflow-x: auto;
}

.sale-detail-items table { width: 100%; min-width: 400px; }
.sale-detail-items th {
  text-align: left; font-size: .78rem; color: var(--text-secondary);
  text-transform: uppercase; padding: .5rem; border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.sale-detail-items td { padding: .5rem; border-bottom: 1px solid var(--border); font-size: .85rem; }

.sale-detail-totals {
  text-align: right;
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 2px solid var(--border);
}

.sale-detail-totals .row {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .25rem 0;
  word-break: break-all;
}
.sale-detail-totals .row > * + * { margin-left: 2rem; }
.sale-detail-totals .row > span:last-child {
  font-variant-numeric: tabular-nums;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}
.sale-detail-totals .row.grand { font-size: 1.15rem; font-weight: 700; }

/* ---------- Invoice Actions ---------- */
.invoice-actions {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e7eb);
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.invoice-actions > * + * { margin-left: .5rem; }
.invoice-size-select {
  padding: .35rem .55rem;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-primary, #111);
  font-size: .8rem;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.invoice-size-select:focus { border-color: var(--primary); }
.invoice-actions .btn {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
}
.invoice-actions .btn > * + * { margin-left: .35rem; }
.invoice-actions .btn svg {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* Hidden render area (off-screen for image export) */
.invoice-render-area {
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Dashboard sales breakdown ---------- */
.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.breakdown-card {
  padding: 1.1rem;
  border-radius: var(--radius);
  text-align: center;
  transition: transform var(--transition);
}

.breakdown-card:hover { transform: translateY(-2px); }

.breakdown-card.retail-card { background: var(--primary-light); }
.breakdown-card.wholesale-card { background: #ccfbf1; }

.breakdown-card .breakdown-label { font-size: .78rem; color: var(--text-secondary); margin-bottom: .25rem; }
.breakdown-card .breakdown-value { font-size: 1.3rem; font-weight: 800; font-family: var(--font-display); }
.breakdown-card .breakdown-count { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }

.breakdown-card.retail-card .breakdown-value { color: var(--primary); }
.breakdown-card.wholesale-card .breakdown-value { color: #0d9488; }

/* ---------- Responsive overrides for sales ---------- */
@media (max-width: 768px) {
  /* Stack layout: select full-width → qty+price full-width → total+remove */
  .sale-item-row {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .sale-item-row select {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    width: 100%;
    margin-bottom: .4rem;
  }

  .sale-item-row input {
    -webkit-flex: 1 1 calc(50% - .4rem);
    flex: 1 1 calc(50% - .4rem);
    min-width: 0;
    max-width: none;
    width: auto;
    box-sizing: border-box;
    font-size: .88rem;
    padding: .5rem .6rem;
  }

  .sale-item-row > select {
    margin-bottom: .4rem;
  }

  .sale-item-row > :nth-child(n+3) {
    margin-left: .4rem;
  }

  .sale-item-row input:first-of-type {
    margin-left: 0;
  }

  .sale-item-row .item-total {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    -webkit-order: 4;
    order: 4;
    min-width: 0;
    margin-left: 0;
    margin-top: .4rem;
    text-align: left;
    font-size: .9rem;
  }

  .sale-item-row .remove-item {
    -webkit-order: 5;
    order: 5;
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 1.3rem;
    margin-top: .4rem;
    margin-left: auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }

  .sale-detail-header {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .sale-detail-header > * + * { margin-left: 0; margin-top: .5rem; }

  .sale-detail-info {
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px solid var(--border);
  }
  .sale-detail-info > * + * { margin-top: 0; }

  .sale-detail-totals .row > * + * {
    margin-left: 1rem;
  }

  .btn-group { flex-direction: column; }
  .sales-summary-bar { flex-direction: column; }
  .breakdown-grid { grid-template-columns: 1fr; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .sale-item-row {
    padding: .5rem;
  }

  .sale-item-row select,
  .sale-item-row input {
    font-size: .8rem;
    padding: .4rem .45rem;
    min-height: 40px;
  }

  .sale-item-row .item-total {
    font-size: .8rem;
  }

  .sale-item-row .remove-item {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .sale-totals {
    padding: .75rem;
  }

  .sale-total-row {
    font-size: .85rem;
  }

  .sale-total-row.total {
    font-size: 1rem;
  }

  .sale-total-row input {
    width: 70px;
    min-height: 38px;
  }

  .sale-detail-items td,
  .sale-detail-items th {
    padding: .35rem;
    font-size: .78rem;
  }

  .sale-detail-totals .row {
    font-size: .85rem;
  }
  .sale-detail-totals .row > * + * { margin-left: .5rem; }

  .sale-detail-totals .row.grand {
    font-size: 1rem;
  }

  .modal-actions {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .modal-actions > * + * { margin-left: 0; margin-top: .5rem; }

  .modal-actions .btn {
    width: 100%;
    -webkit-justify-content: center;
    justify-content: center;
  }
}

/* ---------- Khmer language overrides for sales ---------- */
html[lang="km"] .sale-item-row select,
html[lang="km"] .sale-item-row input {
  font-size: .88rem;
  line-height: 1.6;
  padding: .5rem .6rem;
}

html[lang="km"] .sale-item-row select {
  min-height: 44px;
}

/* Khmer mobile: font-size overrides for wider glyphs
   (3-row layout now handled by general responsive rules) */
@media (max-width: 768px) {
  html[lang="km"] .sale-item-row .item-total {
    font-size: .9rem;
  }
}

html[lang="km"] .sale-item-row .item-total {
  line-height: 1.6;
  font-family: 'Inter', var(--font-body), sans-serif;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
}

html[lang="km"] .sale-total-row {
  font-size: .92rem;
  line-height: 1.6;
  padding: .45rem 0;
}

html[lang="km"] .sale-total-row > span:last-child,
html[lang="km"] .sale-total-row > #saleSubtotal,
html[lang="km"] .sale-total-row > #saleTotal,
html[lang="km"] .sale-total-row > #saleProfit {
  font-family: 'Inter', var(--font-body), sans-serif;
}

html[lang="km"] .sale-total-row.total {
  font-size: 1.1rem;
}

html[lang="km"] .form-group label {
  font-size: .82rem;
  line-height: 1.5;
}

html[lang="km"] .sale-detail-totals .row {
  line-height: 1.6;
}

html[lang="km"] .sale-detail-totals .row > span:last-child {
  font-family: 'Inter', var(--font-body), sans-serif;
}

html[lang="km"] .sale-detail-items td {
  line-height: 1.5;
  font-size: .88rem;
}

html[lang="km"] .sale-payment-summary .row {
  line-height: 1.6;
  font-size: .88rem;
}

html[lang="km"] .sale-payment-summary .row > span:last-child {
  font-family: 'Inter', var(--font-body), sans-serif;
}

@media (max-width: 480px) {
  html[lang="km"] .sale-item-row select,
  html[lang="km"] .sale-item-row input {
    font-size: .84rem;
    min-height: 42px;
  }

  html[lang="km"] .sale-item-row .item-total {
    font-size: .84rem;
  }

  html[lang="km"] .sale-total-row {
    font-size: .88rem;
  }

  html[lang="km"] .sale-total-row.total {
    font-size: 1.02rem;
  }
}

/* ============================================================
   ACCOUNTS / ACCOUNTANT MODULE
   ============================================================ */

/* ---------- Accounts Summary Cards ---------- */
.accounts-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.acc-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.acc-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.acc-stat-card.income { border-left-color: var(--success); }
.acc-stat-card.expense { border-left-color: var(--danger); }
.acc-stat-card.profit { border-left-color: var(--primary); }
.acc-stat-card.balance { border-left-color: var(--warning); }

.acc-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acc-stat-card.income .acc-stat-icon { background: rgba(16, 185, 129, 0.1); color: var(--success); }
.acc-stat-card.expense .acc-stat-icon { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.acc-stat-card.profit .acc-stat-icon { background: var(--primary-light); color: var(--primary); }
.acc-stat-card.balance .acc-stat-icon { background: rgba(245, 158, 11, 0.1); color: var(--warning); }

.acc-stat-info { display: flex; flex-direction: column; gap: .15rem; }
.acc-stat-label { font-size: .78rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.acc-stat-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }

.acc-stat-card.income .acc-stat-value { color: var(--success); }
.acc-stat-card.expense .acc-stat-value { color: var(--danger); }
.acc-stat-card.profit .acc-stat-value { color: var(--primary); }
.acc-stat-card.balance .acc-stat-value { color: var(--warning); }

/* ---------- Accounts Controls ---------- */
.accounts-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .75rem;
}

.accounts-controls h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}

/* ---------- Accounts Grid (P&L / Breakdown) ---------- */
.accounts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* ---------- Ledger Type Badge ---------- */
.ledger-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
}

.ledger-badge.income { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.ledger-badge.expense { background: rgba(239, 68, 68, 0.12); color: var(--danger); }

/* ---------- P&L Summary ---------- */
.pl-table { width: 100%; }

.pl-table tr td {
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}

.pl-table tr td:last-child { text-align: right; font-weight: 600; }
.pl-table tr.pl-total td { border-top: 2px solid var(--border); font-weight: 700; font-size: 1rem; }
.pl-table tr.pl-total.positive td:last-child { color: var(--success); }
.pl-table tr.pl-total.negative td:last-child { color: var(--danger); }

.pl-section-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: .75rem .5rem .35rem;
  letter-spacing: .04em;
}

/* ---------- Expense Breakdown Chart ---------- */
.expense-bar-list { display: flex; flex-direction: column; gap: .65rem; }

.expense-bar-item {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.expense-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
}

.expense-bar-header .cat-name { font-weight: 600; }
.expense-bar-header .cat-amount { color: var(--text-secondary); }

.expense-bar-track {
  height: 8px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}

.expense-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s ease;
}

/* ---------- Accounts Amount Colors ---------- */
.amount-income { color: var(--success); font-weight: 600; }
.amount-expense { color: var(--danger); font-weight: 600; }

/* ---------- Responsive Accounts ---------- */
@media (max-width: 1024px) {
  .accounts-summary { grid-template-columns: repeat(2, 1fr); }
  .accounts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .accounts-summary { grid-template-columns: 1fr; }
  .accounts-controls { flex-direction: column; align-items: stretch; }
  .accounts-controls .page-actions { flex-direction: column; }
}

/* ============================================================
   TRANSPORTATION MODULE
   ============================================================ */

/* ---------- Transport Summary Cards ---------- */
.transport-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.transport-stat {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.transport-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.transport-stat.pending { border-left-color: #f59e0b; }
.transport-stat.in-transit { border-left-color: #3b82f6; }
.transport-stat.delivered { border-left-color: #10b981; }
.transport-stat.total-cost { border-left-color: #8b5cf6; }

.transport-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transport-stat.pending .transport-stat-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.transport-stat.in-transit .transport-stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.transport-stat.delivered .transport-stat-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.transport-stat.total-cost .transport-stat-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

.transport-stat-info { display: flex; flex-direction: column; gap: .1rem; }
.transport-stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.transport-stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }

.transport-stat.pending .transport-stat-value { color: #f59e0b; }
.transport-stat.in-transit .transport-stat-value { color: #3b82f6; }
.transport-stat.delivered .transport-stat-value { color: #10b981; }
.transport-stat.total-cost .transport-stat-value { color: #8b5cf6; }

/* ---------- Transport Status Badges ---------- */
.status-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-badge.pending { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.status-badge.in-transit { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.status-badge.delivered { background: rgba(16, 185, 129, 0.12); color: #047857; }
.status-badge.cancelled { background: rgba(107, 114, 128, 0.12); color: #4b5563; }

/* ---------- Direction Badges ---------- */
.dir-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
}

.dir-badge.outgoing { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.dir-badge.incoming { background: rgba(16, 185, 129, 0.1); color: #059669; }

/* ---------- Shipment Items in Modal ---------- */
.shipment-items-section { margin-bottom: 1rem; }

.shipment-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}

.shipment-items-header h4 { font-size: .95rem; }

.shipment-items-list { display: flex; flex-direction: column; gap: .5rem; }

.shipment-item-row {
  display: grid;
  grid-template-columns: 1fr 80px 40px;
  gap: .5rem;
  align-items: center;
  padding: .5rem .75rem;
  background: var(--bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.shipment-item-row select,
.shipment-item-row input {
  padding: .4rem .5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .82rem;
  background: var(--surface);
}

.shipment-item-row .remove-item {
  color: var(--danger);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition);
}

.shipment-item-row .remove-item:hover { background: var(--danger-light); }

/* ---------- Shipment Detail View ---------- */
.shipment-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.shipment-detail-group { display: flex; flex-direction: column; gap: .15rem; }
.shipment-detail-group .label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.shipment-detail-group .value { font-weight: 600; font-size: .95rem; }

.shipment-detail-items { margin: 1rem 0; }
.shipment-detail-items h4 { font-size: .9rem; margin-bottom: .5rem; color: var(--text-secondary); text-transform: uppercase; }
.shipment-detail-items table { width: 100%; }
.shipment-detail-items th {
  text-align: left; font-size: .78rem; color: var(--text-secondary);
  text-transform: uppercase; padding: .5rem; border-bottom: 2px solid var(--border);
}
.shipment-detail-items td { padding: .5rem; border-bottom: 1px solid var(--border); font-size: .85rem; }

.shipment-detail-actions {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ---------- Responsive Transport ---------- */
@media (max-width: 1024px) {
  .transport-summary { grid-template-columns: repeat(2, 1fr); }
  .shipment-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .transport-summary { grid-template-columns: 1fr; }
  .shipment-item-row { grid-template-columns: 1fr 1fr; }
  .shipment-item-row .remove-item { justify-self: end; }
}

/* ============================================================
   STAFF MODULE
   ============================================================ */

/* ---------- Staff Summary Cards ---------- */
.staff-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.staff-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.staff-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.staff-stat-card.total { border-left-color: #3b82f6; }
.staff-stat-card.active { border-left-color: #10b981; }
.staff-stat-card.departments { border-left-color: #8b5cf6; }
.staff-stat-card.salary { border-left-color: #f59e0b; }

.staff-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-stat-card.total .staff-stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.staff-stat-card.active .staff-stat-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.staff-stat-card.departments .staff-stat-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.staff-stat-card.salary .staff-stat-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.staff-stat-info { display: flex; flex-direction: column; gap: .1rem; }
.staff-stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.staff-stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }

.staff-stat-card.total .staff-stat-value { color: #3b82f6; }
.staff-stat-card.active .staff-stat-value { color: #10b981; }
.staff-stat-card.departments .staff-stat-value { color: #8b5cf6; }
.staff-stat-card.salary .staff-stat-value { color: #f59e0b; }

/* ---------- Staff Status Badges ---------- */
.staff-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.staff-badge.active { background: rgba(16, 185, 129, 0.12); color: #047857; }
.staff-badge.on-leave { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.staff-badge.inactive { background: rgba(107, 114, 128, 0.12); color: #4b5563; }

/* ---------- Staff Role Badge ---------- */
.role-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.role-badge.admin { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.role-badge.manager { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.role-badge.staff { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.role-badge.driver { background: rgba(16, 185, 129, 0.1); color: #059669; }
.role-badge.cashier { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.role-badge.warehouse { background: rgba(107, 114, 128, 0.1); color: #4b5563; }

/* ---------- Staff Detail View ---------- */
.staff-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.staff-detail-group { display: flex; flex-direction: column; gap: .15rem; }
.staff-detail-group .label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.staff-detail-group .value { font-weight: 600; font-size: .95rem; }

.staff-detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.staff-avatar-lg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.staff-detail-name { font-size: 1.15rem; font-weight: 700; }
.staff-detail-role { font-size: .82rem; color: var(--text-secondary); }

/* ---------- Responsive Staff ---------- */
@media (max-width: 1024px) {
  .staff-summary { grid-template-columns: repeat(2, 1fr); }
  .staff-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .staff-summary { grid-template-columns: 1fr; }
}

/* ============================================================
   CUSTOMERS PAGE
   ============================================================ */
.customers-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.cust-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cust-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.cust-stat-card.total { border-left-color: #3b82f6; }
.cust-stat-card.active { border-left-color: #10b981; }
.cust-stat-card.revenue { border-left-color: #8b5cf6; }
.cust-stat-card.outstanding { border-left-color: #f59e0b; }

.cust-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cust-stat-card.total .cust-stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cust-stat-card.active .cust-stat-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.cust-stat-card.revenue .cust-stat-icon { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.cust-stat-card.outstanding .cust-stat-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.cust-stat-info { display: flex; flex-direction: column; gap: .1rem; }
.cust-stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.cust-stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }

.cust-stat-card.total .cust-stat-value { color: #3b82f6; }
.cust-stat-card.active .cust-stat-value { color: #10b981; }
.cust-stat-card.revenue .cust-stat-value { color: #8b5cf6; }
.cust-stat-card.outstanding .cust-stat-value { color: #f59e0b; }

/* ---------- Customer Type Badges ---------- */
.cust-type-badge {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: .02em;
}

.cust-type-badge.retail { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.cust-type-badge.wholesale { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }

[data-theme="dark"] .cust-type-badge.retail { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
[data-theme="dark"] .cust-type-badge.wholesale { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }

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

@media (max-width: 768px) {
  .customers-summary { grid-template-columns: 1fr; }
}

/* ============================================================
   PAYMENTS PAGE
   ============================================================ */
.payments-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.pay-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pay-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.pay-stat-card.total-received { border-left-color: #10b981; }
.pay-stat-card.pending { border-left-color: #f59e0b; }
.pay-stat-card.overdue { border-left-color: #ef4444; }
.pay-stat-card.count { border-left-color: #3b82f6; }

.pay-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pay-stat-card.total-received .pay-stat-icon { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.pay-stat-card.pending .pay-stat-icon { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.pay-stat-card.overdue .pay-stat-icon { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.pay-stat-card.count .pay-stat-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

.pay-stat-info { display: flex; flex-direction: column; gap: .1rem; }
.pay-stat-label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.pay-stat-value { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-family: var(--font-display); }

.pay-stat-card.total-received .pay-stat-value { color: #10b981; }
.pay-stat-card.pending .pay-stat-value { color: #f59e0b; }
.pay-stat-card.overdue .pay-stat-value { color: #ef4444; }
.pay-stat-card.count .pay-stat-value { color: #3b82f6; }

/* ---------- Payment Status Badges ---------- */
.pay-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.pay-badge.completed { background: rgba(16, 185, 129, 0.12); color: #047857; }
.pay-badge.pending { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.pay-badge.overdue { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.pay-badge.partial { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }

/* ---------- Payment Method Badges ---------- */
.method-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.method-badge.cash { background: rgba(16, 185, 129, 0.1); color: #059669; }
.method-badge.bank { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.method-badge.card { background: rgba(139, 92, 246, 0.1); color: #7c3aed; }
.method-badge.mobile { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.method-badge.other { background: rgba(107, 114, 128, 0.1); color: #4b5563; }

/* Dark mode overrides for payment & customer badges */
[data-theme="dark"] .pay-badge.completed { background: rgba(16,185,129,.15); color: #4ade80; }
[data-theme="dark"] .pay-badge.pending { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .pay-badge.overdue { background: rgba(239,68,68,.15); color: #f87171; }
[data-theme="dark"] .pay-badge.partial { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-theme="dark"] .method-badge.cash { background: rgba(16,185,129,.15); color: #4ade80; }
[data-theme="dark"] .method-badge.bank { background: rgba(59,130,246,.15); color: #60a5fa; }
[data-theme="dark"] .method-badge.card { background: rgba(139,92,246,.15); color: #a78bfa; }
[data-theme="dark"] .method-badge.mobile { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .method-badge.other { background: rgba(107,114,128,.15); color: #94a3b8; }

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

@media (max-width: 768px) {
  .payments-summary { grid-template-columns: 1fr; }
}

/* ============================================================
   USER MANAGEMENT
   ============================================================ */

/* Tabs */
.um-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
  gap: .25rem;
}

.um-tab {
  padding: .6rem 1.1rem;
  border: none;
  background: transparent;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}

.um-tab:hover { color: var(--primary); }
.um-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

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

/* Toolbar */
.um-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.um-user-count {
  font-size: .82rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* User list */
.um-user-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 380px;
  overflow-y: auto;
}

.um-user-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all var(--transition);
}

.um-user-card:hover {
  box-shadow: var(--shadow-card);
  border-color: rgba(37,99,235,.15);
  transform: translateX(3px);
}

.um-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.um-user-info {
  flex: 1;
  min-width: 0;
}

.um-user-name {
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.um-user-name .um-you-badge {
  font-size: .65rem;
  background: var(--primary-light);
  color: var(--primary);
  padding: .1rem .4rem;
  border-radius: 999px;
  font-weight: 700;
}

.um-user-meta {
  font-size: .75rem;
  color: var(--text-secondary);
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.um-user-actions {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}

.um-user-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .3rem;
}

.um-user-status.active { background: #10b981; }
.um-user-status.inactive { background: #94a3b8; }

/* Modal medium size */
.modal-md {
  width: 580px;
  max-width: 95vw;
}
.modal-poster {
  max-width: 96vw;
  width: 96vw;
  max-height: 92vh;
  overflow: hidden;
}

[data-theme="dark"] .um-user-card {
  background: rgba(30,41,59,.6);
  border-color: var(--border);
}

[data-theme="dark"] .um-tabs {
  border-bottom-color: #334155;
}

/* ============================================================
   PROFESSIONAL PAGE COMPONENTS — Headers, Stats, Toolbars
   ============================================================ */

/* ---------- Page Header ---------- */
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.pg-header-left {
  display: flex;
  align-items: center;
  gap: .85rem;
}

.pg-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pg-icon-blue { background: rgba(59,130,246,.1); color: #3b82f6; }
.pg-icon-teal { background: rgba(20,184,166,.1); color: #14b8a6; }
.pg-icon-purple { background: rgba(139,92,246,.1); color: #8b5cf6; }
.pg-icon-green { background: rgba(16,185,129,.1); color: #10b981; }
.pg-icon-indigo { background: rgba(79,70,229,.1); color: #4f46e5; }
.pg-icon-emerald { background: rgba(5,150,105,.1); color: #059669; }
.pg-icon-amber { background: rgba(245,158,11,.1); color: #f59e0b; }
.pg-icon-rose { background: rgba(225,29,72,.1); color: #e11d48; }

.pg-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.pg-subtitle {
  font-size: .8rem;
  color: var(--text-muted);
  margin: .15rem 0 0;
  line-height: 1.3;
}

.pg-header-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ---------- Page Stats Bar ---------- */
.pg-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.pg-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  transition: all .2s ease;
}

.pg-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  border-color: rgba(99,102,241,.15);
  transform: translateY(-1px);
}

.pg-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pg-si-blue   { background: rgba(59,130,246,.1);  color: #3b82f6; }
.pg-si-green  { background: rgba(16,185,129,.1);  color: #10b981; }
.pg-si-orange { background: rgba(245,158,11,.1);  color: #f59e0b; }
.pg-si-red    { background: rgba(239,68,68,.1);   color: #ef4444; }
.pg-si-purple { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.pg-si-teal   { background: rgba(20,184,166,.1);  color: #14b8a6; }

.pg-stat-info {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.pg-stat-label {
  font-size: .7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-stat-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
  font-family: var(--font-display);
  line-height: 1.2;
}

/* ---------- Page Toolbar ---------- */
.pg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .65rem .85rem;
}

.pg-toolbar-left {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  flex: 1;
}

.pg-toolbar-right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.pg-search-box {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 .65rem;
  transition: border-color .2s ease, box-shadow .2s ease;
  min-width: 200px;
  max-width: 280px;
}

.pg-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}

.pg-search-box svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.pg-search-input {
  border: none;
  background: transparent;
  padding: .5rem 0;
  font-size: .82rem;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  font-family: inherit;
}

.pg-search-input::placeholder {
  color: var(--text-muted);
}

.pg-select {
  padding: .45rem .65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: .82rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s ease;
}

.pg-select:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
}

.pg-result-count {
  font-size: .78rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Enhanced Empty State ---------- */
.empty-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state-box .empty-state-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--text-muted);
}

.empty-state-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 .35rem;
}

.empty-state-box p {
  font-size: .85rem;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Enhanced Table Elements ---------- */
.sku-badge {
  display: inline-block;
  padding: .15rem .5rem;
  background: var(--bg);
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'SFMono-Regular', Consolas, monospace;
  letter-spacing: .02em;
}

.cat-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--cat-color, var(--primary)) 10%, transparent);
  color: var(--cat-color, var(--primary));
}

.qty-display {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qty-zero  { color: var(--danger); }
.qty-low   { color: var(--warning); }
.qty-in    { color: var(--success); font-weight: 700; }
.qty-out   { color: var(--danger); font-weight: 700; }

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

.date-cell {
  font-size: .82rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.notes-cell {
  font-size: .82rem;
  color: var(--text-secondary);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* ============================================================
   REPORTS — Professional Card & Metric Styles
   ============================================================ */

/* Report Metric Cards (Top Row) */
.rpt-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.rpt-metric-card {
  border-radius: 14px;
  padding: 1.1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .85rem;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.rpt-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.rpt-metric-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: .08;
  transform: translate(20px, -20px);
}

.rpt-mc-blue    { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1px solid #bfdbfe; }
.rpt-mc-blue .rpt-metric-icon { color: #3b82f6; }
.rpt-mc-blue::after { background: #3b82f6; }

.rpt-mc-green   { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; }
.rpt-mc-green .rpt-metric-icon { color: #10b981; }
.rpt-mc-green::after { background: #10b981; }

.rpt-mc-teal    { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border: 1px solid #99f6e4; }
.rpt-mc-teal .rpt-metric-icon { color: #14b8a6; }
.rpt-mc-teal::after { background: #14b8a6; }

.rpt-mc-emerald { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0; }
.rpt-mc-emerald .rpt-metric-icon { color: #059669; }
.rpt-mc-emerald::after { background: #059669; }

.rpt-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.rpt-metric-data {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.rpt-metric-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
  font-family: var(--font-display);
  line-height: 1.2;
}

.rpt-metric-label {
  font-size: .72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  white-space: nowrap;
}

/* Report Cards */
.rpt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.rpt-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  border-color: rgba(99,102,241,.15);
}

.rpt-card-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.15rem .65rem;
  border-bottom: 1px solid var(--border);
}

.rpt-card-header h3 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.rpt-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rpt-ci-blue   { background: rgba(59,130,246,.1);  color: #3b82f6; }
.rpt-ci-purple { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.rpt-ci-amber  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.rpt-ci-green  { background: rgba(16,185,129,.1);  color: #10b981; }

.rpt-card-body {
  padding: 1rem 1.15rem;
}

/* Report Inventory Summary — Professional Dashboard */
.rinv {
  display: flex;
  flex-direction: column;
}

.rinv-section {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.rinv-sec-hdr {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding-bottom: .15rem;
}

.rinv-sec-hdr svg { opacity: .55; }

.rinv-divider {
  height: 1px;
  background: var(--border);
  margin: .8rem 0;
}

.rinv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}

.rinv-tile {
  background: var(--bg);
  border-radius: 10px;
  padding: .65rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: transform .15s ease, box-shadow .15s ease;
}

.rinv-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.rinv-tile-top {
  margin-bottom: .1rem;
}

.rinv-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rinv-ic-blue    { background: rgba(59,130,246,.1);  color: #3b82f6; }
.rinv-ic-green   { background: rgba(16,185,129,.1);  color: #10b981; }
.rinv-ic-teal    { background: rgba(20,184,166,.1);  color: #14b8a6; }
.rinv-ic-purple  { background: rgba(139,92,246,.1);  color: #8b5cf6; }
.rinv-ic-orange  { background: rgba(245,158,11,.1);  color: #f59e0b; }
.rinv-ic-emerald { background: rgba(5,150,105,.1);   color: #059669; }

.rinv-tile-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-family: var(--font-display);
}

.rinv-tile-lbl {
  font-size: .67rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Value breakdown rows with colored dots */
.rinv-vals {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .55rem .65rem;
  background: var(--bg);
  border-radius: 10px;
}

.rinv-val-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
}

.rinv-val-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rinv-val-lbl {
  color: var(--text-muted);
  font-weight: 600;
  flex: 1;
}

.rinv-val-amt {
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

/* Hero metric cards — featured KPIs */
.rinv-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}

.rinv-hero:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}

.rinv-hero-left {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.rinv-hero-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rinv-hero-green {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.03));
  border-color: rgba(16,185,129,.15);
}
.rinv-hero-green .rinv-hero-ic { background: rgba(16,185,129,.12); color: #10b981; }
.rinv-hero-green .rinv-hero-val { color: #059669; }

.rinv-hero-blue {
  background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(79,70,229,.03));
  border-color: rgba(79,70,229,.15);
}
.rinv-hero-blue .rinv-hero-ic { background: rgba(79,70,229,.12); color: #4f46e5; }
.rinv-hero-blue .rinv-hero-val { color: #4f46e5; }

.rinv-hero-lbl {
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: .12rem;
}

.rinv-hero-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  line-height: 1.15;
}

.rinv-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}

/* Export Grid */
.rpt-export-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .65rem;
}

.rpt-export-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem .75rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  color: inherit;
}

.rpt-export-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.rpt-eb-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpt-eb-label {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.rpt-eb-desc {
  font-size: .68rem;
  color: var(--text-muted);
  text-align: center;
}

.rpt-eb-csv .rpt-eb-icon        { background: rgba(16,185,129,.1); color: #10b981; }
.rpt-eb-csv:hover               { border-color: #10b981; background: rgba(16,185,129,.04); }
.rpt-eb-excel .rpt-eb-icon      { background: rgba(5,150,105,.1); color: #059669; }
.rpt-eb-excel:hover             { border-color: #059669; background: rgba(5,150,105,.04); }
.rpt-eb-pdf .rpt-eb-icon        { background: rgba(239,68,68,.1); color: #ef4444; }
.rpt-eb-pdf:hover               { border-color: #ef4444; background: rgba(239,68,68,.04); }
.rpt-eb-jpg .rpt-eb-icon        { background: rgba(245,158,11,.1); color: #f59e0b; }
.rpt-eb-jpg:hover               { border-color: #f59e0b; background: rgba(245,158,11,.04); }
.rpt-eb-png .rpt-eb-icon        { background: rgba(6,182,212,.1); color: #06b6d4; }
.rpt-eb-png:hover               { border-color: #06b6d4; background: rgba(6,182,212,.04); }
.rpt-eb-json .rpt-eb-icon       { background: rgba(139,92,246,.1); color: #8b5cf6; }
.rpt-eb-json:hover              { border-color: #8b5cf6; background: rgba(139,92,246,.04); }
.rpt-eb-import .rpt-eb-icon     { background: rgba(59,130,246,.1); color: #3b82f6; }
.rpt-eb-import:hover            { border-color: #3b82f6; background: rgba(59,130,246,.04); }

/* Top Products List (Enhanced) */
.top-products-list {
  display: flex;
  flex-direction: column;
}

.top-prod-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .5rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}

.top-prod-item:last-child { border-bottom: none; }
.top-prod-item:hover { background: var(--bg); border-radius: 8px; }

.top-prod-rank {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  background: var(--bg);
  color: var(--text-muted);
  flex-shrink: 0;
}

.top-rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; box-shadow: 0 2px 8px rgba(245,158,11,.3); }
.top-rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; box-shadow: 0 2px 8px rgba(100,116,139,.3); }
.top-rank-3 { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; box-shadow: 0 2px 8px rgba(180,83,9,.3); }

.top-prod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.top-prod-name {
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-prod-meta {
  font-size: .72rem;
  color: var(--text-muted);
}

.top-prod-value {
  font-weight: 800;
  font-size: 1rem;
  color: var(--primary);
  font-family: var(--font-display);
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* ============================================================
   DARK THEME — Professional Component Overrides
   ============================================================ */
[data-theme="dark"] .pg-header-icon { filter: brightness(1.1); }
[data-theme="dark"] .pg-stat-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pg-stat-card:hover { border-color: rgba(99,102,241,.25); }
[data-theme="dark"] .pg-toolbar { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .pg-search-box { background: rgba(0,0,0,.2); border-color: var(--border); }
[data-theme="dark"] .pg-select { background: rgba(0,0,0,.2); border-color: var(--border); }
[data-theme="dark"] .sku-badge { background: rgba(255,255,255,.06); }

[data-theme="dark"] .rpt-mc-blue    { background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(59,130,246,.04)); border-color: rgba(59,130,246,.2); }
[data-theme="dark"] .rpt-mc-green   { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.04)); border-color: rgba(16,185,129,.2); }
[data-theme="dark"] .rpt-mc-teal    { background: linear-gradient(135deg, rgba(20,184,166,.08), rgba(20,184,166,.04)); border-color: rgba(20,184,166,.2); }
[data-theme="dark"] .rpt-mc-emerald { background: linear-gradient(135deg, rgba(5,150,105,.08), rgba(5,150,105,.04)); border-color: rgba(5,150,105,.2); }

[data-theme="dark"] .rpt-metric-icon { background: rgba(255,255,255,.06); }
[data-theme="dark"] .rpt-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rinv-tile { background: rgba(255,255,255,.03); }
[data-theme="dark"] .rinv-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,.25); }
[data-theme="dark"] .rinv-vals { background: rgba(255,255,255,.03); }
[data-theme="dark"] .rinv-hero-green { background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(16,185,129,.03)); border-color: rgba(16,185,129,.1); }
[data-theme="dark"] .rinv-hero-blue { background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(79,70,229,.03)); border-color: rgba(79,70,229,.1); }
[data-theme="dark"] .rinv-hero:hover { box-shadow: 0 4px 16px rgba(0,0,0,.25); }
[data-theme="dark"] .rpt-export-btn { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rpt-export-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,.25); }

[data-theme="dark"] .top-prod-rank { background: rgba(255,255,255,.06); }
[data-theme="dark"] .top-prod-item:hover { background: rgba(255,255,255,.03); }

[data-theme="dark"] .empty-state-box .empty-state-icon { background: rgba(255,255,255,.04); }

[data-theme="dark"] .sales-stat-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .sales-stat-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.2); }

[data-theme="dark"] .cat-tag {
  background: color-mix(in srgb, var(--cat-color, var(--primary)) 15%, transparent);
}

/* ============================================================
   RESPONSIVE — Professional Components
   ============================================================ */
@media (max-width: 768px) {
  .pg-stats { grid-template-columns: repeat(2, 1fr); }
  .pg-header { flex-direction: column; align-items: flex-start; }
  .pg-header-right { width: 100%; }
  .pg-header-right .btn { width: 100%; justify-content: center; }
  .pg-toolbar { flex-direction: column; align-items: stretch; }
  .pg-toolbar-left { flex-direction: column; }
  .pg-search-box { min-width: 100%; max-width: 100%; }
  .pg-toolbar-right { justify-content: flex-end; }

  .rpt-metrics { grid-template-columns: repeat(2, 1fr); }
  .rinv-grid { grid-template-columns: repeat(3, 1fr); }
  .rinv-hero-row { grid-template-columns: 1fr; }
  .rpt-export-grid { grid-template-columns: repeat(3, 1fr); }
  .reports-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .pg-stats { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .pg-stat-card { padding: .65rem .75rem; }
  .pg-stat-value { font-size: 1.1rem; }

  .rpt-metrics { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .rpt-metric-card { padding: .85rem .75rem; }
  .rpt-metric-value { font-size: 1.1rem; }
  .rinv-grid { grid-template-columns: 1fr 1fr 1fr; }
  .rinv-hero-row { grid-template-columns: 1fr; }
  .rpt-export-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BARCODE SCANNER
   ============================================================ */

/* Scan button in product barcode field */
.input-with-scan {
  display: flex;
  gap: 6px;
  align-items: center;
}
.input-with-scan input {
  flex: 1;
  min-width: 0;
}
.btn-scan {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
  color: #6b7280;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s ease;
}
.btn-scan:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

/* Sale items header actions */
.sale-items-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.btn-scan-sale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1.5px solid #2563eb;
  border-radius: 8px;
  background: transparent;
  color: #2563eb;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-scan-sale:hover {
  background: #2563eb;
  color: #fff;
}
.btn-scan-sale svg {
  flex-shrink: 0;
}

/* Scanner modal */
.modal-scanner {
  max-width: 480px;
  width: 94vw;
}
.scanner-body {
  padding: 0;
  display: flex;
  flex-direction: column;
}
.scanner-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 0;
  overflow: hidden;
}
.scanner-viewport video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scanner overlay frame */
.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scanner-frame {
  position: relative;
  width: 70%;
  height: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 12px;
}
.scanner-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #2563eb;
  border-style: solid;
  border-width: 0;
}
.scanner-corner-tl { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 12px; }
.scanner-corner-tr { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 12px; }
.scanner-corner-bl { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 12px; }
.scanner-corner-br { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 12px; }

/* Scanning line animation */
.scanner-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #2563eb, transparent);
  box-shadow: 0 0 12px rgba(37,99,235,0.6);
  top: 0;
  animation: scanLineMove 2s ease-in-out infinite;
}
@keyframes scanLineMove {
  0%, 100% { top: 10%; }
  50% { top: 85%; }
}

/* Scanner result area */
.scanner-result {
  padding: 14px 20px;
  text-align: center;
  font-size: .9rem;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scanner-result-label {
  color: #9ca3af;
  font-style: italic;
}
.scanner-result-error {
  color: #ef4444;
  font-weight: 500;
}
.scanner-result-success {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #22c55e;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Manual fallback */
.scanner-manual-fallback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.scanner-manual-row {
  display: flex;
  gap: 8px;
}
.scanner-manual-input {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .9rem;
  outline: none;
}
.scanner-manual-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* Scanner actions */
.scanner-actions {
  display: flex;
  gap: 10px;
  padding: 12px 20px 16px;
  justify-content: center;
}

/* Dark mode overrides */
.dark-mode .btn-scan {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}
.dark-mode .btn-scan:hover {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.dark-mode .scanner-manual-input {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
.dark-mode .scanner-manual-input:focus {
  border-color: #2563eb;
}

/* =========================================
   iOS / Android MOBILE PWA — Comprehensive Fixes
   ========================================= */

/* ── Fix iOS Safari & Android Chrome 100vh bug ────── */
html {
  height: -webkit-fill-available;
  height: 100dvh;
  overscroll-behavior: none;
}

body {
  min-height: -webkit-fill-available;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
}

/* ── Prevent iOS/Android zoom on input focus ─────── */
@media screen and (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ── Android display cutout (notch/punch-hole/pill) ── */
@supports (padding: env(safe-area-inset-top)) {
  .topbar-primary {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
}

/* ── Disable hover effects on touch devices (Android sticky hover fix) ── */
@media (hover: none) and (pointer: coarse) {
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-danger:hover,
  .btn-accent:hover {
    transform: none;
    box-shadow: inherit;
  }

  .data-table tbody tr:hover {
    background: inherit;
  }
}

/* ── iOS Safe Area Insets (notch / Dynamic Island / home indicator) ── */
@supports (padding: env(safe-area-inset-top)) {
  .login-screen {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .main-content {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal-overlay {
    padding: calc(.5rem + env(safe-area-inset-top)) env(safe-area-inset-right) calc(.5rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }

  .modal {
    max-height: calc(90vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .notif-panel {
    top: calc(42px + env(safe-area-inset-top));
    max-height: calc(100vh - 42px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .toast-container {
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
  }
}

/* ── iOS PWA standalone: status bar offset ────────── */
@media screen and (display-mode: standalone) {
  .topbar-primary {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .sidebar {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* ── Contained scrolling on touch devices ─────────── */
/* Prevents scroll chaining into the page when a modal/sidebar reaches
   its top or bottom (iOS Safari + Chrome Android). Momentum scrolling
   is now native everywhere — no -webkit-overflow-scrolling needed. */
.page,
.modal,
.modal-body,
.sidebar-nav,
.notif-list,
.table-wrapper,
.perm-table-wrap,
.sale-detail-items,
.shipment-detail-items {
  overscroll-behavior: contain;
}

/* ── Fix permission table horizontal overflow ─────── */
.perm-table-wrap {
  overflow-x: auto;
}

/* ── Fix page bottom padding for home indicator ───── */
.page {
  padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════
   MOBILE (≤ 768px) — Touch Targets & Layout
   ══════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

  /* ── Touch targets: minimum 44×44px ──────────────── */
  .action-btns button {
    width: 40px;
    height: 40px;
    min-width: 44px;
    min-height: 44px;
  }

  .topbar-icon-btn {
    width: 40px;
    height: 40px;
    min-width: 44px;
    min-height: 44px;
  }

  .modal-close {
    width: 40px;
    height: 40px;
    min-width: 44px;
    min-height: 44px;
  }

  .remove-item {
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
  }

  .btn-sm, .btn-small {
    min-height: 40px;
    padding: .5rem .85rem;
  }

  .toggle-switch {
    width: 46px;
    height: 26px;
  }

  .toggle-switch .toggle-knob {
    width: 22px;
    height: 22px;
  }

  .toggle-switch.active .toggle-knob {
    transform: translateX(20px);
  }

  /* ── Checkboxes & radios: bigger for touch ───────── */
  .perm-table input[type="checkbox"],
  .stg-checkbox-row input[type="checkbox"],
  .lsrv-checkbox-row input[type="checkbox"],
  .login-remember input,
  .lang-option input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }

  .ms-check {
    width: 20px;
    height: 20px;
  }

  /* ── Filter controls: taller for touch ───────────── */
  .filter-group select,
  .filter-group input[type="date"],
  .pg-select,
  .dash-select,
  .dash-date {
    min-height: 42px;
    padding: .55rem .7rem;
  }

  /* ── Sale item inputs: taller ────────────────────── */
  .sale-item-row select,
  .sale-item-row input,
  .shipment-item-row select,
  .shipment-item-row input {
    min-height: 42px;
    padding: .5rem .6rem;
  }

  /* ── User dropdown: keep on screen ───────────────── */
  .user-dropdown {
    right: 0 !important;
    max-width: calc(100vw - 1rem);
  }

  /* ── Sidebar: full width on small screens ────────── */
  .sidebar {
    width: min(280px, 85vw);
  }

  /* ── Permission table: mobile friendly ───────────── */
  .perm-table {
    min-width: 600px;
  }

  .perm-table th,
  .perm-table td {
    padding: .4rem .2rem;
    font-size: .75rem;
  }

  /* ── License key row: stack on mobile ────────────── */
  .license-key-row {
    flex-wrap: wrap;
  }

  .license-key-row > * {
    flex: 1 1 100%;
  }

  /* ── Tab buttons: taller ─────────────────────────── */
  .um-tab {
    min-height: 44px;
    padding: .65rem 1rem;
  }
}

/* ══════════════════════════════════════════════════════
   SMALL PHONE (≤ 480px) — Compact layouts
   ══════════════════════════════════════════════════════ */
@media screen and (max-width: 480px) {

  /* ── Page layout ─────────────────────────────────── */
  .page {
    padding: .75rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }

  /* ── Tables ──────────────────────────────────────── */
  .data-table th,
  .data-table td {
    padding: .45rem .35rem;
    font-size: .72rem;
  }

  .table-wrapper {
    max-width: 100vw;
    margin-left: -.75rem;
    margin-right: -.75rem;
    border-radius: 0;
  }

  /* ── Stats grid ──────────────────────────────────── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }

  .stat-card {
    padding: .75rem;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: .7rem;
  }

  /* ── Summary grid: single column ─────────────────── */
  .summary-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }

  /* ── Modals: full-width ──────────────────────────── */
  .modal {
    max-width: calc(100vw - .5rem);
    margin: .25rem;
    border-radius: 12px;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - .5rem);
  }

  .modal-body {
    padding: 1rem;
  }

  .modal-header {
    padding: .85rem 1rem;
  }

  .modal-header h2 {
    font-size: .95rem;
  }

  /* ── Notifications: full width ───────────────────── */
  .notif-panel {
    width: 100vw;
    right: 0;
    left: 0;
    border-radius: 0;
  }

  /* ── Toast: full width ───────────────────────────── */
  .toast-container {
    right: .5rem;
    left: .5rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  }

  .toast {
    max-width: 100%;
  }

  /* ── Buttons ─────────────────────────────────────── */
  .btn {
    padding: .55rem .85rem;
    font-size: .82rem;
  }

  .page-actions {
    gap: .5rem;
  }

  .btn-group {
    flex-wrap: wrap;
    gap: .35rem;
  }

  /* ── Filter group ────────────────────────────────── */
  .filter-group {
    gap: .4rem;
  }

  /* ── Sales ───────────────────────────────────────── */
  .sales-summary-bar {
    padding: .75rem;
    gap: .5rem;
    flex-direction: column;
  }

  /* ── Invoice actions: stack buttons ──────────────── */
  .invoice-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  /* ── Reports inventory grid: 2 columns ───────────── */
  .rinv-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .5rem;
  }

  .rpt-export-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Dashboard chart bars ────────────────────────── */
  .bar-label {
    width: 60px;
    font-size: .7rem;
  }

  /* ── Settings panels ─────────────────────────────── */
  .stg-panel {
    padding: .85rem;
  }

  .stg-card-header {
    padding: .85rem 1rem;
  }

  .stg-card-body {
    padding: .85rem 1rem;
  }

  /* ── Dashboard filters ───────────────────────────── */
  .dash-filter-bar {
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* ── Page header ─────────────────────────────────── */
  .pg-header {
    gap: .5rem;
  }

  .pg-header h1,
  .page-title {
    font-size: 1.15rem;
  }

  .pg-header-right {
    width: 100%;
  }

  .pg-header-right .btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Cards ───────────────────────────────────────── */
  .card-header {
    padding: .85rem 1rem;
  }

  .card-body {
    padding: .85rem 1rem;
  }

  /* ── Sidebar: full screen on tiny phones ─────────── */
  .sidebar {
    width: 100%;
    max-width: 100%;
  }

  /* ── Empty state ─────────────────────────────────── */
  .empty-state {
    padding: 2rem .75rem;
    font-size: .85rem;
  }
}

/* ══════════════════════════════════════════════════════
   VERY SMALL PHONE (≤ 360px) — iPhone SE etc.
   ══════════════════════════════════════════════════════ */
@media screen and (max-width: 360px) {
  .page {
    padding: .5rem;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
  }

  .stat-card {
    padding: .6rem;
  }

  .stat-value {
    font-size: 1rem;
  }

  .pg-stat-card {
    padding: .5rem .6rem;
  }

  .rpt-export-grid {
    grid-template-columns: 1fr !important;
  }

  .rinv-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .modal {
    max-width: 100vw;
    margin: 0;
    border-radius: 12px 12px 0 0;
    max-height: calc(95vh - env(safe-area-inset-top, 0px));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .topbar-primary {
    padding-left: .35rem;
    padding-right: .35rem;
    height: 44px;
  }

  .topbar-brand-icon svg {
    width: 20px;
    height: 20px;
  }

  .action-btns {
    gap: .15rem;
  }
}

/* ── iOS / Android Landscape mode fix ─────────────── */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .login-card {
    flex-direction: row;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .login-panel-left {
    display: none;
  }

  .modal {
    max-height: 85vh;
    max-height: 85dvh;
  }

  .page {
    padding: .5rem 1rem;
  }

  .sales-stat-grid {
    margin-bottom: .75rem;
  }

  .sales-stat-card {
    padding: .75rem;
    flex: 1 1 calc(25% - .75rem);
    min-width: 150px;
  }

  .sales-stat-value {
    font-size: 1.1rem;
  }
}

/* ══════════════════════════════════════════════════════
   ANDROID APK (Capacitor WebView) — Full-screen fit
   ══════════════════════════════════════════════════════ */

/* Fix: flex child can overflow parent — force min-width:0 */
.main-content {
  min-width: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Fix: page content can exceed viewport */
.page {
  max-width: 100%;
  overflow-x: hidden;
  word-break: break-word;
}

/* Fix: settings grid doesn't wrap on small android screens */
@media screen and (max-width: 600px) {
  .stg-grid {
    grid-template-columns: 1fr !important;
    gap: .75rem;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .stg-page {
    padding: 0;
  }

  .stg-card {
    border-radius: 10px;
  }

  .stg-card-body {
    padding: .75rem .85rem;
  }

  /* Fix: buttons overflow on small screens */
  .btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page-actions .btn,
  .stg-card-foot .btn,
  .card-header .btn {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  /* Fix: form inputs full width */
  .stg-row select,
  .stg-row input[type="text"],
  .stg-row input[type="number"],
  .stg-row input[type="color"],
  .stg-row textarea {
    width: 100%;
    max-width: 100%;
  }

  /* Fix: flex rows wrapping */
  .stg-row,
  .stg-biz-layout,
  .stg-font-group {
    flex-wrap: wrap;
  }

  /* Fix: Invoice action buttons stack */
  .invoice-actions {
    flex-wrap: wrap;
    gap: .4rem;
  }

  .invoice-actions .btn {
    flex: 1 1 calc(50% - .25rem);
    min-width: 0;
    justify-content: center;
    font-size: .78rem;
    padding: .5rem .6rem;
  }

  /* Fix: Reports export grid */
  .reports-grid {
    grid-template-columns: 1fr !important;
  }

  /* Fix: Dashboard grid */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  /* Fix: Long text overflow */
  .stg-card-head h3 {
    font-size: .9rem;
    word-break: break-word;
  }

  .stg-card-desc {
    font-size: .78rem;
  }

  /* Fix: Modal full width on small android */
  .modal {
    max-width: calc(100vw - .5rem);
    width: calc(100vw - .5rem);
  }

  .modal-body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Fix: License key input overflow */
  #licenseKeyInput {
    max-width: 100%;
    font-size: .8rem;
  }

  /* Fix: Generated key overflow */
  #generatedKey,
  #generatedKeyInfo {
    word-break: break-all;
    font-size: .75rem;
  }

  /* Fix: QR canvas centering */
  #shareQrCanvas,
  #licenseQrCanvas {
    max-width: 100%;
    height: auto !important;
  }
}

/* ── Platform-aware visibility (added 2026-05-21) ──
 * Hide controls that don't apply to the current delivery target:
 *   .platform-electron-only  — only meaningful in Electron desktop
 *   .platform-not-capacitor  — hide on the Play Store (Capacitor) build
 *   .platform-capacitor-only — show only on the Play Store build
 * Body gets one of: .electron-app / .capacitor-app / .web-app at startup. */
body:not(.electron-app) .platform-electron-only { display: none !important; }
body.capacitor-app .platform-not-capacitor      { display: none !important; }
body:not(.capacitor-app) .platform-capacitor-only { display: none !important; }