/*
 * KKS POS — 2026 design system ("Fresh Retail")
 * Loaded after application.css and pos-theme.css. Owns colour, type, radius,
 * elevation and the look of every shared component. Layout stays in pos-theme.css.
 */
:root {
  --brand-50: #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e59;

  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #1e293b;
  --text-2: #475569;
  --muted: #64748b;
  --faint: #94a3b8;

  --success: #16a34a; --success-bg: #dcfce7;
  --warning: #d97706; --warning-bg: #fef3c7;
  --danger: #dc2626;  --danger-bg: #fee2e2;
  --info: #2563eb;    --info-bg: #dbeafe;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --theme-radius: 10px;
  --e1: 0 1px 2px rgba(15, 23, 42, .05);
  --e2: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .06);
  --e3: 0 24px 48px rgba(15, 23, 42, .18);
  --ring: 0 0 0 3px rgba(13, 148, 136, .22);

  --sidebar-width: 264px;
  --sidebar-compact: 80px;
  --header-height: 72px;
  --font: Inter, "Segoe UI", "Myanmar Text", "Pyidaungsu", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html, body, .theme-body { background: var(--bg) !important; color: var(--text); }
body { font-family: var(--font); font-size: 14px; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--text); letter-spacing: -0.015em; }
.metric-value, .pos-product-price, .pos-cart-summary-row strong, .pos-cart-line-total,
.best-seller-revenue, .text-right, td.text-right { font-variant-numeric: tabular-nums; }

button:focus-visible, input:not(.pos-search-input):focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand-600) !important;
  outline-offset: 2px;
}
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ---------- App frame ---------- */
.app-shell { background: var(--bg) !important; }
.app-main, .content-scroll { background: var(--bg) !important; }
.content-scroll { padding: 24px 28px 32px; }

/* ---------- Sidebar ---------- */
.app-sidebar {
  gap: 14px;
  padding: 18px 14px 14px;
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.sidebar-head { min-height: 44px; padding: 0 4px 12px; border-bottom: 1px solid var(--border); }
.store-mark { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; box-shadow: var(--e1); }
.store-title, .brand-name.small { color: var(--text) !important; font-size: 15px !important; font-weight: 700; letter-spacing: -0.02em; }
.sidebar-toggle-btn {
  width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px;
  border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--muted) !important;
}
.sidebar-toggle-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }

.nav-stack { gap: 2px; padding-right: 2px; }
.nav-section-label {
  margin: 12px 10px 4px; color: var(--faint); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.nav-section-label:first-child { margin-top: 2px; }
.nav-button {
  position: relative;
  min-height: 40px;
  gap: 12px;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: var(--radius) !important;
  background: transparent !important;
  color: var(--text-2) !important;
  font-size: 14px;
  font-weight: 500;
  box-shadow: none !important;
}
.nav-button svg { width: 19px; height: 19px; color: var(--faint); transition: color 150ms ease; }
.nav-button:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.nav-button:hover svg { color: var(--text-2); }
.nav-button-active, .nav-button-active:hover {
  background: var(--brand-50) !important;
  color: var(--brand-700) !important;
  font-weight: 600;
}
.nav-button-active svg { color: var(--brand-600) !important; }
.nav-button-active::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--brand-600);
}
.nav-button:focus-visible, .footer-button:focus-visible { outline: 2px solid var(--brand-600) !important; }

/* Sidebar account card */
.sidebar-user.surface-card, .sidebar-user {
  margin-top: auto;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) !important;
  box-shadow: var(--e1) !important;
  color: var(--text);
}
.sidebar-user::before, .sidebar-user.surface-card::before { display: none !important; }
.sidebar-user-avatar {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #ffffff;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(13, 148, 136, .3);
}
.sidebar-user-avatar::after {
  content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px;
  border: 2px solid #ffffff; border-radius: 50%; background: #22c55e;
}
.sidebar-user-meta { min-width: 0; display: grid; gap: 3px; }
.sidebar-user p { margin: 0; }
.sidebar-user-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  font-size: 14px; font-weight: 600 !important; line-height: 1.25;
}
.sidebar-user-role {
  display: inline-flex !important; align-items: center; justify-self: start;
  margin: 0 !important; padding: 2px 8px !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--brand-100) !important; color: var(--brand-800) !important;
  font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .04em !important;
  text-transform: uppercase;
}
.sidebar-user-logout {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.sidebar-user-logout:hover { border-color: #fecaca; background: var(--danger-bg); color: var(--danger); }

/* Collapsed sidebar */
#sidebar-toggle:checked ~ .sidebar-head { border-bottom: 1px solid var(--border); padding-inline: 0; }
#sidebar-toggle:checked ~ .nav-stack .nav-section-label { display: none; }
#sidebar-toggle:checked ~ .nav-stack .nav-button-active::before { left: -14px; }

/* ---------- Header ---------- */
.app-header {
  min-height: var(--header-height);
  padding: 12px 28px;
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(160%) blur(8px) !important;
}
.app-title-block { gap: 2px; }
.app-header-title {
  color: var(--text) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}
.app-header-date { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-title-kicker { color: var(--brand-600) !important; letter-spacing: .08em; font-weight: 600; }

.lang-switch, .lang-switch.compact {
  min-height: 0; padding: 3px; gap: 2px;
  border: 1px solid var(--border) !important; border-radius: 999px !important;
  background: var(--surface-2) !important;
}
.lang-button {
  min-height: 30px; padding: 5px 12px !important;
  border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: var(--muted) !important;
  font-size: 12px; font-weight: 600;
}
.lang-button:hover { color: var(--text) !important; background: transparent !important; }
.lang-button.active { background: var(--surface) !important; color: var(--brand-700) !important; box-shadow: var(--e1) !important; }

.app-header .icon-btn, .header-logout-btn {
  height: 40px; min-height: 40px;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-2) !important;
  font-weight: 600;
}
.app-header .icon-btn { width: 40px; flex-basis: 40px; }
.app-header .icon-btn:hover, .header-logout-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }
.mobile-nav-trigger { border: 1px solid var(--border) !important; background: var(--surface) !important; color: var(--text) !important; }
.mobile-nav-trigger:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.menu-glyph span { background: currentColor !important; }

/* ---------- Buttons ---------- */
.primary-btn, .secondary-btn, .ghost-btn, .mini-btn, .danger-btn, .icon-btn {
  border-radius: var(--radius) !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.primary-btn {
  border: 1px solid var(--brand-600) !important;
  background: var(--brand-600) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
.primary-btn:hover { background: var(--brand-700) !important; border-color: var(--brand-700) !important; color: #ffffff !important; transform: none; }
.primary-btn:active { background: var(--brand-800) !important; }
.secondary-btn, .ghost-btn, .mini-btn, .icon-btn {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--e1) !important;
}
.secondary-btn:hover, .ghost-btn:hover, .mini-btn:hover, .icon-btn:hover, .qty-button:hover {
  border-color: var(--border-strong) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.ghost-btn { box-shadow: none !important; background: transparent !important; }
.danger-btn, .mini-btn.danger-btn, .mini-btn.delete-action {
  border: 1px solid #fecaca !important;
  background: var(--surface) !important;
  color: var(--danger) !important;
}
.danger-btn:hover, .mini-btn.danger-btn:hover, .mini-btn.delete-action:hover {
  border-color: var(--danger) !important; background: var(--danger) !important; color: #ffffff !important;
}
.mini-btn.edit-action:hover { background: var(--brand-50) !important; border-color: var(--brand-200) !important; color: var(--brand-700) !important; }
button:disabled, input:disabled, select:disabled, .disabled {
  border-color: var(--border) !important;
  background: var(--surface-2) !important;
  color: var(--faint) !important;
  box-shadow: none !important;
}

/* ---------- Surfaces ---------- */
.surface-panel, .surface-card, .modal-card, .product-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--e2) !important;
  color: var(--text);
}
.surface-panel { padding: 22px; }
.section-stack { gap: 20px; }
.section-heading { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border) !important; }
.section-heading h2, .section-heading h3 { color: var(--text) !important; font-size: 16px; font-weight: 650 !important; letter-spacing: -0.015em !important; }
.muted, .field-hint, .table-sub { color: var(--muted) !important; }

/* ---------- Forms ---------- */
.field-label { color: var(--text-2) !important; font-size: 13px; font-weight: 500; }
.field-input, .pos-cart-discount input, .list-filter-select {
  min-height: 44px;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: var(--e1);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field-input:hover { border-color: var(--faint) !important; }
.field-input:focus, .pos-cart-discount input:focus { border-color: var(--brand-600) !important; box-shadow: var(--ring) !important; outline: 0 !important; }
.field-input::placeholder { color: var(--faint); }
.field-input:invalid:not(:placeholder-shown) { border-color: var(--border-strong) !important; }
.field-input:user-invalid { border-color: var(--danger) !important; }

/* ---------- Metric cards ---------- */
.metric-grid { gap: 14px !important; }
.metric-card {
  padding: 16px 18px !important;
  gap: 14px !important;
  border: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--e2) !important;
}
.metric-card-button:hover { border-color: var(--brand-200) !important; box-shadow: 0 6px 20px rgba(13, 148, 136, .12) !important; transform: translateY(-1px); }
.metric-card .metric-label { color: var(--muted) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }
.metric-card .metric-value { color: var(--text) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.metric-card .metric-icon {
  width: 42px !important; height: 42px !important; flex: 0 0 42px;
  border-radius: 12px !important;
  background: var(--brand-50) !important; color: var(--brand-600) !important;
}
.metric-card .metric-icon svg { width: 20px !important; height: 20px !important; }
#summary-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; }
#summary-cards .metric-card:nth-child(n) { border-left-color: var(--border) !important; }
#summary-cards .metric-card:nth-child(n):hover { border-color: var(--brand-200) !important; }
#summary-cards .metric-card[data-tone="indigo"] .metric-icon { background: #eef2ff !important; color: #4f46e5 !important; }
#summary-cards .metric-card[data-tone="amber"] .metric-icon { background: var(--warning-bg) !important; color: var(--warning) !important; }
#summary-cards .metric-card[data-tone="rose"] .metric-icon { background: #ffe4e6 !important; color: #e11d48 !important; }
#summary-cards .metric-card[data-tone="green"] .metric-icon { background: var(--success-bg) !important; color: var(--success) !important; }
#summary-cards .metric-card[data-tone="violet"] .metric-icon { background: #f3e8ff !important; color: #9333ea !important; }

/* ---------- Charts & lists ---------- */
.chart-bar { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)) !important; border-radius: 6px 6px 2px 2px !important; }
.chart-bar-track { background: var(--surface-2); border-radius: 6px; }
.chart-bar-label { color: var(--muted) !important; font-weight: 600; }
.best-seller-row { border-color: var(--border) !important; }
.best-seller-rank { background: var(--brand-50) !important; color: var(--brand-700) !important; border-radius: 8px !important; }
.best-seller-revenue { color: var(--brand-700) !important; font-weight: 700 !important; }

/* ---------- Tables ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius) !important; overflow: auto; }
.data-table { border-collapse: separate; border-spacing: 0; }
.data-table th, .data-table thead th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}
.data-table td { border-bottom: 1px solid var(--border) !important; color: var(--text); }
.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0 !important; }
.inventory-table thead, .alert-table thead, .history-table thead { border-bottom: 1px solid var(--border) !important; }
.history-table thead tr, .history-table th { background: var(--surface-2) !important; color: var(--muted) !important; }
.dashboard-table td:nth-child(4), .sales-table td:nth-child(5) { color: var(--text) !important; font-weight: 600 !important; }
.empty-state { color: var(--muted) !important; }

/* Status pills */
.status-pill, .status-active, .status-inactive, .status-suspended {
  border-radius: 999px !important;
  font-size: 11.5px; font-weight: 600 !important; letter-spacing: .01em; text-transform: none !important;
}
.status-good, .status-active { background: var(--success-bg) !important; color: #15803d !important; border-color: transparent !important; }
.status-low, .status-suspended { background: var(--warning-bg) !important; color: #b45309 !important; border-color: transparent !important; }
.status-expired, .status-inactive { background: var(--danger-bg) !important; color: #b91c1c !important; border-color: transparent !important; }

/* Pager */
.pager-button, .pager-arrow { border-radius: var(--radius-sm) !important; border-color: var(--border) !important; color: var(--text-2) !important; }
.pager-button:hover:not(:disabled), .pager-arrow:hover:not(:disabled) { border-color: var(--brand-200) !important; color: var(--brand-700) !important; background: var(--brand-50) !important; }
.pager-button-active { border-color: var(--brand-600) !important; background: var(--brand-600) !important; color: #ffffff !important; }

/* ---------- POS ---------- */
.pos-search-bar {
  min-height: 50px; padding: 0 14px;
  border: 1px solid var(--border-strong) !important; border-radius: 12px !important;
  background: var(--surface) !important; box-shadow: var(--e1);
}
.pos-search-bar:focus-within { border-color: var(--brand-600) !important; box-shadow: var(--ring) !important; }
.pos-search-bar svg { color: var(--faint) !important; }
.pos-search-input { background: transparent !important; font-size: 15px; }
.pos-scan-chip { border-radius: 999px !important; border: 1px solid var(--border) !important; background: var(--surface-2) !important; color: var(--text-2) !important; font-weight: 600; }

.pos-category-grid { gap: 8px !important; }
.pos-category-card {
  min-height: 56px; padding: 10px 12px !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
  background: var(--surface) !important; box-shadow: var(--e1);
}
.pos-category-card:hover { border-color: var(--brand-200) !important; }
.pos-category-card.active { border-color: var(--brand-600) !important; background: var(--brand-50) !important; color: var(--brand-800) !important; box-shadow: var(--ring); }
.pos-category-icon { border-radius: 10px !important; background: var(--surface-2) !important; color: var(--brand-600) !important; }
.pos-category-card.active .pos-category-icon { background: var(--brand-600) !important; color: #ffffff !important; }
.pos-category-name { color: var(--text); font-weight: 600 !important; }
.pos-category-count, .pos-category-card.active .pos-category-count { color: var(--muted) !important; font-weight: 500 !important; }

.pos-product-card {
  border: 1px solid var(--border) !important; border-radius: 14px !important;
  background: var(--surface) !important; box-shadow: var(--e1) !important;
}
.pos-product-card:hover { border-color: var(--brand-200) !important; box-shadow: 0 8px 22px rgba(15, 23, 42, .08) !important; }
.pos-product-card:focus-within { border-color: var(--brand-600) !important; }
.pos-product-visual { border-radius: 12px !important; background: var(--brand-50) !important; color: var(--brand-600) !important; }
.pos-product-info h3 { color: var(--text) !important; font-weight: 650 !important; }
.pos-product-info p, .pos-product-stock { color: var(--muted) !important; font-weight: 500 !important; }
.pos-product-price { color: var(--brand-700) !important; font-weight: 700 !important; }
.pos-product-add { border-radius: 12px !important; background: var(--brand-600) !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(13, 148, 136, .25); }
.pos-product-add:hover { background: var(--brand-700) !important; }
.pos-product-dot { background: var(--border-strong) !important; }
.pos-product-dot.active { background: var(--brand-600) !important; }
.pos-recent-heading h3 { color: var(--text) !important; font-weight: 650 !important; }
.pos-recent-heading span { color: var(--muted) !important; }

.pos-cart {
  border: 1px solid var(--border) !important; border-radius: 16px !important;
  background: var(--surface) !important; box-shadow: var(--e2) !important;
}
.pos-cart-header { border-bottom: 1px solid var(--border) !important; }
.pos-cart-header p { color: var(--brand-600) !important; font-weight: 600 !important; letter-spacing: .06em; }
.pos-cart-header h3 { color: var(--text) !important; font-weight: 700 !important; }
.pos-cart-count { border-radius: 999px !important; background: var(--brand-50) !important; color: var(--brand-700) !important; border: 0 !important; font-weight: 600; }
.pos-cart-empty { color: var(--muted) !important; }
.pos-cart-empty > span:first-child { border-radius: 14px !important; background: var(--brand-50) !important; color: var(--brand-600) !important; }
.pos-cart-item { border-color: var(--border) !important; border-radius: 12px !important; }
.pos-cart-item-visual { border-radius: 10px !important; background: var(--brand-50) !important; color: var(--brand-600) !important; }
.pos-cart-stepper { border-color: var(--border) !important; border-radius: 10px !important; overflow: hidden; }
.pos-cart-stepper button:hover { background: var(--brand-50) !important; color: var(--brand-700) !important; }
.pos-cart-remove:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
.pos-cart-summary-row span { color: var(--text-2); }
.pos-cart-grand-total strong { color: var(--text) !important; font-size: 22px !important; font-weight: 750 !important; }
.pos-checkout-bar, .pos-pinned { border-color: var(--border) !important; }
.pos-checkout-button { min-height: 52px !important; font-size: 16px !important; border-radius: 12px !important; }

/* ---------- Alerts / misc controls ---------- */
.alert-view-switch { border-radius: 999px !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; }
.alert-view-button { border-radius: 999px !important; color: var(--muted) !important; font-weight: 600; }
.alert-view-button.active { background: var(--surface) !important; color: var(--brand-700) !important; box-shadow: var(--e1) !important; }
.inventory-inbound-button { border-radius: var(--radius) !important; border-color: var(--brand-600) !important; background: var(--brand-600) !important; color: #ffffff !important; font-weight: 600; }
.inventory-inbound-button:hover { background: var(--brand-700) !important; border-color: var(--brand-700) !important; color: #ffffff !important; }
.inbound-modal-header p, .login-role-kicker { color: var(--brand-600) !important; font-weight: 600 !important; letter-spacing: .08em; }
.history-more-button:hover { border-color: var(--brand-200) !important; color: var(--brand-700) !important; }
.account-card, .device-setting-card { border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; background: var(--surface) !important; }
.device-setting-icon { border-radius: 12px !important; background: var(--brand-50) !important; color: var(--brand-600) !important; }
.device-toggle-input:checked + .device-toggle-track { background: var(--brand-600) !important; }
.device-setting-note, .receipt-preview { border-radius: var(--radius) !important; background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-2) !important; }

/* ---------- Modals, overlay, notifications ---------- */
.modal-shell { background: rgba(15, 23, 42, .45) !important; backdrop-filter: blur(4px) !important; }
.modal-card { box-shadow: var(--e3) !important; border-radius: 18px !important; }
.drawer-overlay:not(.hidden) { background: rgba(15, 23, 42, .4) !important; backdrop-filter: blur(2px); }
.notification {
  border: 1px solid var(--border) !important; border-left: 4px solid var(--success) !important;
  border-radius: 12px !important; background: var(--surface) !important; color: var(--text) !important;
  box-shadow: var(--e3) !important; font-weight: 600;
}
.notification::before { background: var(--success-bg) !important; color: var(--success) !important; }
.notification.error { border-left-color: var(--danger) !important; }
.notification.error::before { background: var(--danger-bg) !important; color: var(--danger) !important; }

.boot-splash { background: var(--bg) !important; }
.boot-spinner { border-color: var(--brand-100) !important; border-top-color: var(--brand-600) !important; border-radius: 50% !important; }

/* ---------- Mobile footer ---------- */
@media (max-width: 720px) {
  .mobile-footer { border-top: 1px solid var(--border) !important; background: rgba(255, 255, 255, .96) !important; backdrop-filter: blur(8px); }
  .footer-button { color: var(--muted) !important; font-weight: 600; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; }
  .footer-button-active { background: var(--brand-50) !important; color: var(--brand-700) !important; box-shadow: none !important; }
  .content-scroll { padding: 16px 14px 24px; }
  .app-header { padding: 10px 14px; }
  .app-header-title { font-size: 18px !important; }
  .app-header-date { display: none; }
  .nav-button-active::before { display: none; }
}

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh; min-height: 100dvh;
  padding: 0 !important;
  background: var(--bg) !important;
}
.login-screen:not(.hidden) { display: block !important; }
.login-frame {
  width: 100%;
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(380px, 46%) minmax(0, 1fr);
}
.login-brand {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 44px 48px;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .16), transparent 38%),
    radial-gradient(circle at 10% 95%, rgba(20, 184, 166, .45), transparent 45%),
    linear-gradient(150deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
  color: #ffffff;
}
.login-brand::after {
  content: ""; position: absolute; inset: auto -120px -160px auto; width: 420px; height: 420px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
}
.login-brand-top { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.login-brand-top img { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.login-brand-copy h2 { margin: 0 0 12px; color: #ffffff; font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.login-brand-copy p { margin: 0; max-width: 440px; color: rgba(255, 255, 255, .85); font-size: 15.5px; line-height: 1.6; }
.login-brand-points { position: relative; z-index: 1; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.login-brand-points li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px;
  background: rgba(255, 255, 255, .1); color: #ffffff; font-size: 14px; font-weight: 500;
  backdrop-filter: blur(6px);
}
.login-brand-points svg { width: 18px; height: 18px; flex: 0 0 18px; }
.login-brand-foot { margin: 0; color: rgba(255, 255, 255, .7); font-size: 12.5px; }
.login-frame > .login-shell {
  width: min(440px, calc(100% - 48px));
  margin: auto;
  padding: 32px 0;
}
.login-head { margin-bottom: 18px !important; }
.login-head .brand-name { color: var(--text) !important; font-size: 20px !important; font-weight: 700; }
.login-head .brand-mark { width: 44px; height: 44px; border-radius: 12px; }
.login-shell .form-panel {
  padding: 30px !important;
  border: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: var(--e2) !important;
}
.login-shell .form-panel h2 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; }
.login-role-description { color: var(--muted) !important; }
.login-shell .primary-btn { min-height: 48px; font-size: 15px; }
.password-toggle { color: var(--muted) !important; background: transparent !important; }
.password-toggle:hover { background: var(--surface-2) !important; color: var(--text) !important; }
@media (min-width: 981px) {
  .login-frame .login-head .brand-lockup { visibility: hidden; }
}
@media (max-width: 980px) {
  .login-frame { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .login-frame > .login-shell { padding: 24px 0; }
}

/* POS category tiles: let names breathe on desktop */
@media (min-width: 721px) {
  .pos-category-grid { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)) !important; }
}
.pos-product-card.disabled { background: var(--surface-2) !important; opacity: .72; }
/* Calm inputs: no green "valid" outline; errors only after the user has interacted */
.field-input:valid:not(:placeholder-shown) { border-color: var(--border-strong) !important; }
.field-input:valid:not(:placeholder-shown):focus { border-color: var(--brand-600) !important; }

/* ---------- Density pass: tighter gutters and form padding ---------- */
.content-scroll { padding: 16px 16px 24px !important; }
.surface-panel { padding: 16px !important; }
.section-stack { gap: 14px !important; }
.section-heading { margin-bottom: 12px !important; padding-bottom: 10px !important; }
.stack-form, .form-grid { gap: 12px !important; }
.form-group { margin-bottom: 12px; }
.modal-card { padding: 18px !important; }
.login-shell .form-panel { padding: 22px !important; }

/* ---------- Metric cards: compact, one-line labels, consistent shape ---------- */
#summary-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; gap: 12px !important; }
#summary-cards .metric-card:nth-child(n) {
  min-height: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.metric-card > div:first-child { min-width: 0; }
.metric-card .metric-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 !important; }
.metric-card .metric-value { font-size: 19px !important; line-height: 1.25 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal !important; }
.metric-card .metric-icon { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; }

/* ---------- POS cart: real inner padding so totals never touch the edge ---------- */
.pos-cart { padding: 14px !important; }
.pos-cart-item { padding: 10px !important; }
.pos-cart-discount input { max-width: 120px; }

.boot-title { color: var(--text) !important; }

/* Burmese: system Myanmar fonts keep line heights close to Latin text */
html[lang="my"] body, html[lang="mm"] body { line-height: 1.5; }
html[lang="my"] body, html[lang="my"] button, html[lang="my"] input,
html[lang="my"] select, html[lang="my"] textarea {
  font-family: Inter, "Myanmar Text", "Pyidaungsu", "Padauk", sans-serif !important;
}

/* ---------- Header title: room for Myanmar ascenders (pos-theme sets line-height 1.08 + overflow hidden) ---------- */
.app-header-title { line-height: 1.3 !important; padding-block: 1px; }
html[lang="my"] .app-header-title { line-height: 1.65 !important; font-size: 19px !important; letter-spacing: 0 !important; }
html[lang="my"] .app-header-date { line-height: 1.6; }
@media (max-width: 720px) { html[lang="my"] .app-header-title { font-size: 16px !important; } }

/* ---------- Shop identity: uploaded logo or initials tile ---------- */
.shop-initials {
  display: inline-grid !important; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)) !important;
  color: #fff !important; font-weight: 800; font-size: 15px; letter-spacing: .02em; line-height: 1;
  box-shadow: 0 6px 14px -8px rgba(13, 148, 136, .8); overflow: hidden;
}
.shop-initials.has-logo { background: #fff !important; border: 1px solid var(--border); box-shadow: var(--e1); }
.shop-initials img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0 !important; }
.store-mark.shop-initials { width: 38px; height: 38px; font-size: 14px; }
.login-head .shop-initials.brand-mark { width: 46px; height: 46px; border-radius: 12px; font-size: 17px; }
.login-brand-top .shop-initials { width: 44px; height: 44px; background: rgba(255, 255, 255, .16) !important; border: 1px solid rgba(255, 255, 255, .3); box-shadow: none; }
.login-brand-top .shop-initials.has-logo { background: #fff !important; }
.store-copy { min-width: 0; }
.store-type { margin: 1px 0 0; font-size: 11.5px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app-sidebar:has(.sidebar-toggle-input:checked) .store-type { display: none; }
.login-shop-address { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.login-brand-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Login notes: unavailable shop + demo credentials ---------- */
.login-shop-note {
  margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--danger-bg); color: #991b1b; border: 1px solid #fecaca; font-size: 13.5px; line-height: 1.5;
}
.login-shop-note.is-demo { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-200); }
.login-shop-note strong { display: block; margin-bottom: 8px; font-size: 13px; }
.demo-accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-account {
  display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: #fff; border: 1px solid var(--brand-200); color: var(--text-2); font-size: 12.5px; font: inherit;
}
.demo-account:hover { border-color: var(--brand-500); }
.demo-account.active { border-color: var(--brand-600); box-shadow: var(--ring); }
.demo-account-role { font-weight: 700; color: var(--brand-700); font-size: 13px; }
.demo-account code { font-family: ui-monospace, Consolas, monospace; color: var(--text); font-weight: 600; }
.demo-account b { font-weight: 500; color: var(--muted); }
@media (max-width: 420px) { .demo-accounts { grid-template-columns: 1fr; } }
.login-home-link { margin: 4px 0 0; text-align: center; font-size: 13px; }
.login-home-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.login-home-link a:hover { color: var(--brand-700); }

/* ---------- Demo banner ---------- */
.demo-banner {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  background: linear-gradient(90deg, #0f4c5c, var(--brand-700)); color: #fff; font-size: 13px; font-weight: 500;
}
.demo-banner.hidden { display: none !important; }
.demo-banner span { flex: 1; min-width: 0; }
.demo-banner a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* ---------- Demo banner sits above the header: give app-main a third grid row ---------- */
.app-main:has(> #demo-banner:not(.hidden)) { grid-template-rows: auto var(--header-height) minmax(0, 1fr) !important; }
@media (max-width: 980px) {
  .app-main:has(> #demo-banner:not(.hidden)) { grid-template-rows: auto 70px minmax(0, 1fr) !important; }
  .demo-banner { padding: 6px 12px; font-size: 12px; }
}

/* ---------- Compact product cards: price and stock share one line ---------- */
.pos-product-card, .pos-recent-grid .pos-product-card {
  min-height: 0 !important; grid-template-columns: 44px minmax(0, 1fr) 36px !important; grid-template-rows: auto !important;
  align-items: center; gap: 12px !important; padding: 10px 12px !important;
}
.pos-product-visual { width: 44px !important; height: 44px !important; }
.pos-product-info h3 { font-size: 14px !important; line-height: 1.3 !important; }
.pos-product-info p { margin: 1px 0 4px !important; font-size: 11.5px !important; }
.pos-product-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pos-product-price { font-size: 14px !important; white-space: nowrap; }
.pos-product-stock {
  grid-column: auto !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.5;
  padding: 0 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap;
}
.pos-product-stock.low { color: #b45309 !important; background: var(--warning-bg); border-color: #fde68a; }
.pos-product-add { grid-column: 3 !important; grid-row: 1 !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; }
.pos-product-grid, .pos-recent-grid { gap: 10px !important; }
@media (min-width: 721px) {
  .pos-product-grid, .pos-recent-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; }
}

/* ---------- Myanmar: smaller, steadier type (Myanmar glyphs read larger than Latin at the same size) ---------- */
html[lang="my"] body { font-size: 13px; }
html[lang="my"] .nav-button, html[lang="my"] .footer-button { font-size: 12.5px !important; }
html[lang="my"] .nav-section-label { font-size: 10.5px !important; letter-spacing: 0 !important; }
html[lang="my"] .section-heading h3, html[lang="my"] .pos-recent-heading h3 { font-size: 15px !important; line-height: 1.6 !important; }
html[lang="my"] .metric-label, html[lang="my"] .field-label, html[lang="my"] .pos-category-name { font-size: 12px !important; line-height: 1.6 !important; }
html[lang="my"] .primary-btn, html[lang="my"] .secondary-btn, html[lang="my"] .ghost-btn, html[lang="my"] .danger-btn,
html[lang="my"] .header-logout-btn, html[lang="my"] .mini-btn { font-size: 12.5px !important; }
html[lang="my"] .data-table th { font-size: 11.5px !important; letter-spacing: 0 !important; text-transform: none !important; }
html[lang="my"] .data-table td { font-size: 12.5px; }
html[lang="my"] .pos-search-input, html[lang="my"] .field-input { font-size: 13px !important; }
html[lang="my"] .demo-banner { font-size: 12px; }
html[lang="my"] .pos-product-stock, html[lang="my"] .pos-category-count { font-size: 10.5px !important; }
html[lang="my"] .sidebar-user-name { font-size: 13px !important; }
html[lang="my"] .sidebar-user-role { font-size: 10.5px !important; }

/* ---------- Shared bits for the expenses and monthly profit panels ---------- */
.section-sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.section-total { font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .form-row-2 { grid-template-columns: 1fr; } }

/* ---------- Monthly profit ---------- */
.monthly-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.monthly-figure { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; background: var(--surface-2); min-width: 0; }
.monthly-figure span { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.monthly-figure strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monthly-figure.neg strong { color: #be123c; }
.monthly-figure.net { background: var(--brand-50); border-color: var(--brand-200); }
.monthly-figure.net strong { color: var(--brand-700); }
.monthly-figure.loss { background: var(--danger-bg); border-color: #fecaca; }
.monthly-figure.loss strong { color: var(--danger); }
.monthly-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 170px; }
.monthly-col { display: grid; grid-template-rows: 1fr auto auto; height: 100%; gap: 4px; text-align: center; min-width: 0; }
.monthly-pair { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 100%; border-bottom: 1px solid var(--border); }
.monthly-pair .bar { width: min(22px, 40%); border-radius: 5px 5px 0 0; }
.bar.profit, .monthly-legend i.profit { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); }
.bar.expense, .monthly-legend i.expense { background: linear-gradient(180deg, #fda4af, #f43f5e); }
.monthly-net { font-size: 11.5px; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.monthly-net.loss { color: var(--danger); }
.monthly-label { font-size: 11.5px; color: var(--muted); }
.monthly-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--text-2); }
.monthly-legend span { display: inline-flex; align-items: center; gap: 6px; }
.monthly-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.monthly-legend i.net { background: var(--brand-700); border-radius: 50%; }
@media (max-width: 720px) {
  .monthly-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monthly-bars { height: 140px; gap: 6px; }
}

/* ---------- Expenses ---------- */
.expense-summary { margin-bottom: 0; }
.expense-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1360px) { .expense-layout { grid-template-columns: 1fr; } .expense-form-panel .stack-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; } .expense-form-panel .stack-form > div:first-child, .expense-form-panel .stack-form > div:nth-last-child(2), .expense-form-panel .stack-form > button { grid-column: 1 / -1; } }
@media (max-width: 720px) { .expense-form-panel .stack-form { display: flex; flex-direction: column; } }
.expense-form-panel textarea.field-input { min-height: 64px; resize: vertical; padding-top: 10px; }
.chip-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip-option {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 500;
}
.chip-option svg { color: var(--faint); }
.chip-option:hover { border-color: var(--brand-200); color: var(--text); }
.chip-option.active { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-800); font-weight: 600; }
.chip-option.active svg { color: var(--brand-600); }
.photo-drop {
  display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--brand-600);
}
.photo-drop:hover { border-color: var(--brand-500); background: var(--brand-50); }
.photo-drop strong { display: block; color: var(--text); font-size: 13px; font-weight: 600; }
.photo-drop small { display: block; color: var(--muted); font-size: 12px; }
.photo-drop.hidden, .photo-preview.hidden { display: none !important; }
.photo-preview { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.photo-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.photo-preview-meta { flex: 1; min-width: 0; }
.photo-preview-meta strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-preview-meta small { color: var(--success); font-size: 12px; font-weight: 600; }
.expense-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.expense-filters .list-search-bar { flex: 1 1 220px; }
.method-pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; }
.expense-table .table-actions-inline { display: inline-flex; gap: 6px; justify-content: center; }
.voucher-viewer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .72); }
.voucher-viewer-card { max-width: min(720px, 100%); max-height: 100%; display: grid; gap: 10px; background: #fff; border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--e3); }
.voucher-viewer-card img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; background: var(--surface-2); }
.voucher-viewer-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Minimal product cards: photo/icon · name / price · stock · small add ---------- */
.pos-product-card, .pos-recent-grid .pos-product-card {
  grid-template-columns: 40px minmax(0, 1fr) 28px !important; gap: 10px !important;
  padding: 8px 10px !important; border-radius: 12px !important; box-shadow: none !important; cursor: pointer;
}
.pos-product-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .06) !important; }
.pos-product-card.disabled { cursor: not-allowed; }
.pos-product-visual { width: 40px !important; height: 40px !important; border-radius: 10px !important; overflow: hidden; }
.pos-product-visual.has-photo { background: #fff !important; border: 1px solid var(--border); }
.pos-product-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pos-product-info h3 {
  display: block !important; -webkit-line-clamp: unset !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
  margin: 0 0 2px !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.35 !important;
}
.pos-product-info p { display: none !important; }
.pos-product-meta { flex-wrap: nowrap; gap: 6px; min-width: 0; }
.pos-product-price { font-size: 13px !important; }
.pos-product-stock { background: none !important; border: 0 !important; padding: 0 !important; font-size: 11.5px !important; font-weight: 500 !important; color: var(--faint) !important; overflow: hidden; text-overflow: ellipsis; }
.pos-product-stock::before { content: "· "; }
.pos-product-stock.low { color: #b45309 !important; font-weight: 600 !important; }
.pos-product-add {
  width: 28px !important; height: 28px !important; border-radius: 8px !important; box-shadow: none !important;
  background: var(--brand-50) !important; color: var(--brand-700) !important; align-self: center;
}
.pos-product-card:hover .pos-product-add { background: var(--brand-600) !important; color: #fff !important; }
.pos-product-add:disabled { background: var(--surface-2) !important; color: var(--faint) !important; }
@media (min-width: 721px) {
  .pos-product-grid, .pos-recent-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 8px !important; }
}
html[lang="my"] .pos-product-info h3 { line-height: 1.6 !important; }

/* ---------- Product photo field (edit product modal) ---------- */
.product-photo-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); }
.product-photo-thumb { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); overflow: hidden; }
.product-photo-thumb.has-photo { background: #fff; border: 1px solid var(--border); }
.product-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-photo-copy { flex: 1; min-width: 160px; }
.product-photo-copy strong { display: block; font-size: 13px; }
.product-photo-copy small { color: var(--muted); font-size: 12px; }
.product-photo-field .hidden { display: none !important; }

/* ---------- Metric tones everywhere (dashboard, expenses, platform admin) ---------- */
.metric-grid .metric-card[data-tone="teal"] .metric-icon { background: var(--brand-50) !important; color: var(--brand-600) !important; }
.metric-grid .metric-card[data-tone="indigo"] .metric-icon { background: #eef2ff !important; color: #4f46e5 !important; }
.metric-grid .metric-card[data-tone="amber"] .metric-icon { background: var(--warning-bg) !important; color: var(--warning) !important; }
.metric-grid .metric-card[data-tone="rose"] .metric-icon { background: #ffe4e6 !important; color: #e11d48 !important; }
.metric-grid .metric-card[data-tone="green"] .metric-icon { background: var(--success-bg) !important; color: var(--success) !important; }
.metric-grid .metric-card[data-tone="violet"] .metric-icon { background: #f3e8ff !important; color: #9333ea !important; }
.metric-card .cell-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Platform admin: tinted cards with a coloured top edge */
.super-admin-page .metric-grid .metric-card[data-tone] { border-top: 3px solid var(--tone, var(--brand-500)) !important; background: linear-gradient(180deg, var(--tone-bg, #fff), #fff 70%) !important; }
.super-admin-page .metric-card[data-tone="teal"] { --tone: #14b8a6; --tone-bg: #f0fdfa; }
.super-admin-page .metric-card[data-tone="indigo"] { --tone: #6366f1; --tone-bg: #eef2ff; }
.super-admin-page .metric-card[data-tone="amber"] { --tone: #f59e0b; --tone-bg: #fffbeb; }
.super-admin-page .metric-card[data-tone="rose"] { --tone: #f43f5e; --tone-bg: #fff1f2; }
.super-admin-page .metric-card[data-tone="green"] { --tone: #22c55e; --tone-bg: #f0fdf4; }
.super-admin-page .metric-card[data-tone="violet"] { --tone: #a855f7; --tone-bg: #faf5ff; }

/* ---------- Sales report: totals and filters share one line; tighter columns ---------- */
.sales-report-head { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.sales-report-head .summary-strip { flex: 1 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.sales-report-head .sales-report-toolbar { flex: 0 1 auto; align-self: center; justify-content: flex-end; flex-wrap: nowrap; }
.sales-report-head .sales-report-metric { padding: 9px 14px !important; }
.sales-report-head .sales-report-metric strong { font-size: 17px; }
.sale-when { white-space: nowrap; }
.sale-when strong { display: block; font-weight: 600; color: var(--text); }
.sale-when span { display: block; font-size: 11.5px; color: var(--muted); }
@media (min-width: 721px) {
  .sales-table th:nth-child(1) { width: 110px; }
  .sales-table th:nth-child(2) { width: 90px; }
  .sales-table th:nth-child(3) { width: 120px; }
  .sales-table th:nth-child(5), .sales-table th:nth-child(6) { width: 120px; }
  .sales-table th:nth-child(7) { width: 84px; }
  .sales-table td:nth-child(1), .sales-table td:nth-child(3), .sales-table td:nth-child(5), .sales-table td:nth-child(6) { white-space: nowrap; }
  .sales-table td:nth-child(4) { min-width: 260px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
  .sales-table .sale-sub { display: none; }
}
@media (max-width: 720px) {
  .sales-report-head { flex-direction: column; }
  .sales-report-head .sales-report-toolbar { order: -1; align-self: stretch; }
  .sales-report-head .summary-strip { flex-basis: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sales-report-head .sales-report-metric strong { font-size: 14px; }
}

/* ---------- Toolbars fill the row; history columns sized to their content ---------- */
.inventory-toolbar { display: flex; align-items: center; gap: 10px; }
.inventory-toolbar .search-field { flex: 1 1 auto; max-width: none !important; width: auto !important; }
@media (min-width: 981px) {
  .history-table th:nth-child(1) { width: 80px; }
  .history-table th:nth-child(3) { width: 90px; }
  .history-table th:nth-child(4), .history-table th:nth-child(5) { width: 90px; }
  .history-table th:nth-child(6) { width: 130px; }
  .history-table th:nth-child(8) { width: 70px; }
  .history-table td:nth-child(2) { min-width: 220px; }
  .history-table td:nth-child(6) { white-space: nowrap; }
  .history-table td:nth-child(7) { color: var(--text-2); font-size: 12.5px; }
}
@media (max-width: 720px) {
  .sales-table thead { border-bottom: 1px solid var(--border) !important; }
  .sales-table thead tr { background: var(--surface-2) !important; }
  .sales-table th { color: var(--muted) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  .sales-table tbody td { border-bottom: 0 !important; }
}

/* ---------- Doctor / service fees in the POS cart ---------- */
.pos-fees { display: grid; gap: 6px; padding: 10px 0; border-top: 1px dashed var(--border-strong); }
.pos-fees.hidden { display: none !important; }
.pos-fees-head span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand-800); text-transform: uppercase; letter-spacing: .05em; }
html[lang="my"] .pos-fees-head span { text-transform: none; letter-spacing: 0; }
.pos-fee-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px 30px; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--brand-200); border-radius: 10px; background: var(--brand-50); }
.pos-fee-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-fee-name-input, .pos-fee-amount { width: 100%; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; }
.pos-fee-amount { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos-fee-name-input:focus, .pos-fee-amount:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.pos-fee-remove { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.pos-fee-remove:hover { background: #fff; color: var(--danger); }
.pos-fee-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-fee-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--brand-200); background: #fff; color: var(--brand-800); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pos-fee-chip b { color: var(--muted); font-weight: 600; }
.pos-fee-chip:hover { background: var(--brand-50); border-color: var(--brand-500); }
.pos-fee-chip.ghost { border-style: dashed; color: var(--text-2); }

/* ---------- Fee presets (Account) ---------- */
.fees-settings-list { display: grid; gap: 8px; margin-bottom: 12px; }
.fee-row, .fee-form { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto auto; gap: 8px; align-items: center; }
.fee-row { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.fee-form { padding-top: 12px; border-top: 1px dashed var(--border-strong); }
.fee-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.fee-auto input { width: 16px; height: 16px; accent-color: var(--brand-600); }
.fee-row-actions { display: flex; gap: 6px; }
@media (max-width: 640px) {
  .fee-row, .fee-form { grid-template-columns: 1fr 1fr; }
  .fee-row .fee-auto, .fee-form .fee-auto { grid-column: 1; }
}

/* ---------- Receipt: shop initials and fee lines ---------- */
.rc-initials { display: inline-grid !important; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; font-weight: 800; font-size: 12px; }
.rc-fee .rc-item-name small { color: var(--brand-700); }
.fees-panel { grid-column: 1 / -1; }
.fee-row, .fee-form { grid-template-columns: minmax(180px, 1fr) 140px auto auto; }
.fee-row > .field-input, .fee-form > .field-input { min-width: 0; }
@media (max-width: 640px) { .fee-row, .fee-form { grid-template-columns: 1fr 1fr; } .fee-row > .field-input:first-child, .fee-form > .field-input:first-child { grid-column: 1 / -1; } }

/* ---------- Phone: keep the last panel clear of the bottom navigation ---------- */
@media (max-width: 720px) {
  .content-scroll { padding-bottom: calc(var(--mobile-footer-h, 76px) + 28px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- Shop logo (Account) ---------- */
.logo-panel { grid-column: 1 / -1; }
.shop-logo-setting { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shop-logo-preview { width: 64px !important; height: 64px !important; border-radius: 16px !important; font-size: 22px !important; }
.shop-logo-copy { flex: 1 1 240px; min-width: 0; }
.shop-logo-copy h3 { margin: 0; font-size: 16px; }
.shop-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.shop-logo-actions .hidden { display: none !important; }

/* ---------- Phone: compact fee rows (name + amount, then toggle + actions) ---------- */
@media (max-width: 640px) {
  .fee-row, .fee-form {
    grid-template-columns: minmax(0, 1fr) 104px !important;
    grid-template-areas: "name amount" "auto actions";
    gap: 8px; padding: 10px;
  }
  .fee-form { padding: 12px 0 0; }
  .fee-row > .field-input:first-child, .fee-form > #fee-name { grid-area: name; grid-column: auto !important; }
  .fee-row > .field-input:nth-child(2), .fee-form > #fee-amount { grid-area: amount; text-align: right; }
  .fee-row .fee-auto, .fee-form .fee-auto { grid-area: auto; grid-column: auto !important; }
  .fee-row .fee-row-actions, .fee-form > button { grid-area: actions; justify-self: end; }
  .fee-row .field-input, .fee-form .field-input { min-height: 40px; height: 40px; }
  .fee-row-actions .secondary-btn, .fee-row-actions .ghost-btn { min-height: 36px; padding: 0 12px; }
  .fee-form > button { min-height: 40px; padding: 0 14px; }
  .shop-logo-setting { gap: 12px; }
  .shop-logo-actions { width: 100%; }
  .shop-logo-actions > * { flex: 1; justify-content: center; }
}

/* ---------- Expenses: card list on phones, details sheet, collapsible form ---------- */
.expense-form-toggle { display: none !important; }
.expense-cards { display: none; }
.expense-month-field { display: inline-flex; align-items: center; gap: 8px; }
.expense-month-field span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.expense-detail-card { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 16px; }
.expense-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.expense-detail-head span { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.expense-detail-head strong { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.expense-detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0; }
.expense-detail-list dt { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
html[lang="my"] .expense-detail-list dt { text-transform: none; letter-spacing: 0; }
.expense-detail-list dd { margin: 2px 0 0; font-size: 14px; color: var(--text); word-break: break-word; }
.expense-detail-photo img { width: 100%; max-height: 50dvh; object-fit: contain; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); cursor: zoom-in; }
.danger-text { color: var(--danger) !important; }

@media (max-width: 720px) {
  .expense-summary { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .expense-summary .metric-card { padding: 10px 12px !important; min-height: 0 !important; }
  .expense-summary .metric-value { font-size: 15px !important; }
  .expense-summary .metric-icon { width: 30px !important; height: 30px !important; }
  .expense-layout { gap: 12px; }

  /* Form folds away behind an "Add expense" button */
  .expense-form-toggle { display: inline-flex !important; min-height: 38px; padding: 0 12px; }
  .expense-form-panel .section-heading { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; align-items: center; }
  .expense-form-panel .section-heading .section-sub { display: none; }
  .expense-form-panel:not(.is-collapsed) .section-heading { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
  .expense-form-panel:not(.is-collapsed) .expense-form-toggle { background: var(--surface-2) !important; color: var(--text-2) !important; box-shadow: none !important; }
  .expense-form-panel.is-collapsed #expense-form { display: none !important; }
  .expense-form-panel { padding: 12px 14px !important; }

  /* Filters: search on top, month + category side by side */
  .expense-filters { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .expense-filters .list-search-bar { grid-column: 1 / -1; }
  .expense-month-field { position: relative; display: block; }
  .expense-month-field span { position: absolute; top: -7px; left: 10px; padding: 0 4px; font-size: 10.5px; background: var(--surface); z-index: 1; }
  .expense-filters .field-input { width: 100% !important; min-width: 0 !important; height: 42px; }

  /* Cards instead of the table */
  .expense-table, .expense-table + * { }
  [data-view="expenses"] .table-wrap { display: none !important; }
  .expense-cards { display: grid; gap: 8px; }
  .expense-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; }
  .expense-card:active { background: var(--surface-2); }
  .expense-card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #ffe4e6; color: #e11d48; }
  .expense-card-main { min-width: 0; display: grid; gap: 1px; }
  .expense-card-main strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .expense-card-main span, .expense-card-main em { font-size: 12px; color: var(--muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .expense-card-side { display: grid; justify-items: end; gap: 3px; }
  .expense-card-side b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .expense-card-photo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--brand-700); background: var(--brand-50); border-radius: 999px; padding: 2px 7px; }
  .expense-cards .empty-state { padding: 20px 8px !important; }
  .expense-detail-list { grid-template-columns: 1fr; }
  .voucher-viewer { align-items: end; padding: 0; }
  .voucher-viewer-card { width: 100%; max-width: none; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .expense-form-panel.is-collapsed { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .expense-form-panel.is-collapsed .section-heading { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .expense-form-panel.is-collapsed .section-heading > div { display: none; }
  .expense-form-panel.is-collapsed .expense-form-toggle { width: 100%; min-height: 46px; justify-content: center; }
}
@media (max-width: 720px) {
  .expense-detail-card { max-height: 92dvh; padding-bottom: 0 !important; }
  .expense-detail-list { grid-template-columns: 1fr 1fr !important; gap: 8px 12px; }
  .expense-detail-list dd { font-size: 13.5px; }
  .expense-detail-photo img { max-height: 38dvh; }
  .expense-detail-card .voucher-viewer-actions { position: sticky; bottom: 0; margin: 10px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .expense-detail-card .voucher-viewer-actions > * { flex: 1; justify-content: center; }
}

/* ---------- Dashboard cards on phones: 3 counts per row, money 2 per row ---------- */
@media (max-width: 720px) {
  #summary-cards { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; }
  #summary-cards .metric-card { grid-column: span 3; min-height: 0 !important; padding: 10px 12px !important; }
  #summary-cards .metric-card.metric-count { grid-column: span 2; position: relative; display: block !important; padding: 10px !important; }
  #summary-cards .metric-card.metric-wide { grid-column: 1 / -1; }
  #summary-cards .metric-card .metric-value { font-size: 15px !important; }
  #summary-cards .metric-card.metric-count .metric-value { font-size: 20px !important; margin-top: 4px; }
  #summary-cards .metric-card.metric-count .metric-label { font-size: 11px !important; white-space: normal !important; line-height: 1.3 !important; padding-right: 26px; min-height: 2.6em; }
  #summary-cards .metric-card.metric-count .metric-icon { position: absolute; top: 8px; right: 8px; width: 24px !important; height: 24px !important; border-radius: 7px !important; }
  #summary-cards .metric-card.metric-count .metric-icon svg { width: 14px; height: 14px; }
  #summary-cards .metric-card .metric-icon { width: 32px !important; height: 32px !important; }
}