/* ============================================================================
   SANVIT HRMS — "look" layer (v4)
   Loaded LAST. Visual only: no page, form, number or calculation depends on it.
   Remove the <link> to look.css in base.html to go back to the previous look.

   Colours are taken from the Sanvit HR logo:
     Navy #0F3B74 · Teal #0E8C8C  (Sanvit HR logo)
     plus a mid blue between them, and amber / red only where they carry a meaning
   Tiles use deeper shades so white text stays readable.
   ========================================================================== */

:root {
  --navy: #0f3b74;
  --navy-deep: #0a2a55;
  --blue: #1d5a9e;
  --teal: #0e8c8c;
  --green: #2e7d32;
  --orange: #f28c1e;

  /* tile shades: white text on each passes 4.5:1 */
  --tile-blue: #1d5a9e;
  --tile-teal: #0b7676;
  --tile-green: #2e7d32;
  --tile-orange: #b45309;
  --tile-navy: #0f3b74;
  --tile-red: #b42318;

  --brand: #1d5a9e;
  --brand-dark: #0f3b74;
  --accent: #1d5a9e;
  --accent-soft: #e6eef8;

  --bg: #f2f5f9;
  --surface: #ffffff;
  --border: #e3e9f1;
  --header-h: 64px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 59, 116, 0.05), 0 2px 8px rgba(15, 59, 116, 0.04);
  --shadow: 0 2px 4px rgba(15, 59, 116, 0.06), 0 8px 20px rgba(15, 59, 116, 0.06);
}

body { background: var(--bg); }

/* ---------- sidebar ---------- */
.shell { grid-template-columns: 260px 1fr; }
.side {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
  padding: 0 12px 16px;
  border-right: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.side .brand {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -12px 8px;
  padding: 0 16px;
  height: var(--header-h);
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.side .brand .mark { width: 38px; height: 38px; border-radius: 10px; padding: 4px; }
.side .brand .brand-text { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; }
.side .brand .brand-text .hr { color: #3fc1c1; }
.side .brand .brand-text small { color: #8fb0d6; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.side .grp {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #6f97c4;
  margin: 18px 12px 6px;
}
.side a {
  padding: 9px 12px;
  border-radius: 8px;
  color: #c9d9ec;
  font-size: 13.5px;
  font-weight: 500;
}
.side a .ic { width: 17px; height: 17px; opacity: 0.8; }
.side a:hover:not(.active) { background: rgba(255, 255, 255, 0.07); color: #ffffff; }
.side a.active {
  background: linear-gradient(90deg, #0b7676 0%, var(--teal) 100%) !important;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(14, 140, 140, 0.6), inset 3px 0 0 #7fd3d3 !important;
}
.side a.active .ic { opacity: 1; }

/* ---------- header bar ---------- */
.main { max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 100vh; }
.tenant-context-banner { margin: 12px 28px 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: var(--header-h);
  margin: 0;
  padding: 10px 28px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(15, 59, 116, 0.02);
  flex-wrap: nowrap;
}
.topbar > div:nth-child(2) { min-width: 0; }
.topbar h1 { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.25; }
.topbar .sub { font-size: 12.5px; color: #64748b; margin-top: 1px; }
.who { gap: 12px; flex: none; }
.who .hello { font-size: 13px; color: #475569; font-weight: 500; white-space: nowrap; }
.who .hello b { color: var(--navy); font-weight: 600; }
.date-pill {
  background: #f1f6fb;
  border: 1px solid var(--border);
  color: #475569;
  padding: 5px 10px;
}
.avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(14, 140, 140, 0.35);
}
.role-chip { background: #e6f4f4; color: #0b6262; border: 1px solid #b3dede; padding: 4px 10px; }

/* ---------- page body ---------- */
.content { flex: 1 0 auto; width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px 28px 32px; }

/* ---------- footer with copyright ---------- */
.app-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  background: #ffffff;
  color: #64748b;
  font-size: 12.5px;
}
.app-foot b { color: var(--navy); font-weight: 600; }

/* ---------- cards & panels ---------- */
.panel, .card, .table-wrap, .admin-form-card, .chart-panel, .form-card, .profile-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  background: var(--surface);
}
.panel { padding: 18px 20px; }
.panel .phead {
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eef2f7;
}
.panel h3, .card h3, .panel .phead h3 { color: var(--navy); font-weight: 600; }
.panel .phead h3::before, .card > h3:first-child::before {
  content: "";
  display: inline-block;
  width: 4px; height: 14px;
  margin-right: 8px;
  vertical-align: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--navy), var(--teal));
}

/* ---------- summary cards on every page: white card, brand-colour stripe ---------- */
.stats:not(.tiles) .stat { border-radius: var(--radius) !important; border-color: var(--border); }
.stats:not(.tiles) .stat::after { opacity: 1; height: 3px; }
.stats:not(.tiles) .stat:not(.ok):not(.warn):not(.bad):not(.info):not(.violet):nth-child(5n+1)::after { background: var(--navy); }
.stats:not(.tiles) .stat:not(.ok):not(.warn):not(.bad):not(.info):not(.violet):nth-child(5n+2)::after { background: var(--teal); }
.stats:not(.tiles) .stat:not(.ok):not(.warn):not(.bad):not(.info):not(.violet):nth-child(5n+3)::after { background: var(--blue); }
.stats:not(.tiles) .stat:not(.ok):not(.warn):not(.bad):not(.info):not(.violet):nth-child(5n+4)::after { background: #0b6262; }
.stats:not(.tiles) .stat:not(.ok):not(.warn):not(.bad):not(.info):not(.violet):nth-child(5n+5)::after { background: #6b8fb8; }
.stat .val { color: var(--navy); }

/* ---------- dashboard tiles: solid brand colours with an icon ---------- */
.stats.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stats.tiles .stat {
  --tile: var(--tile-blue);
  border: 0 !important;
  border-radius: var(--radius) !important;
  padding: 18px 76px 16px 18px;
  min-height: 118px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 78%, #000) 100%);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--tile) 70%, transparent) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stats.tiles .stat::after { display: none; }
.stats.tiles .stat:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--tile) 80%, transparent) !important; }
.stats.tiles .stat:nth-child(6n+1) { --tile: var(--tile-navy); }
.stats.tiles .stat:nth-child(6n+2) { --tile: var(--tile-teal); }
.stats.tiles .stat:nth-child(6n+3) { --tile: var(--tile-orange); }
.stats.tiles .stat:nth-child(6n+4) { --tile: var(--tile-blue); }
.stats.tiles .stat:nth-child(6n+5) { --tile: var(--tile-red); }
.stats.tiles .stat:nth-child(6n+6) { --tile: #0b6262; }
.stats.tiles .stat .lbl {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.stats.tiles .stat .val { color: #ffffff !important; font-size: 28px; font-weight: 700; line-height: 1.15; }
.stats.tiles .stat .delta, .stats.tiles .stat .delta.up, .stats.tiles .stat .delta.warn, .stats.tiles .stat .delta.bad {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}
.stats.tiles .stat .tile-ic {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center;
}
.stats.tiles .stat .tile-ic svg { width: 24px; height: 24px; stroke: #ffffff; }

/* manager dashboard counters get the same tile look */
.stat-row .stat-card {
  --tile: var(--tile-blue);
  border: 0 !important;
  border-radius: var(--radius) !important;
  color: #fff;
  background: linear-gradient(135deg, var(--tile) 0%, color-mix(in srgb, var(--tile) 78%, #000) 100%) !important;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--tile) 70%, transparent) !important;
  min-height: 104px;
}
.stat-row .stat-card:nth-child(4n+1) { --tile: var(--tile-navy); }
.stat-row .stat-card:nth-child(4n+2) { --tile: var(--tile-teal); }
.stat-row .stat-card:nth-child(4n+3) { --tile: var(--tile-blue); }
.stat-row .stat-card:nth-child(4n+4) { --tile: var(--tile-orange); }
.stat-row .stat-card .num { color: #fff; font-size: 28px; font-weight: 700; }
.stat-row .stat-card .lbl { color: rgba(255, 255, 255, 0.9); }
.stat-row .stat-card a { color: inherit; text-decoration: none; }

/* ---------- quick actions (dashboard) ---------- */
.qa-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.qa {
  --qa: var(--blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: var(--radius);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.qa:hover { transform: translateY(-2px); border-color: var(--qa); box-shadow: var(--shadow); color: var(--navy); }
.qa .qa-ic {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--qa) 14%, #ffffff);
  color: var(--qa);
}
.qa .qa-ic svg { width: 22px; height: 22px; }
.qa:nth-child(6n+1) { --qa: var(--blue); }
.qa:nth-child(6n+2) { --qa: var(--teal); }
.qa:nth-child(6n+3) { --qa: #c2410c; }
.qa:nth-child(6n+4) { --qa: var(--navy); }
.qa:nth-child(6n+5) { --qa: #0b6262; }
.qa:nth-child(6n+6) { --qa: #1d5a9e; }

/* ---------- newly joined: avatar grid ---------- */
.joiners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.joiner { text-align: center; padding: 8px 4px; border-radius: 10px; }
.joiner:hover { background: #f5f9fc; }
.joiner .face {
  width: 52px; height: 52px; margin: 0 auto 8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--border);
}
.joiner:nth-child(4n+2) .face { background: linear-gradient(135deg, var(--teal), #0b6262); }
.joiner:nth-child(4n+3) .face { background: linear-gradient(135deg, var(--blue), var(--navy)); }
.joiner:nth-child(4n+4) .face { background: linear-gradient(135deg, var(--navy), var(--blue)); }
.joiner .nm { font-weight: 600; font-size: 13px; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joiner .dt { font-size: 11.5px; color: #64748b; }
.panel .see-all { display: block; text-align: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f7; font-weight: 600; font-size: 13px; }

/* ---------- tables ---------- */
thead th {
  background: #f4f7fb !important;
  color: #475569 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--border);
}
tbody tr:hover { background: #f3f8fc; }

/* ---------- tabs & buttons: a touch more polish ---------- */
.btn, .btn-primary, .btn-outline, .btn-secondary, a.btn, button.btn { border-radius: 8px !important; }
.btn-primary, button.btn-primary, a.btn-primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #ffffff !important;
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #ffffff !important;
}
.tabs .tab.active, .tab.active { box-shadow: inset 0 -2px 0 var(--teal) !important; }

/* ---------- notices ---------- */
.flash { border-radius: 10px; border-left-width: 4px !important; }

/* ---------- login page ---------- */
.login-art { background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #0b6e78 100%) !important; }
.login-art h2 em { color: #5fd0d0 !important; }
.art-point i { background: var(--teal) !important; }
.login-logo img { height: 96px !important; }
.login-btn { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.login-btn:hover { background: var(--teal) !important; border-color: var(--teal) !important; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .stats.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qa-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .shell { grid-template-columns: 220px 1fr; }
  .who .hello, .date-pill { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; }
  .topbar { padding: 10px 16px; justify-content: flex-start; }
  .topbar > div:nth-child(2) { flex: 1 1 auto; }
  .content { padding: 16px 16px 24px; }
  .tenant-context-banner { margin: 12px 16px 0; }
  .app-foot { padding: 12px 16px; justify-content: center; text-align: center; }
  .role-chip { display: none; }
  .stats.tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stats.tiles .stat { padding: 14px 14px 12px; min-height: 0; }
  .stats.tiles .stat .tile-ic { display: none; }
  .stats.tiles .stat .val { font-size: 22px; }
  .qa-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .joiners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .topbar, .app-foot, .side { display: none !important; }
  .content { padding: 0; max-width: none; }
}

/* ---------- welcome banner on employee / manager dashboards ---------- */
.dashboard-hero {
  background:
    radial-gradient(420px 200px at 92% -20%, rgba(63, 193, 193, 0.35), transparent 65%),
    linear-gradient(115deg, var(--navy-deep) 0%, var(--navy) 55%, #0b6e78 100%) !important;
  border-radius: var(--radius) !important;
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 10px 24px -14px rgba(15, 59, 116, 0.6) !important;
}
.dashboard-hero h1 { font-size: 24px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.dashboard-hero p { color: #cfe3f2 !important; }
.dashboard-hero .eyebrow { color: #7fd3d3 !important; letter-spacing: 0.12em; }
.dashboard-hero .dashboard-actions .btn-primary, .dashboard-actions .btn-primary {
  background: #ffffff !important; color: var(--navy) !important; border-color: #ffffff !important;
}
.dashboard-hero .dashboard-actions .btn-primary:hover { background: #e6f4f4 !important; color: var(--navy) !important; }

/* tiles that are links */
.stat-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.stat-link:focus-visible { outline: 3px solid rgba(14, 140, 140, 0.45); outline-offset: 2px; }

/* ---------- buttons: one set used everywhere ----------
   .btn-primary  = the main action on a page: solid navy, teal on hover
   .btn / .btn-outline / .btn-secondary = everything else: white with a grey border
   .btn-danger   = delete / deactivate: white with red text
   .btn-sm / .btn-small = smaller versions inside tables */
.btn, .btn-primary, .btn-outline, .btn-secondary, a.btn, button.btn { gap: 6px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn-primary, button.btn-primary, a.btn-primary, .btn.btn-primary {
  background: var(--navy) !important; border-color: var(--navy) !important; color: #ffffff !important; font-weight: 600 !important;
}
.btn-primary:hover, button.btn-primary:hover, a.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--teal) !important; border-color: var(--teal) !important; color: #ffffff !important;
}
.btn:focus-visible { outline: 3px solid rgba(14, 140, 140, 0.35) !important; outline-offset: 1px; }
.btn[disabled], .btn:disabled, button[disabled] { opacity: 0.5; cursor: not-allowed; }
.link-btn { color: var(--blue); }

/* badges */
.badge { border-radius: 999px !important; padding: 3px 10px !important; }
.badge.ok, .badge-complete { background: #e3f4e6 !important; color: #1f6b2a !important; }
.badge.warn, .badge-pending { background: #fdf0dc !important; color: #8a4a05 !important; }
.badge.bad { background: #fde7e5 !important; color: #a3271c !important; }
.badge.info, .badge.violet { background: #e3f1f1 !important; color: #0b6262 !important; }

/* ---------- page width: wide tables scroll inside their card, never the whole page ---------- */
.content { min-width: 0; }
.table-wrap { max-width: 100%; }

/* ---------- All People table ---------- */
.people-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.people-card .people-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--border);
}
.people-card .search-wrap { flex: 1 1 260px; max-width: 360px; }
.people-card .search-wrap .search { width: 100%; }
.people-filters { display: inline-flex; background: #f1f5f9; border-radius: 8px; padding: 3px; gap: 2px; }
.people-filters .pf { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: #475569; text-decoration: none; white-space: nowrap; }
.people-filters .pf:hover { color: var(--navy); }
.people-filters .pf.on { background: #ffffff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 59, 116, 0.12); }
.people-card .toolbar-actions { margin-left: auto; flex: 0 0 auto; }

.people-table { border: 0 !important; border-radius: 0 0 var(--radius) var(--radius) !important; box-shadow: none !important; overflow-x: auto; }
.people-table table { width: 100%; min-width: 1080px; table-layout: fixed; border-collapse: collapse; }
.people-table col.c-emp { width: 26%; }
.people-table col.c-client { width: 13%; }
.people-table col.c-desig { width: 17%; }
.people-table col.c-dept { width: 11%; }
.people-table col.c-mgr { width: 12%; }
.people-table col.c-status { width: 108px; }
.people-table col.c-act { width: 160px; }
.people-table th, .people-table td { padding: 10px 12px !important; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people-table td.actions { display: table-cell; overflow: visible; }
.people-table th.ta-r { text-align: right; }
.people-table tbody tr { border-bottom: 1px solid #eef2f7; }
.people-table tbody tr:last-child { border-bottom: 0; }
.people-table tbody tr:hover { background: #f5f9fc; }
.people-table tr.is-inactive td { color: #94a3b8; }
.people-table tr.is-inactive .name { color: #64748b; }
.people-table .sel-all { display: flex; align-items: center; cursor: pointer; }

.people-table .person { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.people-table .person .initials {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e6f0f8; color: var(--navy); font-size: 12px; font-weight: 700;
}
.people-table .person-txt { display: flex; flex-direction: column; min-width: 0; }
.people-table .person .name { font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; }
.people-table .person:hover .name { color: var(--teal); text-decoration: underline; }
.people-table .person .sub { font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; }
.people-table .person .code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 11.5px; color: #475569; }
.people-table .one-line { display: block; overflow: hidden; text-overflow: ellipsis; }

.client-tag {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
  padding: 3px 9px; border-radius: 6px; background: #eef4fb; color: #1d4f8a; font-size: 12px; font-weight: 600;
}
.role-tag { display: inline-block; margin-top: 3px; font-size: 11px !important; padding: 1px 8px !important; }
.badge.role-admin { background: #e8eefb !important; color: #1d4f8a !important; }
.badge.role-manager { background: #e3f1f1 !important; color: #0b6262 !important; }
.badge.role-employee { background: #f1f5f9 !important; color: #475569 !important; }

.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.row-actions .btn-sm { min-height: 30px !important; padding: 0 10px !important; font-size: 12.5px !important; }
.row-menu { position: relative; }
.row-menu > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cbd5e1; background: #fff; color: var(--navy); font-size: 18px; line-height: 1; user-select: none;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { border-color: var(--teal); background: #e6f4f4; }
.row-menu > summary:focus-visible { outline: 3px solid rgba(14, 140, 140, 0.35); outline-offset: 1px; }
.row-menu-list {
  position: fixed; z-index: 60; min-width: 180px;
  background: #fff; border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  padding: 6px; display: flex; flex-direction: column;
}
.row-menu-list form { margin: 0; }
.row-menu-list .link-btn, .row-menu-list a {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: #334155 !important; background: none; border: 0; cursor: pointer; text-decoration: none;
}
.row-menu-list .link-btn:hover, .row-menu-list a:hover { background: #f1f5f9; }
.row-menu-list .danger { color: #b42318 !important; }

.people-card .pager { padding: 12px 16px; border-top: 1px solid var(--border); }

@media (max-width: 760px) {
  .people-card .search-wrap { max-width: none; flex-basis: 100%; }
  .people-card .toolbar-actions { margin-left: 0; width: 100%; }
}

/* ---------- sub-panel: a light column beside the main menu holding the page's views, actions,
   filters and notes, so the main area keeps only the table or form ---------- */
.shell.has-sub { grid-template-columns: 260px 236px minmax(0, 1fr); }
.subpanel {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: #eaf1f8;
  border-right: 1px solid #d6e2ef;
  padding: 0 12px 20px;
  display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin;
}
.sp-head {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -12px 8px; padding: 12px 16px;
  min-height: var(--header-h); display: flex; flex-direction: column; justify-content: center;
  background: #e1eaf4; border-bottom: 1px solid #d6e2ef;
}
.sp-title { font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.sp-sub { font-size: 11.5px; color: #5b6f88; margin-top: 2px; line-height: 1.35; }
.sp-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6a7f99; margin: 14px 6px 6px;
}
.sp-view {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  color: #2b405c; text-decoration: none;
}
.sp-view:hover { background: #dbe6f2; color: var(--navy); }
.sp-view.on { background: #ffffff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 59, 116, 0.1), inset 3px 0 0 var(--teal); }
.sp-count { font-size: 11.5px; font-weight: 600; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; background: #d3e0ee; color: #2b405c; }
.sp-view.on .sp-count { background: #e3f1f1; color: #0b6262; }
.sp-act, .subpanel .sp-act-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: 1px solid transparent;
  font: 500 13.5px/1.3 var(--font-sans); color: #2b405c; text-decoration: none; text-align: left;
  background: transparent; cursor: pointer;
}
.sp-act:hover, .subpanel .sp-act-btn:hover { background: #ffffff; border-color: #cddbea; color: var(--navy); }
.sp-act.primary, .subpanel .sp-act-btn.primary {
  background: var(--navy); color: #ffffff; font-weight: 600; margin-bottom: 4px;
  box-shadow: 0 4px 10px -6px rgba(15, 59, 116, 0.7);
}
.sp-act.primary:hover, .subpanel .sp-act-btn.primary:hover { background: var(--teal); border-color: var(--teal); color: #ffffff; }
.sp-ic { width: 18px; height: 18px; flex: none; display: inline-flex; }
.sp-ic svg, .sp-act-btn svg { width: 18px; height: 18px; }
.subpanel form { margin: 0; }
.subpanel .sp-field { padding: 0 2px; display: flex; flex-direction: column; gap: 6px; }
.subpanel .sp-field label { font-size: 11.5px; font-weight: 600; color: #4b6079; }
.subpanel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .subpanel select {
  width: 100%; min-height: 34px !important; font-size: 13px !important; background: #ffffff;
}
.subpanel .sp-search { position: relative; }
.subpanel .sp-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #6a7f99; pointer-events: none; }
.subpanel .sp-search input { padding-left: 32px !important; }
.subpanel .sp-note { font-size: 12px; color: #5b6f88; line-height: 1.45; padding: 4px 6px; }
.subpanel .sp-file { font-size: 12px !important; padding: 6px !important; min-height: 0 !important; }
.sp-spacer { flex: 1 1 auto; min-height: 12px; }
.sp-about {
  margin-top: 10px; background: #ffffff; border: 1px solid #d6e2ef; border-radius: 10px;
  font-size: 12px; color: #4b6079; line-height: 1.5;
}
.sp-about summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; font-weight: 600; font-size: 12.5px; color: var(--navy);
}
.sp-about summary::-webkit-details-marker { display: none; }
.sp-about summary svg { width: 16px; height: 16px; color: var(--teal); flex: none; }
.sp-about summary::after { content: "+"; margin-left: auto; font-weight: 700; color: #6a7f99; }
.sp-about[open] summary::after { content: "–"; }
.sp-about-body { padding: 0 12px 12px; }
.sp-about-body p { margin: 0 0 8px; }
.sp-about-body b { color: #2b405c; }

/* main area when a sub-panel is present: the page's own tab rows and toolbars are not needed */
.has-sub .content > .moved-to-sub { display: none !important; }

/* small explanatory text inside the main area */
.fine-print { font-size: 12px; color: #64748b; line-height: 1.5; }

@media (max-width: 1280px) {
  .shell.has-sub { grid-template-columns: 220px 210px minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .shell.has-sub { grid-template-columns: 200px 200px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .shell.has-sub { grid-template-columns: 1fr; }
  .subpanel {
    position: static; height: auto; order: 2; border-right: 0; border-bottom: 1px solid #d6e2ef;
    flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 10px 16px;
  }
  .shell.has-sub .main { order: 3; }
  .sp-head, .sp-group, .sp-about, .sp-spacer { display: none; }
  .sp-view, .sp-act { width: auto; padding: 6px 10px; font-size: 13px; background: #ffffff; border: 1px solid #cddbea; }
  .subpanel .sp-field, .subpanel form { width: 100%; }
}

/* ---------- simple list tables (contract workers, exits, leave) ---------- */
.list-table th, .list-table td { vertical-align: middle; }
.list-table th.ta-r { text-align: right; }
.list-table td .row-actions { justify-content: flex-end; }
.list-table td:last-child { white-space: nowrap; }
.name-2l { display: flex; flex-direction: column; line-height: 1.3; }
.name-2l b { color: var(--navy); font-weight: 600; }
.name-2l span { font-size: 12px; color: #64748b; font-family: ui-monospace, Consolas, monospace; }
.row-actions form { margin: 0; }
.row-actions .btn-sm.approve, .row-actions .btn-sm.reject { min-height: 30px !important; padding: 0 12px !important; font-size: 12.5px !important; }

/* ---------- fit three columns: slimmer menu + sub-panel, slim client picker ---------- */
@media (min-width: 1281px) { .shell.has-sub { grid-template-columns: 240px 220px minmax(0, 1fr); } }
.tenant-context-banner { padding: 6px 12px !important; margin: 10px 28px 0 !important; border-radius: 8px !important; }
.tenant-context-banner .client-filter { display: flex; align-items: center; gap: 10px; }
.tenant-context-banner .client-filter label { margin: 0; font-weight: 600; font-size: 12.5px; }
.tenant-context-banner select { min-height: 30px !important; width: 280px; font-size: 13px !important; }
.has-sub .people-table table { min-width: 900px; }
.has-sub .people-table col.c-emp { width: 25%; }
.has-sub .people-table col.c-client { width: 12%; }
.has-sub .people-table col.c-desig { width: 19%; }
.has-sub .people-table col.c-dept { width: 11%; }
.has-sub .people-table col.c-mgr { width: 11%; }
.has-sub .people-table col.c-status { width: 96px; }
.has-sub .people-table col.c-act { width: 150px; }
.has-sub .people-table th, .has-sub .people-table td { padding: 10px 8px !important; }
@media (max-width: 760px) { .tenant-context-banner { margin: 10px 16px 0 !important; } .tenant-context-banner select { width: 100%; } }

.client-tag { white-space: nowrap; }
.list-table th, .list-table td { white-space: nowrap; }
.list-table td.reason { white-space: normal; min-width: 140px; }
@media (max-width: 760px) {
  .subpanel { gap: 6px; }
  .subpanel .sp-act.primary { width: 100%; justify-content: center; margin: 0; }
  .subpanel .sp-search { order: -1; }
  .subpanel .sp-search svg { top: 50%; }
  .subpanel .sp-note { display: none; }
}

/* filter bars inside a page reuse the "topbar" class; keep them plain, not the sticky header look */
.content .topbar {
  position: static; min-height: 0; padding: 0; margin: 0 0 18px; background: none; border: 0;
  box-shadow: none; backdrop-filter: none; flex-wrap: wrap; align-items: flex-end; gap: 12px;
}
.content .topbar form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.content .topbar select, .content .topbar input:not([type="checkbox"]):not([type="hidden"]) { width: auto; min-width: 120px; }

/* ============================================================================
   DATA TABLES — one look for every list in the app: very light grid lines,
   a quiet header, comfortable rows. Documents (payslips, statements, letters)
   keep their own printed layout.
   ========================================================================== */
.content table:not(.no-grid) {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 13.5px;
  background: #ffffff;
}
.content table:not(.no-grid) > thead > tr > th,
.content table:not(.no-grid) > tr > th {
  background: #f6f8fb !important;
  color: #4a5b70 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em !important;
  text-align: left;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #e4eaf1 !important;
  border-right: 1px solid #edf1f6 !important;
  white-space: nowrap;
  vertical-align: middle;
}
.content table:not(.no-grid) > tbody > tr > td,
.content table:not(.no-grid) > tr > td {
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #eef2f6 !important;
  border-right: 1px solid #f2f5f9 !important;
  vertical-align: middle;
  color: #24364d;
}
.content table:not(.no-grid) > thead > tr > th:last-child,
.content table:not(.no-grid) > tbody > tr > td:last-child,
.content table:not(.no-grid) > tr > th:last-child,
.content table:not(.no-grid) > tr > td:last-child { border-right: 0 !important; }
.content table:not(.no-grid) > tbody > tr:last-child > td { border-bottom: 0 !important; }
.content table:not(.no-grid) > tbody > tr:nth-child(even) > td { background-color: #fbfcfe; }
.content table:not(.no-grid) > tbody > tr:hover > td { background-color: #f1f7fc !important; }
.content table:not(.no-grid) td.num, .content table:not(.no-grid) th.num { text-align: right; font-variant-numeric: tabular-nums; }
.content table:not(.no-grid) tfoot td { background: #f6f8fb; font-weight: 600; border-top: 1px solid #e4eaf1 !important; padding: 10px 12px !important; }

/* tables sit inside a card with rounded corners and scroll sideways inside it, never the page */
.content .table-wrap, .content .cp-wrap, .content .table-scroll { border: 1px solid #e4eaf1; border-radius: 10px; overflow-x: auto; background: #ffffff; }
.content .card > table:not(.no-grid), .content .panel > table:not(.no-grid) { border: 1px solid #e4eaf1; border-radius: 10px; overflow: hidden; }
.content .table-wrap > table, .content .cp-wrap > table, .content .table-scroll > table { border: 0 !important; }
.content .card > div[style*="overflow"] > table:not(.no-grid) { border: 1px solid #e4eaf1; border-radius: 10px; }

/* documents keep their own look */
.payslip-container table, .content .doc table, .content table.no-grid,
.content .fnf-statement table, .content .letter table { font-size: inherit; }
.payslip-container table th, .payslip-container table td { background: revert; }

/* ---------- Role & remarks column ---------- */
.content table td.rr { white-space: normal !important; min-width: 150px; }
.rr-cell { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.rr-cell .role-tag { margin: 0; }
.badge.role-contract, .badge.role-via { background: #fdf3e6 !important; color: #8a4a05 !important; }
.remark { display: inline-block; font-size: 11.5px; line-height: 1.3; padding: 1px 7px; border-radius: 4px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.remark-ok { background: #e7f5ea; color: #1f6b2a; }
.remark-warn { background: #fdf2e2; color: #8a4a05; }
.remark-bad { background: #fde8e6; color: #a3271c; }
.remark-info { background: #e6f0fa; color: #1d4f8a; }
.remark-muted { background: #f1f5f9; color: #64748b; }
.people-table col.c-rr { width: 17%; }
.people-table col.c-emp { width: 23%; }
.people-table col.c-desig { width: 15%; }
.has-sub .people-table col.c-emp { width: 22%; }
.has-sub .people-table col.c-desig { width: 14%; }
.has-sub .people-table col.c-rr { width: 16%; }
.has-sub .people-table col.c-client { width: 10%; }
.people-table table { min-width: 1040px; }
.has-sub .people-table table { min-width: 1000px; }
.people-table td.rr { overflow: visible; }
/* All People with the remarks column: fits a laptop screen beside the sub-panel */
.has-sub .people-table table { min-width: 920px; }
.has-sub .people-table col.c-emp { width: 21%; }
.has-sub .people-table col.c-client { width: 10%; }
.has-sub .people-table col.c-desig { width: 13%; }
.has-sub .people-table col.c-rr { width: 18%; }
.has-sub .people-table col.c-dept { width: 10%; }
.has-sub .people-table col.c-mgr { width: 10%; }
.has-sub .people-table col.c-status { width: 88px; }
.has-sub .people-table col.c-act { width: 146px; }
.has-sub .people-table th, .has-sub .people-table td { padding: 9px 8px !important; }
.people-table .sub-line { font-size: 12px; color: #64748b; }
.people-table col.c-emp { width: 24%; } .people-table col.c-desig { width: 15%; } .people-table col.c-rr { width: 19%; } .people-table col.c-dept { width: 14%; }
.has-sub .people-table col.c-emp { width: 24%; }
.has-sub .people-table col.c-client { width: 11%; }
.has-sub .people-table col.c-desig { width: 15%; }
.has-sub .people-table col.c-rr { width: 20%; }
.has-sub .people-table col.c-dept { width: 14%; }
.has-sub .people-table col.c-status { width: 92px; }
.has-sub .people-table col.c-status { width: 104px; }
.has-sub .people-table col.c-act { width: 150px; }
.has-sub .people-table col.c-desig { width: 13%; }
.has-sub .people-table col.c-client { width: 10%; }
.people-table td:nth-last-child(2) { overflow: visible; }