/* iSERVICE theme — STADT TECH design system (same tokens as stadt-tech-hr).
   Loaded after Bootstrap 5, so it restyles the existing Bootstrap markup without changing pages. */

:root {
  --brand-red: #cc0000; --brand-red-hover: #a80000; --brand-red-text: #b80000; --brand-red-tint: #fdeceb; --on-brand: #ffffff;
  --surface-0: #ffffff; --surface-100: #f6f5f3; --surface-200: #ebe9e6; --surface-inverse: #161616;
  --ink: #161616; --ink-muted: #595959; --ink-subtle: #6e6e6e; --ink-inverse: #ffffff;
  --border: #d9d7d3; --border-strong: #8c8a87; --focus-ring: #161616;
  --success: #0f766e; --success-tint: #e3f4f1; --on-success: #ffffff;
  --danger: #b93e00; --danger-tint: #fcebe1; --on-danger: #ffffff;
  --warning: #8a5a00; --warning-tint: #fbf1dc;
  --shadow-card: 0 1px 2px rgba(22,22,22,.06), 0 1px 1px rgba(22,22,22,.04);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;
  --touch-min: 48px; --content-max: 960px; --header-h: 56px;
  --font-sans: "IBM Plex Sans Thai", "IBM Plex Sans", "Noto Sans Thai", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root {
  --brand-red-hover: #e01a1a; --brand-red-text: #ff6b66; --brand-red-tint: #3a1514;
  --surface-0: #121212; --surface-100: #1c1c1c; --surface-200: #262626; --surface-inverse: #f2f2f2;
  --ink: #f2f2f2; --ink-muted: #b3b3b3; --ink-subtle: #9a9a9a; --ink-inverse: #161616;
  --border: #333333; --border-strong: #6b6b6b; --focus-ring: #f2f2f2;
  --success: #2fc4b2; --success-tint: #0f2e2b; --on-success: #0b0b0b;
  --danger: #ff8a4c; --danger-tint: #3a1f10; --on-danger: #0b0b0b;
  --warning: #f2b84b; --warning-tint: #33270d;
  --shadow-card: none; color-scheme: dark;
} }

/* ---------- Base ---------- */
html, body { background: var(--surface-100) !important; }
body {
  margin: 0; padding: 0 0 var(--space-8) !important; min-height: 100dvh !important;
  font-family: var(--font-sans) !important; font-size: 16px; line-height: 26px; color: var(--ink) !important;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px; box-shadow: none !important; }
a { color: var(--brand-red-text); }
h1, h2, h3, h4, h5 { font-family: var(--font-sans) !important; color: var(--ink); text-wrap: balance; }
h1 { font-size: 24px; line-height: 34px; font-weight: 600; }
h2 { font-size: 22px; line-height: 32px; font-weight: 600; }
h3 { font-size: 20px; line-height: 30px; font-weight: 600; }
h4 { font-size: 17px; line-height: 26px; font-weight: 600; }
p { color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--border); color: var(--border); opacity: 1; margin: var(--space-4) 0; }
.lead { font-size: 17px; }

/* ---------- Header (replaces the old Bootstrap navbar) ---------- */
.st-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-0); border-bottom: 1px solid var(--border);
}
.st-header__inner {
  max-width: var(--content-max); margin: 0 auto; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0 var(--space-4);
}
.st-header__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; min-width: 0; }
.st-header__logo { height: 22px; width: auto; display: block; }
.st-header__app {
  font-weight: 600; font-size: 14px; color: var(--ink-muted); letter-spacing: .04em;
  padding-left: var(--space-3); border-left: 1px solid var(--border); white-space: nowrap;
}
.st-header__nav { display: flex; align-items: center; gap: var(--space-2); }
.st-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--surface-200);
  display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; flex: none;
}
.st-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap;
}
.st-link:hover { background: var(--surface-200); color: var(--ink); }
.st-link[aria-current="page"] { background: var(--brand-red-tint); color: var(--brand-red-text); }
.st-link svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 575.98px) {
  .st-header__app { display: none; }
  .st-link .st-link__text { display: none; }   /* icons only on phones */
  .st-link { padding: 0 10px; min-height: 40px; }
}

/* ---------- Page container and the main card ---------- */
.container, main.container {
  max-width: var(--content-max) !important; width: 100%;
  padding: var(--space-6) var(--space-4) 0 !important; margin: 0 auto;
}
@media (max-width: 575.98px) { .container, main.container { padding-top: var(--space-4) !important; } }
/* nested containers (several pages wrap .container inside .container/main) must not add a second gutter */
.container .container, main.container .container { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.row { margin-left: 0 !important; margin-right: 0 !important; }
/* content some pages place directly in <body>, outside any container: give it the same column and gutter */
body > div:not(.container):not(.modal), body > form, body > h6, body > .button-container {
  max-width: var(--content-max); margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--space-4) !important; padding-right: var(--space-4) !important;
}
.bg-light, .bg-body-tertiary {
  background: var(--surface-0) !important; color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-card);
  padding: var(--space-6) !important;
}
@media (max-width: 575.98px) { .bg-light, .bg-body-tertiary { padding: var(--space-4) !important; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 var(--space-5);
  border-radius: var(--radius-md) !important; border: 1px solid transparent;
  font: 600 16px/24px var(--font-sans) !important; text-decoration: none; white-space: normal; text-align: center;
  margin: 0 var(--space-2) var(--space-2) 0; box-shadow: none !important;
  transition: background-color .12s ease;
}
.btn-lg { min-height: 56px; font-size: 17px !important; }
.btn-sm { min-height: 36px; padding: 0 var(--space-3); font-size: 14px !important; border-radius: var(--radius-sm) !important; }
.btn-primary { background: var(--brand-red) !important; border-color: var(--brand-red) !important; color: var(--on-brand) !important; }
.btn-primary:hover, .btn-primary:active { background: var(--brand-red-hover) !important; border-color: var(--brand-red-hover) !important; }
.btn-secondary, .btn-light, .btn-outline-secondary {
  background: var(--surface-0) !important; color: var(--ink) !important; border-color: var(--border-strong) !important;
}
.btn-secondary:hover, .btn-light:hover { background: var(--surface-200) !important; }
.btn-info, .btn-success { background: var(--success) !important; border-color: var(--success) !important; color: var(--on-success) !important; }
.btn-warning { background: var(--warning-tint) !important; border-color: var(--warning) !important; color: var(--ink) !important; }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--on-danger) !important; }
input[type="submit"].btn { cursor: pointer; }

/* Menu pages (user.php, admin.php, …): big buttons become a tidy grid of actions */
.bg-light > a.btn-lg { min-width: 220px; }
@media (max-width: 575.98px) {
  .bg-light > a.btn-lg, .bg-light > a.btn, .button-container .btn,
  .bg-light form > .btn, .bg-light form > button.btn, .bg-light form > input.btn { display: flex; width: 100%; margin-right: 0; }
}
.button-container { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4) !important; justify-content: flex-start !important; }
.button-container .btn { margin: 0; }
.btn-actions { margin: 2px 4px 2px 0 !important; }

/* ---------- Forms ---------- */
label, .form-label { font: 500 14px/20px var(--font-sans); color: var(--ink); margin-top: var(--space-2); display: block; }
.form-control, .form-select, select, textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="file"] {
  width: 100%; min-height: var(--touch-min); padding: 10px var(--space-3) !important;
  font: 400 16px/26px var(--font-sans) !important; color: var(--ink) !important;
  background: var(--surface-0) !important; border: 1px solid var(--border-strong) !important; border-radius: var(--radius-sm) !important;
}
select { width: auto; min-width: 140px; margin: 0 var(--space-2) var(--space-2) 0; }
@media (max-width: 575.98px) { select { width: 100%; margin-right: 0; } }
.form-control::placeholder { color: var(--ink-subtle) !important; }
.form-control:focus, select:focus { border-color: var(--ink) !important; box-shadow: none !important; }
form { max-width: 640px; }
form[style*="inline"] { max-width: none; }

/* ---------- Alerts (session messages) ---------- */
.alert {
  border: 0 !important; border-radius: var(--radius-md) !important; padding: var(--space-3) var(--space-4) !important;
  font-size: 15px; line-height: 24px; color: var(--ink) !important;
}
.alert-success { background: var(--success-tint) !important; }
.alert-danger { background: var(--danger-tint) !important; }
.alert-warning { background: var(--warning-tint) !important; }

/* ---------- Tables (user list, payroll slip) ---------- */
.table, .table-container table, table {
  width: 100%; border-collapse: collapse; background: var(--surface-0); color: var(--ink);
  font-size: 15px; line-height: 22px; --bs-table-bg: transparent;
}
.table th, .table td, .table-container th, .table-container td, table th, table td {
  padding: 10px var(--space-3) !important; border: 0 !important; border-bottom: 1px solid var(--border) !important;
  vertical-align: middle; color: var(--ink);
}
.table thead th, .table-container th, table thead th {
  background: var(--surface-100) !important; color: var(--ink-muted) !important; font-weight: 500; font-size: 14px; white-space: nowrap;
}
thead.bg-danger th, .bg-danger { background: var(--brand-red) !important; color: var(--on-brand) !important; }
.table-bordered { border: 1px solid var(--border) !important; }
.table-container {
  display: flex; flex-wrap: wrap; gap: var(--space-4); width: 100%; margin: var(--space-4) 0;
}
.table-container table {
  flex: 1 1 280px; width: auto !important; margin: 0 !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-md); overflow: hidden;
}
.table-container td:last-child, .table-container th:last-child { text-align: right; }
.table-container table { min-width: 0; } .table-container td { overflow-wrap: anywhere; }
.highlight { background: var(--surface-200) !important; color: var(--ink) !important; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4) !important; }
/* wide tables scroll inside themselves on phones instead of stretching the page */
@media (max-width: 767.98px) {
  .bg-light > table, .bg-light .table, main > table, .container > table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Payroll slip headings keep the brand red */
/* Page banners hard-code color:red; use the brand red, a bit smaller on phones */
[style*="color:red"], [style*="color: red"] { color: var(--brand-red) !important; letter-spacing: .02em; }
@media (max-width: 575.98px) { h2[style*="font-size: 40px"], h1[style*="font-size: 40px"] { font-size: 30px !important; } }

/* ---------- Misc ---------- */
.text-center h3 { margin-top: 0; }
center { text-align: left; }
@media (max-width: 575.98px) {
  [style*="margin-left: 80px"], [style*="margin-left: 45px"] { margin-left: 0 !important; }
}