/* =====================================================================
   Universal Evolve — Warehouse Management System
   Design system. Light theme (default) + dark theme via [data-theme="dark"]
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --purple: #7A0F82;
  --purple-dark: #55045C;
  --purple-light: #9C2FA6;
  --gold: #C9A227;
  --gold-dark: #9C7E15;
  --gold-light: #E0BE3D;

  --navy: var(--purple);
  --navy-light: var(--purple-light);
  --navy-dark: var(--purple-dark);
  --accent: var(--gold);
  --accent-light: var(--gold-light);

  --bg: #f5f4f7;
  --surface: #ffffff;
  --border: #e2dde6;
  --text: #26202b;
  --text-muted: #71697c;
  --success: #1e7e34;
  --success-bg: #e3f4e6;
  --error: #b02a37;
  --error-bg: #fbe6e8;
  --warning-bg: #fff3cd;
  --warning-text: #856404;
  --sidebar-w: 232px;
  --topbar-h: 60px;
  --footer-h: 40px;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(45, 10, 48, 0.08), 0 1px 2px rgba(45, 10, 48, 0.06);
  --shadow-md: 0 6px 18px rgba(45, 10, 48, 0.14);
}

[data-theme="dark"] {
  --purple: #a238ab;
  --purple-dark: #3d0342;
  --purple-light: #c060c9;
  --gold: #e0be3d;
  --gold-dark: #b6942a;
  --gold-light: #f0d876;

  --navy: #3d0342;
  --navy-light: #5c0b63;
  --navy-dark: #26022a;
  --accent: var(--gold);
  --accent-light: var(--gold-light);

  --bg: #17121a;
  --surface: #211b26;
  --border: #362e3c;
  --text: #ede8f0;
  --text-muted: #a89bb0;
  --success: #4caf6d;
  --success-bg: #163224;
  --error: #e5697a;
  --error-bg: #3a1c22;
  --warning-bg: #3a3018;
  --warning-text: #f0c94f;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
/* System-wide font-size reduction (per product request) — scales every
   rem-based size down app-wide via the root font-size. Generated PDF
   documents (invoices, quotations, receipts, goods notes, statements —
   see includes/pdf_email.php) are drawn independently of this
   stylesheet and are completely unaffected, as intended. */
html { scroll-behavior: smooth; font-size: 93.75%; }
body {
  margin: 0;
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color .15s ease, color .15s ease;
}
a { color: var(--purple-light); text-decoration: none; }
[data-theme="dark"] a { color: var(--gold-light); }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- *
 * App shell
 * ---------------------------------------------------------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #0a0009, var(--purple-dark), var(--purple));
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
}
.sidebar .brand {
  font-size: 1.02rem;
  font-weight: 800;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  letter-spacing: .01em;
}
.sidebar .brand img { height: 34px; width: auto; flex-shrink: 0; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.sidebar-nav a {
  color: #ecdcee;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  font-weight: 500;
  border-left: 3px solid transparent;
}
.sidebar-nav a i { width: 15px; text-align: center; opacity: .85; font-size: .8rem; }
.sidebar-nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.sidebar-nav a.active { background: rgba(255,255,255,.12); border-left-color: var(--gold-light); font-weight: 700; }
.sidebar-nav a.top-link { font-size: .87rem; margin: 3px 0; }

.nav-group { border-bottom: 4px solid rgba(0,0,0,.35); }
.nav-group-toggle {
  width: 100%;
  background: none;
  border: none;
  color: #f3e6f4;
  padding: 11px 18px;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.nav-group-toggle:hover { background: rgba(255,255,255,.06); }
.nav-group-toggle .chev { transition: transform .18s ease; font-size: .72rem; opacity: .8; }
.nav-group.open .nav-group-toggle .chev { transform: rotate(90deg); }
.nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}
.nav-group.open .nav-group-items { max-height: 900px; }

/* Sub-groups nested inside a parent group (e.g. WHS Setup / WHS Operations
   inside Warehouse) — same accordion behavior, indented, no icons. */
.nav-subgroup { margin: 2px 0; }
.nav-subgroup-toggle {
  width: 100%;
  background: none;
  border: none;
  color: #d9c3da;
  padding: 8px 18px 8px 30px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.nav-subgroup-toggle span::before { content: "\2013"; margin-right: 6px; opacity: .7; }
.nav-subgroup-toggle .chev { transition: transform .18s ease; font-size: .68rem; opacity: .75; }
.nav-subgroup.open .nav-subgroup-toggle .chev { transform: rotate(90deg); }
.nav-subgroup-items { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.nav-subgroup.open .nav-subgroup-items { max-height: 400px; }
.nav-subgroup-items a {
  padding-left: 42px !important;
  font-size: .82rem;
}
.nav-subgroup-items a::before { content: "\2013"; margin-right: 6px; opacity: .7; }
.nav-subgroup-items a i { display: none; }

/* Direct child links of a top-level group (no sub-group) — hyphen prefix, no icon */
.nav-group-items > a::before { content: "\2013"; margin-right: 6px; opacity: .7; }
.nav-group-items > a i { display: none; }

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 8px;
}
.sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #f7e2a8;
  font-weight: 700;
  font-size: .87rem;
}
.sidebar-footer a:hover { background: rgba(255,255,255,.1); text-decoration: none; }

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: var(--footer-h);
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 4px; position: relative; }
.page-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.company-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
  color: var(--purple); background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px; padding: 4px 12px; white-space: nowrap;
}
[data-theme="dark"] .company-chip { color: var(--gold-light); }

/* Breadcrumbs ("page locator") */
.breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: .78rem; color: var(--text-muted); margin: -8px 0 18px;
}
.breadcrumbs a { color: var(--text-muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--purple); }
[data-theme="dark"] .breadcrumbs a:hover { color: var(--gold-light); }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs .current { color: var(--text); font-weight: 700; }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background-color .12s ease;
}
.icon-btn:hover { background: var(--bg); color: var(--text); }
.notif-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--error); color: #fff;
  font-size: .62rem; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

.notif-dropdown, .user-dropdown {
  position: absolute;
  top: calc(var(--topbar-h) - 4px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.user-dropdown { width: 220px; max-height: none; overflow: visible; padding: 6px; }
.notif-dropdown .notif-header {
  padding: 12px 16px; font-weight: 700; font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem;
  display: block;
  color: var(--text);
}
.notif-item:hover { background: var(--bg); text-decoration: none; }
.notif-item .notif-title { font-weight: 600; margin-bottom: 2px; }
.notif-item .notif-sub { color: var(--text-muted); font-size: .78rem; }
.notif-empty { padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: .85rem; }

.user-dropdown a, .user-dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 8px; font-size: .85rem; font-weight: 600;
  color: var(--text); background: none; border: none; font-family: inherit; cursor: pointer; text-align: left;
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--bg); text-decoration: none; }
.user-dropdown a i, .user-dropdown button i { width: 16px; color: var(--text-muted); }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

.user-chip-btn {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .87rem; color: var(--text);
  background: none; border: none; font-family: inherit; cursor: pointer;
  padding: 6px 10px; border-radius: 20px;
}
.user-chip-btn:hover { background: var(--bg); }
.user-chip-btn .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800;
}
.role-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase;
  background: var(--bg); color: var(--text-muted);
  padding: 2px 8px; border-radius: 10px; letter-spacing: .03em;
}

.content { padding: 24px; flex: 1; }

/* ---------------------------------------------------------------- *
 * Fixed app footer
 * ---------------------------------------------------------------- */
.app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: var(--purple-dark);
  color: #ecdcee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: .78rem;
  z-index: 30;
}
.app-footer .footer-brand { font-weight: 700; }
.app-footer .footer-brand span { color: var(--gold-light); }
.app-footer .footer-clock { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- *
 * Cards, grids, tables, forms, buttons
 * ---------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

table { width: 100%; border-collapse: collapse; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-size: .88rem; }
th:last-child, td:last-child { border-right: none; }
th { background: var(--bg); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
tr:hover td { background: var(--bg); }

label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: 4px; margin-top: 12px; color: var(--text); }
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  font-size: .88rem; background: var(--surface); color: var(--text); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--purple-light); box-shadow: 0 0 0 3px rgba(122, 15, 130, .13);
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224, 190, 61, .15);
}
textarea { resize: vertical; }

.btn {
  display: inline-block; background: linear-gradient(135deg, var(--purple), var(--purple-dark)); color: #fff; border: none;
  padding: 9px 18px; border-radius: 7px; cursor: pointer; font-size: .87rem;
  font-weight: 700; font-family: inherit; transition: filter .12s ease, transform .05s ease;
}
.btn:hover { filter: brightness(1.15); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--gold); color: #241d00; }
.btn-accent:hover { background: var(--gold-light); }
.btn-sm { padding: 5px 12px; font-size: .78rem; }
.btn-danger { background: var(--error); }
.btn-danger:hover { background: #c73948; }
.btn-outline { background: transparent; color: var(--purple); border: 1.5px solid var(--purple); }
.btn-outline:hover { background: var(--purple); color: #fff; }
[data-theme="dark"] .btn-outline { color: var(--gold-light); border-color: var(--gold-light); }
[data-theme="dark"] .btn-outline:hover { background: var(--gold-light); color: #241d00; }

.icon-action { color: var(--text-muted); background: none; border: none; cursor: pointer; font-size: .92rem; padding: 4px 6px; border-radius: 5px; }
.icon-action:hover { background: var(--bg); color: var(--purple); }
.icon-action.danger:hover { color: var(--error); }
[data-theme="dark"] .icon-action:hover { color: var(--gold-light); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }
.alert-error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: .72rem; font-weight: 700; }
.badge-receive { background: var(--success-bg); color: var(--success); }
.badge-release { background: #fde9d8; color: #a1560a; }
[data-theme="dark"] .badge-release { background: #3a2612; color: #e7a15c; }
.badge-pending { background: var(--warning-bg); color: var(--warning-text); }
.badge-used { background: var(--success-bg); color: var(--success); }

.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #05000a, var(--purple-dark) 45%, var(--purple) 100%); padding: 20px; }
.auth-card {
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-md);
  display: flex; max-width: 760px; width: 100%; overflow: hidden;
}
.auth-illustration {
  flex: 1; min-width: 260px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; position: relative; padding: 30px;
}
.auth-illustration .circle {
  width: 220px; height: 220px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--border);
}
.auth-illustration .circle img { width: 140px; height: auto; }
.auth-illustration .shape { position: absolute; opacity: .6; color: var(--purple-light); }
.auth-form-side { flex: 1; min-width: 280px; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.auth-form-side h1 { font-size: 1.3rem; margin: 0 0 22px; font-weight: 800; }
.input-icon-wrap { position: relative; margin-top: 12px; }
.input-icon-wrap i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; }
.input-icon-wrap input {
  padding: 12px 16px 12px 40px; border-radius: 24px; background: var(--bg); border: 1px solid var(--border);
}
.auth-form-side .btn { border-radius: 24px; width: 100%; padding: 12px; margin-top: 18px; font-size: .92rem;
  background: linear-gradient(135deg, var(--purple), var(--purple-light)); }
.auth-form-side .btn:hover { background: linear-gradient(135deg, var(--purple-light), var(--purple)); }
.auth-links { text-align: center; margin-top: 14px; font-size: .82rem; }
.auth-links a { color: var(--text-muted); }
.auth-card-footer { text-align: center; padding: 14px; border-top: 1px solid var(--border); font-size: .82rem; }

/* Mobile login (staff + client): the two-panel illustration layout
   doesn't work on a narrow screen (it either overflows or squashes the
   decorative shapes into the form), so below 700px we drop it entirely
   and show just the plain, centered logo above the login form instead. */
.auth-mobile-logo { display: none; }
@media (max-width: 700px) {
  .auth-page { padding: 32px 16px; }
  .auth-card { flex-direction: column; max-width: 380px; box-shadow: none; background: transparent; }
  .auth-illustration { display: none; }
  .auth-mobile-logo { display: block; width: 84px; height: auto; margin: 0 auto 20px; }
  .auth-form-side { padding: 32px 24px; text-align: center; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-md); }
  .auth-form-side form, .auth-form-side p.small { text-align: left; }
}

.auth-box { background: var(--surface); padding: 36px 32px; border-radius: 16px; width: 380px; box-shadow: var(--shadow-md); text-align: center; }
.auth-box img.auth-logo { height: 64px; margin-bottom: 14px; }
.auth-box h1 { font-size: 1.15rem; margin-top: 0; }
.auth-box form { text-align: left; }
.auth-switch { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--text-muted); }

.portal-picker { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.portal-card {
  background: var(--surface); border-radius: 16px; padding: 32px 28px; width: 240px;
  text-align: center; box-shadow: var(--shadow-md); transition: transform .15s ease;
}
.portal-card:hover { transform: translateY(-4px); }
.portal-card .portal-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; color: #fff;
}
.portal-card.staff .portal-icon { background: var(--purple); }
.portal-card.client .portal-icon { background: var(--gold); color: #241d00; }
.portal-card h3 { margin: 0 0 6px; }
.portal-card p { font-size: .82rem; color: var(--text-muted); margin: 0 0 18px; }

/* Colored stat cards for dashboards */
.stat-card {
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px; color: #fff; position: relative; overflow: hidden;
}
.stat-card .stat-icon {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.stat-card .stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.stat-card .stat-label { font-size: .76rem; opacity: .92; font-weight: 600; }
.stat-card .stat-sub { font-size: .72rem; opacity: .85; margin-top: 2px; }
.stat-card.c-purple { background: linear-gradient(135deg, var(--purple), #0a0009); }
.stat-card.c-gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #241d00; }
.stat-card.c-gold .stat-icon { background: rgba(0,0,0,.12); }
.stat-card.c-green { background: linear-gradient(135deg, #146c34, #2ea85a); }
.stat-card.c-red { background: linear-gradient(135deg, #7a1c26, #c73948); }
.stat-card.c-blue { background: linear-gradient(135deg, #1a4d7a, #2f7fc1); }

.stat-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; box-shadow: var(--shadow); }
.stat-box .num { font-size: 1.8rem; font-weight: 800; color: var(--purple); }
[data-theme="dark"] .stat-box .num { color: var(--gold-light); }
.stat-box .label { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

a.stat-card, a.stat-box, a.stat-box.num { text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
a.stat-card:hover, a.stat-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }

.progress-track { background: var(--bg); border-radius: 20px; height: 8px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); border-radius: 20px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.small { font-size: .8rem; color: var(--text-muted); }
.breadcrumb { font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--purple); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb i { font-size: .65rem; opacity: .6; }
.breadcrumb span { font-weight: 600; color: var(--text); }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pagination-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination-links .btn-sm { padding: 5px 11px; }
.pagination-size { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination-size .btn-sm { padding: 5px 10px; }

button.small, button.link-btn {
  background: none; border: none; padding: 0; margin: 0; font: inherit;
  color: var(--purple-light); cursor: pointer; text-decoration: none;
}
[data-theme="dark"] button.small, [data-theme="dark"] button.link-btn { color: var(--gold-light); }
button.small:hover, button.link-btn:hover { text-decoration: underline; }

/* Modal (used for edit forms) */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 10, 22, .5); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 24px 16px;
}
.modal-overlay.open { display: flex; }
/* Wide and short: more fields side by side, less scrolling. Tall content
   scrolls inside the box instead of the page. */
.modal-box {
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 760px;
  box-shadow: var(--shadow-md); padding: 20px 24px;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.modal-box.modal-lg { max-width: 1080px; }
.modal-box h3 { margin-top: 0; margin-bottom: 6px; }
.modal-box label { margin-top: 10px; }
/* Stack a modal's plain label/input pairs two per row automatically. */
.modal-box form > .grid-2, .modal-box form > .grid-3 { column-gap: 16px; row-gap: 0; }
.modal-box form.modal-auto-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; align-items: end; }
.modal-box.modal-lg form.modal-auto-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal-box form.modal-auto-grid > .field-pair { min-width: 0; }
.modal-box form.modal-auto-grid > .field-span { grid-column: 1 / -1; }
.modal-close { float: right; background: none; border: none; font-size: 1.1rem; color: var(--text-muted); cursor: pointer; }

/* Inline map preview */
.map-preview { width: 100%; height: 220px; border: 1px solid var(--border); border-radius: 8px; margin-top: 10px; }

/* Trash rows are clickable (open the snapshot review modal) */
.trash-row:hover { background: var(--bg); }

/* PDF preview modal — pops up in-page instead of opening a new browser tab */
.pdf-preview-box { max-width: 900px; width: 92vw; padding: 16px; display: flex; flex-direction: column; }
.pdf-preview-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px; flex-shrink: 0;
}
.pdf-preview-actions { display: flex; align-items: center; gap: 10px; }
.pdf-preview-actions .modal-close { float: none; }
.pdf-preview-body { position: relative; flex: 1; min-height: 70vh; background: #525659; border-radius: 8px; overflow: hidden; }
.pdf-preview-frame { width: 100%; height: 100%; min-height: 70vh; border: 0; display: block; }
.pdf-preview-spinner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; color: #fff; font-size: .95rem; background: #525659;
}
@media (max-width: 900px) {
  .pdf-preview-overlay .modal-box { padding: 10px; }
  .pdf-preview-body, .pdf-preview-frame { min-height: 60vh; }
}

/* ---------------------------------------------------------------- *
 * Lightweight table toolbar (search / sort / export) — replaces DataTables
 * ---------------------------------------------------------------- */
.table-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
}
.table-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px;
  background: var(--surface); flex: 1; max-width: 280px;
}
.table-search i { color: var(--text-muted); font-size: .82rem; }
.table-search-input { border: none; padding: 0; font-size: .85rem; background: transparent; }
.table-search-input:focus { outline: none; box-shadow: none; }
.table-actions { display: flex; gap: 8px; }
.table-info { margin-top: 8px; }
th.sortable-col { cursor: pointer; user-select: none; }
th.sortable-col:hover { color: var(--purple); }
[data-theme="dark"] th.sortable-col:hover { color: var(--gold-light); }
th.sortable-col::after { content: '\21C5'; margin-left: 6px; opacity: .35; font-size: .75em; }
th.sorted-asc::after { content: '\2191'; opacity: 1; }
th.sorted-desc::after { content: '\2193'; opacity: 1; }

@media (max-width: 900px) {
  .sidebar { position: fixed; z-index: 100; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { width: 100%; }
  .notif-dropdown, .user-dropdown { width: calc(100vw - 48px); right: -12px; }
  #sidebarToggle { display: flex !important; }
  .content { padding: 14px; }
  .topbar { padding: 0 14px; }
  .card { padding: 16px; }
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-box, .modal-box.modal-lg { max-width: 100%; min-height: 100%; max-height: none; border-radius: 0; }
  .modal-box form.modal-auto-grid, .modal-box.modal-lg form.modal-auto-grid { grid-template-columns: 1fr; }
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-search { max-width: none; }
  .table-actions { justify-content: stretch; }
  .table-actions .btn { flex: 1; }
}
#sidebarToggle { display: none; }

/* Backdrop shown behind the sidebar once it's toggled open on mobile —
   tapping anywhere outside the menu closes it, matching how a mobile
   nav drawer is expected to behave. Hidden entirely above the 900px
   breakpoint, where the sidebar is always visible inline. */
.sidebar-backdrop { display: none; }
@media (max-width: 900px) {
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(10, 4, 12, .45);
    z-index: 90; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
}

/* Narrower phones (as opposed to tablets, which still have room for two
   columns): collapse every grid — including grid-4, which only drops to
   two columns above — down to a single column, and hide the admin's
   name next to their avatar in the topbar so the icon row doesn't get
   squeezed off-screen. */
@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .user-chip-btn span:last-child { display: none; }
  .user-chip-btn { padding: 6px; }
  .page-title { max-width: 40vw; }
}

/* Horizontal-scroll wrapper for dense, input-filled tables (line-item
   builders, payment-allocation grids) that can't reasonably reflow into
   the mobile "card" layout .data-table gets, since their cells hold
   live form fields rather than plain values. Scrolls within its own
   box instead of overflowing the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 480px; }

/* Signature pad (goods receive/release) */
.signature-pad-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; touch-action: none; }
.signature-pad { display: block; width: 100%; height: 160px; cursor: crosshair; touch-action: none; }
.signature-label-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

/* ---------------------------------------------------------------- *
 * Mobile "data card" table layout — every .data-table (populated by
 * the JS table enhancer, which tags each cell with data-label) turns
 * into a stack of cards below this breakpoint instead of a cramped,
 * horizontally-scrolling table.
 * ---------------------------------------------------------------- */
@media (max-width: 700px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table { border: none; background: transparent; }
  .data-table tr {
    margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px;
    padding: 4px 14px; background: var(--surface); box-shadow: var(--shadow);
  }
  .data-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--border); border-right: none; font-size: .85rem; text-align: right;
  }
  .data-table td:last-child { border-bottom: none; }
  .data-table td[data-label]::before {
    content: attr(data-label); font-weight: 700; color: var(--text-muted);
    flex-shrink: 0; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .02em;
  }
  .data-table td:empty::before { content: none; }
}

/* Flash toast entrance/exit — subtle, doesn't steal focus or block clicks */
@keyframes flashToastIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes flashToastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } }
.flash-toast-in { animation: flashToastIn .28s ease-out; }
.flash-toast-out { animation: flashToastOut .22s ease-in; }
.swal2-toast { box-shadow: var(--shadow-md) !important; border-radius: 10px !important; }


/* ---------------------------------------------------------------- *
 * Live field validation (data-live-validate forms)
 * ---------------------------------------------------------------- */
.label-hint { font-weight: 400; color: var(--text-muted); font-size: .76rem; }
.field-help { font-size: .76rem; color: var(--text-muted); margin: 5px 0 0; line-height: 1.4; }
.field-msg { font-size: .76rem; margin: 5px 0 0; line-height: 1.4; min-height: 0; }
.field-msg:empty { display: none; }
.field-msg.is-error { color: var(--error); }
.field-msg.is-success { color: var(--success); }
.field-msg.is-warning { color: var(--warning-text); }
.field-msg.is-info { color: var(--text-muted); }
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--error); background: var(--error-bg); }
input.is-valid, select.is-valid, textarea.is-valid { border-color: var(--success); }
input.is-invalid:focus, select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(176, 42, 55, .15); }
input.is-valid:focus { box-shadow: 0 0 0 3px rgba(30, 126, 52, .13); }
[data-theme="dark"] input.is-invalid { background: rgba(176, 42, 55, .12); }

/* ---------------------------------------------------------------- *
 * VAT inclusive / exclusive switch + live totals (invoices, quotations)
 * ---------------------------------------------------------------- */
.vat-toggle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.vat-toggle-label { font-weight: 600; font-size: .82rem; }
label.vat-toggle-option { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; cursor: pointer; }
label.vat-toggle-option input { width: auto; margin: 0; }
.vat-summary {
  margin: 10px 0 0 auto; max-width: 340px; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font-size: .85rem;
}
.vat-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.vat-summary > div span { color: var(--text-muted); }
.vat-summary .vat-summary-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; font-size: .95rem; }
.vat-summary .vat-summary-total span { color: var(--text); font-weight: 700; }
.vat-line-hint { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 3px; white-space: nowrap; }
.modal-box form.modal-auto-grid > button.btn, .modal-box form.modal-auto-grid > .btn { justify-self: start; margin-top: 14px; }