:root {
      --bg: #f4f3ef;
      --card: #ffffff;
      --text: #121212;
      --muted: #6b7280;
      --border: #e5e7eb;
      --primary: #ff7a00;
      --primary-dark: #e86800;
      --primary-soft: #fff0dd;
      --black: #050505;
      --charcoal: #141414;
      --green: #16a34a;
      --orange: #ff7a00;
      --red: #dc2626;
      --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
      --radius: 18px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    button, input, select, textarea { font: inherit; }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 260px 1fr;
    }

    .sidebar {
      background: radial-gradient(circle at top, #1c1c1c 0%, #050505 48%, #000 100%);
      color: white;
      padding: 22px 16px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      border-right: 3px solid var(--primary);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      padding: 8px;
    }

    .brand-logo {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), #ffb000);
      color: #050505;
      display: grid;
      place-items: center;
      overflow: hidden;
      flex-shrink: 0;
      font-size: 22px;
      font-weight: 900;
      box-shadow: 0 0 24px rgba(255, 122, 0, 0.28);
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .brand h1 {
      font-size: 18px;
      margin: 0;
      line-height: 1.1;
    }

    .brand p {
      margin: 3px 0 0;
      color: #9ca3af;
      font-size: 12px;
    }

    .nav {
      display: grid;
      gap: 8px;
    }

    .nav button {
      border: 0;
      background: transparent;
      color: #d1d5db;
      padding: 13px 14px;
      border-radius: 14px;
      text-align: left;
      cursor: pointer;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .nav button:hover,
    .nav button.active {
      background: rgba(255, 122, 0, 0.16);
      color: white;
    }

    .main {
      padding: 24px;
      overflow: hidden;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 22px;
    }

    .topbar h2 {
      margin: 0;
      font-size: 28px;
      letter-spacing: -0.04em;
    }

    .topbar p {
      margin: 4px 0 0;
      color: var(--muted);
    }

    .pill {
      background: var(--card);
      border: 1px solid var(--border);
      padding: 10px 14px;
      border-radius: 999px;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .view { display: none; }
    .view.active { display: block; }

    .grid {
      display: grid;
      gap: 18px;
    }

    .pos-layout {
      display: grid;
      grid-template-columns: 1fr 390px;
      gap: 20px;
      align-items: start;
    }

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

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

    .card-header h3 {
      margin: 0;
      font-size: 18px;
    }

    .card-body { padding: 18px; }

    .search-row {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
    }

    .input, .select, .textarea {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 14px;
      background: white;
      outline: none;
    }

    .input:focus, .select:focus, .textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px var(--primary-soft);
    }

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

    .product-card {
      border: 1px solid var(--border);
      border-radius: 18px;
      background: white;
      padding: 12px;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
      text-align: left;
      min-height: 210px;
    }

    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
      border-color: rgba(255, 122, 0, 0.35);
    }

    .thumb {
      height: 105px;
      border-radius: 14px;
      background: linear-gradient(135deg, #050505, #242424);
      display: grid;
      place-items: center;
      color: var(--primary);
      font-size: 34px;
      font-weight: 900;
      overflow: hidden;
      margin-bottom: 10px;
      border: 1px solid rgba(255, 122, 0, 0.18);
    }

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

    .item-photo {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: linear-gradient(135deg, #050505, #242424);
      color: var(--primary);
      display: grid;
      place-items: center;
      font-size: 24px;
      font-weight: 900;
      overflow: hidden;
      flex-shrink: 0;
      border: 1px solid rgba(255, 122, 0, 0.20);
    }

    .item-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .product-card h4 {
      margin: 0 0 6px;
      font-size: 15px;
      line-height: 1.25;
    }

    .price {
      color: var(--primary);
      font-size: 18px;
      font-weight: 900;
    }

    .category {
      color: var(--muted);
      font-size: 12px;
      margin-top: 4px;
    }

    .cart-line {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      padding: 14px 0;
      border-bottom: 1px solid var(--border);
    }

    .cart-line:last-child { border-bottom: 0; }

    .cart-line h4 {
      margin: 0 0 4px;
      font-size: 15px;
    }

    .cart-line p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
    }

    .qty-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .icon-btn {
      border: 1px solid var(--border);
      background: white;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 900;
    }

    .icon-btn:hover { background: #f9fafb; }

    .total-box {
      background: linear-gradient(135deg, #050505, #171717);
      color: white;
      padding: 18px;
      border-radius: 18px;
      margin-top: 18px;
      border: 1px solid rgba(255, 122, 0, 0.35);
    }

    .total-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #d1d5db;
    }

    .grand-total {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      font-weight: 900;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.15);
    }

    .grand-total span:last-child { color: var(--primary); }

    .btn {
      border: 0;
      border-radius: 14px;
      padding: 12px 16px;
      cursor: pointer;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
    }

    .btn-primary { background: var(--primary); color: #050505; box-shadow: 0 8px 18px rgba(255, 122, 0, 0.24); }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-dark { background: #050505; color: white; }
    .btn-light { background: #f3f4f6; color: #111827; }
    .btn-green { background: var(--green); color: white; }
    .btn-orange { background: var(--orange); color: #050505; }
    .btn-red { background: var(--red); color: white; }
    .btn-full { width: 100%; }

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

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

    th, td {
      padding: 13px 12px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: middle;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: #f9fafb;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 900;
    }

    .badge.green { background: #dcfce7; color: #166534; }
    .badge.orange { background: #ffedd5; color: #9a3412; }
    .badge.red { background: #fee2e2; color: #991b1b; }
    .badge.gray { background: #f3f4f6; color: #374151; }

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

    .form-grid .full { grid-column: 1 / -1; }

    label {
      display: grid;
      gap: 6px;
      color: #374151;
      font-size: 13px;
      font-weight: 800;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.55);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 50;
    }

    .modal-backdrop.show { display: flex; }

    .modal {
      width: min(720px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      background: white;
      border-radius: 24px;
      box-shadow: 0 30px 80px rgba(0,0,0,0.25);
    }

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

    .modal-head h3 { margin: 0; }
    .modal-body { padding: 20px; }

    .warning-box {
      background: #fff7ed;
      border: 1px solid #fed7aa;
      color: #9a3412;
      padding: 14px;
      border-radius: 16px;
      margin-bottom: 14px;
      display: none;
      font-weight: 800;
    }

    .warning-box.show { display: block; }

    .empty {
      padding: 36px;
      color: var(--muted);
      text-align: center;
      border: 1px dashed var(--border);
      border-radius: 18px;
      background: #fafafa;
    }

    .mini {
      font-size: 12px;
      color: var(--muted);
    }

    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: static;
        height: auto;
        border-radius: 0 0 24px 24px;
        border-right: 0;
        border-bottom: 3px solid var(--primary);
      }
      .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .nav button { text-align: center; justify-content: center; }
      .pos-layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 640px) {
      .main { padding: 14px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .topbar h2 { font-size: 24px; }
      .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .product-card { min-height: 190px; }
      .thumb { height: 86px; }
      .form-grid { grid-template-columns: 1fr; }
      .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      table { font-size: 13px; }
      th, td { padding: 10px 8px; }
    }


/* Full login page */
.login-page {
  min-height: 100vh;
  display: none;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 122, 0, 0.28), transparent 32%),
    linear-gradient(135deg, #050505 0%, #171717 48%, #2b1603 100%);
}

body.login-active .login-page { display: grid; }
body.login-active .app { display: none; }
body.login-active .modal-backdrop:not(#modalBackdrop) { display: none; }

.login-shell {
  width: min(980px, 100%);
  min-height: 560px;
  background: white;
  border-radius: 30px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.35);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border: 1px solid rgba(255,255,255,0.16);
}

.login-hero {
  position: relative;
  min-height: 560px;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 176, 0, 0.45), transparent 28%),
    linear-gradient(135deg, #050505 0%, #111827 54%, #ff7a00 140%);
  background-size: cover;
  background-position: center;
}

.login-hero-overlay {
  position: absolute;
  inset: 0;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: white;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.74));
}

.login-logo {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--primary), #ffb000);
  color: #050505;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 18px;
  box-shadow: 0 18px 40px rgba(255, 122, 0, 0.28);
}

.login-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-hero h1 {
  margin: 0;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.login-hero p {
  margin: 12px 0 0;
  color: #f3f4f6;
  font-weight: 800;
}

.login-card {
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-card-head { margin-bottom: 22px; }
.login-card-head h2 {
  margin: 14px 0 6px;
  font-size: 32px;
  letter-spacing: -0.04em;
}
.login-card-head p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-hero { min-height: 280px; }
  .login-card { padding: 28px; }
}

/* Thermal receipt preview and print */
.receipt-modal-wrap {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.receipt-paper {
  width: 80mm;
  max-width: 100%;
  background: white;
  color: #000;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.25;
}

.receipt-center { text-align: center; }
.receipt-center h2 {
  margin: 6px 0 3px;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.receipt-center p { margin: 3px 0; }
.receipt-logo-mini {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #000;
  color: #fff;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui;
  font-weight: 900;
}
.receipt-logo-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.receipt-divider {
  border-top: 1px dashed #000;
  margin: 9px 0;
}
.receipt-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 3px 0;
}
.receipt-row span { overflow-wrap: anywhere; }
.receipt-row strong { text-align: right; white-space: nowrap; }
.receipt-item { margin: 8px 0; }
.receipt-item-name { font-weight: 800; }
.receipt-footer { margin-top: 8px; }
.receipt-actions { justify-content: center; }

@media print {
  @page {
    size: 80mm auto;
    margin: 0;
  }
  body * {
    visibility: hidden !important;
  }
  #receiptPrintArea,
  #receiptPrintArea * {
    visibility: visible !important;
  }
  #receiptPrintArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    max-width: 80mm;
    padding: 4mm;
    border: 0;
    box-shadow: none;
  }
  .no-print { display: none !important; }
}


/* Dashboard */
.dashboard-kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px; margin:16px 0; }
.kpi-card { position:relative; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)); border:1px solid rgba(255,255,255,0.06); border-radius:20px; padding:18px; box-shadow: var(--shadow); }
.kpi-card::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%; background: radial-gradient(circle, rgba(255,122,0,0.18), rgba(255,122,0,0)); }
.kpi-label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:0.08em; }
.kpi-value { font-size:28px; font-weight:900; margin-top:6px; }
.kpi-meta { display:flex; justify-content:space-between; gap:12px; margin-top:10px; font-size:12px; color:var(--muted); }
.kpi-card.good .kpi-value { color:#6edb8f; }
.kpi-card.warn .kpi-value { color:#ffb454; }
.kpi-card.bad .kpi-value { color:#ff7b72; }
.dashboard-health-strip { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.dashboard-grid-two { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; margin-bottom:16px; }
.dashboard-chart-card .card-body { min-height: 320px; }
.chart-canvas { width:100%; display:block; background:rgba(255,255,255,0.02); border-radius:14px; }
.chart-legend { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.chart-legend-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(255,255,255,0.06); border-radius:12px; background:rgba(255,255,255,0.02); }
.legend-swatch { width:12px; height:12px; border-radius:999px; flex:0 0 12px; }
.legend-text { display:flex; justify-content:space-between; width:100%; gap:8px; font-size:12px; }
.insight-list { display:grid; gap:12px; }
.insight-item { border-left:4px solid var(--orange); border-radius:12px; background:rgba(255,255,255,0.03); padding:12px 14px; }
.insight-item.good { border-left-color:#2ea043; }
.insight-item.warn { border-left-color:#ffb454; }
.insight-item.bad { border-left-color:#ff7b72; }
.insight-title { font-weight:800; margin-bottom:4px; }
.insight-desc { color:var(--muted); font-size:13px; line-height:1.5; }
.dashboard-leak-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.leak-card { border-radius:16px; padding:14px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); }
.leak-card .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.leak-card .value { font-size:24px; font-weight:900; margin-top:6px; }
.leak-card .sub { color:var(--muted); font-size:12px; margin-top:6px; }
.table-badge-good, .table-badge-warn, .table-badge-bad { display:inline-block; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:800; }
.table-badge-good { background:rgba(46,160,67,.18); color:#6edb8f; }
.table-badge-warn { background:rgba(255,180,84,.16); color:#ffb454; }
.table-badge-bad { background:rgba(255,123,114,.16); color:#ff7b72; }
@media (max-width: 768px) { .kpi-value { font-size:24px; } .dashboard-grid-two { grid-template-columns:1fr; } }

.dashboard-salary-placeholder { display:flex; justify-content:space-between; gap:16px; align-items:center; min-height:170px; border:1px dashed rgba(255,255,255,0.12); border-radius:18px; padding:18px; background:linear-gradient(135deg, rgba(255,122,0,0.06), rgba(255,255,255,0.02)); }
.dashboard-salary-placeholder h3 { margin:6px 0 8px; }
.salary-metric { min-width:120px; border-radius:16px; padding:16px; background:rgba(255,255,255,0.04); text-align:center; }
.salary-metric span { display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.salary-metric strong { display:block; margin-top:8px; font-size:30px; }
.card-header > div h3 { margin:0; }
.card-header > div .mini { display:block; margin-top:4px; }

/* Dashboard box height stability fix */
.dashboard-chart-card .card-body { min-height: 320px; max-height: 360px; overflow: hidden; }
.chart-canvas { height: 260px !important; max-height: 260px; }
.kpi-card { min-height: 138px; }
.dashboard-salary-placeholder { min-height: 170px; }

/* Grouped sidebar navigation */
.nav-group {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.025);
}

.nav-group-toggle {
  width: 100%;
  color: white !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.nav-group-toggle span {
  transition: transform 0.16s ease;
}

.nav-submenu {
  display: grid;
  gap: 4px;
  padding: 7px;
}

.nav-submenu button {
  padding: 11px 12px;
  font-size: 13px;
  border-radius: 12px;
}

.nav-group.collapsed .nav-submenu {
  display: none;
}

.nav-group.collapsed .nav-group-toggle span {
  transform: rotate(-90deg);
}

.nav-logout {
  margin-top: 8px;
  background: rgba(255, 122, 0, 0.10) !important;
  border: 1px solid rgba(255, 122, 0, 0.22) !important;
}

@media (max-width: 980px) {
  .nav-group {
    border-radius: 14px;
  }
  .nav-group-toggle {
    justify-content: center;
  }
  .nav-submenu {
    grid-template-columns: 1fr;
  }
}

/* Import preview */
.import-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.import-error {
  color: #ff7b72;
  font-size: 12px;
  font-weight: 800;
  margin: 2px 0;
}
.import-warning {
  color: #ffb454;
  font-size: 12px;
  font-weight: 800;
  margin: 2px 0;
}

/* Staff pay */
#view-staff-pay .warning-box.show {
  display: block;
}
#view-staff-pay table td {
  vertical-align: top;
}

/* Front login choices / attendance kiosk */
.front-choice-grid {
  display: grid;
  gap: 12px;
}
.front-choice-card {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  background: rgba(255,255,255,0.035);
  color: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.front-choice-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255,122,0,0.55);
  background: rgba(255,122,0,0.09);
}
.front-choice-card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}
.front-choice-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.front-panel h3 {
  margin: 0 0 6px;
}

.attendance-status-box {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  line-height: 1.45;
}

/* Payroll report snapshot */
.payroll-report-sheet {
  background: #fff;
  color: #111;
  border-radius: 16px;
  padding: 22px;
  overflow-x: auto;
}
.payroll-report-header h1 {
  color: #111;
  margin: 0 0 22px;
}
.payroll-report-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.payroll-report-meta span {
  display: block;
  color: #444;
  font-size: 12px;
  margin-bottom: 7px;
}
.payroll-report-meta strong {
  display: block;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  padding: 12px 14px;
  color: #111;
  font-weight: 500;
}
.payroll-report-table {
  color: #111;
  background: #fff;
}
.payroll-report-table th {
  background: #f6f6f6 !important;
  color: #444 !important;
  border-bottom: 3px solid var(--orange);
}
.payroll-report-table td {
  color: #111 !important;
  border-bottom: 1px solid #e8e8e8;
}
.payroll-report-table td span {
  color: #777;
  font-size: 12px;
}
.payroll-report-table tfoot td {
  font-weight: 800;
  border-top: 1px solid #ddd;
}
.orange-text {
  color: var(--orange) !important;
  font-weight: 900;
}

.formula-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.formula-box div {
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 14px;
  background: #fafafa;
}
.formula-box span {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}
.formula-box strong {
  font-size: 20px;
  color: #111;
}

/* Payroll polish */
.report-warning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.report-warning {
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #e2e2e2;
  background: #fafafa;
}
.report-warning strong {
  display: block;
  margin-bottom: 5px;
  color: #111;
}
.report-warning span {
  color: #555;
  font-size: 12px;
  line-height: 1.4;
}
.report-warning.good { border-left: 5px solid #2ea043; }
.report-warning.warn { border-left: 5px solid #ffb454; }
.report-warning.bad { border-left: 5px solid #ff7b72; }
.report-section-title {
  font-size: 18px;
  margin: 28px 0 12px;
  color: #111;
}
.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}
.signature-grid div {
  min-height: 74px;
  border-top: 1px solid #111;
  padding-top: 8px;
}
.signature-grid span {
  display: block;
  color: #555;
  font-size: 12px;
  margin-bottom: 6px;
}
.signature-grid strong {
  color: #111;
}

/* Suppliers / purchases */
.purchase-lines {
  display: grid;
  gap: 10px;
}
.purchase-line {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr 1fr auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
}
@media (max-width: 900px) {
  .purchase-line {
    grid-template-columns: 1fr;
  }
}

.staff-pay-tabs { position: sticky; top: 0; z-index: 2; }

/* Mobile / tablet responsive polish */
.mobile-nav-toggle {
  display: none;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  cursor: pointer;
  margin: 0 0 12px;
}

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

.card-body[style*="overflow-x:auto"],
.card-body:has(table) {
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
}

@media (max-width: 1180px) {
  .app {
    grid-template-columns: 230px 1fr;
  }
  .pos-layout {
    grid-template-columns: 1fr 340px;
  }
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .product-card {
    min-height: 185px;
  }
  .thumb {
    height: 88px;
  }
  .dashboard-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

@media (max-width: 980px) {
  .app {
    display: block;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    max-height: 100vh;
    padding: 12px;
    border-radius: 0;
    overflow-y: auto;
  }

  .brand {
    margin-bottom: 10px;
    padding: 4px;
  }

  .brand-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .sidebar .nav {
    display: none;
  }

  .sidebar.mobile-nav-open .nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: 68vh;
    overflow-y: auto;
    padding-bottom: 8px;
  }

  .nav-group {
    border-radius: 14px;
  }

  .nav-group-toggle {
    justify-content: space-between !important;
  }

  .nav-submenu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-submenu button {
    justify-content: center;
    text-align: center;
    min-height: 44px;
  }

  .nav-logout {
    justify-content: center !important;
  }

  .main {
    padding: 16px;
    overflow: visible;
  }

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

  .topbar .actions {
    width: 100%;
  }

  .topbar .actions .btn,
  .staff-pay-tabs .actions .btn {
    flex: 1 1 140px;
  }

  .pos-layout {
    grid-template-columns: 1fr;
  }

  #view-pos .pos-layout > .card:nth-child(2) {
    order: -1;
  }

  #view-pos .pos-layout > .card:nth-child(2) .card-body {
    max-height: none;
  }

  .search-row {
    flex-direction: column;
  }

  .search-row select {
    max-width: none !important;
  }

  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-card {
    min-height: 170px;
  }

  .cart-line {
    align-items: flex-start;
  }

  .dashboard-grid-two {
    grid-template-columns: 1fr !important;
  }

  .modal-backdrop {
    padding: 12px;
    align-items: stretch;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .modal-head,
  .modal-body {
    padding: 16px;
  }

  .login-page {
    padding: 14px;
  }

  .login-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 22px;
  }

  .login-hero {
    min-height: 190px;
  }

  .login-hero-overlay {
    padding: 24px;
  }

  .login-logo {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 24px;
  }

  .login-card {
    padding: 22px;
  }
}

@media (max-width: 720px) {
  .main {
    padding: 12px;
  }

  .topbar h2 {
    font-size: 24px;
  }

  .topbar p {
    font-size: 13px;
  }

  .card-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .card-header .btn,
  .card-header button {
    width: 100%;
    justify-content: center;
  }

  .card-body {
    padding: 14px;
  }

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

  .dashboard-kpi-grid {
    grid-template-columns: 1fr;
  }

  .kpi-card {
    min-height: auto;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-card {
    min-height: 150px;
    padding: 10px;
  }

  .product-card h4 {
    font-size: 14px;
    line-height: 1.25;
  }

  .thumb {
    height: 76px;
    font-size: 28px;
  }

  .btn,
  .icon-btn,
  .nav button {
    min-height: 44px;
  }

  .actions .btn {
    flex: 1 1 100%;
  }

  .purchase-line {
    grid-template-columns: 1fr !important;
  }

  .front-choice-card {
    padding: 14px;
  }

  .front-choice-card strong {
    font-size: 16px;
  }

  .payroll-report-sheet {
    padding: 14px;
    border-radius: 12px;
  }

  .formula-box,
  .payroll-report-meta,
  .signature-grid {
    grid-template-columns: 1fr !important;
  }

  table {
    min-width: 760px;
  }

  th, td {
    padding: 9px 8px;
    font-size: 12px;
  }

  .modal table {
    min-width: 680px;
  }
}

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

  .brand p {
    display: none;
  }

  .login-hero {
    display: none;
  }

  .login-shell {
    border-radius: 18px;
  }

  .login-card {
    padding: 18px;
  }

  .pill {
    width: 100%;
    text-align: center;
  }
}

/* Cash drawer */
#view-cash-drawer label {
  font-weight: 800;
}
#cashSessionCurrent .pill {
  white-space: normal;
}

/* Health check / checklist */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.checklist-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fafafa;
  font-weight: 800;
}
.checklist-item input {
  width: 18px;
  height: 18px;
}

/* Multi-business selector */
.business-switcher {
  margin: 0 0 14px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.business-switcher label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  color: #d1d5db;
  margin-bottom: 6px;
}
.business-switcher .select {
  background: #111;
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
@media (max-width: 980px) {
  .business-switcher {
    margin-bottom: 10px;
  }
}

/* Multi-sauce configurator */
.extra-sauce-line {
  grid-template-columns: 1fr 1fr auto;
}
@media (max-width: 720px) {
  .extra-sauce-line {
    grid-template-columns: 1fr !important;
  }
}


/* Online status / sync polish */
.online-status-bar {
  position: fixed;
  top: 10px;
  right: 14px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.online-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff7ed;
  color: #9a3412;
}

.online-status-pill.good {
  background: #dcfce7;
  color: #166534;
}

.online-status-pill.bad {
  background: #fee2e2;
  color: #991b1b;
}

.online-status-pill.warn {
  background: #fef3c7;
  color: #92400e;
}

.online-status-sync {
  pointer-events: auto;
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  background: white;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
  cursor: pointer;
}

@media (max-width: 720px) {
  .online-status-bar {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    justify-content: flex-end;
  }
  .online-status-pill, .online-status-sync {
    font-size: 11px;
    padding: 7px 9px;
  }
}