/* ------------------------------------------------------------------
   Employee Salary Management — UI theme
   "current" = clean neutral light. "dark" = matching dark.
   Class names and DOM hooks are unchanged; this file only restyles.
   ------------------------------------------------------------------ */

:root,
html[data-theme="current"] {
  color-scheme: light;

  --ink: #1f2933;
  --ink-strong: #0b1220;
  --muted: #545c68;
  --muted-2: #545c68;

  --line: #e2e4e8;
  --line-strong: #d3d6db;
  --input-border: #c4c9d1;

  --paper: #e6e9f0;
  --card: #f7f8fb;

  --accent: #3d5d8a;
  --accent-2: #b4531f;
  --accent-hover: #334e75;
  --accent-glow: rgba(61, 93, 138, 0.2);
  --on-accent: #ffffff;

  --link: #3a5a86;
  --link-hover: #2c466c;

  --code-ink: #9a3412;
  --code-bg: #f3f4f6;

  --foot: #eef1f6;
  --foot-ink: #6b7280;

  --msg-bg: #eef3f9;
  --msg-line: #c5d4e6;
  --msg-ink: #2c466c;

  --grp-bg: #eef1f6;
  --thead: #eef1f6;
  --grid-row-on: color-mix(in srgb, var(--accent) 16%, var(--card));
  --row-hover: #e8edf4;

  --sidebar: #121a2b;
  --sidebar-ink: #e9edf1;
  --sidebar-muted: #7d8a99;
  --sidebar-link: #c3ccd6;
  --sidebar-hover: #1c2740;
  --sidebar-ico: transparent;

  --top: #ffffff;
  --search-bg: #eef1f6;
  --search-ink: #6b7482;
  --bc: #4b5563;
  --bc-sep: #b7bcc4;

  --cmdk-dim: rgba(15, 23, 41, 0.4);
  --cmdk-hover: #eef2f8;
  --sheet-line: #e2e5e9;

  --warn-bg: #fef6e7;
  --ok-bg: #eef3f9;
  --dim-bg: #eef1f6;
  --active-bg: #e5eefb;

  --kind-monthly: #3d5d8a;
  --kind-yak: #5b3d8a;
  --kind-wager: #8a5109;
}

/* Dark: matching neutral, low-glare. */
html.hr-night {
  color-scheme: dark;

  --ink: #d7dbe0;
  --ink-strong: #f3f5f7;
  --muted: #9aa4b0;
  --muted-2: #9aa4b0;

  --line: #262b34;
  --line-strong: #313742;
  --input-border: #3d4450;

  --paper: #0e1218;
  --card: #161b24;

  --accent: #7a9dc4;
  --accent-2: #e08a4c;
  --accent-hover: #8eafd0;
  --accent-glow: rgba(122, 157, 196, 0.28);
  --on-accent: #0e1218;

  --link: #9bb6d4;
  --link-hover: #c0d2e6;

  --code-ink: #f0c9a0;
  --code-bg: #23262d;

  --foot: #0e1218;
  --foot-ink: #9aa4b0;

  --msg-bg: #182230;
  --msg-line: #3a4e66;
  --msg-ink: #d5e3f0;

  --grp-bg: #1a202c;
  --thead: #1a202c;
  --row-hover: #1c2634;
  --grid-row-on: color-mix(in srgb, var(--accent) 26%, var(--card));

  --sidebar: #0c1018;
  --sidebar-ink: #eceef1;
  --sidebar-muted: #8b95a1;
  --sidebar-link: #c3ccd6;
  --sidebar-hover: #1a2233;
  --sidebar-ico: transparent;

  --top: #141820;
  --search-bg: #1a202c;
  --search-ink: #9aa4b0;
  --bc: #9aa4b0;
  --bc-sep: #4a515c;

  --cmdk-dim: rgba(0, 0, 0, 0.6);
  --cmdk-hover: #1c2634;
  --sheet-line: #313742;

  --warn-bg: #33291320;
  --ok-bg: #182230;
  --dim-bg: #1a202c;
  --active-bg: #1e2b40;

  --kind-monthly: #a8c4e0;
  --kind-yak: #cbb8ec;
  --kind-wager: #f0c48a;
}

/* ---------- base ---------- */

html {
  font-size: 16px;
  scrollbar-gutter: stable;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h3, .h5 {
  color: var(--ink-strong);
  font-weight: 640;
  letter-spacing: -0.01em;
}
.page-head h1, h1.h3 { font-size: 1.5rem; }

a { color: var(--link); font-weight: 500; text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

code {
  color: var(--code-ink);
  background: var(--code-bg);
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.text-muted, .small, .form-text { color: var(--muted) !important; }

/* ---------- forms ---------- */

.form-label {
  color: var(--ink-strong) !important;
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
}
.form-control, .form-select {
  color: var(--ink-strong);
  font-weight: 400;
  background: var(--card);
  border-color: var(--input-border);
  border-radius: 6px;
  min-height: 1.85rem;
  padding: 0.12rem 0.45rem;
  font-size: 0.84rem;
  line-height: 1.25;
}
.form-select {
  padding-right: 1.6rem;
  background-size: 12px 10px;
}
.form-control[type="file"] {
  padding: 0.12rem 0.4rem;
}
.form-control:focus, .form-select:focus {
  color: var(--ink-strong);
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.18rem var(--accent-glow);
}
.form-check-label { color: var(--ink-strong); font-weight: 400; }

/* ---------- buttons ---------- */

.btn { font-weight: 500; border-radius: 7px; }
.btn-accent { background: var(--accent); color: var(--on-accent); border: 0; font-weight: 550; }
.btn-accent:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-outline-secondary {
  --bs-btn-color: var(--ink-strong);
  --bs-btn-border-color: var(--input-border);
  --bs-btn-hover-color: var(--ink-strong);
  --bs-btn-hover-bg: var(--row-hover);
  --bs-btn-hover-border-color: var(--input-border);
  --bs-btn-active-color: var(--ink-strong);
  --bs-btn-active-bg: var(--row-hover);
  --bs-btn-disabled-color: var(--muted);
  color: var(--ink-strong);
  border-color: var(--input-border);
  font-weight: 500;
}

/* ---------- cards / panels ---------- */

.card-hr {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.msg {
  background: var(--msg-bg);
  border: 1px solid var(--msg-line);
  color: var(--msg-ink);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 500;
}

/* ---------- tables ---------- */

.table {
  color: var(--ink-strong);
  font-size: 0.95rem;
  --bs-table-bg: var(--card);
  --bs-table-color: var(--ink-strong);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--grp-bg);
  --bs-table-striped-color: var(--ink-strong);
  --bs-table-hover-bg: var(--row-hover);
  --bs-table-hover-color: var(--ink-strong);
  --bs-table-active-bg: var(--active-bg);
  --bs-table-active-color: var(--ink-strong);
}
/* main data cells: full-strength ink; headers stay lighter */
.table > tbody > tr > td { color: var(--ink-strong); }
.table > :not(caption) > * > * { padding: 0.55rem 0.7rem; }
.table thead th {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.table tbody td { border-color: var(--line); }

.table-warning {
  --bs-table-bg: var(--warn-bg);
  --bs-table-color: var(--ink);
  --bs-table-striped-bg: var(--warn-bg);
  --bs-table-hover-bg: var(--warn-bg);
}
.table-success {
  --bs-table-bg: var(--ok-bg);
  --bs-table-color: var(--ink);
  --bs-table-striped-bg: var(--ok-bg);
  --bs-table-hover-bg: var(--ok-bg);
}
.table-secondary {
  --bs-table-bg: var(--dim-bg);
  --bs-table-color: var(--ink);
  --bs-table-striped-bg: var(--dim-bg);
  --bs-table-hover-bg: var(--row-hover);
}
.table-active {
  --bs-table-bg: var(--active-bg);
  --bs-table-color: var(--ink);
}

th.sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
th.sort-th:hover { color: var(--accent); }
th.sort-th::after { content: " \25B4\25BE"; opacity: .3; font-size: .75em; }
th.sort-asc::after { content: " \25B2"; opacity: 1; }
th.sort-desc::after { content: " \25BC"; opacity: 1; }

.kind-Monthly { color: var(--kind-monthly); font-weight: 600; }
.kind-Yakshagana { color: var(--kind-yak); font-weight: 600; }
.kind-DailyWager { color: var(--kind-wager); font-weight: 600; }
.kind-Contract { color: var(--accent-2); font-weight: 600; }

/* fieldset-style groups */
.grp-ss {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.7rem 0.55rem;
  margin-bottom: 0.65rem;
  background: var(--grp-bg);
}
.grp-ss legend {
  font-weight: 650;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.4rem;
  color: var(--muted);
  float: none;
  width: auto;
}

/* Zoho-style employee form: tabs + labelled field grid */
.emp-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.05rem;
  overflow-x: auto;
  margin: 0 0 0.75rem;
  padding: 0 0.15rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 96px;
  z-index: 18;
  background: var(--paper);
}
.emp-tab {
  flex-shrink: 0;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-weight: 500;
  font-size: 0.84rem;
  padding: 0.45rem 0.7rem 0.4rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.emp-tab:hover { color: var(--ink-strong) !important; }
.emp-tab[aria-current="page"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.emp-sec { scroll-margin-top: 9.25rem; }
.emp-form .emp-panel { display: block; }
.emp-head {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 0.45rem 1rem;
  align-items: start;
}
.emp-head-fields {
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.emp-photo-lg {
  width: 12rem;
  max-width: 12rem;
  min-width: 12rem;
  grid-row: auto;
  overflow: hidden;
}
.emp-photo-frame {
  width: 12rem;
  cursor: pointer;
}
.emp-photo-lg img,
.emp-photo-empty {
  width: 12rem;
  max-width: 12rem;
  height: 14.25rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card);
}
.emp-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.emp-photo-empty[hidden],
#empFacePreview[hidden] {
  display: none !important;
}
.emp-photo-pick {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0.12rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.emp-photo-pick input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
  gap: 0.45rem 0.7rem;
  align-items: start;
}
.emp-field {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.emp-field > .form-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted) !important;
}
.emp-field > .form-control,
.emp-field > .form-select {
  width: 100%;
  min-width: 0;
}
.emp-field-wide { grid-column: span 2; }
.emp-field-full { grid-column: 1 / -1; }
.emp-checks {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  min-height: 1.8rem;
}
.emp-checks .form-check {
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-left: 1.4rem;
}
.emp-photo {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 12rem;
  max-width: 12rem;
}
.emp-photo img {
  width: 12rem;
  height: 14.25rem;
  max-width: 12rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.emp-photo .form-label { margin: 0; font-size: 0.72rem; }
.emp-form .form-text { font-size: 0.72rem; }
.emp-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0.35rem;
  position: sticky;
  bottom: 0.25rem;
  z-index: 8;
  padding: 0.3rem 0;
  background: var(--paper);
}
.emp-page-head {
  margin-bottom: 0.25rem;
  flex-wrap: nowrap;
  gap: 0.75rem;
  min-width: 0;
}
.emp-page-head h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-walk {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}
.emp-walk-nav {
  max-width: 11.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-walk-list {
  flex: 0 0 auto;
}
.emp-lead {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
}
.emp-form .form-control,
.emp-form .form-select {
  padding: 0.18rem 0.42rem;
  min-height: 1.82rem;
  font-size: 0.86rem;
}
.emp-form .form-control-sm {
  min-height: 1.7rem;
}
.emp-form .grp-ss {
  padding: 0.28rem 0.55rem 0.4rem;
  margin-bottom: 0.45rem;
}
.emp-grid {
  grid-template-columns: repeat(auto-fill, minmax(9.4rem, 1fr));
  gap: 0.28rem 0.55rem;
}
.emp-head-fields.emp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.emp-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.65rem;
  align-items: stretch;
}
.emp-pair > .emp-sec,
.emp-pair > .grp-ss {
  margin-bottom: 0;
}
.emp-span-2 {
  grid-column: 1 / -1;
}
@media (max-width: 1100px) {
  .emp-pair { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .emp-field-wide { grid-column: span 1; }
  .emp-photo { grid-row: span 1; width: auto; max-width: none; min-width: 0; }
  .emp-head { grid-template-columns: 1fr; }
  .emp-head-fields.emp-grid { grid-template-columns: 1fr 1fr; }
  .emp-photo-lg { width: auto; max-width: none; min-width: 0; }
  .emp-photo-frame { width: auto; }
  .emp-photo-lg img,
  .emp-photo-empty,
  .emp-photo img { width: 100%; max-width: none; height: 12rem; }
  .emp-tabs { top: 0; }
  .emp-sec { scroll-margin-top: 3rem; }
}

.shift-tabs .btn { font-weight: 500; }
.table-shift td { vertical-align: middle; }
.shift-grid, .grid-fill {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shift-grid .table, .grid-fill .table { margin-bottom: 0; }
.shift-grid-fill, .grid-fill, .sheet-wrap[data-grid-fill] {
  overflow: auto;
  min-height: 12rem;
}
.shift-grid-fill .h6 { margin: 0.85rem 0.75rem 0.35rem; }
.shift-grid-fill .shift-sub { margin: 0 0.75rem 0.5rem; }
.shift-grid thead th, .grid-fill thead th {
  position: sticky;
  top: 0;
  background: var(--thead);
  z-index: 2;
  box-shadow: 0 1px 0 var(--line-strong);
}

/* ================================================================
   Three-zone shell: sidebar + top bar + main
   ================================================================ */

.hr-app {
  display: flex;
  min-height: 100vh;
  background: var(--paper);
}

/* ---- sidebar ---- */
.hr-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.8rem 0.6rem 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .18s ease;
}
.hr-app.rail .hr-sidebar { width: 60px; }

.hr-side-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sidebar-ink) !important;
  text-decoration: none;
  font-weight: 620;
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem 1rem;
}
.hr-side-brand:hover { text-decoration: none; }
.hr-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.hr-nav-group {
  font-size: 0.66rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  font-weight: 600;
  padding: 1rem 0.65rem 0.3rem;
}

.hr-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sidebar-link) !important;
  text-decoration: none;
  font-weight: 450;
  font-size: 0.9rem;
  padding: 0.44rem 0.6rem;
  border-radius: 7px;
  white-space: nowrap;
}
.hr-nav-link:hover {
  background: var(--sidebar-hover);
  color: #fff !important;
  text-decoration: none;
}
.hr-nav-link.on {
  background: var(--accent);
  color: #fff !important;
  font-weight: 500;
}

/* inline stroke icons */
.hr-ico {
  width: 17px;
  height: 17px;
  display: block;
  flex-shrink: 0;
  color: var(--sidebar-muted);
}
.hr-nav-link:hover .hr-ico { color: #fff; }
.hr-nav-link.on .hr-ico { color: #fff; }

.hr-app.rail .hr-nav-text,
.hr-app.rail .hr-nav-group { display: none; }
.hr-app.rail .hr-side-brand { padding-bottom: 0.5rem; justify-content: center; }
.hr-app.rail .hr-nav-link { justify-content: center; padding: 0.5rem; }
.hr-app.rail .hr-ico { width: 19px; height: 19px; }

/* ---- shell + top bar ---- */
.hr-shell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.hr-top {
  height: 54px;
  background: var(--top);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.1rem;
  position: sticky;
  top: 0;
  z-index: 20;
  min-width: 0;
}
.hr-icon-btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-strong);
  border-radius: 7px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.hr-icon-btn:hover { background: var(--row-hover); }

.hr-bc { color: var(--bc); font-weight: 400; white-space: nowrap; font-size: 0.92rem; }
.hr-bc .sep { color: var(--bc-sep); margin: 0 0.35rem; }
.hr-bc strong { color: var(--ink-strong); font-weight: 600; }

.hr-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 22rem;
  flex: 1 1 8rem;
  border: 1px solid var(--input-border);
  background: var(--search-bg);
  border-radius: 7px;
  padding: 0.34rem 0.7rem;
  color: var(--search-ink);
  font-weight: 400;
  font-size: 0.88rem;
}
.hr-search:hover { border-color: var(--line-strong); }
.hr-search span { flex: 1; text-align: left; }
.hr-search kbd {
  font-size: 0.68rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 0.3rem;
  font-weight: 500;
  color: var(--muted);
}
.hr-reset-screen {
  border: 1px solid var(--accent-2);
  background: var(--accent-2);
  color: #fff;
  border-radius: 7px;
  height: 34px;
  padding: 0 0.85rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.hr-reset-screen[hidden] { display: none !important; }
.hr-reset-screen:hover {
  filter: brightness(0.92);
  color: #fff;
}

.hr-theme {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-strong);
  border-radius: 7px;
  padding: 0.3rem 0.5rem;
  font-weight: 500;
  font-size: 0.8rem;
  max-width: 8rem;
}
.hr-avatar {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 550;
  border-radius: 999px;
  padding: 0.32rem 0.72rem;
  font-size: 0.82rem;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hr-user-slot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}
.hr-sign-out {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-strong);
  border-radius: 7px;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 550;
  text-decoration: none;
}
.hr-sign-out:hover { background: var(--row-hover); color: var(--ink-strong); }

.login-page { min-height: 100vh; background: var(--paper); }
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 28rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.6rem;
  box-shadow: 0 16px 40px rgba(11, 18, 32, 0.08);
}
.login-head {
  text-align: center;
  margin-bottom: 1.45rem;
}
.login-logo {
  display: block;
  width: 7.5rem;
  height: auto;
  margin: 0 auto 0.85rem;
  background: transparent;
}
.login-temple {
  margin: 0;
  color: var(--ink-strong);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.45;
  font-family: "Nirmala UI", "Noto Sans Kannada", "Tunga", system-ui, sans-serif;
}
.login-place {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  font-family: "Nirmala UI", "Noto Sans Kannada", "Tunga", system-ui, sans-serif;
}
.login-portal {
  margin: 0.7rem 0 0;
  color: var(--ink-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.login-brand strong { display: block; color: var(--ink-strong); font-size: 1.05rem; }
.login-brand span { color: var(--muted); font-size: 0.88rem; }
.login-msg {
  background: #fde8e8;
  color: #8a1f1f;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
}
html.hr-night .login-msg {
  background: rgba(180, 60, 60, 0.22);
  color: #f3c4c4;
}

.hr-body {
  padding: 1.5rem 1.75rem 2.5rem;
  flex: 1;
  min-width: 0;
}
.hr-body:has(.emp-form) {
  padding-top: 1rem;
  padding-bottom: 1.1rem;
}
.hr-foot {
  border-top: 1px solid var(--line);
  background: var(--foot);
  padding: 0.75rem 1.75rem;
}
.hr-foot .small { color: var(--foot-ink) !important; font-weight: 400; }
.hr-scrim { display: none; }

/* ---- page header + toolbars ---- */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.page-head + .text-muted { margin-top: -0.35rem; }
.page-head-plain {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.4rem;
}

/* ---- stat cards (KPI strip) ---- */
.kpi-strip {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.2rem;
}
.kpi-chip {
  flex: 1 1 8.5rem;
  max-width: 15rem;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0.8rem 1rem 0.85rem 1.1rem;
  overflow: hidden;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.kpi-chip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0.55;
}
a.kpi-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
  text-decoration: none;
}
a.kpi-chip:hover::before { opacity: 1; }
.kpi-chip .lbl {
  font-size: .68rem;
  text-transform: uppercase;
  color: var(--muted) !important;
  font-weight: 600;
  letter-spacing: .06em;
}
.kpi-chip .val {
  font-size: 1.7rem;
  font-weight: 680;
  color: var(--ink-strong);
  line-height: 1.2;
  margin-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.kpi { font-size: 1.7rem; font-weight: 680; color: var(--ink-strong); }
.kpi-strip-sm {
  gap: 0.4rem;
  margin: 0.45rem 0 0.65rem;
}
.kpi-strip-sm .kpi-chip {
  flex: 0 1 7.2rem;
  max-width: 10.5rem;
  padding: 0.35rem 0.65rem 0.4rem 0.75rem;
  border-radius: 8px;
}
.kpi-strip-sm .kpi-chip .lbl { font-size: 0.58rem; }
.kpi-strip-sm .kpi-chip .val {
  font-size: 1.15rem;
  margin-top: 0;
  line-height: 1.15;
}
.kpi-strip-sm .kpi-chip-live {
  flex: 0 0 13.25rem;
  min-width: 13.25rem;
  max-width: 16rem;
}
.kpi-strip-sm .kpi-chip-live .val {
  white-space: nowrap;
}

/* ---- filter bar: one compact line, labels beside controls ---- */
.page-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  background: var(--grp-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
  margin-bottom: 0.7rem;
  overflow-x: auto;
}
.page-toolbar.row,
.page-toolbar[class*="row"] {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.page-toolbar > [class*="col-"] {
  flex: 0 1 auto;
  width: auto !important;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}
.page-toolbar .form-label {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted) !important;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.page-toolbar .form-control,
.page-toolbar .form-select {
  min-height: 1.8rem;
  height: 1.8rem;
  background: var(--card);
  font-size: 0.82rem;
  width: auto;
  min-width: 6.5rem;
  max-width: 16rem;
}
.page-toolbar .form-control[type="date"],
.page-toolbar .form-control[type="number"],
.page-toolbar .form-control[name="year"],
.page-toolbar .form-control[name="Year"] {
  width: 8rem;
  min-width: 7.5rem;
  max-width: 8.5rem;
}
.page-toolbar .form-control[type="search"],
.page-toolbar input[name="q"] {
  width: 11rem;
  max-width: 14rem;
}
.page-toolbar > [class*="col-"]:has(select[name="trust"]),
.page-toolbar > [class*="col-"]:has(select[name="personId"]),
.page-toolbar > [class*="col-"]:has(select[name="PersonId"]),
.page-toolbar > [class*="col-"]:has(select[name="id"]),
.page-toolbar > [class*="col-"]:has(select[name="kind"]),
.page-toolbar > [class*="col-"]:has(select[name="Kind"]) {
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 20rem;
}
.page-toolbar > [class*="col-"]:has(select[name="trust"]) .form-select,
.page-toolbar > [class*="col-"]:has(select[name="personId"]) .form-select,
.page-toolbar > [class*="col-"]:has(select[name="PersonId"]) .form-select,
.page-toolbar > [class*="col-"]:has(select[name="id"]) .form-select,
.page-toolbar > [class*="col-"]:has(select[name="kind"]) .form-select,
.page-toolbar > [class*="col-"]:has(select[name="Kind"]) .form-select {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.page-toolbar > [class*="col-"]:has(.hr-person-pick) {
  flex: 1 1 16rem;
  min-width: 14rem;
  max-width: 28rem;
}
.page-toolbar .hr-person-pick {
  flex: 1;
  min-width: 14rem;
}
.page-toolbar .hr-person-pick .form-control {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.page-toolbar > .hr-grow,
.page-toolbar > .hr-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}
.page-toolbar .hr-grow {
  flex: 1 1 10rem;
  min-width: 8rem;
}
.page-toolbar .hr-grow .form-control {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.page-toolbar .hr-field .form-control {
  width: 10rem;
  max-width: 14rem;
}
.page-toolbar > .form-select {
  width: auto;
  min-width: 7.5rem;
}
.page-toolbar > [class*="col-"]:has(select[name="filter"]) {
  flex: 1 1 11rem;
  min-width: 10rem;
  max-width: 18rem;
}
.page-toolbar > [class*="col-"]:has(select[name="filter"]) .form-select {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.page-toolbar .btn {
  min-height: 1.8rem;
  height: 1.8rem;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.82rem;
}
.page-toolbar > [class*="text-md-end"],
.page-toolbar > [class*="align-self-end"] {
  margin-left: auto;
  flex: 0 0 auto;
}
.page-toolbar .form-check {
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  padding-left: 1.4rem;
}
/* the form's own submit is the primary action */
.page-toolbar button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 550;
}
.page-toolbar button[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

/* data-entry rows: label beside control so fields share a line */
.hr-app form.row.g-2:not(.page-toolbar):not(.shift-form),
.hr-app form.row.g-3:not(.page-toolbar):not(.shift-form),
.hr-app form.card-hr > .row,
fieldset.grp-ss .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.hr-app form.row.g-2:not(.page-toolbar):not(.shift-form) > [class*="col-"],
.hr-app form.row.g-3:not(.page-toolbar):not(.shift-form) > [class*="col-"],
.hr-app form.card-hr > .row > [class*="col-"],
fieldset.grp-ss .row > [class*="col-"] {
  flex: 1 1 11rem;
  width: auto !important;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
}
.hr-app form.row.g-2:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-label,
.hr-app form.row.g-3:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-label,
.hr-app form.card-hr > .row > [class*="col-"] > .form-label,
fieldset.grp-ss .row > [class*="col-"] > .form-label {
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}
.hr-app form.row.g-2:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-control,
.hr-app form.row.g-2:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-select,
.hr-app form.row.g-3:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-control,
.hr-app form.row.g-3:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-select,
.hr-app form.card-hr > .row > [class*="col-"] > .form-control,
.hr-app form.card-hr > .row > [class*="col-"] > .form-select,
fieldset.grp-ss .row > [class*="col-"] > .form-control,
fieldset.grp-ss .row > [class*="col-"] > .form-select {
  flex: 1 1 7rem;
  min-width: 6.25rem;
  width: auto;
}
.hr-app form.row.g-2:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-text,
.hr-app form.row.g-3:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .form-text,
fieldset.grp-ss .row > [class*="col-"] > .form-text {
  flex: 1 0 100%;
  margin-top: 0;
  font-size: 0.72rem;
}
.hr-app form.row:not(.page-toolbar):not(.shift-form) > .col-12,
.hr-app form.row:not(.page-toolbar):not(.shift-form) > [class*="col-12"] {
  flex: 1 0 100%;
  width: 100% !important;
  max-width: none;
}
.hr-app form.row:not(.page-toolbar):not(.shift-form) > [class*="col-"] > .d-flex {
  flex: 1 1 10rem;
  min-width: 11rem;
}
.hr-app .form-check.mt-4 {
  margin-top: 0 !important;
  min-height: 0;
  padding-top: 0;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
}
.hr-app form.card-hr > .row > .form-check,
fieldset.grp-ss .row > .form-check {
  flex: 0 1 auto;
}
.hr-app form.row:not(.page-toolbar):not(.shift-form) > [class*="col-"]:not(.col-12):has(> .btn),
.hr-app form.row:not(.page-toolbar):not(.shift-form) > [class*="col-"]:not(.col-12):has(> button) {
  flex: 0 0 auto;
}

/* Shift hours: three IN/OUT windows on one row, presets/dates/save on the next */
.shift-form.row,
#shiftForm.row,
#bulkShiftForm.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.45rem;
}
.shift-form > [class*="col-"],
#shiftForm > [class*="col-"],
#bulkShiftForm > [class*="col-"] {
  display: block;
  width: auto;
}
.shift-form > .col-md-4,
#shiftForm > .col-md-4,
#bulkShiftForm > .col-md-4 {
  flex: 1 1 17.5rem;
  max-width: 24rem;
  min-width: 16.5rem;
}
.shift-form > .col-md-4 > .form-label,
#shiftForm > .col-md-4 > .form-label,
#bulkShiftForm > .col-md-4 > .form-label {
  display: block;
  margin-bottom: 0.15rem;
}
.shift-form > .col-md-4 > .d-flex,
#shiftForm > .col-md-4 > .d-flex,
#bulkShiftForm > .col-md-4 > .d-flex {
  width: 100%;
  min-width: 0;
}
.shift-form > .col-md-4 .form-control[type="time"],
#shiftForm > .col-md-4 .form-control[type="time"],
#bulkShiftForm > .col-md-4 .form-control[type="time"] {
  flex: 1 1 6.75rem;
  min-width: 6.75rem;
  width: auto;
  max-width: none;
}
.shift-form > .col-12,
.shift-form > [class*="col-12"],
#shiftForm > .col-12,
#bulkShiftForm > .col-12 {
  flex: 1 0 100%;
  width: 100% !important;
  max-width: none;
}
.shift-form > .col-md-3,
.shift-form > .col-md-5,
.shift-form > .col-md-6,
#shiftForm > .col-md-3,
#shiftForm > .col-md-6,
#bulkShiftForm > .col-md-3,
#bulkShiftForm > .col-md-5 {
  flex: 1 1 11rem;
  min-width: 10rem;
}
.shift-form > .col-md-3 > .form-label,
.shift-form > .col-md-5 > .form-label,
.shift-form > .col-md-6 > .form-label,
#shiftForm > .col-md-3 > .form-label,
#shiftForm > .col-md-6 > .form-label,
#bulkShiftForm > .col-md-3 > .form-label,
#bulkShiftForm > .col-md-5 > .form-label {
  display: inline-block;
  margin: 0 0.35rem 0 0;
  white-space: nowrap;
  vertical-align: middle;
}
.shift-form > .col-md-3 > .form-control,
.shift-form > .col-md-3 > .form-select,
.shift-form > .col-md-5 > .form-control,
.shift-form > .col-md-6 > .form-control,
#shiftForm > .col-md-3 > .form-control,
#shiftForm > .col-md-6 > .form-control,
#bulkShiftForm > .col-md-3 > .form-control,
#bulkShiftForm > .col-md-3 > .form-select,
#bulkShiftForm > .col-md-5 > .form-control {
  display: inline-block;
  width: auto;
  min-width: 8rem;
  vertical-align: middle;
}
.shift-form > .d-flex,
#shiftForm > .d-flex,
#bulkShiftForm > .d-flex {
  display: flex !important;
}
.shift-form > .form-check,
#bulkShiftForm > .form-check {
  display: flex;
  align-items: center;
  min-height: 0;
  margin-top: 0 !important;
}
.hr-line {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  overflow-x: auto;
}
.hr-line .form-label {
  margin: 0;
  white-space: nowrap;
}
.hr-line .form-control,
.hr-line .form-select {
  width: 8rem;
  min-width: 7rem;
  max-width: 12rem;
}
.hr-line .btn {
  min-height: 1.8rem;
  padding: 0.15rem 0.7rem;
  white-space: nowrap;
  font-size: 0.82rem;
}

.punch-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  padding: 0.35rem 0.55rem;
  margin-bottom: 0.7rem;
  overflow-x: auto;
}
.punch-bar-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  min-width: 0;
}
.punch-bar-field,
.punch-bar .col-md-3 {
  flex: 0 1 auto;
  width: auto;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}
.punch-bar .form-label {
  margin: 0;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.punch-bar .form-control {
  min-height: 1.8rem;
  height: 1.8rem;
  font-size: 0.82rem;
  width: 8.2rem;
}
.punch-bar .form-control[type="search"] {
  width: 11rem;
}
.punch-bar .btn,
.punch-bar button[type="submit"] {
  min-height: 1.8rem;
  height: 1.8rem;
  padding-inline: 0.7rem;
  font-size: 0.82rem;
  flex: 0 0 auto;
}
.punch-bar .punch-bar-saved[type="submit"] {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink-strong);
}
.punch-bar .punch-bar-saved[type="submit"]:hover {
  background: var(--card);
  border-color: var(--accent);
  color: var(--ink-strong);
}

/* data panels read as elevated */
.grid-fill, .sheet-wrap, .shift-grid {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* ---- Zoho-style module tabs under the top bar ---- */
.hr-mod-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.1rem;
  background: var(--top);
  border-bottom: 1px solid var(--line);
  padding: 0 1.1rem;
  position: sticky;
  top: 54px;
  z-index: 19;
  overflow-x: auto;
  flex-shrink: 0;
}
.hr-mod-tab {
  flex-shrink: 0;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-weight: 450;
  font-size: 0.9rem;
  padding: 0.62rem 0.85rem 0.55rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.hr-mod-tab:hover {
  color: var(--ink-strong) !important;
  border-bottom-color: var(--line-strong);
}
.hr-mod-tab.on {
  color: var(--accent) !important;
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ---- sub-navs (Attendance / Leave): buttons -> quiet text tabs ---- */
.leave-sub {
  gap: 0 !important;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.15rem !important;
  padding-bottom: 0;
}
.leave-sub .btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-weight: 450;
  font-size: 0.9rem;
  border-radius: 0 !important;
  padding: 0.45rem 0.9rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent !important;
}
.leave-sub .btn:first-child { padding-left: 0; }
.leave-sub .btn:hover {
  color: var(--ink-strong) !important;
  border-bottom-color: var(--line-strong) !important;
}
.leave-sub .btn.active,
.leave-sub .btn[aria-current="page"] {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ---- name button in tables ---- */
button.person-open {
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
button.person-open:hover { color: var(--link-hover); text-decoration: underline; }

.table-hover-actions .row-actions { white-space: nowrap; }
.table-hover-actions td:last-child { min-width: 12rem; vertical-align: middle; }
.table-hover-actions > tbody > tr:hover > *,
.table-hover-actions > tbody > tr:focus-within > * {
  background-color: var(--row-hover);
}

/* ---- module grid (home) ---- */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.7rem; }
.mod-card {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .12s ease;
}
.mod-card:hover { border-color: var(--accent); text-decoration: none; }
.mod-card h2 { font-size: 0.98rem; margin-bottom: 0.3rem; }

/* ---- employee drawer ---- */
.hr-drawer {
  width: min(28rem, 100vw);
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100vh;
  max-height: 100vh;
  background: var(--card);
  color: var(--ink);
}
.hr-drawer.offcanvas-end { right: 0; }
.hr-drawer .offcanvas-header,
.hr-drawer .offcanvas-body { background: var(--card); color: var(--ink); }
.hr-drawer .offcanvas-header { border-bottom: 1px solid var(--line); }
html.hr-night .btn-close { filter: invert(1) grayscale(1); opacity: .7; }
.drawer-dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.35rem 0.75rem; }
.drawer-dl dt { color: var(--muted); font-weight: 500; }
.drawer-dl dd { margin: 0; font-weight: 550; }

/* ---- command palette ---- */
.cmdk {
  position: fixed;
  inset: 0;
  background: var(--cmdk-dim);
  z-index: 1080;
  display: flex;
  justify-content: center;
  padding: 12vh 1rem 1rem;
}
.cmdk-panel {
  width: min(36rem, 100%);
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 44px rgba(15, 23, 41, 0.18);
  overflow: hidden;
  color: var(--ink);
}
.cmdk-panel input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 1rem;
  font-weight: 500;
  font-size: 1rem;
  background: var(--card);
  color: var(--ink-strong);
}
.cmdk-panel input:focus { outline: none; }
.cmdk-panel ul { list-style: none; margin: 0; padding: 0.35rem 0; max-height: 22rem; overflow: auto; }
.cmdk-panel li button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.45rem 1rem;
  font-weight: 450;
  color: var(--ink);
}
.cmdk-panel li button:hover,
.cmdk-panel li button.on { background: var(--cmdk-hover); }
.cmdk-g {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 0.4rem 1rem 0.15rem;
  font-weight: 650;
}
.cmdk-hint { margin: 0; padding: 0.45rem 1rem 0.7rem; color: var(--muted) !important; font-size: 0.82rem; }

.hr-person-pick { position: relative; width: 100%; }
.hr-person-pick-src {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.hr-person-pick-list {
  position: fixed;
  z-index: 1085;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 16rem;
  overflow: auto;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 41, 0.16);
}
.hr-person-pick-list button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.4rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 450;
  color: var(--ink);
}
.hr-person-pick-list button:hover,
.hr-person-pick-list button.on { background: var(--cmdk-hover); }
.hr-person-pick-empty {
  padding: 0.45rem 0.7rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---- responsive ---- */
@media (max-width: 991.98px) {
  .hr-sidebar {
    position: fixed;
    z-index: 1045;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .18s ease;
  }
  .hr-app.nav-open .hr-sidebar { transform: none; }
  .hr-app.nav-open .hr-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--cmdk-dim);
    z-index: 1040;
  }
  .hr-search { min-width: 0; }
  .hr-search span { display: none; }
  .hr-reset-screen { padding: 0 0.65rem; font-size: 0.8rem; font-weight: 700; }
  .hr-body { padding: 1.15rem; }
}

/* ================================================================
   Wide attendance / salary sheets (unchanged structure)
   ================================================================ */

.sheet-wrap { overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.sheet-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 14px;
  margin: 0;
}
.sheet-table th, .sheet-table td {
  border: 1px solid var(--sheet-line);
  padding: 4px 8px;
  white-space: nowrap;
  background: var(--card);
  color: var(--ink-strong);
}
.sheet-table thead th {
  background: var(--thead);
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  position: sticky;
  top: 0;
  z-index: 1;
}
/* Punch-in vs scheduled start (rule 4) */
.sheet-table td.pi-early, span.pi-early { color: #1e7d32; font-weight: 600; }
.sheet-table td.pi-late,  span.pi-late  { color: #c25e00; font-weight: 600; }
.sheet-table td.pi-vlate, span.pi-vlate { color: #b00020; font-weight: 600; }
.sheet-table td.pi-admin, span.pi-admin { color: #6b21a8; font-weight: 600; }
html.hr-night .sheet-table td.pi-early, html.hr-night span.pi-early { color: #6cc47a; }
html.hr-night .sheet-table td.pi-late,  html.hr-night span.pi-late  { color: #e0913f; }
html.hr-night .sheet-table td.pi-vlate, html.hr-night span.pi-vlate { color: #e2686b; }
html.hr-night .sheet-table td.pi-admin, html.hr-night span.pi-admin { color: #c084fc; }
.sheet-table td.sheet-duty-ok, span.sheet-duty-ok {
  background: #e7f6ea;
  color: #1e7d32;
  font-weight: 600;
}
.sheet-table td.sheet-duty-wait, span.sheet-duty-wait {
  background: #fff4d6;
  color: #8a5a00;
  font-weight: 600;
}
.sheet-table td.sheet-duty-personal, span.sheet-duty-personal {
  background: #e8eef9;
  color: #1e3a8a;
  font-weight: 600;
}
.sheet-table td.sheet-leave, span.sheet-leave {
  background: #e6f4f1;
  color: #0f5c4c;
  font-weight: 600;
}
tr.duty-leave > td {
  background: #e6f4f1;
}
tr.duty-leave > td:first-child {
  box-shadow: inset 3px 0 0 #3d8a7a;
}
html.hr-night .sheet-table td.sheet-duty-ok, html.hr-night span.sheet-duty-ok {
  background: #1a3a22;
  color: #6cc47a;
}
html.hr-night .sheet-table td.sheet-duty-wait, html.hr-night span.sheet-duty-wait {
  background: #3a2e12;
  color: #e0913f;
}
html.hr-night .sheet-table td.sheet-duty-personal, html.hr-night span.sheet-duty-personal {
  background: #1c2744;
  color: #93c5fd;
}
html.hr-night .sheet-table td.sheet-leave, html.hr-night span.sheet-leave {
  background: #12352e;
  color: #5eead4;
}
html.hr-night tr.duty-leave > td {
  background: #12352e;
}
.sheet-month-wrap {
  --sheet-code-w: 9.75rem;
  --sheet-name-w: 14rem;
  --sheet-head-1: 2.125rem;
  display: flex;
  overflow: hidden;
}
.sheet-month-wrap[data-grid-fill] { overflow: hidden; }
.sheet-pin,
.sheet-days { min-height: 0; height: 100%; }
.sheet-pin {
  flex: 0 0 auto;
  overflow: hidden;
  z-index: 2;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.12);
}
.sheet-days {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
}
.sheet-month-pin,
.sheet-month-days {
  border-collapse: separate;
  border-spacing: 0;
}
.sheet-table.sheet-month-days {
  width: 100%;
  min-width: 100%;
  table-layout: fixed;
}
.sheet-month-pin th,
.sheet-month-pin td,
.sheet-month-days th,
.sheet-month-days td { box-sizing: border-box; }
.sheet-table.sheet-month-pin thead tr:nth-child(2) th,
.sheet-table.sheet-month-days thead tr:nth-child(2) th {
  top: var(--sheet-head-1);
  z-index: 3;
}
.sheet-month-days td { text-align: center; }
.sheet-month-wrap .sheet-code,
.sheet-month-wrap .sheet-name {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-month-wrap .sheet-code {
  width: var(--sheet-code-w);
  min-width: var(--sheet-code-w);
  max-width: var(--sheet-code-w);
}
.sheet-month-wrap .sheet-name {
  width: var(--sheet-name-w);
  min-width: var(--sheet-name-w);
  max-width: var(--sheet-name-w);
}
.sheet-month-pin thead th,
.sheet-month-days thead th { background: var(--thead); }
.sheet-month-days thead tr:last-child th,
.sheet-month-days tbody td {
  min-width: 0;
  width: auto;
  padding: 2px 1px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sheet-table td.sheet-breaks {
  text-align: left;
  min-width: 16rem;
  white-space: normal;
  vertical-align: top;
}
.sheet-table .brk-line {
  display: block;
  line-height: 1.35;
}

.pay-sheet-wrap { overflow: auto; }
.pay-sheet { --bs-table-bg: transparent; }
.pay-sheet th,
.pay-sheet td { vertical-align: middle; }
.pay-sheet .pay-cell {
  min-width: 4.6rem;
  width: 5.4rem;
  padding: 0.12rem 0.28rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pay-sheet input[type="date"].pay-cell,
.pay-sheet .pay-text {
  text-align: left;
  font-variant-numeric: normal;
}
.pay-sheet thead th {
  text-transform: none;
  letter-spacing: 0;
}
.pay-sheet thead th.num,
.pay-sheet tbody td.num,
.pay-sheet tbody td.text-end {
  text-align: right !important;
  white-space: nowrap;
  width: 1%;
}
.pay-sheet tbody td:has(> .pay-cell:not(.pay-text):not([type="date"])) {
  text-align: right !important;
  white-space: nowrap;
  width: 1%;
}
.pay-sheet thead th.pay-head-allow { min-width: 7.4rem; }
.pay-sheet .pay-cell:not(.pay-text):not([type="date"]) {
  display: block;
  margin-left: auto;
}
.num,
input.form-control.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pin, .tel,
input.form-control.pin,
input.form-control.tel { text-align: left; }
.pay-sheet input[type="date"].pay-cell {
  min-width: 8.6rem;
  width: 9.2rem;
}
.pay-sheet .pay-name {
  min-width: 11rem;
  max-width: 16rem;
  white-space: normal;
}
.pay-id { font-variant-numeric: tabular-nums; }
.pay-sheet .pay-cell[readonly] {
  background: var(--bs-secondary-bg, #f3f4f6);
  border-color: transparent;
  pointer-events: none;
}
tr.grid-row-on > td,
tr.grid-row-on > th {
  background: var(--grid-row-on) !important;
}
tr.grid-row-on > td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.grid-row-on .pay-name {
  font-weight: 700;
}
.pay-grid-form .emp-form-actions { margin-top: 0.75rem; }

.sal-sum-banner {
  background: #fff9c4;
  color: #3c3c3c;
  font-weight: 700;
  padding: 0.28rem 0.7rem;
  margin-bottom: 0.35rem;
  border-radius: 4px;
}
html.hr-night .sal-sum-banner {
  background: #4a4318;
  color: #fff6b0;
}
.sal-sum-layout {
  display: flex;
  min-height: 14rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.sal-sum-emps {
  width: 12.5rem;
  flex-shrink: 0;
  overflow: auto;
  border-right: 1px solid var(--line);
  background: var(--card);
}
.sal-sum-emps .on td { background: var(--thead); font-weight: 600; }
.sal-sum-emp { color: inherit; text-decoration: none; display: block; }
.sal-sum-emp:hover { text-decoration: underline; }
.sal-sum-grid { flex: 1; min-width: 0; overflow: auto; }
.sal-sum-grid thead th { cursor: pointer; padding: 0; }
.sal-sum-grid thead th a.sal-sum-sort {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 0.45rem 0.55rem;
  white-space: nowrap;
}
.sal-sum-grid thead th a.sal-sum-sort:hover { text-decoration: underline; }
.sal-sum-dir { font-size: 0.7em; }
.sal-sum-total td {
  font-weight: 700;
  background: #fff3b0;
  color: #1e3a8a;
}
html.hr-night .sal-sum-total td {
  background: #3d3510;
  color: #c7d2fe;
}
.sal-sum-col-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
  max-width: 72rem;
}
.sal-sum-cols details { margin-bottom: 0.35rem; }
.sal-sum-cols summary { cursor: pointer; font-weight: 600; }

@media print {
  html, html.hr-night {
    color-scheme: light;
    --ink: #111827;
    --ink-strong: #0f172a;
    --paper: #fff;
    --card: #fff;
    --thead: #f3f3f3;
  }
  .hr-sidebar, .hr-top, .hr-foot, .leave-sub, .hr-mod-tabs, .page-toolbar { display: none !important; }
  .sheet-wrap, .grid-fill, .shift-grid-fill { border: none; overflow: visible; height: auto !important; }
  .sheet-pin, .sheet-days { overflow: visible !important; height: auto !important; padding-bottom: 0 !important; }
}