/* ==========================================================================
   Operations Hub - interface theme (teal/emerald refresh 2026-09-29)
   (previous looks backed up in "UI Backup (before redesign 2026-09-25)" and
   "UI Backup (before teal refresh 2026-09-29)")
   ========================================================================== */
:root {
  --bg: #f2f8f7;
  --panel: #ffffff;
  --border: #e3ebe9;
  --border-strong: #d2dedb;
  --text: #15272b;
  --muted: #5f7472;
  --primary: #0d9488;
  --primary-dark: #0a7168;
  --primary-soft: #e4f6f2;
  --green: #12925e;
  --amber: #d9730d;
  --red: #d63b3b;
  --sidebar-bg: #0a2724;
  --sidebar-bg-2: #071d1b;
  --sidebar-text: #a6c6c1;
  --sidebar-active: #2fd8bd;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.07), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 24px 60px rgba(9, 16, 40, 0.28);
  --ring: 0 0 0 3px rgba(13, 148, 136, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(13, 148, 136, 0.22); }

/* Links: no underline, and the same colour before and after they have been clicked (no browser "visited" purple). */
a { color: var(--primary); text-decoration: none; }
:where(a):hover { color: var(--primary-dark); text-decoration: none; }   /* low priority, so buttons and menu links keep their own colours */

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

/* ---------------- Sidebar ---------------- */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background:
    radial-gradient(420px 260px at -30% -10%, rgba(47, 216, 189, 0.14), transparent 65%),
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
  color: var(--sidebar-text);
  padding: 22px 0 0;
  display: flex;
  flex-direction: column;
  /* Stay in view while the page scrolls; long menus scroll inside the sidebar. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

.sidebar .brand {
  position: relative;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 2px 20px 20px 70px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
  min-height: 56px;
}
.sidebar .brand::before {
  content: "OH";
  position: absolute;
  left: 20px;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, #2dd4bf 0%, #0fb5a3 55%, #0b7d72 100%);
  box-shadow: 0 6px 16px rgba(15, 150, 138, 0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.sidebar .brand small {
  display: block;
  font-weight: 500;
  color: var(--sidebar-text);
  font-size: 11.5px;
  margin-top: 1px;
  opacity: 0.85;
}

.sidebar a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 12px;
  padding: 8px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13.5px;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.sidebar a:hover { background: rgba(255,255,255,0.07); color: #fff; transform: translateX(2px); }
.sidebar a.sub { padding-left: 34px; font-size: 13.25px; }
.sidebar a.sub::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.sidebar a.sub:hover::before { background: rgba(255,255,255,0.55); }

.sidebar .nav-section {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 16px 24px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(174,185,211,0.62);
  text-align: left;
  transition: color 0.15s ease;
}
.sidebar .nav-section:hover { color: #fff; }
.sidebar .nav-section::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--ico, none) center / contain no-repeat;
  mask: var(--ico, none) center / contain no-repeat;
  opacity: 0.9;
}
.sidebar .nav-caret {
  margin-left: auto;
  font-size: 9px;
  transition: transform 0.18s ease;
  display: inline-block;
}
.sidebar .nav-section.expanded .nav-caret { transform: rotate(90deg); }
.sidebar .nav-section.expanded { color: rgba(255,255,255,0.88); }
.nav-group.collapsed { display: none; }
.sidebar .nav-section.sub-section { padding: 10px 24px 4px 34px; font-size: 10.5px; }
.sidebar a.sub2 { padding-left: 46px; }
.sidebar a.sub2::before { left: 27px; }

.sidebar a.active {
  background: linear-gradient(90deg, rgba(47,216,189,0.26), rgba(47,216,189,0.09));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(47,216,189,0.22);
}
.sidebar a.active::before {
  background: var(--sidebar-active);
  box-shadow: 0 0 0 3px rgba(47,216,189,0.28);
}

/* section icons */
.nav-section[data-target="master"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E"); }
.nav-section[data-target="service-payments"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
.nav-section[data-target="cash-bank"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' x2='21' y1='22' y2='22'/%3E%3Cline x1='6' x2='6' y1='18' y2='11'/%3E%3Cline x1='10' x2='10' y1='18' y2='11'/%3E%3Cline x1='14' x2='14' y1='18' y2='11'/%3E%3Cline x1='18' x2='18' y1='18' y2='11'/%3E%3Cpolygon points='12 2 20 7 4 7'/%3E%3C/svg%3E"); }
.nav-section[data-target="debtor-control"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.nav-section[data-target="reports"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
.nav-section[data-target="debtor-reports"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); }
.nav-section[data-target="admin"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.nav-section[data-target="hr-system"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M16 10h2'/%3E%3Cpath d='M16 14h2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6.17 15a3 3 0 0 1 5.66 0'/%3E%3C/svg%3E"); }

/* ---------------- Page frame ---------------- */
.main {
  flex: 1;
  min-width: 0;
  padding: 30px 38px 48px;
  max-width: 100%;
  overflow-x: auto;
  animation: page-in 0.28s ease;
}
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 14px;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 750;
  letter-spacing: -0.015em;
  margin: 0;
}
.page-header p.subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #12b5a5 0%, var(--primary) 100%);
  color: #fff;
  border: 1px solid var(--primary-dark);
  padding: 8px 16px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 90, 83, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: linear-gradient(180deg, #0fa294 0%, var(--primary-dark) 100%); box-shadow: 0 3px 8px rgba(11, 90, 83, 0.32), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { background: #f4faf8; border-color: #b3cfc9; box-shadow: var(--shadow-sm); }
.btn.danger { background: #fff; color: var(--red); border: 1px solid #f0b4b4; box-shadow: none; }
.btn.danger:hover { background: #fef2f2; border-color: #e58c8c; }
.btn.small { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.btn.excel { background: linear-gradient(180deg, #17a46c 0%, var(--green) 100%); border-color: #0d7a4c; box-shadow: 0 1px 2px rgba(13, 122, 76, 0.3), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn.excel:hover { background: linear-gradient(180deg, #129a63 0%, #0d7a4c 100%); }

/* ---------------- Cards & stats ---------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f6fdfb 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 17px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #bfe6df; }
.stat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #34d399, var(--primary));
}
.stat-card:has(.value.red)::before { background: linear-gradient(180deg, #f27a7a, var(--red)); }
.stat-card:has(.value.amber)::before { background: linear-gradient(180deg, #f5a04a, var(--amber)); }
.stat-card:has(.value.green)::before { background: linear-gradient(180deg, #4cc79a, var(--green)); }
.stat-card .label { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card .value { font-size: 27px; font-weight: 750; letter-spacing: -0.02em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.stat-card .value.red { color: var(--red); }
.stat-card .value.amber { color: var(--amber); }
.stat-card .value.green { color: var(--green); }
.stat-card .sub { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.section-title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(180deg, #34d399, var(--primary));
}

/* ---------------- Tables ---------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.25px;
}
thead th {
  text-align: left;
  color: var(--muted);
  background: linear-gradient(180deg, #f2faf8, #eef7f4);
  font-weight: 650;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid #edf0f6;
  vertical-align: middle;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: #eefaf6; }
.table-wrap { overflow-x: auto; }

/* ---------------- Badges ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 650;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
.badge.paid { background: #d9f5e6; color: #0b6b43; }
.badge.partial { background: #fdf0d2; color: #93560a; }
.badge.unpaid { background: #fde3e3; color: #a12c2c; }
.badge.overdue { background: #fbd2d2; color: #8a1f1f; }
.badge.neutral { background: #e0f2ee; color: #0c5a52; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: #0c5a52;
  font-size: 11.5px;
  font-weight: 550;
  margin: 2px 4px 2px 0;
}

/* ---------------- Forms ---------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  align-items: flex-end;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field label {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
input, select, textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:hover, select:hover, textarea:hover { border-color: #a9c7c2; }
textarea { resize: vertical; min-height: 64px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }
input::placeholder, textarea::placeholder { color: #93aca8; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 24, 22, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  z-index: 100;
  animation: overlay-in 0.15s ease;
}
.modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  padding: 26px 28px;
  box-shadow: var(--shadow-lg);
  animation: modal-in 0.2s ease;
}
.modal h2 { margin: 0 0 18px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.modal.wide { max-width: 980px; }
.modal .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal .form-grid .full { grid-column: 1 / -1; }
.modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.hidden { display: none !important; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

.branch-check-list {
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px;
}
.branch-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
}
.branch-check-row input[type="text"] {
  flex: 1;
  padding: 5px 8px;
  font-size: 12.5px;
}
.branch-check-row label {
  flex: 1;
  font-size: 13px;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 44px 20px;
}

/* ---------------- Toast ---------------- */
.toast {
  position: fixed;
  bottom: 26px;
  right: 26px;
  background: #102a27;
  color: #fff;
  padding: 13px 20px 13px 18px;
  border-radius: 11px;
  border-left: 4px solid #2fd8bd;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(6, 40, 36, 0.38);
  z-index: 200;
  animation: toast-in 0.22s ease;
}
.toast.error { background: #7f1d1d; border-left-color: #ff8a8a; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.mono { font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.text-muted { color: var(--muted); }
.link-btn {
  background: none; border: none; color: var(--primary); cursor: pointer; font-family: inherit; font-size: 12.75px; padding: 0; font-weight: 650;
}
.link-btn:hover { color: var(--primary-dark); }
.link-btn.danger { color: var(--red); }
.row-actions { display: flex; gap: 14px; }

/* Auth gate: hide the app shell until the logged-in / permission check has finished */
body.auth-pending .app-shell { visibility: hidden; }

/* ---------------- Login / first-time setup pages ---------------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(47,216,189,0.26), transparent 60%),
    radial-gradient(800px 520px at 90% 95%, rgba(13,148,136,0.24), transparent 60%),
    linear-gradient(160deg, #0a2724 0%, #0f4038 100%);
  background-size: 160% 160%;
  animation: auth-drift 16s ease-in-out infinite alternate;
}
@keyframes auth-drift {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}
.auth-card {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 18px;
  padding: 38px 34px 34px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 30px 70px rgba(2, 26, 22, 0.55);
}
.auth-card::before {
  content: "OH";
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 13px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, #2dd4bf 0%, #0fb5a3 55%, #0b7d72 100%);
  box-shadow: 0 8px 20px rgba(15, 150, 138, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}
.auth-card h1 { font-size: 21px; font-weight: 750; letter-spacing: -0.015em; margin: 0 0 5px; }
.auth-card p.auth-subtitle { margin: 0 0 24px; color: var(--muted); font-size: 13.5px; }
.auth-card.branded::before { content: none; }
.auth-card .auth-logo { display: block; width: 170px; max-width: 100%; height: auto; margin: 0 auto 26px; }
.auth-card form { display: flex; flex-direction: column; gap: 15px; }
.auth-card input { padding: 10px 12px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 6px; padding: 10px 16px; font-size: 14px; }
.auth-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 9px; padding: 9px 12px; font-size: 13px; margin-bottom: 4px; }

/* Sidebar user footer, injected by common.js */
.sidebar-user {
  margin-top: auto;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--sidebar-bg-2);
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px;
}
.sidebar-user .name { color: #fff; font-weight: 650; font-size: 13.5px; }
.sidebar-user .role { color: var(--sidebar-text); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; margin-top: 2px; opacity: 0.8; }
.sidebar-user button {
  margin-top: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--sidebar-text);
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-user button:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Permission grid on the Users admin page */
.perm-table th, .perm-table td { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.perm-table select { font-size: 12.5px; padding: 5px 6px; }

.outstanding-table th.month-col, .outstanding-table td.month-col { text-align: right; min-width: 90px; }
.outstanding-table td.zero { color: #c7d9d5; }
.outstanding-table tfoot td { font-weight: 700; border-top: 2px solid var(--border-strong); }

/* ---------------- Tabs ---------------- */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.tabs button {
  background: none;
  border: none;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.tabs button.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: linear-gradient(180deg, transparent, var(--primary-soft));
}
.tabs button:hover:not(.active) { color: var(--text); background: #e8f4f0; }

.bulk-hint { font-size: 12.75px; color: var(--muted); margin: -6px 0 14px; }
.bulk-grid td { padding: 4px 5px; vertical-align: top; }
.bulk-grid input, .bulk-grid select { width: 100%; padding: 5px 6px; font-size: 12.5px; }
.bulk-grid input.bulk-amount { text-align: right; }
.bulk-grid select.paste-unmatched { border-color: var(--red); background: #fef2f2; }
.bulk-row-error input, .bulk-row-error select { border-color: var(--red); background: #fef2f2; }

.supplier-group-header td {
  background: #e8f4f0;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.supplier-subtotal-row td {
  font-weight: 700;
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--border-strong);
  background: #f4f9f8;
}

.banner-warn {
  border: 1px solid #f3c366;
  background: #fff8e6;
  color: #8a5108;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 13.5px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 10px;
}

.upload-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Payment voucher --- */
.voucher-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px;
}
.voucher-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 18px;
}
.voucher-doc {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 48px;
}
.voucher-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--text);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.voucher-header h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.04em;
}
.voucher-header .company-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.voucher-header .meta {
  text-align: right;
  font-size: 13px;
}
.voucher-header .meta div { margin-bottom: 3px; }
.voucher-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 24px;
  font-size: 13.5px;
}
.voucher-grid .full { grid-column: 1 / -1; }
.voucher-grid label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 3px;
}
.voucher-amount-box {
  border: 1px solid var(--text);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.voucher-amount-box .amount-words {
  font-size: 13px;
  font-style: italic;
}
.voucher-amount-box .amount-figure {
  font-size: 22px;
  font-weight: 700;
}
.voucher-signatures {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 60px;
}
.voucher-signatures .sig-line {
  border-top: 1px solid var(--text);
  padding-top: 6px;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}
.voucher-footer-note {
  margin-top: 30px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Small account statement embedded in the voucher: recent bills/payments on this account, so it can be
   reviewed and approved from the voucher alone. */
.voucher-summary { margin: 22px 0; }
.voucher-summary-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin-bottom: 6px;
}
.voucher-summary-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.voucher-summary-table th, .voucher-summary-table td { border: 1px solid var(--border); padding: 4px 7px; }
.voucher-summary-table th { text-align: left; font-weight: 600; }
.voucher-summary-table tr.this-payment { font-weight: 700; }
.voucher-summary-totals { display: flex; gap: 20px; justify-content: flex-end; font-size: 12px; margin-top: 6px; }

/* Payment voucher, printed portrait on whatever paper is loaded (dot-matrix continuous stock or a
   normal sheet). Custom @page mm sizes were not honoured by this printer's driver, so we only request
   portrait orientation and let the voucher use the page's full width; the content itself (compact
   monospace, tight spacing) naturally settles into roughly the top half of the page, leaving the
   bottom half blank to tear off / file. Plain monospace text, solid black rules only (no shading/
   rounded corners a pin printer can't render). */
@page voucher { size: portrait; margin: 10mm; }
@media print {
  .sidebar, .voucher-toolbar, .no-print { display: none !important; }
  .app-shell { display: block; }
  .main { padding: 0; overflow: visible; }
  .voucher-page { max-width: none; padding: 0; page: voucher; }
  .voucher-doc {
    width: 100%;
    border: none; padding: 0; border-radius: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 10px;
    color: #000;
  }
  .voucher-doc * { color: #000 !important; background: none !important; box-shadow: none !important; }
  .voucher-header { border-bottom: 1px solid #000; padding-bottom: 5px; margin-bottom: 8px; }
  .voucher-header h1 { font-size: 14px; }
  .voucher-grid { grid-template-columns: repeat(3, 1fr); gap: 5px 14px; margin-bottom: 8px; font-size: 10px; }
  .voucher-amount-box { border: 1px solid #000; border-radius: 0; padding: 5px 10px; margin: 6px 0; }
  .voucher-amount-box .amount-figure { font-size: 14px; }
  .voucher-summary { margin: 6px 0; }
  .voucher-summary-table, .voucher-amount-box, .voucher-grid label { font-size: 9.5px; }
  .voucher-summary-table th, .voucher-summary-table td { border: 1px solid #000; padding: 1px 5px; }
  .voucher-signatures { margin-top: 14px; gap: 14px; }
  .voucher-signatures .sig-line { border-top: 1px solid #000; padding-top: 3px; }
  .voucher-footer-note { margin-top: 6px; }
  body { background: #fff; }
}

/* Printable Tax Invoice / Invoice */
.invoice-page { max-width: 820px; margin: 0 auto; }
.invoice-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.invoice-sheet { background: #fff; color: #000; font-family: "Times New Roman", Times, serif; font-size: 13px; line-height: 1.35; padding: 26px; border: 1px solid var(--border); }
.invoice-sheet .inv-title { text-align: center; margin-bottom: 14px; }
.invoice-sheet .inv-title span { display: inline-block; border: 2px solid #000; padding: 8px 44px; font-weight: 700; font-size: 17px; }
.invoice-sheet .inv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.invoice-sheet .inv-row.one { grid-template-columns: 1fr; }
.invoice-sheet .inv-box { border: 1.5px solid #000; padding: 7px 10px; }
.invoice-sheet .inv-box.party { min-height: 118px; display: flex; flex-direction: column; }
.invoice-sheet .inv-box.party .push { margin-top: auto; }
.invoice-sheet .inv-box.info { min-height: 58px; }
.invoice-sheet .inv-box .line { margin-bottom: 3px; word-break: break-word; }
.invoice-sheet .inv-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
.invoice-sheet .inv-table th, .invoice-sheet .inv-table td { border: 1.5px solid #000; padding: 5px 8px; vertical-align: top; color: #000; }
.invoice-sheet .inv-table thead th { background: #fff; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; }
.invoice-sheet .inv-table tbody tr:hover { background: transparent; }
.invoice-sheet .inv-table tbody td { height: 26px; }
.invoice-sheet .inv-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-sheet .inv-table .c { text-align: center; }
.invoice-sheet .inv-table tr.tot td { height: 30px; vertical-align: middle; }
.invoice-sheet .inv-table tr.tot td.lbl { border-right: 1.5px solid #000; }
.invoice-sheet .inv-table tr.tot.grand td { font-weight: 700; }
.invoice-sheet .inv-foot { margin-top: 14px; }
.invoice-sheet .inv-foot .inv-box { margin-bottom: -1.5px; }
.invoice-sheet .inv-table tr { break-inside: avoid; }

/* Company letterhead behind the invoice. On paper the image is fixed to every A4 page (an <img>, so it prints
   without "background graphics"); the header/footer spacers repeat on each page so text stays clear of the artwork. */
@page invoice { size: A4; margin: 0; }
.invoice-sheet.letterhead { width: 210mm; min-height: 297mm; box-sizing: border-box; padding: 0 14mm;
  background: #fff url(/img/letterhead.jpg) top left / 210mm 297mm repeat-y; }
.letterhead-bg { display: none; }
.invoice-sheet .page-frame { width: 100%; border-collapse: collapse; }
/* Child selectors only: the invoice's own table sits inside the frame's cell and must keep its borders. */
.invoice-sheet .page-frame > thead > tr > td, .invoice-sheet .page-frame > tfoot > tr > td, .invoice-sheet .page-frame > tbody > tr > td { padding: 0; border: 0; vertical-align: top; }
.invoice-sheet .page-frame > tbody > tr:hover { background: transparent; }
.invoice-sheet .frame-top { height: 42mm; }
.invoice-sheet .frame-bottom { height: 24mm; }

/* Print rules come last so they win over the screen rules above. */
@media print {
  .invoice-page { max-width: none; page: invoice; }
  .invoice-sheet, .invoice-sheet.letterhead { width: auto; min-height: 0; border: none; padding: 0 14mm; background: none; }
  .letterhead-bg { display: block; position: fixed; top: 0; left: 0; width: 210mm; height: 297mm; }
  .invoice-sheet .page-frame { position: relative; z-index: 1; }
}


/* Vehicle capacity pivot report */
.pivot-table { border-collapse: collapse; font-size: 13px; }
.pivot-table th, .pivot-table td { border: 1px solid #d1e0c5; padding: 5px 9px; white-space: nowrap; }
.pivot-table thead th { background: #548235; color: #fff; text-align: center; font-weight: 600; }
.pivot-table thead th.pivot-corner { text-align: left; position: sticky; left: 0; z-index: 2; min-width: 220px; }
.pivot-table tbody td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 220px; }
.pivot-table tr.pivot-day td { background: #c6e0b4; font-weight: 700; }
.pivot-table tr.pivot-day td:first-child { cursor: pointer; }
.pivot-table tr.pivot-cust td:first-child { padding-left: 30px; }
.pivot-table tr.pivot-grand td { background: #a9d08e; font-weight: 700; }
.pivot-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pivot-table td.zero { color: #b6c2ad; }
.pivot-table th.pivot-total, .pivot-table td.pivot-total { border-left: 2px solid #548235; }
.vehicle-map-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 12px 14px; margin: 12px 0; }
.vehicle-map-box table { width: 100%; }

/* Users & Access: group headings inside the permission grid */
.perm-table .perm-group td { text-align: left; background: var(--bg, #f2f8f7); padding-top: 8px; padding-bottom: 8px; }
.perm-table .perm-quick { margin-left: 10px; font-size: 12px; font-weight: normal; color: #64748b; }
.nowrap { white-space: nowrap; }

/* ---------------- Production (Sales Orders, Dispatch Notes) ---------------- */
.nav-section[data-target="production"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z'/%3E%3Cpath d='M17 18h1'/%3E%3Cpath d='M12 18h1'/%3E%3Cpath d='M7 18h1'/%3E%3C/svg%3E"); }

.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prod-form fieldset { border: none; padding: 0; margin: 0; min-width: 0; }
.prod-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.prod-form .form-grid .full { grid-column: 1 / -1; }
.prod-form .actions { display: flex; gap: 10px; }
.prod-form table { min-width: 780px; }
.prod-form thead th:first-child { min-width: 210px; }
.prod-form table input { width: 100%; min-width: 0; padding: 6px 9px; }
.prod-form table input[readonly] { background: var(--bg); color: var(--muted); }
.prod-form tfoot td { border-top: 2px solid var(--border-strong); padding: 10px 12px; }
.prod-over { color: var(--red); font-weight: 700; }

.prod-progress-cell { min-width: 120px; }
.prod-progress { height: 6px; background: #e0efec; border-radius: 999px; overflow: hidden; margin-bottom: 3px; }
.prod-progress span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.prod-progress span.over { background: var(--amber); }

/* Printable document (Sales Order / Dispatch Note) */
.prod-print-page { max-width: 820px; margin: 0 auto; }
.prod-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.prod-doc {
  background: #fff; color: #000; border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 28px 32px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.4; position: relative;
}
.prod-doc .pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 12px; }
.prod-doc h1 { margin: 0; font-size: 24px; letter-spacing: 0.04em; }
.prod-doc .pd-meta { min-width: 250px; }
.prod-doc .pd-meta-row { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.prod-doc .pd-meta-row span, .prod-doc .pd-party span, .prod-doc .pd-notes span { color: #444; }
.prod-doc .pd-party { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 14px; }
.prod-doc .pd-party div { display: flex; flex-direction: column; }
.prod-doc .pd-party span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.prod-doc .pd-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.prod-doc .pd-table th, .prod-doc .pd-table td { border: 1px solid #000; padding: 5px 8px; text-align: left; background: none; text-transform: none; letter-spacing: 0; color: #000; white-space: normal; }
.prod-doc .pd-table th { font-weight: 700; font-size: 12px; }
.prod-doc .pd-table .num { text-align: right; }
.prod-doc .pd-table tbody tr:hover { background: none; }
.prod-doc .pd-notes { margin-top: 14px; border: 1px solid #000; padding: 8px 10px; white-space: pre-wrap; }
.prod-doc .pd-notes span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.prod-doc .pd-stamp { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); font-size: 64px; font-weight: 800; color: rgba(200, 0, 0, 0.25); border: 6px solid rgba(200, 0, 0, 0.25); padding: 0 24px; pointer-events: none; }
.prod-doc .pd-signatures { display: flex; gap: 32px; margin-top: 36px; }
.prod-doc .pd-signatures > div { flex: 1; }
.prod-doc .pd-sign-space { height: 46px; }
.prod-doc .pd-sign-line { border-top: 1px solid #000; padding-top: 3px; font-size: 12px; }

@page prodprint { size: portrait; margin: 12mm; }
@media print {
  .prod-print-page { max-width: none; page: prodprint; }
  .prod-doc { border: none; border-radius: 0; padding: 0; box-shadow: none; }
  .prod-doc .pd-stamp { color: rgba(0, 0, 0, 0.2); border-color: rgba(0, 0, 0, 0.2); }
  body { background: #fff; }
}
.header-actions a.btn, .page-header a.btn, .prod-form a.btn, .prod-toolbar a.btn { text-decoration: none; }

/* Sales order form (layout follows the reference screen) */
.so-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.so-topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.so-topbar a.btn { text-decoration: none; }
.so-form .so-row { display: grid; gap: 16px 22px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.so-form .so-r-narrow { grid-template-columns: minmax(190px, 340px); }
.so-form .field { min-width: 0; }
.so-form input, .so-form textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.so-form .so-city-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.so-form .field { display: flex; flex-direction: column; gap: 6px; }
.so-form .field > input + input { margin-top: 0; }
.so-form input[readonly] { background: #e9f3f0; color: var(--text); cursor: default; }
.so-lines-head { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 8px; }
.so-lines-head h2 { margin: 0; font-size: 16px; font-weight: 700; }
.so-lines input.so-amount { text-align: right; }
.so-totals { max-width: 420px; margin: 18px 0 0 auto; }
.so-tax { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #e9f5f1; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.so-tax label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; text-transform: none; letter-spacing: 0; color: var(--text); }
.so-tax input[type="number"] { width: 78px; text-align: center; }
.so-total-row { display: flex; justify-content: space-between; padding: 5px 4px; color: var(--muted); }
.so-total-row.so-grand { border-top: 1px solid var(--border-strong); margin-top: 6px; padding-top: 10px; color: var(--text); font-size: 17px; font-weight: 700; }
.so-total-row.so-qty { font-size: 12.5px; }
.so-form input[type="checkbox"] { width: auto; }
.prod-form table.so-lines { min-width: 980px; }
.so-form .so-r-addr { grid-template-columns: minmax(190px, 620px); }
.so-form .field small { font-size: 12px; }
.so-tax-note { font-size: 12px; margin: -4px 0 8px; }

/* Finished Goods master */
.prod-form table select { width: 100%; min-width: 0; padding: 6px 9px; }
.fg-add { display: flex; gap: 10px; margin-bottom: 14px; }
.fg-add input { flex: 1; min-width: 0; }
.fg-off td strong { color: var(--muted); font-weight: 500; }
.fg-grid .card { align-self: start; }
.fg-grid > .card { min-width: 0; }
.fg-grid .row-actions { flex-wrap: wrap; gap: 4px 12px; }
.fg-grid td, .fg-grid th { white-space: normal; }
.fg-add select { max-width: 150px; }
.fg-grade-select { min-width: 110px; padding: 5px 8px; }
.fg-grid { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
@media (max-width: 900px) { .fg-grid { grid-template-columns: 1fr; } }
.so-lines input.so-grade { background: #e9f3f0; color: var(--text); cursor: default; }

/* Dispatch note form sections */
.so-form .so-r-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.so-form .so-r1 { grid-template-columns: 1fr; }
.so-form .so-r1 textarea { min-height: 84px; }
.dn-heading { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.dn-sub { margin: 4px 0 12px; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.prod-doc .pd-details { margin-top: 12px; border: 1px solid #000; padding: 6px 10px; }
.prod-doc .pd-details-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 4px; }
.prod-doc .pd-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 18px; }
.prod-doc .pd-details-grid div { display: flex; flex-direction: column; }
.prod-doc .pd-details-grid span { color: #444; font-size: 11px; }

/* Dispatch note printout: follows the paper delivery note and the payment voucher's page setup (portrait, 10mm margin,
   compact monospace, solid black rules only, so it settles into the top half of the sheet like the voucher). */
.dns { font-family: "Courier New", Courier, monospace; font-size: 12px; color: #000; position: relative; }
.dns * { color: #000; }
.dns label { display: block; font-size: 10px; font-style: italic; margin: 0 0 1px; text-transform: none; letter-spacing: 0; }
.dns-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid #000; }
.dns-title { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.dns-no { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.dns-no b { border: 1px solid #000; padding: 2px 12px; font-size: 15px; }
.dns-val { border: 1px solid #000; padding: 2px 6px; min-height: 18px; white-space: pre-wrap; word-break: break-word; }
.dns-field { margin-bottom: 4px; }
.dns-big .dns-val { font-size: 17px; font-weight: 700; min-height: 26px; }
.dns-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.dns-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.dns-inline { display: grid; grid-template-columns: 38% 1fr; gap: 0 6px; align-items: center; margin-bottom: 4px; }
.dns-inline label { text-align: right; font-weight: 700; font-style: italic; margin: 0; }
.dns-heading { font-weight: 700; text-decoration: underline; margin: 6px 0 3px; }
.dns-table { width: 100%; border-collapse: collapse; margin-top: 5px; font-size: 11px; }
.dns-table th, .dns-table td { border: 1px solid #000; padding: 2px 5px; text-align: center; background: none; text-transform: none; letter-spacing: 0; white-space: normal; font-weight: 700; min-height: 16px; height: 18px; }
.dns-table td { font-weight: 400; }
.dns-table td.dns-lbl { text-align: right; font-weight: 700; font-style: italic; }
.dns-table tbody tr:hover { background: none; }
.dns-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 26px; text-align: center; font-size: 11px; }
.dns-sign > div { border-top: 1px dashed #000; padding-top: 3px; }
.prod-doc:has(.dns) .pd-stamp { top: 50%; }
@media print {
  .prod-print-page.is-dn { page: voucher; }
  .prod-print-page.is-dn .prod-doc { padding: 0; }
  .dns { font-size: 10px; }
  .dns label { font-size: 9px; }
  .dns-title { font-size: 14px; }
  .dns-no b { font-size: 13px; }
  .dns-big .dns-val { font-size: 14px; min-height: 20px; }
  .dns-table { font-size: 9.5px; }
  .dns-table th, .dns-table td { height: 15px; padding: 1px 4px; }
  .dns-sign { margin-top: 18px; font-size: 9.5px; }
  .dns, .dns-top, .dns-cols, .dns-sign { break-inside: avoid; }
}

/* Customer credit (money paid that is not tied to an invoice) */
.credit-cell { color: var(--green); font-weight: 650; }

/* ---------------- Job Schedule report (day-wise, branch-wise) ---------------- */
.job-branch-row td {
  background: #e4f2ee;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}
.job-branch-total td {
  background: #f0f8f5;
  border-bottom: 2px solid var(--border-strong);
}
@page jobreport { size: landscape; margin: 12mm; }
@media print {
  .filters.no-print, .page-header.no-print { display: none; }
  body { background: #fff; }
  .app-shell { display: block; }
  .sidebar { display: none !important; }
  .main { padding: 0; overflow: visible; }
  .job-report-page { page: jobreport; }
  .job-report-page .table-wrap { overflow: visible; }
  .job-report-page tr { break-inside: avoid; }
  table { font-size: 11px; }
  thead th { background: #fff !important; border-bottom: 1.5px solid #000; color: #000; }
  tbody td { border-bottom: 1px solid #999; }
  .job-branch-row td, .job-branch-total td { background: #fff !important; }
}

/* ==========================================================================
   Master dashboard and windows (desktop.html)
   ========================================================================== */
/* A normal page shown inside a window: the window supplies the menu, so hide the page's own. */
html.embedded .sidebar { display: none; }
html.embedded .app-shell { display: block; min-height: 0; }
html.embedded .main { padding: 22px 26px 40px; }

.desktop-page .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
.desktop-page .sidebar { height: 100vh; }
.sidebar a.win-open::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sidebar-active); margin-left: auto; flex-shrink: 0;
}
.desk-column { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.desktop {
  flex: 1; position: relative; overflow: hidden; min-height: 0;
  background-color: #07201d;
  background-image:
    linear-gradient(rgba(110, 231, 209, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 231, 209, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
}
#windows { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Start screen */
.launcher { position: absolute; inset: 0; overflow-y: auto; padding: 34px 40px 60px; color: #d7f0ea; }
.launcher-head h1 { margin: 0; font-size: 26px; font-weight: 750; color: #fff; letter-spacing: -0.015em; }
.launcher-head p { margin: 6px 0 26px; max-width: 640px; color: #8ac4bc; font-size: 13.5px; }
.launcher-empty { padding: 22px; border: 1px dashed rgba(255,255,255,0.25); border-radius: 12px; color: #bde2da; max-width: 520px; }
.launcher-section { margin-bottom: 24px; --tone: #2fd8bd; }
.launcher-section.tone-1 { --tone: #2fbf8f; }
.launcher-section.tone-2 { --tone: #f2a03d; }
.launcher-section.tone-3 { --tone: #c084fc; }
.launcher-section.tone-4 { --tone: #38bdf8; }
.launcher-section.tone-5 { --tone: #f472b6; }
.launcher-section h2 {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--tone);
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-width: 980px; }
.launcher a.tile {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  color: #eef2ff; font-weight: 600; font-size: 13.5px; transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.launcher a.tile:hover { background: rgba(255,255,255,0.13); border-color: var(--tone); color: #fff; transform: translateY(-1px); }
.tile-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
  font-weight: 750; font-size: 14px; color: #06231f; background: var(--tone);
}
.tile-name { line-height: 1.2; }

/* Windows */
.win {
  position: absolute; display: flex; flex-direction: column; pointer-events: auto;
  background: #fff; border-radius: 10px; overflow: visible;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.win.minimized { display: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win-bar {
  height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 0 14px; color: #fff; user-select: none; cursor: default; border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #0b5148, #12a08e); touch-action: none;
}
.win.max .win-bar { border-radius: 0; }
.win:not(.active) .win-bar { background: linear-gradient(90deg, #3b5852, #4d6b64); }
.win-title { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.win-btns { display: flex; gap: 2px; flex-shrink: 0; }
.win-btns button {
  width: 30px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.win-btns button:hover { background: rgba(255,255,255,0.2); }
.win-btns button.close:hover { background: #e5484d; }
.win-body { position: relative; flex: 1; min-height: 0; background: var(--bg); border-radius: 0 0 10px 10px; overflow: hidden; }
.win.max .win-body { border-radius: 0; }
.win-body iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.win-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; background: var(--bg); }
/* Lets the first click on a background window bring it forward instead of being swallowed by the page inside it. */
.win-shield { position: absolute; inset: 0; display: none; }
.win:not(.active) .win-shield { display: block; }
.desktop.dragging .win-shield { display: block; }
.desktop.dragging { user-select: none; }

.win-rs { position: absolute; z-index: 5; touch-action: none; }
.win.max .win-rs { display: none; }
.win-rs-n, .win-rs-s { left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.win-rs-n { top: -3px; }
.win-rs-s { bottom: -3px; }
.win-rs-e, .win-rs-w { top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.win-rs-e { right: -3px; }
.win-rs-w { left: -3px; }
.win-rs-ne, .win-rs-nw, .win-rs-se, .win-rs-sw { width: 14px; height: 14px; }
.win-rs-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.win-rs-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.win-rs-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.win-rs-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }

/* Taskbar */
.taskbar {
  height: 42px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: #061a18; border-top: 1px solid rgba(255,255,255,0.08); overflow-x: auto;
}
.task-spacer { flex: 1; }
.task-btn, .task-close-all {
  height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06); color: #bde2da; font: inherit; font-size: 12.5px; cursor: pointer;
  max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0;
}
.task-btn:hover, .task-close-all:hover { background: rgba(255,255,255,0.14); color: #fff; }
.task-btn.active { background: #0f766e; border-color: #2dd4bf; color: #fff; }
.task-btn.minimized { opacity: 0.6; font-style: italic; }