:root {
  --bg: #0b1220;
  --bg-soft: #101827;
  --card: rgba(255, 255, 255, 0.96);
  --card-soft: rgba(255, 255, 255, 0.84);
  --text: #111827;
  --muted: #64748b;
  --line: #e5e7eb;
  --gold: #f59e0b;
  --gold-dark: #b45309;
  --green: #059669;
  --red: #dc2626;
  --blue: #2563eb;
  --shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
  --radius: 24px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef2f7 42%, #f8fafc 100%);
}

.login-body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(245, 158, 11, .35), transparent 28%),
    linear-gradient(135deg, #0f172a, #111827 55%, #1f2937);
}

.login-card {
  width: 100%;
  max-width: 430px;
  background: rgba(255, 255, 255, .96);
  padding: 36px;
  border-radius: 30px;
  box-shadow: 0 28px 90px rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,.55);
}

.brand-badge {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--gold), #111827 72%);
  color: white;
  border-radius: 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 950;
  box-shadow: 0 14px 30px rgba(245, 158, 11, .28);
}

.brand-badge.small {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 16px;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 282px;
  position: sticky;
  top: 0;
  height: 100vh;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(17, 24, 39, .98)),
    radial-gradient(circle at top left, rgba(245, 158, 11, .28), transparent 36%);
  color: white;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 12px 0 45px rgba(15, 23, 42, .18);
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand strong { font-size: 17px; letter-spacing: .2px; }
.brand span {
  display: block;
  color: #cbd5e1;
  font-size: 12px;
  margin-top: 2px;
}

.sidebar nav {
  display: grid;
  gap: 6px;
  padding: 8px 0 18px;
}

.sidebar nav a {
  position: relative;
  color: #cbd5e1;
  text-decoration: none;
  padding: 11px 13px 11px 38px;
  border-radius: 16px;
  font-weight: 750;
  font-size: 14px;
  transition: .18s ease;
}

.sidebar nav a::before {
  content: "●";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: rgba(245, 158, 11, .7);
}

.sidebar nav a.active,
.sidebar nav a:hover {
  background: linear-gradient(135deg, var(--gold), #fbbf24);
  color: #111827;
  box-shadow: 0 12px 24px rgba(245, 158, 11, .24);
  transform: translateX(3px);
}
.sidebar nav a.active::before,
.sidebar nav a:hover::before { color: #111827; }

.logout {
  margin-top: auto;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: white;
  padding: 12px;
  border-radius: 16px;
  font-weight: 800;
}
.logout:hover { background: rgba(255,255,255,.14); }

.main-content {
  flex: 1;
  padding: 26px 30px 40px;
  overflow-x: hidden;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  border-radius: 28px;
  color: white;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .96), rgba(30, 41, 59, .94)),
    radial-gradient(circle at top right, rgba(245, 158, 11, .32), transparent 32%);
  box-shadow: var(--shadow);
}

.topbar h2 {
  margin: 0;
  font-weight: 950;
  letter-spacing: -.4px;
}

.topbar p {
  margin: 6px 0 0;
  color: #cbd5e1;
}

.date-pill {
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.metric-card,
.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(226, 232, 240, .8);
}

.metric-card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  min-height: 138px;
}
.metric-card::after {
  content: "";
  position: absolute;
  width: 94px;
  height: 94px;
  right: -36px;
  top: -36px;
  background: rgba(245, 158, 11, .14);
  border-radius: 50%;
}
.metric-card span {
  color: var(--muted);
  font-weight: 850;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .55px;
}
.metric-card h3 {
  margin: 11px 0 6px;
  font-weight: 950;
  font-size: 28px;
  letter-spacing: -.5px;
}
.metric-card small { color: #94a3b8; font-weight: 650; }
.metric-card.success h3 { color: var(--green); }
.metric-card.danger h3 { color: var(--red); }

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 22px;
}

.panel { padding: 23px; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.panel-header h5 {
  margin: 0;
  font-weight: 950;
  letter-spacing: -.2px;
}
.panel-header small { color: var(--muted); font-weight: 650; }

.module-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,251,235,.92));
}
.module-hero::after {
  content: "";
  position: absolute;
  inset: auto -90px -100px auto;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(245, 158, 11, .16);
}
.module-hero h4 { margin-bottom: .35rem; font-weight: 950; }
.module-hero p { color: var(--muted); margin-bottom: 0; max-width: 780px; }

.table { --bs-table-bg: transparent; }
thead th {
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .45px;
  font-size: 12px;
  border-bottom: 1px solid var(--line) !important;
}
tbody td { color: #1f2937; border-color: #eef2f7 !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(248,250,252,.75); }

.form-control, .form-select {
  border-radius: 14px;
  border-color: #dbe3ef;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus { border-color: var(--gold); }
.btn { border-radius: 14px; font-weight: 800; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), #fbbf24);
  border-color: var(--gold);
  color: #111827;
}
.btn-primary:hover { background: linear-gradient(135deg, #d97706, #f59e0b); border-color: #d97706; color: #111827; }
.btn-outline-secondary { border-color: #cbd5e1; color: #475569; }

.ai-message {
  background: linear-gradient(135deg, #fff7ed, #fffbeb);
  border-left: 4px solid var(--gold);
  padding: 14px;
  border-radius: 16px;
  margin-bottom: 10px;
  font-weight: 700;
}
.status-badge, .badge-soft {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.tab-page { display: none; }
.tab-page.active-tab { display: block; }
.search-box { max-width: 280px; }
code { background: #f3f4f6; padding: 5px 8px; border-radius: 8px; color: #111827; }
.price-input { max-width: 140px; margin-left: auto; }
.dashboard-summary-grid { grid-template-columns: repeat(4, 1fr); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 13px;
}
.feature-grid > div {
  background: linear-gradient(135deg, #f8fafc, #fff);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 15px;
  font-weight: 800;
  color: #334155;
}
.feature-list { margin: 0; padding-left: 18px; color: #475569; }
.workflow { margin: 0; color: #475569; }
.workflow li { margin-bottom: 8px; }

.report-output { display: grid; gap: 18px; }
.report-title-card h4 { margin: 0 0 6px; font-weight: 950; }
.report-card { margin-bottom: 18px; }
.report-table th, .report-table td { vertical-align: middle; }

.expense-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}
.expense-form-wide { grid-column: span 2; }
.expense-form-actions { display: flex; align-items: end; gap: 10px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter-row .form-select, .filter-row .form-control { max-width: 190px; }

#expensesTab .module-hero {
  background:
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(124,45,18,.92)),
    radial-gradient(circle at top right, rgba(245,158,11,.35), transparent 34%);
  color: white;
}
#expensesTab .module-hero p { color: #fde68a; }
#expensesTab .panel:nth-of-type(3) { border-top: 5px solid var(--gold); }

@media (max-width: 1200px) {
  .dashboard-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .sidebar { width: 250px; }
}
@media (max-width: 1000px) {
  .app-shell { display: block; }
  .sidebar { width: 100%; height: auto; position: relative; }
  .sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-grid, .content-grid { grid-template-columns: 1fr; }
  .topbar { display: block; }
  .date-pill { display: inline-block; margin-top: 15px; }
}
@media (max-width: 700px) {
  .main-content { padding: 18px; }
  .dashboard-summary-grid { grid-template-columns: 1fr; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .expense-form-grid { grid-template-columns: 1fr; }
  .expense-form-wide { grid-column: auto; }
  .expense-form-actions { align-items: stretch; flex-direction: column; }
  .sidebar nav { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar, #reportsTab > .panel:first-child, .logout,
  #expensesTab .module-hero, #expensesTab form, #expensesTab .filter-row, #expensesTab .panel-header .btn {
    display: none !important;
  }
  .main-content { padding: 0; }
  .tab-page { display: none !important; }
  #reportsTab, #expensesTab { display: block !important; }
  .panel, .metric-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* Inventory module refinements */
.stacked-form .form-label { font-weight: 700; font-size: .82rem; color: #475569; }
.badge-soft { display:inline-flex; align-items:center; border-radius:999px; padding:.35rem .65rem; background:#eef2ff; color:#3730a3; font-size:.78rem; font-weight:700; }
#inventoryTab .table td, #inventoryTab .table th { vertical-align: middle; }
#inventoryTab .badge { border-radius: 999px; padding: .45rem .65rem; }

/* Void notification bell */
.topbar-actions{display:flex;align-items:center;gap:12px;position:relative;}
.void-notification-wrap{position:relative;}
.notification-btn{position:relative;border:0;background:#111827;color:#fff;width:42px;height:42px;border-radius:14px;box-shadow:0 12px 28px rgba(17,24,39,.18);display:flex;align-items:center;justify-content:center;font-weight:800;}
.notification-btn:hover{transform:translateY(-1px);}
.notification-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#ef4444;color:#fff;font-size:13px;}
.notification-count{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}
.notification-panel{position:absolute;right:0;top:52px;width:380px;max-width:calc(100vw - 24px);background:#fff;border:1px solid rgba(15,23,42,.12);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.22);z-index:1000;overflow:hidden;}
.notification-panel-header{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(15,23,42,.08);background:#f8fafc;}
.notification-panel-header small{display:block;color:#64748b;}
.notification-list{max-height:420px;overflow:auto;padding:10px;}
.notification-item{padding:12px;border-radius:14px;border:1px solid rgba(15,23,42,.08);margin-bottom:10px;background:#fff;}
.notification-item.unread{background:#fff7ed;border-color:#fed7aa;}
.notification-item strong{display:block;color:#111827;font-size:14px;}
.notification-meta{font-size:12px;color:#64748b;margin-top:4px;}
.notification-amount{font-weight:800;color:#dc2626;}
.void-toast{position:fixed;right:20px;bottom:20px;z-index:2000;background:#991b1b;color:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 20px 45px rgba(153,27,27,.35);max-width:360px;animation:voidToastIn .25s ease-out;}
.void-toast strong{display:block;margin-bottom:4px;}
@keyframes voidToastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.topbar-actions{width:100%;justify-content:space-between}.notification-panel{right:-8px;width:340px}}

/* AI Assistant Level 2 */
.ai-level2-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 16px;
}
.ai-score-card,
.ai-metric-card,
.ai-box {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 22px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(15, 23, 42, .06);
}
.ai-score-card {
  color: #fff;
  min-height: 170px;
}
.ai-score-label {
  opacity: .85;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ai-score-number {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  margin: 12px 0 4px;
}
.ai-score-status {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}
.score-good { background: linear-gradient(135deg, #047857, #10b981); }
.score-warn { background: linear-gradient(135deg, #b45309, #f59e0b); }
.score-danger { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.ai-metric-card span {
  display: block;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 8px;
}
.ai-metric-card strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  font-weight: 900;
}
.ai-metric-card small {
  display: block;
  color: #64748b;
  margin-top: 8px;
}
.ai-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.ai-good { background: #dcfce7; color: #166534; }
.ai-risk { background: #fee2e2; color: #991b1b; }
.ai-box h6 {
  font-weight: 900;
  margin-bottom: 12px;
}
.ai-box .table {
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .ai-level2-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .ai-level2-grid { grid-template-columns: 1fr; }
}

/* Wall Screen Mode */
.wall-screen-body {
  margin: 0;
  background: radial-gradient(circle at top left, #1f3b73 0, #07111f 38%, #030712 100%);
  color: #f8fafc;
  min-height: 100vh;
  overflow-x: hidden;
}
.wall-screen {
  min-height: 100vh;
  padding: 28px;
}
.wall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.wall-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 800;
  color: #93c5fd;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(147,197,253,.2);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.wall-header h1 {
  font-size: clamp(30px, 4vw, 58px);
  line-height: 1;
  font-weight: 900;
  margin: 0;
}
.wall-clock {
  text-align: right;
  padding: 16px 20px;
  border-radius: 24px;
  background: rgba(15,23,42,.72);
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}
.wall-clock div {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 900;
}
.wall-clock small { color: #cbd5e1; }
.wall-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.wall-kpi {
  position: relative;
  overflow: hidden;
  padding: 22px;
  min-height: 150px;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(30,41,59,.92), rgba(15,23,42,.72));
  border: 1px solid rgba(148,163,184,.18);
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.wall-kpi::after {
  content: '';
  position: absolute;
  width: 120px;
  height: 120px;
  right: -35px;
  top: -35px;
  border-radius: 50%;
  background: rgba(59,130,246,.18);
}
.wall-kpi.danger::after { background: rgba(239,68,68,.18); }
.wall-kpi span,
.wall-kpi small {
  display: block;
  position: relative;
  z-index: 1;
  color: #94a3b8;
  font-weight: 700;
}
.wall-kpi strong {
  display: block;
  position: relative;
  z-index: 1;
  margin: 13px 0 10px;
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.05;
  font-weight: 950;
  color: #fff;
}
.wall-grid-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-areas:
    "feed top alerts"
    "feed stock alerts";
  gap: 16px;
}
.wall-panel {
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  padding: 20px;
  min-height: 280px;
  backdrop-filter: blur(12px);
}
.large-feed { grid-area: feed; }
.wall-panel:nth-child(2) { grid-area: top; }
.wall-panel:nth-child(3) { grid-area: alerts; }
.wall-panel:nth-child(4) { grid-area: stock; }
.wall-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 14px;
}
.wall-panel-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
.wall-panel-title span {
  color: #94a3b8;
  font-size: 13px;
}
.wall-feed {
  max-height: 670px;
  overflow: auto;
  padding-right: 4px;
}
.wall-feed-item,
.wall-rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px;
  border-radius: 20px;
  margin-bottom: 10px;
  background: rgba(30,41,59,.75);
  border: 1px solid rgba(148,163,184,.12);
  animation: wallSlide .45s ease both;
}
.wall-feed-item strong {
  font-size: 24px;
  color: #86efac;
}
.wall-feed-item span,
.wall-feed-item small,
.wall-rank-item small {
  display: block;
  color: #94a3b8;
  margin-top: 3px;
}
.wall-feed-item b { color: #e2e8f0; }
.wall-rank-item strong { font-size: 17px; color: #fff; }
.wall-rank-item span {
  font-weight: 900;
  color: #93c5fd;
  white-space: nowrap;
}
.wall-rank-item.low span { color: #fbbf24; }
.wall-alert {
  padding: 16px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(148,163,184,.15);
  background: rgba(30,41,59,.75);
  animation: wallSlide .45s ease both;
}
.wall-alert strong { display: block; font-size: 18px; margin-bottom: 4px; }
.wall-alert span { color: #cbd5e1; }
.wall-alert.danger { border-color: rgba(239,68,68,.35); background: rgba(127,29,29,.45); }
.wall-alert.warning { border-color: rgba(251,191,36,.35); background: rgba(120,53,15,.45); }
.wall-alert.success { border-color: rgba(34,197,94,.35); background: rgba(20,83,45,.45); }
.wall-empty {
  color: #94a3b8;
  padding: 24px;
  border-radius: 20px;
  background: rgba(30,41,59,.45);
  text-align: center;
}
.wall-pulse { animation: wallPulse .55s ease; }
@keyframes wallPulse {
  0% { transform: scale(1); color: #fff; }
  50% { transform: scale(1.06); color: #86efac; }
  100% { transform: scale(1); color: #fff; }
}
@keyframes wallSlide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1200px) {
  .wall-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .wall-grid-main {
    grid-template-columns: 1fr;
    grid-template-areas: "feed" "alerts" "top" "stock";
  }
}
@media (max-width: 700px) {
  .wall-screen { padding: 16px; }
  .wall-header { flex-direction: column; align-items: stretch; }
  .wall-clock { text-align: left; }
  .wall-kpi-grid { grid-template-columns: 1fr; }
}


/* ===== Live auto-update + sound alert UI ===== */
.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, .16);
  color: #dcfce7;
  border: 1px solid rgba(34, 197, 94, .35);
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

#toastBox {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 99999;
  display: grid;
  gap: 10px;
  max-width: 360px;
}

.system-toast {
  background: #111827;
  color: #fff;
  padding: 14px 18px;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .24);
  border-left: 5px solid var(--gold);
  font-weight: 800;
  animation: toastSlideIn .22s ease-out;
}

.system-toast.warning { border-left-color: #f59e0b; }
.system-toast.danger { border-left-color: #dc2626; }
.system-toast.success { border-left-color: #059669; }

@keyframes toastSlideIn {
  from { transform: translateX(18px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== Staff Activity Tracking ===== */
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#ecfdf5;
  color:#047857;
  font-size:12px;
  font-weight:700;
}

.staff-activity-table tbody tr.staff-risk-danger{
  background:#fff1f2;
}

.staff-activity-table tbody tr.staff-risk-warning{
  background:#fffbeb;
}

.risk-badge{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.risk-badge.normal{
  background:#ecfdf5;
  color:#047857;
}

.risk-badge.warning{
  background:#fffbeb;
  color:#b45309;
}

.risk-badge.danger{
  background:#ffe4e6;
  color:#be123c;
}

.activity-feed{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:420px;
  overflow:auto;
}

.activity-feed-item{
  border:1px solid #eef2f7;
  border-left:4px solid #2563eb;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
}

.activity-feed-item.void{
  border-left-color:#dc2626;
  background:#fff7f7;
}

.activity-feed-item small{
  display:block;
  margin-top:3px;
  color:#6b7280;
}

.activity-feed-item p{
  margin:6px 0 0;
  color:#374151;
}

/* ===== Kitchen Live Monitor ===== */
.kitchen-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.kitchen-board{
  display:grid;
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:16px;
}
.kitchen-column{
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:14px;
  min-height:280px;
}
.kitchen-column h5{
  font-size:14px;
  font-weight:800;
  margin-bottom:12px;
  text-transform:uppercase;
}
.kitchen-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.kitchen-order-card{
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  border-left:5px solid #94a3b8;
}
.kitchen-order-card.new{border-left-color:#f59e0b;}
.kitchen-order-card.preparing{border-left-color:#2563eb;}
.kitchen-order-card.delayed{border-left-color:#dc2626!important;background:#fee2e2!important;color:#7f1d1d;}
.kitchen-order-top,
.kitchen-order-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.kitchen-order-top strong{
  font-size:15px;
  line-height:1.25;
}
.kitchen-order-top span{
  font-weight:900;
  font-size:18px;
}
.kitchen-order-meta{
  font-size:12px;
  color:#64748b;
  margin-top:6px;
}
.kitchen-order-card small{
  display:block;
  margin-top:8px;
  color:#0f172a;
  font-weight:700;
}
.metric-card.success h3{color:#16a34a;}
@media(max-width:1200px){.kitchen-board{grid-template-columns:repeat(2,minmax(220px,1fr));}}
@media(max-width:700px){.kitchen-board{grid-template-columns:1fr}.kitchen-hero{align-items:flex-start;flex-direction:column}}

.kitchen-tv-body{
  background:#0f172a;
  color:#fff;
  min-height:100vh;
  padding:22px;
}
.kitchen-tv-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.kitchen-tv-header h1{font-size:32px;font-weight:900;margin:0;}
.kitchen-tv-header p{margin:0;color:#cbd5e1;}
.kitchen-tv-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.kitchen-tv-column{background:#172033;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:16px;min-height:80vh;}
.kitchen-tv-column h2{font-size:20px;font-weight:900;margin-bottom:14px;}
.kitchen-tv-column .kitchen-order-card{color:#0f172a;box-shadow:none;}
.kitchen-tv-count{background:#fbbf24;color:#111827;border-radius:999px;padding:5px 12px;font-weight:900;}
@media(max-width:1100px){.kitchen-tv-board{grid-template-columns:repeat(2,1fr)}}

/* ===== Kitchen workflow action buttons ===== */
.kitchen-board{grid-template-columns:repeat(3,minmax(220px,1fr));}
.kitchen-order-card.served{border-left-color:#0f766e;background:#ecfdf5;}
.kitchen-order-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:6px;
  margin-top:12px;
}
.kitchen-state-btn{
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  border-radius:10px;
  font-size:11px;
  font-weight:800;
  padding:7px 6px;
  cursor:pointer;
}
.kitchen-state-btn:hover{background:#e2e8f0;}
.kitchen-state-btn.active{background:#111827;color:#fff;border-color:#111827;}
.kitchen-tv-board{grid-template-columns:repeat(3,1fr);}
@media(max-width:1400px){.kitchen-board,.kitchen-tv-board{grid-template-columns:repeat(3,minmax(190px,1fr));}}
@media(max-width:900px){.kitchen-board,.kitchen-tv-board{grid-template-columns:repeat(2,minmax(190px,1fr));}}
@media(max-width:600px){.kitchen-board,.kitchen-tv-board{grid-template-columns:1fr;}}

/* Strong delayed kitchen order display */
.kitchen-order-card.delayed{
  background:#fee2e2 !important;
  border-left-color:#dc2626 !important;
  border-color:#dc2626 !important;
  color:#7f1d1d !important;
}
.kitchen-order-card.delayed .kitchen-order-meta,
.kitchen-order-card.delayed small{
  color:#7f1d1d !important;
}
.kitchen-delayed-badge{
  display:inline-block;
  background:#dc2626;
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  padding:4px 8px;
  border-radius:999px;
  margin-bottom:8px;
}

/* ERP stock / suppliers / requisitions theme integration */
.erp-page .module-hero { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,251,235,.9)); }
.erp-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.erp-wide { grid-column: 1 / -1; }
.purchase-items-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.erp-item-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr .7fr .8fr .7fr 44px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.req-item-row { grid-template-columns: 1.5fr .7fr 1.5fr 44px; }
.total-strip {
  background: #111827;
  color: white;
  padding: 14px 18px;
  border-radius: 16px;
}
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(245,158,11,.12);
  color: #92400e;
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 850;
  font-size: 12px;
}
@media (max-width: 1100px) {
  .erp-form { grid-template-columns: 1fr; }
  .erp-item-row, .req-item-row { grid-template-columns: 1fr; }
}


/* v42 compact grouped sidebar layout */
.compact-sidebar-nav {
  gap: 8px;
}
.sidebar-main-link,
.sidebar-group summary {
  display: block;
  position: relative;
  color: #cbd5e1;
  text-decoration: none;
  padding: 11px 13px 11px 38px;
  border-radius: 16px;
  font-weight: 850;
  font-size: 13.5px;
  transition: .18s ease;
  cursor: pointer;
  list-style: none;
  line-height: 1.2;
}
.sidebar-group summary::-webkit-details-marker { display: none; }
.sidebar-group summary::before,
.sidebar-main-link::before {
  content: "●";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: rgba(245, 158, 11, .75);
}
.sidebar-group summary::after {
  content: "›";
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 18px;
  transition: .18s ease;
}
.sidebar-group[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.sidebar-group summary:hover,
.sidebar-group.is-active summary,
.sidebar-main-link.active,
.sidebar-main-link:hover {
  background: linear-gradient(135deg, var(--gold), #fbbf24);
  color: #111827;
  box-shadow: 0 12px 24px rgba(245, 158, 11, .24);
}
.sidebar-group summary:hover::before,
.sidebar-group.is-active summary::before,
.sidebar-main-link.active::before,
.sidebar-main-link:hover::before { color: #111827; }
.sidebar-submenu {
  display: grid;
  gap: 5px;
  margin: 6px 0 8px 12px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.sidebar-submenu a {
  padding: 9px 10px 9px 28px !important;
  border-radius: 13px !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}
.sidebar-submenu a::before {
  left: 11px !important;
  font-size: 7px !important;
}
.sidebar-submenu a.active,
.sidebar-submenu a:hover {
  background: rgba(245, 158, 11, .16) !important;
  color: #fff !important;
}
.sidebar-submenu a.active::before,
.sidebar-submenu a:hover::before { color: var(--gold) !important; }
.sidebar { overflow-y: auto; scrollbar-width: thin; }
@media (max-height: 780px) {
  .sidebar { padding: 14px 12px; }
  .brand { padding-bottom: 12px; margin-bottom: 4px; }
  .sidebar-main-link, .sidebar-group summary { padding-top: 9px; padding-bottom: 9px; font-size: 12.8px; }
  .sidebar-submenu a { padding-top: 7px !important; padding-bottom: 7px !important; }
  .logout { padding: 10px; }
}

/* Manage existing products on selected SambaPOS menu */
.compact-table-box{
  max-height:420px;
  overflow:auto;
  border:1px solid rgba(148,163,184,.25);
  border-radius:14px;
}
.compact-table-box table{ margin-bottom:0; }
.compact-table-box thead th{
  position:sticky;
  top:0;
  background:#fff;
  z-index:2;
}