/* ============================================================================
   INWAY HRMS

   DIRECTION — "Status page"

   Inway sells uptime. The most characteristic artifact in a hosting
   company's world is the status page: thin vertical bars marching across
   a month, green for up, amber for degraded, red for down. Attendance is
   the same shape of data — a person is present, half-present or absent,
   day after day — so the muster roll IS an uptime chart.

   That grounds the "premium modern" ask in something specific to this
   business rather than a generic HR template, and it makes a month of
   attendance readable at a glance instead of one cell at a time.

   PALETTE   deep navy chrome / cool paper workspace / telemetry signals
   TYPE      Space Grotesk (display) + JetBrains Mono (data) + system (body)
             Both webfonts are engineers' faces, from the same world as
             the product. System stack for body keeps it fast.
   SIGNATURE The uptime strip.
   MOTION    Depth and press, not spectacle. Transform and opacity only,
             so it stays smooth on office hardware. Fully disabled under
             prefers-reduced-motion.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* chrome — deep navy, deliberately not neutral black */
  --void:          #0A1020;
  --rack-line:     rgba(148, 176, 226, 0.13);
  --chrome-text:   #9FB2CE;
  --chrome-bright: #EAF1FB;

  /* workspace */
  --canvas:    #F4F6FA;
  --card:      #FFFFFF;
  --line:      #E2E7F0;
  --line-soft: #EDF1F7;

  --ink:   #0F1729;
  --ink-2: #3D4B63;
  --muted: #7A88A0;

  /* telemetry signals — these read as status LEDs */
  --live:       #1FBF75;
  --live-bg:    #E4F7EE;
  --fibre:      #14B8C4;
  --fibre-bg:   #E1F6F8;
  --fibre-deep: #0B8B95;
  --amber:      #E8A33D;
  --amber-bg:   #FDF3E2;
  --flare:      #E85D6B;
  --flare-bg:   #FDECEE;
  --violet:     #7C6BF0;
  --violet-bg:  #EEEBFD;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --r:    10px;
  --r-sm: 6px;

  /* depth comes from stacked shadows, not one big blur */
  --lift-1: 0 1px 2px rgba(15,23,41,.05), 0 1px 3px rgba(15,23,41,.04);
  --lift-2: 0 2px 4px rgba(15,23,41,.05), 0 6px 14px rgba(15,23,41,.07);
  --lift-3: 0 4px 8px rgba(15,23,41,.06), 0 16px 32px rgba(15,23,41,.11);

  --ease: cubic-bezier(.22,.68,.35,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -.015em; }

/* Tabular figures wherever numbers must line up. */
.money, .code, .num, .stat-value, .uptime-stat, .punch-since {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================  SHELL  === */

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

.sidebar {
  width: 232px;
  flex: 0 0 232px;
  background:
    radial-gradient(120% 60% at 0% 0%, #16233D 0%, transparent 60%),
    var(--void);
  color: var(--chrome-text);
  display: flex;
  flex-direction: column;
  padding: 18px 0 14px;
  position: relative;
}
/* hairline seam, like the edge of a rack panel */
.sidebar::after {
  content: '';
  position: absolute; inset: 0 0 0 auto; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(20,184,196,.35), transparent);
}

.brand { padding: 0 20px 16px; display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: #04222B;
  background: linear-gradient(145deg, #3BE3E8, var(--fibre));
  box-shadow: 0 2px 8px rgba(20,184,196,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  color: var(--chrome-bright); line-height: 1.2;
}
.brand-sub {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .16em;
  color: #5D7093; margin-top: 2px;
}

.nav { padding: 0 10px; flex: 1; }
.nav-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .15em;
  color: #556884; padding: 15px 10px 6px; font-weight: 600;
}
.nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-bottom: 1px;
  color: var(--chrome-text); text-decoration: none;
  font-size: 13.5px; border-radius: var(--r-sm);
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav a::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  width: 3px; height: 0;
  background: var(--fibre); border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height .22s var(--ease);
}
.nav a:hover { background: rgba(255,255,255,.055); color: var(--chrome-bright); }
.nav a.on {
  background: linear-gradient(90deg, rgba(20,184,196,.16), rgba(20,184,196,.03));
  color: #fff;
}
.nav a.on::before { height: 20px; }
.nav a[aria-disabled] { opacity: .38; pointer-events: none; }
.nav a[aria-disabled]::after {
  content: 'soon'; margin-left: auto;
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: #4E6183;
}

.sidebar-foot {
  margin: 0 10px; padding: 12px 10px 0;
  border-top: 1px solid var(--rack-line); font-size: 12px;
}
.who { color: var(--chrome-bright); font-weight: 500; word-break: break-all; }
.who-role {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--fibre); margin: 1px 0 6px;
}
.sidebar-foot a { color: #6E82A4; text-decoration: none; }
.sidebar-foot a:hover { color: var(--chrome-bright); text-decoration: underline; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 15px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; }
.topbar .sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

.content { padding: 22px 26px 60px; flex: 1; }

/* =========================================================  ENTRANCE  === */
/* One short staggered settle. Enough that the page feels assembled
   rather than dumped; not so much that it delays anyone. */
@keyframes settle {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
.content > * { animation: settle .42s var(--ease) both; }
.content > *:nth-child(1) { animation-delay: .02s; }
.content > *:nth-child(2) { animation-delay: .07s; }
.content > *:nth-child(3) { animation-delay: .12s; }
.content > *:nth-child(4) { animation-delay: .17s; }
.content > *:nth-child(5) { animation-delay: .22s; }

/* ============================================================  STATS  === */
/* The one place with real 3D: tiles lift and tilt on hover. Enough depth
   to feel physical, restrained enough not to compete with the numbers,
   which are the actual content. */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-bottom: 20px; perspective: 900px;
}
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 15px 16px 14px;
  position: relative; overflow: hidden;
  box-shadow: var(--lift-1);
  transform-style: preserve-3d;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.stat:hover {
  transform: translateY(-3px) rotateX(3.5deg) rotateY(-3.5deg);
  box-shadow: var(--lift-3);
}
.stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--tile, var(--fibre)); opacity: .85;
}
.stat dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--muted); font-weight: 600; margin: 0 0 6px;
}
.stat dd { margin: 0; }
.stat-value {
  font-family: var(--display); font-size: 30px; font-weight: 700;
  line-height: 1; letter-spacing: -.03em; color: var(--ink);
}
.stat-unit { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.stat-foot { font-size: 11.5px; color: var(--muted); margin-top: 5px; }

/* =====================================================  UPTIME STRIP  === */
/* THE SIGNATURE.
   A month of attendance drawn the way a hosting company draws a month of
   uptime. One bar per day. Instantly familiar to anyone who has looked
   at a status page, and far faster to read than a grid of letters. */

.uptime {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px 14px;
  box-shadow: var(--lift-1); margin-bottom: 20px;
}
.uptime-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 13px; flex-wrap: wrap;
}
.uptime-title { font-family: var(--display); font-weight: 600; font-size: 14px; }
.uptime-pct { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--live); }

.uptime-row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.uptime-row:last-of-type { border-bottom: 0; }
.uptime-who {
  width: 150px; flex: none; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uptime-bars { display: flex; gap: 2px; flex: 1; min-width: 0; height: 26px; }
.bar {
  flex: 1; min-width: 3px; border-radius: 2px;
  background: var(--line); position: relative;
  transform-origin: bottom;
  transition: transform .16s var(--ease), filter .16s var(--ease);
}
.bar:hover { transform: scaleY(1.14); filter: brightness(1.08); z-index: 2; }
.bar-present      { background: var(--live); }
.bar-half_day     { background: var(--amber); }
.bar-absent       { background: var(--flare); }
.bar-weekly_off   { background: #D8DFEA; }
.bar-holiday      { background: var(--violet); opacity: .5; }
.bar-leave,
.bar-half_leave   { background: var(--violet); }
.bar-wfh          { background: var(--fibre); }
.bar-not_employed { background: repeating-linear-gradient(45deg,#EDF1F7,#EDF1F7 2px,#E2E7F0 2px,#E2E7F0 4px); }
.bar-none         { background: #F0F3F8; }
.bar-future       { background: #F6F8FB; }
/* today gets a live ping — the only looping animation in the app */
.bar-today::after {
  content: '';
  position: absolute; inset: -2px;
  border: 1.5px solid var(--fibre); border-radius: 3px;
  animation: ping 2.2s var(--ease) infinite;
}
@keyframes ping {
  0%   { opacity: .9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}
.uptime-stat { width: 62px; flex: none; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.uptime-scale {
  display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--muted); margin-top: 9px; padding-left: 162px;
}

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--ink-2); margin-top: 12px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ============================================================  PANEL  === */

.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--lift-1);
  margin-bottom: 20px; overflow: hidden;
}
.panel-head {
  padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.panel-title { font-family: var(--display); font-weight: 600; font-size: 14px; }

/* ============================================================  TABLE  === */

.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger th {
  text-align: left; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  padding: 10px 14px; background: #FAFBFD;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.ledger td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.ledger tbody tr { transition: background .13s var(--ease); }
.ledger tbody tr:hover { background: #FAFCFE; }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger a { color: var(--fibre-deep); text-decoration: none; font-weight: 500; }
.ledger a:hover { text-decoration: underline; }

.money { text-align: right; font-family: var(--mono); font-size: 12.5px; }
.money::before { content: '\20B9\2009'; color: var(--muted); }
.money.credit { color: #10864F; }
.money.debit  { color: #C43848; }

.code {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  background: #F1F4F9; border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 6px; color: var(--ink-2); white-space: nowrap;
}

.empty { padding: 46px 16px; text-align: center; color: var(--muted); }
.empty strong { display: block; color: var(--ink); margin-bottom: 4px; font-family: var(--display); font-size: 15px; }

/* =============================================================  TAGS  === */

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 20px;
  text-transform: capitalize; white-space: nowrap;
}
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tag-active, .tag-att-present     { background: var(--live-bg);   color: #10864F; }
.tag-on_notice, .tag-att-half_day { background: var(--amber-bg);  color: #9A6512; }
.tag-suspended, .tag-att-absent   { background: var(--flare-bg);  color: #C43848; }
.tag-exited, .tag-att-weekly_off,
.tag-att-not_employed             { background: #F1F4F9;          color: var(--muted); }
.tag-att-holiday, .tag-att-leave,
.tag-att-half_leave               { background: var(--violet-bg); color: #5A48C7; }
.tag-att-wfh                      { background: var(--fibre-bg);  color: var(--fibre-deep); }

/* ============================================================  PUNCH  === */
/* The control people press twice a day. It should feel like hardware:
   raised, with a real press, and a status LED showing live state. */

.punch-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--void), #16233D);
  border-radius: var(--r); padding: 20px 24px; margin-bottom: 20px;
  box-shadow: var(--lift-2); position: relative; overflow: hidden;
}
.punch-bar::after {
  content: '';
  position: absolute; top: -60%; right: -8%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,196,.19), transparent 68%);
  pointer-events: none;
}
.punch-state { position: relative; z-index: 1; }
.punch-state dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: #6E82A4; font-weight: 600; margin-bottom: 6px;
}
.punch-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-size: 19px; font-weight: 600;
  color: var(--chrome-bright);
}
.led { width: 9px; height: 9px; border-radius: 50%; background: #4A5B78; flex: none; }
.led-on {
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(31,191,117,.22), 0 0 12px rgba(31,191,117,.7);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { box-shadow: 0 0 0 3px rgba(31,191,117,.22), 0 0 12px rgba(31,191,117,.7); }
  50%     { box-shadow: 0 0 0 6px rgba(31,191,117,.07), 0 0 18px rgba(31,191,117,.95); }
}
.punch-since { font-family: var(--mono); font-size: 12px; color: #7B8FB2; margin-top: 6px; }

.btn-punch {
  position: relative; z-index: 1;
  font-family: var(--display); font-size: 15px; font-weight: 600;
  padding: 14px 36px; border: 0; border-radius: 9px;
  color: #04222B; cursor: pointer;
  background: linear-gradient(160deg, #43E6EB, var(--fibre));
  box-shadow: 0 5px 0 #0A757D, 0 9px 20px rgba(20,184,196,.34),
              inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .1s var(--ease), box-shadow .1s var(--ease);
}
.btn-punch:hover { transform: translateY(-1px); }
.btn-punch:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 #0A757D, 0 2px 8px rgba(20,184,196,.3),
              inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-punch.is-out {
  background: linear-gradient(160deg, #FF8A96, var(--flare));
  color: #4A0C14;
  box-shadow: 0 5px 0 #A9303E, 0 9px 20px rgba(232,93,107,.3),
              inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-punch.is-out:active { box-shadow: 0 0 0 #A9303E, 0 2px 8px rgba(232,93,107,.28); }

/* ==========================================================  BUTTONS  === */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 13.5px; font-weight: 500;
  padding: 8px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none; line-height: 1.4;
  box-shadow: var(--lift-1);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), background .14s var(--ease);
}
.btn:hover { background: #FAFBFD; transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); box-shadow: var(--lift-1); }
.btn-primary {
  background: linear-gradient(160deg, #1AC7D3, var(--fibre-deep));
  border-color: var(--fibre-deep); color: #fff;
  box-shadow: 0 1px 2px rgba(11,139,149,.3), 0 4px 12px rgba(20,184,196,.26);
}
.btn-primary:hover {
  background: linear-gradient(160deg, #22D3E0, #0A7B84);
  box-shadow: 0 2px 4px rgba(11,139,149,.3), 0 8px 20px rgba(20,184,196,.34);
}
.btn-sm { font-size: 12.5px; padding: 5px 11px; }
.actions { display: flex; gap: 10px; align-items: center; padding-top: 6px; }

/* =============================================================  FORM  === */

.fieldset {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--lift-1);
  padding: 4px 20px 20px; margin: 0 0 18px;
}
.fieldset > legend {
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--fibre-deep); padding: 0 9px; margin-left: -9px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 15px 18px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.field .err  { font-size: 11.5px; color: #C43848; margin-top: 4px; font-weight: 500; }

input[type=text], input[type=email], input[type=date], input[type=time],
input[type=password], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: 13.5px; color: var(--ink);
  padding: 8px 11px; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #FCFDFE;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: #CDD6E4; }
input:focus, select:focus, textarea:focus {
  outline: none; background: var(--card);
  border-color: var(--fibre); box-shadow: 0 0 0 3px rgba(20,184,196,.15);
}
:focus-visible { outline: 2px solid var(--fibre); outline-offset: 2px; }
input[aria-invalid=true], select[aria-invalid=true] { border-color: var(--flare); }
textarea { min-height: 76px; resize: vertical; }
.check { flex-direction: row; align-items: center; gap: 8px; }
.check input { width: auto; accent-color: var(--fibre-deep); }
.check label { margin: 0; font-weight: 500; font-size: 13px; }

.filters {
  display: flex; gap: 11px; align-items: flex-end; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--lift-1);
  padding: 13px 16px; margin-bottom: 18px;
}
.filters .field { min-width: 145px; }

/* ============================================================  FLASH  === */

.flash {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 15px; border-radius: var(--r-sm);
  margin-bottom: 18px; font-size: 13.5px; font-weight: 500;
  border: 1px solid; box-shadow: var(--lift-1);
}
.flash-success { background: var(--live-bg);  border-color: #B4E7CE; color: #0D6B41; }
.flash-error   { background: var(--flare-bg); border-color: #F6C4CA; color: #B0303F; }
.flash-info    { background: var(--fibre-bg); border-color: #B3E4E9; color: #0A6E77; }

.note {
  font-size: 13px; color: var(--ink-2);
  background: var(--amber-bg); border: 1px solid #F2DDB6;
  border-left: 3px solid var(--amber);
  border-radius: var(--r-sm); padding: 12px 15px; margin-bottom: 20px;
}

/* ===========================================================  DETAIL  === */

.detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 15px 22px; margin: 0; }
.detail dt {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); font-weight: 600; margin-bottom: 3px;
}
.detail dd { margin: 0 0 10px; font-size: 13.5px; }

/* ======================================================  MUSTER ROLL  === */

.roll-wrap {
  overflow-x: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift-1);
}
.ledger.roll { font-size: 12.5px; min-width: max-content; }
.ledger.roll th, .ledger.roll td { padding: 5px 3px; }
.roll .sticky-col {
  position: sticky; left: 0; z-index: 2; background: var(--card);
  border-right: 1px solid var(--line);
  padding-left: 14px !important; padding-right: 14px !important;
  white-space: nowrap; min-width: 200px;
}
.roll thead .sticky-col { background: #FAFBFD; z-index: 3; }
.roll .dcol { width: 25px; min-width: 25px; text-align: center; font-size: 9.5px; padding: 6px 2px !important; line-height: 1.15; }
.roll .dcol.sun { background: #F4EEF0; color: var(--flare); }
.roll .dow { font-size: 8.5px; color: var(--muted); font-weight: 400; }
.roll .dcell {
  width: 25px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  border-right: 1px solid var(--line-soft);
}
.cell-present      { background: var(--live-bg);   color: #10864F; }
.cell-half_day     { background: var(--amber-bg);  color: #9A6512; }
.cell-absent       { background: var(--flare-bg);  color: #C43848; }
.cell-weekly_off   { background: #F1F4F9;          color: #A8B4C6; }
.cell-holiday      { background: var(--violet-bg); color: #5A48C7; }
.cell-leave,
.cell-half_leave   { background: var(--violet-bg); color: #5A48C7; }
.cell-wfh          { background: var(--fibre-bg);  color: var(--fibre-deep); }
.cell-not_employed { background: repeating-linear-gradient(45deg,#F7F9FC,#F7F9FC 3px,#EDF1F7 3px,#EDF1F7 6px); color: transparent; }
.cell-none         { background: var(--card); color: #D3DBE7; }

.decide { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.note-in { width: 128px; font-size: 12px; padding: 5px 8px; }

/* =============================================================  AUTH  === */

.login-page {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(90% 70% at 50% -10%, #1B2B49 0%, transparent 62%),
    radial-gradient(60% 50% at 82% 108%, rgba(20,184,196,.20) 0%, transparent 60%),
    var(--void);
}
.login-card {
  width: 100%; max-width: 372px;
  background: var(--card); border-radius: 14px; padding: 30px;
  box-shadow: 0 20px 60px rgba(4,10,24,.45), 0 2px 8px rgba(4,10,24,.3);
  animation: settle .5s var(--ease) both;
}
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.login-card h1 { margin: 0; font-size: 18px; font-weight: 600; }
.login-card .sub {
  margin: 1px 0 0; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .16em; color: var(--muted);
}
.login-card .field { margin-bottom: 15px; }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; }

/* ============================================================  ERROR  === */

.error-page { max-width: 460px; margin: 96px auto; text-align: center; padding: 0 20px; }
.error-code {
  font-family: var(--display); font-size: 60px; font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(160deg, var(--fibre), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-page h1 { font-size: 21px; margin: 14px 0 8px; }
.error-page p { color: var(--muted); margin-bottom: 22px; }

/* =======================================================  RESPONSIVE  === */

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; padding: 12px 0 8px; }
  .sidebar::after { display: none; }
  .nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 12px; }
  .nav a { padding: 7px 12px; }
  .nav a::before { display: none; }
  .nav-label, .sidebar-foot { display: none; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .uptime-who { width: 104px; }
  .uptime-scale { padding-left: 116px; }
  .stat:hover { transform: translateY(-2px); }   /* no tilt on touch */
}

@media (max-width: 560px) {
  .punch-bar { flex-direction: column; align-items: stretch; }
  .btn-punch { width: 100%; }
  .uptime-row { flex-wrap: wrap; }
  .uptime-who { width: 100%; }
  .uptime-scale { padding-left: 0; }
}

/* Motion here is decoration, never information. Removing it costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .stat:hover { transform: none; }
}

@media print {
  .sidebar, .topbar .actions, .filters, .btn, .punch-bar { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .panel, .roll-wrap, .uptime { box-shadow: none; border-color: #999; }
  .roll .sticky-col { position: static; }
  .content > * { animation: none; }
}