/* Employee Database */

/* Auth popup (match Salary Query / Salary Calculator) */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.auth-card {
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 50px var(--shadow);
}
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.auth-title h1 {
  margin: 0;
  font-size: 22px;
}
.auth-title p {
  margin: 6px 0 0;
  opacity: 0.85;
}
.back-link {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--muted);
  text-decoration: none;
}
.back-link:hover { color: var(--text); }
.logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.auth-label {
  display: block;
  margin: 10px 0 8px;
  color: var(--muted);
  font-size: 13px;
}
.auth-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--text);
  outline: none;
}
.auth-input:focus { border-color: rgba(var(--ink-rgb), 0.28); }
.auth-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  gap: 10px;
  flex-wrap: wrap;
}
.primary {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(var(--ink-rgb), 0.10);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.primary:hover { background: rgba(var(--ink-rgb), 0.14); }
.primary.small { padding: 10px 12px; }
.auth-error {
  margin-top: 10px;
  border: 1px solid var(--danger-line);
  background: var(--danger-fill);
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--danger-text);
}

/* App UI */
.meta { margin-top: 8px; color: var(--muted); font-size: 13px; }
.meta-item { opacity: 0.95; }
.meta-dot { opacity: 0.55; margin: 0 6px; }

.panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(var(--ink-rgb), 0.04);
  padding: 14px;
}
.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.panel-actions { display: flex; gap: 8px; }

.segmented {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: rgba(var(--ink-rgb), 0.10);
  color: var(--text);
}

/* The box and the sentence explaining it, on one line. The sentence is
   what the heading used to say, so the section carries no heading of its
   own -- the box is self-evidently a search box. */
.search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.search-row .input {
  flex: 1 1 320px;
  max-width: 460px;
}
.search-note {
  color: var(--muted);
  font-size: 13px;
}
.search-input {
  flex: 1;
  min-width: 220px;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  background: var(--sunken);
  color: var(--text);
  outline: none;
}
.search-input:focus { border-color: rgba(var(--ink-rgb), 0.28); }

.hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.hint.error {
  color: var(--danger-text);
}

.matches {
  margin-top: 12px;
  border-top: 1px dashed rgba(var(--ink-rgb), 0.14);
  padding-top: 12px;
}
.matches-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}
.matches-list {
  display: grid;
  gap: 8px;
}
.match-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunken);
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
}
.match-item:hover { background: rgba(var(--ink-rgb), 0.08); }
.match-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.match-name { font-weight: 700; }
.match-code { color: var(--muted); font-size: 13px; }
.match-sub { margin-top: 3px; color: var(--muted); font-size: 13px; }

.result {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(var(--ink-rgb), 0.04);
  padding: 14px;
}
.result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.result-title h2 {
  margin: 0;
  font-size: 18px;
}
.result-subtitle {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.kv-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px) {
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .kv-grid { grid-template-columns: 1fr; }
}
.kv {
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--sunken);
}
.kv .k { color: var(--muted); font-size: 12px; }
.kv .v { margin-top: 4px; font-weight: 700; }

.table-wrap { margin-top: 12px; overflow: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.data-table th, .data-table td {
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
  padding: 10px 10px;
  vertical-align: top;
}
.data-table th {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.2px;
}
.data-table td { font-size: 13px; }
.data-table td .muted { color: var(--muted); }

.footer {
  margin: 18px 0 8px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}
.footnote { opacity: 0.85; }

/* ---------------------------------------------------------------------
   Database editor.

   Added when the page stopped being a spreadsheet viewer and became the
   place employees are created and edited. Colours come from the theme
   variables in home.css, so this follows the light/dark switch with the
   rest of the portal.
   --------------------------------------------------------------------- */

.hero-compact { padding: 18px; }

.link { color: inherit; text-decoration: none; opacity: 0.85; }
.link:hover { opacity: 1; text-decoration: underline; }

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.totals {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) { .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .totals { grid-template-columns: 1fr; } }

.total {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill-1);
  padding: 14px;
}
.total-label { color: var(--muted); font-size: 12.5px; }
.total-value { font-size: 26px; font-weight: 750; margin-top: 4px; }

.input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--text);
  font: inherit;
  outline: none;
}
.input:focus { border-color: var(--accent-line-strong); box-shadow: 0 0 0 3px var(--accent-ring); }
.input:disabled { opacity: 0.6; cursor: not-allowed; }

/* The record, grouped. A fieldset per section keeps forty-odd inputs
   navigable, and the legend gives each group a heading screen readers
   announce. */
.db-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin: 0 0 14px;
}
.db-group > legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* 200px rather than 230: inside a third of the page, a 230px minimum
   left room for only one field per row, which made every section taller
   and the whole record longer than it was at two columns. Measured: 1226px
   at three columns with 230, 739px with 200. */
.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.db-field { display: flex; flex-direction: column; gap: 5px; }
.db-label { font-size: 12.5px; font-weight: 650; color: var(--text-80); }
.db-hint, .db-derived { font-size: 12px; color: var(--muted); }
.db-derived { font-weight: 650; }
.db-derived.bad { color: var(--danger-text); }

.db-field .db-check { width: 18px; height: 18px; align-self: flex-start; margin-top: 4px; }

/* A date box: the text everybody reads, with the browser's own calendar
   kept behind the small button. The native input is not display:none,
   because a hidden input cannot be asked to open its picker. */
.db-date { position: relative; display: block; }
.db-date-text { width: 100%; padding-right: 30px; }
.db-date-text.bad { border-color: var(--danger-text); }
.db-date-native {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.db-date-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.db-date-btn:hover { color: var(--text); background: var(--fill-2); }
.db-date-text:disabled ~ .db-date-btn { display: none; }

.db-docs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 14px;
}
.db-doc { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.db-doc input { width: 17px; height: 17px; }

.file-status { font-size: 12.5px; font-weight: 650; max-width: 60ch; text-align: right; }
.file-status.good { color: var(--on-success, #3ee088); }
.file-status.bad { color: var(--muted); }

/* Beside the employee name at the top of the editor, not below a form
   that is a screen and a half long. */
.form-actions { display: flex; gap: 8px; margin: 0; }

.form-notice {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--success-line);
  color: var(--text);
  font-weight: 650;
}

/* ---------------------------------------------------------------------
   The hidden attribute is a user-agent style, so ANY author rule that
   sets display beats it. .auth sets display:grid, which meant
   gate.hidden = true did nothing: after a correct sign-in the gate stayed
   exactly where it was -- fixed, inset 0, with a blurred overlay --
   covering the app completely. The sign-in had worked; there was simply
   no way to see past it.

   Declared once for the whole page rather than only for .auth, because
   this page hides and shows a lot of things and the next one to grow a
   display rule would fail the same silent way.
   --------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Native dropdowns in dark mode.

   An <option> does not inherit the page's colours: the browser paints the
   open list with the system default, which is white. Against the near
   white text this page uses, the choices were white on white -- there,
   selectable, and invisible. Both the control and its options therefore
   get an opaque colour of their own rather than the translucent fill the
   text inputs use.
   --------------------------------------------------------------------- */
select.input,
select.input option,
select.input optgroup {
  background-color: var(--card);
  color: var(--text);
}

/* ---------------------------------------------------------------------
   Use the width of the screen.

   The portal's 980px column suits reading; this page is a form of forty
   fields and a wide screen should show most of them at once instead of
   making someone scroll to find out what is there.
   --------------------------------------------------------------------- */
/* responsive.css drives the column with width: min(var(--container-max),
   100%), so a max-width here is simply ignored -- the variable is the
   knob that actually moves it. */
body:has(#app) { --container-max: 1500px; }
body:has(#app) .container { max-width: 1500px; }

/* ---------------------------------------------------------------------
   One section per row, each running the width of the page.

   Columns packed the sections tightly but made each one a third as wide,
   so a six-field section stacked its fields three deep. Full width lets
   those same six sit in a single line, which reads like the employee
   report and costs no more height.
   --------------------------------------------------------------------- */
#employeeForm > .db-group { width: 100%; }

/* Tighter vertical rhythm everywhere on this page: the same content in
   noticeably less height. */
#app .section { margin-top: 12px; padding: 14px 16px; }
#app .hero { padding: 14px 16px; }
#app .hero-text h1 { margin: 4px 0 2px; font-size: 22px; }
.db-group { padding: 10px 12px 12px; margin: 0 0 10px; }
.db-grid { gap: 10px; }
.db-field { gap: 3px; }
.input { padding: 7px 10px; }
.total { padding: 10px 12px; }
.total-value { font-size: 22px; }
.db-docs { gap: 6px 14px; }

/* ---------------------------------------------------------------------
   The values the system works out for itself.
   --------------------------------------------------------------------- */
.derived-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  /* A small gap under the Save and Cancel row, so the calculated values
     do not sit flush against the buttons. */
  margin: 10px 0 12px;
  padding: 12px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-fill);
}
.derived-item { min-width: 0; }
.derived-key {
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.derived-val {
  margin-top: 2px;
  font-size: 14.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.derived-val.warn { color: var(--on-warning, #ffc46b); }
.derived-val.bad { color: var(--danger-text); }
.derived-val.muted { color: var(--muted); font-weight: 500; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.derived-val.good { color: var(--on-success, #3ee088); }



/* The theme switch no longer floats over this page -- it is moved into
   the page bar on sign-in -- so the band that was reserved for it goes. */

/* ---------------------------------------------------------------------
   Ten documents, laid out evenly rather than packed.

   auto-fit left a ragged last row whose width depended on how many
   documents there happened to be. A fixed count divides them evenly: five
   across makes two full rows of ten.
   --------------------------------------------------------------------- */
.db-docs { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1200px) { .db-docs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .db-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .db-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .db-docs { grid-template-columns: 1fr; } }

/* The five payroll switches, one row of equal columns. */
.db-switches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px 14px;
}
@media (max-width: 900px) { .db-switches { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .db-switches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------
   The page bar comes from home.css now, so this page, the portal home
   and the tracker all draw the same one. What was here was a second
   copy of the same idea, already drifting: a different logo, a different
   name size, its own button sizing.

   Only the bits this page adds remain.
   --------------------------------------------------------------------- */
#themeSlot { display: contents; }

/* New employee and Export sit with the search box now, so the bar holds
   only who you are and the way out. */
/* The search box takes whatever is left; the two actions sit at the
   right end of the row, where the eye arrives last. */
/* flex-basis 0, not auto: .input carries width 100%, so an auto basis
   makes the box claim the whole line and pushes the buttons onto a
   second one. From zero it simply takes what is left. */
.search-row .input { flex: 1 1 0; width: auto; max-width: none; min-width: 220px; }
.search-row .btn { white-space: nowrap; flex: 0 0 auto; }
.search-note-line { margin-top: 8px; }

/* ---------------------------------------------------------------------
   The whole page at nine tenths.

   The tracker does this with the root font size, which works there
   because almost everything in it is a rem. This stylesheet is written
   in pixels, so a root font size would move the type and leave every box
   the size it was. zoom scales the lot: it is the one property that
   still means draw this smaller rather than pretend the text is smaller.

   It is what puts the calculated panel on one row on a laptop. Eight
   items need 1350px; a 1366 screen leaves 1302 for them, and 1350 drawn
   at nine tenths is 1215.
   --------------------------------------------------------------------- */
#app { zoom: 0.9; }

/* Buttons at the tracker's small size. Declared at the tracker's own
   numbers and then drawn through the zoom above, so the two pages match
   on screen rather than only in the stylesheet. */
#app .btn {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 10px;
}



/* ---------------------------------------------------------------------
   A section holding a half-width field.

   auto-fit gives whatever column count the width allows, so "half" has
   no meaning against it. This section is pinned to four columns, which
   makes the two dates a quarter each and the reason exactly half.
   --------------------------------------------------------------------- */
.db-grid[data-cols='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-grid[data-cols='7'] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.db-field-half { grid-column: span 2; }

/* A fixed count is a full-width promise. Below that, step down rather
   than squeezing seven controls into a laptop. */
@media (max-width: 1200px) { .db-grid[data-cols] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .db-grid[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
  .db-grid[data-cols] { grid-template-columns: 1fr; }
  .db-field-half { grid-column: auto; }
}

/* Save and Cancel take the same size as every other button here. */