/* =============================================================
   Aurevam HRMS — DESIGN SYSTEM
   Shared by every page.

   This replaced the original low-fidelity wireframe styling. The
   selectors are deliberately IDENTICAL to that version: the module
   JavaScript writes these class names into the HTML it generates and
   looks elements up by them, so the stylesheet may change how things
   LOOK but never what they are called. Restyling is safe; renaming
   is not.

   The look is quiet and corporate: hairline borders instead of the
   dashed outlines that made the app read as an unfinished mockup,
   soft elevation to separate surfaces, a tighter type scale, and one
   restrained accent colour used only where it means something.
   ============================================================= */

:root {
  /* Text — three weights of emphasis, deliberately high contrast */
  --ink: #101828;
  --ink-soft: #475467;
  --ink-faint: #8896aa;

  /* Structure */
  --line: #e4e9f0;
  --line-strong: #d3dae5;
  --line-dash: #e4e9f0;      /* kept for compatibility; no longer dashed anywhere */
  --bg: #f7f9fc;
  --panel: #ffffff;
  --gray-100: #f2f5f9;
  --gray-200: #e8edf4;
  --gray-300: #d7dfea;

  /* Accent — one blue, used sparingly so it still carries meaning */
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --navy: #0f1b34;
  --blue-soft: #dce8ff;
  --blue-tint: #f0f5ff;

  /* Elevation: two layers, shallow. Depth should be felt, not seen. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 2px 4px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .08);
  --shadow-lg: 0 8px 16px rgba(16, 24, 40, .06), 0 24px 48px rgba(16, 24, 40, .12);
  --ring: 0 0 0 3px rgba(37, 99, 235, .16);

  --radius: 8px;
  --radius-lg: 12px;
  --sidebar-w: 240px;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }

/* One focus treatment everywhere, and only for keyboard users. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

/* ---- App layout ---- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--blue);
  color: #fff;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-weight: 650; letter-spacing: -.01em; color: var(--navy); }
.brand-name span { color: var(--navy); font-weight: 650; }
/* The wordmark is a wide lockup (about 4:1) whose tagline is only ~7% of its height,
   so it has to be sized by WIDTH to stay readable; height follows automatically.
   The sidebar is 240px wide with padding, leaving roughly 200px to work in. */
.brand-logo { width: 196px; max-width: 100%; height: auto; display: block; }
/* On an auth card the wordmark is the hero, so it runs the full width of the card's
   content box (440px card less 36px padding a side). At that size the tagline is
   actually readable. This lives in base.css rather than login.css because
   invite-accept and invoice-approve load app.css instead, and the four auth screens
   should not disagree about how big the logo is. */
.login-brand .brand-logo { width: 100%; max-width: 368px; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-weight: 500;
  border: 1px solid transparent;      /* reserved so the active state cannot shift layout */
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--gray-100); color: var(--ink); }
.nav-item--active {
  background: var(--blue-tint);
  color: var(--blue-dark);
  border-color: transparent;
  font-weight: 600;
}
/* A quiet accent rail rather than a boxed outline. */
.nav-item--active::before {
  content: "";
  position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--blue);
}
.nav-item--active .nav-icon { color: var(--blue); }
/* Fixed box so every label starts on the same x, with or without an icon. */
.nav-icon {
  color: var(--ink-faint);
  width: 18px; height: 18px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-icon svg { width: 18px; height: 18px; display: block; }
.nav-item:hover .nav-icon { color: var(--ink-soft); }

.nav-subgroup {
  display: flex; flex-direction: column;
  margin: 1px 0 4px 24px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.nav-sub {
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink-faint);
  border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}
.nav-sub:hover { background: var(--gray-100); color: var(--ink-soft); }
.nav-sub--active { color: var(--blue-dark); font-weight: 600; }

.sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  font-size: 11px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
}

/* ---- Content column ---- */
.content { display: flex; flex-direction: column; min-width: 0; }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.search {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  max-width: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  background: var(--gray-100);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.search:focus-within { background: var(--panel); border-color: var(--blue); box-shadow: var(--ring); }
.search-icon { color: var(--ink-faint); }
.search input {
  border: 0; background: transparent; outline: none;
  width: 100%; font-family: var(--font); font-size: 13px; color: var(--ink);
}
.search input::placeholder { color: var(--ink-faint); }
.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.role-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.role-switch select {
  font-family: var(--font); font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.icon-btn {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  width: 34px; height: 34px;
  cursor: pointer;
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}
.badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--blue); color: #fff;
  border-radius: 10px; font-size: 10px;
  padding: 1px 5px;
}
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650; color: var(--blue-dark);
  overflow: hidden;                 /* clip the photo to the circle */
  flex: none;
}
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Attendance: expanded punch sessions ---- */
.punch-row > td { background: var(--gray-100); padding: 0 0 0 24px; }
.punch-detail { padding: 12px 12px 14px 0; max-width: 560px; }
.punch-detail table { font-size: 12px; }
.punch-detail th { color: var(--ink-faint); font-weight: 600; }

/* ---- Global search results ---- */
.search { position: relative; }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  max-height: 340px; overflow-y: auto;
  z-index: 20;
}
.search-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); font-weight: 650; padding: 8px 8px 4px;
}
.search-hit {
  display: block; padding: 8px;
  border-radius: 6px;
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.search-hit:hover, .search-hit:focus { background: var(--blue-tint); color: var(--blue-dark); }
.search-empty { padding: 12px 8px; font-size: 13px; color: var(--ink-faint); }

/* ---- Page body ---- */
.page { padding: 28px; max-width: 1240px; width: 100%; }
.page-head { margin-bottom: 22px; }
.page-head h1 { margin: 0 0 5px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.page-head p { margin: 0; color: var(--ink-faint); font-size: 13px; max-width: 76ch; }
.page-head-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}

/* ---- Surfaces ---- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.panel-title {
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-faint);
  margin: 0 0 14px;
}

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .page { padding: 18px; }
  .topbar { padding: 12px 16px; }
}

/* KPI cards */
.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.kpi-label {
  font-size: 11px; color: var(--ink-faint); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 650;
}
.kpi-value {
  font-size: 27px; font-weight: 650; margin-top: 8px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* Buttons */
.btn {
  font-family: var(--font); font-size: 13px; font-weight: 550;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover { background: var(--gray-100); border-color: var(--ink-faint); }
.btn:active { box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(37, 99, 235, .24);
}
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* Status pills */
.pill {
  display: inline-block;
  font-size: 11px; font-weight: 650;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--gray-100);
  color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.pill--ok { background: #e7f6ed; color: #067647; border-color: #bfe7d0; }
.pill--warn { background: #fff6e5; color: #b54708; border-color: #f5d9a8; }
.pill--muted { background: var(--gray-100); color: var(--ink-faint); border-color: var(--line); }

/* Tables */
.table-wrap { overflow-x: auto; }
table.wf {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.wf th, table.wf td {
  text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}
table.wf th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-faint); font-weight: 650;
  background: var(--gray-100);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.wf th:first-child { border-top-left-radius: var(--radius); }
table.wf th:last-child { border-top-right-radius: var(--radius); }
table.wf tbody tr { transition: background .1s ease; }
table.wf tbody tr:hover { background: var(--blue-tint); }
table.wf tbody tr:last-child td { border-bottom: 0; }

/* Avatars row */
.avatars { display: inline-flex; }
.avatars .av {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-tint); border: 2px solid var(--panel);
  display: grid; place-items: center; font-size: 10px; color: var(--blue-dark);
  font-weight: 650; margin-left: -8px;
}
.avatars .av:first-child { margin-left: 0; }

/* Progress bars */
.progress {
  height: 8px; border-radius: 20px;
  background: var(--gray-200);
  border: 0;
  overflow: hidden;
}
.progress > span { display: block; height: 100%; background: var(--blue); border-radius: 20px; }

/* Placeholder blocks (charts / images not yet built) */
.placeholder {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--gray-100);
  color: var(--ink-faint);
  display: grid; place-items: center;
  min-height: 200px;
  font-size: 13px; letter-spacing: .01em;
  text-align: center;
}
.placeholder.sm { min-height: 120px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(16, 24, 40, .45);
  backdrop-filter: blur(2px);
  display: none; place-items: center;
  z-index: 50;
}
.modal-backdrop.open { display: grid; animation: fade-in .14s ease-out; }
.modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  width: min(520px, 92vw);
  padding: 22px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .16s ease-out;
}
.modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

/* Form fields */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 550;
  color: var(--ink-soft); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font); font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Inline select (used in page headers/toolbars) */
.field-inline {
  font-family: var(--font); font-size: 13px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* Utility */
.muted { color: var(--ink-faint); }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 16px; }