/* Application styles. Colours, radii and spacing come from tokens.css only. */

/* --------------------------------------------------------------------------
   Font (self-hosted Inter, SIL Open Font License - no CDN, no tracking)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.01ba6c2a184b.woff2") format("woff2");
  /* Turkish needs latin-ext for ğ, ş, İ. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.65850a373e25.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, p, figure { margin: 0; }

button { font: inherit; }

svg { display: block; flex: none; }

/* --------------------------------------------------------------------------
   Shell: fixed sidebar + scrolling content
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  /* minmax(0, 1fr) stops wide tables from stretching the whole page:
     a grid track defaults to min-width:auto and would otherwise grow. */
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Sidebar --- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  color: var(--on-sidebar);
  background: linear-gradient(
    180deg,
    var(--sidebar-top) 0%,
    var(--sidebar-top) 46%,
    var(--sidebar-bot) 100%
  );
}

/* The brand block is centred; the menu below it stays left aligned so the
   icons line up. */
.sidebar__brand { padding: 0 8px 22px; text-align: center; }

/* The real wordmark (templates/icons/logo.html). Its letterforms take
   currentColor, so the sidebar's white text colour reverses it for the dark
   ground while the brand green stays put. */
.logo { width: 100%; height: auto; display: block; }

.sidebar__logo { width: 124px; margin: 0 auto; color: var(--on-sidebar); }

.sidebar__product {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
}

.sidebar__tagline {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-sidebar-faint);
}

.sidebar__section {
  padding: 0 8px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-sidebar-faint);
}

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }

.sidebar__nav--main { flex: 1; }

.sidebar__rule {
  height: 1px;
  margin: 14px 8px;
  background: var(--on-sidebar-rule);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-sidebar-muted);
  transition: background .12s ease, color .12s ease;
}

.nav-item:hover {
  background: var(--on-sidebar-hover);
  color: var(--on-sidebar);
}

.nav-item.is-active {
  background: var(--on-sidebar-active);
  color: var(--on-sidebar);
  font-weight: 600;
}

.nav-item__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modules whose work package is not built yet sit back visually. The
   "Yakında" wording lives on the page itself, not in the cramped sidebar. */
.nav-item--soon { color: var(--on-sidebar-faint); }

/* --- Expandable group (Personel, IP2) ---
   A <details>/<summary> disclosure: it needs no JavaScript, so the rows stay
   reachable if a script fails, and the keyboard gets it for free. */

/* Left as the default block: a flex <details> is not reliably a disclosure. */
.nav-group { margin: 0; }

/* <summary> carries a disclosure triangle of its own in every browser; the
   chevron on the right replaces it. */
.nav-group__toggle { cursor: pointer; list-style: none; }
.nav-group__toggle::-webkit-details-marker { display: none; }

.nav-group__chevron {
  display: inline-flex;
  margin-left: auto;
  transition: transform .15s ease;
}

.nav-group[open] .nav-group__chevron { transform: rotate(90deg); }

.nav-group__children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  /* Indented to the width of a row's icon plus its gap, so the child labels
     line up with the parent's label rather than with its icon. */
  padding-left: 30px;
}

.nav-item--child { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }


/* --- Signed-in user, pinned to the bottom --- */

.sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px;
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--on-sidebar-active);
  font-size: 12px;
  font-weight: 600;
  color: var(--on-sidebar);
}

.sidebar__user-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: 12px;
  color: var(--on-sidebar-faint);
}

/* --- Content column --- */

/* The pane holds the top strip above the scrolling content, so .content keeps
   its own padding and max-width and nothing below shifts. */
.pane { min-width: 0; display: flex; flex-direction: column; }

.content {
  min-width: 0;
  padding: var(--content-pad);
  max-width: 1440px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Top strip and the notification bell
   -------------------------------------------------------------------------- */

/* Sticky like the sidebar, and for the same reason: the sidebar stays put
   while you scroll, so a strip that scrolled away would leave the page looking
   half-detached - and a notification bell you have to scroll up to reach is a
   bell people stop using. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--content-pad);
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.topbar__spacer { flex: 1; }

.bell { position: relative; }

.bell__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.bell__button:hover { background: var(--bg); color: var(--text); }

/* The count sits on the bell rather than beside it, so an empty bell and a
   full one occupy the same space and the strip never reflows. */
.bell__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--warning);
  color: var(--on-status);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.bell__header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-label);
}

.bell__empty { padding: 18px 14px; color: var(--text-muted); font-size: 13px; }

.notice {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--border);
}

.notice:last-child { border-bottom: none; }
.notice:hover { background: var(--bg); }
.notice--warning { border-left-color: var(--warning); }
.notice--danger { border-left-color: var(--danger); }

.notice__title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.notice__body { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.page-header__text { flex: 1; min-width: 0; }

.page-header__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.page-header__subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-muted);
}

.page-header__actions {
  display: flex;
  gap: 10px;
  flex: none;
  padding-top: 4px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
}
.btn-primary:hover { opacity: .9; }

.btn-secondary {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
.btn-secondary:hover { background: var(--bg); }

.btn-danger-soft {
  background: var(--danger-soft);
  color: var(--danger);
}
.btn-danger-soft:hover { opacity: .85; }

.btn-sm { padding: 5px 10px; font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.card__title { font-size: 15px; font-weight: 600; }

.card__subtitle { margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }

.card__body { padding: 20px; }

/* A heading for one section inside a card that holds several - the two
   category lists on Ayarlar > Kategoriler. Lighter than the card's own
   header, and it has a rule above rather than below, so it reads as the
   start of the block under it rather than as a second card title. */
.card__header--sub {
  border-bottom: none;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.card__title--sm { font-size: 13.5px; }

/* --------------------------------------------------------------------------
   KPI cards
   -------------------------------------------------------------------------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.kpi__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-label);
}

.kpi__value {
  margin-top: 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.kpi__hint { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }

.kpi__hint--positive { color: var(--accent); font-weight: 500; }

/* Thin progress bar used by percentage KPIs. */
.progress {
  height: 6px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--info-soft);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

/* A project's budget bar carries a tone as well as a width: colour is never
   the only signal, so the figure beside it says the same thing in words. */
.progress--inline { margin-top: 0; width: 120px; }
.progress__fill--warning { background: var(--warning); }
.progress__fill--danger  { background: var(--danger); }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge--success { background: var(--accent-soft); color: var(--accent); }
.badge--warning { background: var(--warning-soft); color: #B45309; }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--neutral { background: var(--info-soft);    color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th {
  padding: 10px 20px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-label);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover { background: #FAFBFC; }

.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Short values (dates, months, invoice numbers) must never wrap. */
.table .nowrap { white-space: nowrap; }

.table__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
  /* The same bottom rhythm .kpi-grid carries. Without it a .grid-2 followed by
     anything else touched it: the gap on the dashboard only ever came from the
     .kpi-grid above, so the moment a grid-2 sat on top the two blocks met with
     no space at all. */
  margin-bottom: 20px;
}

.stack { display: flex; flex-direction: column; gap: 16px; }

.muted { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Placeholder page (modules IP2-IP5)
   -------------------------------------------------------------------------- */

.placeholder {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 72px 24px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.placeholder__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--info-soft);
  color: var(--text-label);
}

.placeholder__title { font-size: 16px; font-weight: 600; }

.placeholder__text { max-width: 380px; font-size: 13.5px; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Narrow screens: the sidebar collapses to a top bar.
   "Works on mobile" is enough for IP1; it is not optimised.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: static;
    height: auto;
    background: var(--sidebar-top);
  }

  .sidebar__nav--main { flex: none; }

  .content { --content-pad: 20px; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }

  .grid-2 { grid-template-columns: 1fr; }

  .page-header { flex-direction: column; gap: 14px; }
}

/* --------------------------------------------------------------------------
   Icons (inline Lucide SVG - see templates/icons/README.md)
   -------------------------------------------------------------------------- */

.icon    { width: 18px; height: 18px; }
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Form fields and the list filter bar
   -------------------------------------------------------------------------- */

.field {
  min-width: 0;
  padding: 8px 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
}

.field::placeholder { color: var(--text-label); }

.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }

.btn:disabled { opacity: .55; cursor: not-allowed; }

.filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

@media (max-width: 900px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   Styleguide colour swatches (development page only)
   -------------------------------------------------------------------------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.swatch__chip {
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.swatch__name { margin-top: 7px; font-size: 12px; font-weight: 600; }

.swatch__hex { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Sidebar user block: sign-out control
   -------------------------------------------------------------------------- */

.sidebar__user-text { flex: 1; min-width: 0; }

.sidebar__logout {
  display: grid;
  place-items: center;
  padding: 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--on-sidebar-faint);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.sidebar__logout:hover { background: var(--on-sidebar-hover); color: var(--on-sidebar); }

/* --------------------------------------------------------------------------
   Sign-in page (standalone - no sidebar)
   -------------------------------------------------------------------------- */

.auth-body {
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--sidebar-top) 0%, var(--sidebar-bot) 160%);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
}

.auth-brand { text-align: center; margin-bottom: 26px; }

.auth-brand__logo {
  width: 132px;
  margin: 0 auto;
  color: var(--primary);
}

.auth-brand__product { margin-top: 8px; font-size: 16px; font-weight: 600; }

.auth-brand__tagline {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-label);
}

.auth-form { display: flex; flex-direction: column; }

.auth-label {
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-form .field { margin-bottom: 16px; }

.auth-submit { justify-content: center; margin-top: 4px; }

.auth-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Inline alerts
   -------------------------------------------------------------------------- */

.alert {
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.alert--danger  { background: var(--danger-soft);  color: var(--danger); }
.alert--warning { background: var(--warning-soft); color: #B45309; }
.alert--success { background: var(--accent-soft);  color: var(--accent); }
/* A statement of fact rather than a problem: "this account is not a
   person", "this person is on Bağkur". Neutral on purpose - a yellow
   box would read as something to go and fix. */
.alert--info    { background: var(--info-soft);    color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Upload: drop zone
   -------------------------------------------------------------------------- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 20px;
  padding: 40px 24px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, background .12s ease;
}

.dropzone:hover,
.dropzone--active { border-color: var(--accent); background: var(--accent-soft); }

.dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone__icon { color: var(--text-label); }
.dropzone__title { font-size: 15px; font-weight: 600; }
.dropzone__hint { font-size: 13px; color: var(--text-muted); }
.dropzone__count { font-size: 13px; font-weight: 600; color: var(--accent); }
.dropzone__meta { margin-top: 6px; font-size: 12px; color: var(--text-label); }

.checkbox { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; }
.checkbox small { display: block; color: var(--text-muted); }

.card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* --------------------------------------------------------------------------
   Review screen: PDF beside the form
   -------------------------------------------------------------------------- */

.review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* The PDF follows as the form scrolls, so a value can be checked against the
   page it came from without scrolling back. */
.review__pdf { position: sticky; top: 20px; }

.review__frame {
  display: block;
  width: 100%;
  height: calc(100vh - 220px);
  min-height: 420px;
  border: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

.review__form { min-width: 0; }

.review__actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  flex-wrap: wrap;
}

.review__actions-left,
.review__actions-right { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .review { grid-template-columns: minmax(0, 1fr); }
  .review__pdf { position: static; }
  .review__frame { height: 60vh; }
}

/* --------------------------------------------------------------------------
   Form fields with confidence markers
   -------------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-field--wide { grid-column: 1 / -1; }

.form-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.form-field__hint { font-size: 11.5px; color: var(--text-label); }
.form-field__error { font-size: 12px; color: var(--danger); }

.form-field .field { width: 100%; }
.form-field textarea.field { resize: vertical; }

/* The marker says where a value came from. It never disables the input. */
.conf {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.conf--high    { background: var(--accent-soft);  color: var(--accent); }
.conf--medium  { background: var(--warning-soft); color: #B45309; }
.conf--low     { background: var(--warning-soft); color: #B45309; }
.conf--missing { background: var(--danger-soft);  color: var(--danger); }

.form-field--low .field     { background: var(--warning-soft); }
.form-field--missing .field { border-color: var(--danger); }

/* --------------------------------------------------------------------------
   Consistency box and editable tables
   -------------------------------------------------------------------------- */

.check-box {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  border-radius: 0 0 var(--radius) var(--radius);
}

.check-box--ok   { background: var(--accent-soft);  color: var(--accent); }
.check-box--warn { background: var(--warning-soft); color: #B45309; }

.table--form td { padding: 6px 10px; }
.table--form th { padding: 8px 10px; }
.table--form .field { width: 100%; padding: 6px 8px; font-size: 13px; }
.field--narrow { max-width: 110px; }
.field--select { padding-right: 26px; }

/* --------------------------------------------------------------------------
   List: filter bar, sortable headers, paging
   -------------------------------------------------------------------------- */

.filter-form { margin-bottom: 20px; }

.filter-form__footer {
  padding: 0 20px 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}

.sort:hover { color: var(--text); }
.sort--active { color: var(--text); }
.sort__arrow { font-size: 11px; }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

/* HTMX fades the results while a filter request is in flight. */
#results.htmx-request { opacity: .55; transition: opacity .1s ease; }

/* --------------------------------------------------------------------------
   Detail: fact list and history timeline
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  font-size: 13.5px;
}

.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; font-weight: 500; }
.facts dd.num { text-align: right; font-variant-numeric: tabular-nums; }

.timeline { margin: 0; padding: 4px 20px 16px; list-style: none; }

.timeline__item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.timeline__item:last-child { border-bottom: none; }
.timeline__when { color: var(--text-label); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Overview: pending list and module rows
   -------------------------------------------------------------------------- */

.pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  transition: background .12s ease, border-color .12s ease;
}

.pending-row:hover { background: var(--bg); border-color: var(--text-label); }

.pending-row__vendor { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-row__amount { font-variant-numeric: tabular-nums; font-weight: 600; }

.module-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.module-row__label { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Settings: tab strip and the forms behind it
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tabs__link {
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease;
}

.tabs__link:hover { color: var(--text); }

.tabs__link--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.settings-form { max-width: 860px; }
.settings-form--narrow { max-width: 560px; }

.settings-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

.settings-form__stamp { margin-right: auto; font-size: 12.5px; }

.settings-note {
  max-width: 860px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.settings-note code {
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--info-soft);
  font-size: 12px;
}

/* The blank row that adds a category, marked so it reads as an invitation
   rather than as an empty record. */
.settings-row--new td { background: var(--bg); }

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}

/* Small pills listing the pages a member can open. */
.chip {
  display: inline-block;
  margin: 1px 3px 1px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--info-soft);
  color: var(--text-muted);
  font-size: 11.5px;
  white-space: nowrap;
}

/* The module list is a fieldset for the screen reader, not for the eye: the
   browser's default border would be the only box in the design. */
.form-field fieldset,
fieldset.form-field { border: 0; padding: 0; margin: 0; }

/* --------------------------------------------------------------------------
   İzin Talepleri
   -------------------------------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A leave balance that has gone past the entitlement. Shown, never hidden. */
.kpi__value--danger,
.table td.is-negative { color: var(--danger); }

/* Three controls and a button, not the invoice list's six: without its own
   track sizing the button stretches into something that reads as a field. */
.filter-bar--leave { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }

.filter-bar--leave .btn { align-self: center; }

.day-count {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 13px;
  color: var(--text-muted);
}

/* An access chip that also carries write permission. The pencil is the signal;
   the colour only reinforces it, so it still reads without colour. */
.chip--write { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.access-table th:not(:first-child),
.access-table td:not(:first-child) { width: 130px; text-align: center; }

.access-table .checkbox { display: inline-flex; justify-content: center; }

/* --------------------------------------------------------------------------
   Puantaj matrix (İP2)

   The readability decision, because a month is 31 nearly-identical columns:
   **the ordinary day is quiet and the exception is loud.** A full worked day
   is 22 of those columns, so boxing and darkening it drowns the İ, R and RT
   cells that are the only reason to look. X therefore has no box, no border
   and a faint colour; background and weight are spent only on what is not
   ordinary. The letter is always printed as well, so colour is never the sole
   signal - for colour blindness and for a black-and-white print.

   Rules before each Monday, a marked column for today, zebra rows and a
   pinned name column are the other half: they give the eye something to
   navigate by inside the grid.
   -------------------------------------------------------------------------- */

.table--matrix { font-size: 13px; }

.table--matrix th,
.table--matrix td { padding: 0; }

.table--matrix thead th { padding: 7px 0 6px; }

/* Zebra, so a long row is followed across thirty-one columns without losing
   the line. */
.table--matrix tbody tr:nth-child(even) { background: var(--bg); }
.table--matrix tbody tr:hover { background: var(--accent-soft); }
.table--matrix tbody tr:hover .matrix__name { background: var(--accent-soft); }

.matrix__name {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 168px;
  padding: 8px 14px !important;
  text-align: left;
  background: var(--card);
  border-right: 2px solid var(--border);
}

thead .matrix__name { background: var(--bg); }
.table--matrix tbody tr:nth-child(even) .matrix__name { background: var(--bg); }

/* The row header is a person's name, not a column label: `.table th` sets
   uppercase and a label colour, which turns "Berika" into "BERİKA". */
tbody .matrix__name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.matrix__day {
  min-width: 27px;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0;
}

.matrix__day--rest .matrix__daynum { color: var(--text-label); }
.matrix__daynum { display: block; font-size: 12px; font-weight: 600; }
.matrix__dayname { display: block; font-size: 9.5px; font-weight: 500; color: var(--text-label); }

/* Today, so "where are we" needs no counting. */
.matrix__day--today .matrix__daynum { color: var(--accent); }
.matrix__cell--today,
.matrix__day--today { background: var(--accent-soft); }

/* A rule before each Monday: weeks are the unit people actually read in. */
.matrix__cell--weekstart { border-left: 1px solid var(--border); }

.matrix__cell { text-align: center; padding: 4px 1px !important; }

/* Not employed that day. Left blank on purpose - a dash reads as a code - but
   hatched so it is clearly "no data" rather than "nothing happened". */
.matrix__cell--none {
  background: repeating-linear-gradient(
    135deg, transparent, transparent 4px, var(--border) 4px, var(--border) 5px
  );
}

/* One code. Everything is centred in the same footprint so the columns stay
   aligned whether or not a cell carries a box. */
.cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 22px;
  padding: 0 3px;
  border-radius: var(--radius-xs);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

/* The ordinary day: no box, no border, faint. This is the whole point. */
.cell--x {
  font-weight: 400;
  color: var(--text-label);
}

.cell--y  { background: var(--code-half); }
.cell--i  { background: var(--code-leave); }
.cell--r  { background: var(--code-sick); }
.cell--ui { background: var(--code-unpaid); }
.cell--m  { background: var(--code-excuse); }
.cell--dgs { background: var(--code-offsite); font-size: 10px; }

/* Rest and holiday are facts about the day, not about the person: they sit
   back, but stay legible. */
.cell--ht { background: var(--code-rest); color: var(--text-label); font-weight: 500; }
.cell--rt { background: var(--code-holiday); color: var(--text-muted); }

.cell--editable {
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
}

.cell--editable:hover {
  border-color: var(--accent);
  background: var(--card);
  color: var(--text);
}

a.cell:hover { outline: 1px solid var(--accent); }

.month-nav { display: flex; align-items: center; gap: 12px; }

/* The legend sits under the table, so the footer justifies left rather than
   right like a form's buttons. */
.card__footer--legend { justify-content: flex-start; padding: 10px 20px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.legend__item { display: inline-flex; align-items: center; gap: 5px; }
.legend__label { font-size: 11.5px; color: var(--text-muted); }

.strong { font-weight: 700; }

/* One choice on the "day" page: a code chip, a label, and a chevron. */
.day-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}

.day-option:hover { border-color: var(--accent); background: var(--bg); }
.day-option__label { flex: 1; font-size: 13.5px; font-weight: 500; }

/* One record on the "day" page: what it is, then correct it or remove it. */
.record-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.record-row__text { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 8px; }

/* An undo choice: the button, then what it means underneath. Side by side the
   two options read as one sentence, which is the opposite of the point. */
.undo-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.undo-option .form-field__hint { max-width: 46ch; }

/* A DGS interval in the weekly grid. Two records on one day stack, so the row
   grows rather than the times running together. */
.dgs-cell { padding: 4px 8px !important; }

.dgs-slot {
  display: block;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--code-offsite);
  color: var(--text);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.dgs-slot + .dgs-slot { margin-top: 3px; }
.dgs-slot:hover { outline: 1px solid var(--accent); }

/* "İmzalı formu yükle": a file input dressed as a button. The input itself is
   hidden rather than removed, so the keyboard and the label still reach it. */
.signed-upload { position: relative; overflow: hidden; cursor: pointer; }
.signed-upload input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* One checklist item: a mark, then what it is and why it is not ticked yet. */
.check-row {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.check-row__mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-label);
  font-size: 12px;
  font-weight: 700;
}

.check-row__mark.is-done { background: var(--accent-soft); color: var(--accent); }

.check-row__text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.check-row__text .muted { font-size: 12px; }

/* What is standing in the way, named rather than counted. */
.check-row__detail {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   Invoice line items (IP3 Step 4)
   -------------------------------------------------------------------------- */

/* Each item is a <tbody> of two rows. The decisions - what it was, what it
   cost, which category, in scope or not - are on the first, where the eye
   goes; quantity, unit, unit price and the two worked-out amounts are on the
   second. One flat row would need eleven input columns, which cannot fit
   beside the PDF - and the PDF staying beside the form is what lets a figure
   be checked against the page it came from. */
.table--lines { table-layout: fixed; width: 100%; }

.table--lines tbody + tbody td { border-top: 1px solid var(--border); }

.table--lines td { vertical-align: middle; padding-left: 6px; padding-right: 6px; }

.table--lines th { padding-left: 6px; padding-right: 6px; }

.lines__pick   { width: 26px; padding-right: 0 !important; }
.lines__no     { width: 46px; }
.lines__rate   { width: 58px; }
.lines__money  { width: 92px; }
.lines__select { width: 170px; }
.lines__del    { width: 32px; text-align: center; }

.table--lines .field { width: 100%; min-width: 0; padding-left: 7px; padding-right: 7px; }

/* The second line is subordinate, and looks it: a faint ground and smaller
   boxes, so the eye lands on the first line - the name, the amount and the two
   pickers - and only goes here when it needs to. */
.lines__meta td {
  padding-top: 2px;
  padding-bottom: 9px;
  border-top: none !important;
  background: var(--info-soft);
}

.lines__meta-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.lines__meta-field { display: flex; flex-direction: column; gap: 2px; width: 96px; }

.lines__meta .field { font-size: 12px; padding-top: 4px; padding-bottom: 4px; }

.lines__meta-field > span {
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.lines__badges {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-left: auto;
  align-self: center;
}

/* The scope is colour coded (plan §4.1), but colour is never the only signal:
   the select in the same row spells the value out. A <tbody> cannot carry a
   border of its own in a collapsed table, so the bar is drawn on the first
   cell of each of the item's rows. */
.lines__item td:first-child { border-left: 3px solid transparent; }
.lines__item--yes     td:first-child { border-left-color: var(--accent); }
.lines__item--no      td:first-child { border-left-color: var(--danger); }
.lines__item--unclear td:first-child { border-left-color: #D97706; }

.lines__tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}

.lines__tool { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.lines__tool .field--select { max-width: 150px; }

.lines__tool-label { font-size: 12.5px; color: var(--text-muted); }

.lines__tool-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
  max-width: 340px;
}

/* --------------------------------------------------------------------------
   Gelir-Gider Defteri (IP3 Step 7)
   -------------------------------------------------------------------------- */

/* Seven filters rather than the invoice list's six. */
.filter-bar--ledger {
  grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .filter-bar--ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Thirteen columns. Left to fit the page they squeeze, and a long company name
   - which is the normal shape of one in Turkey - breaks into five lines. A
   minimum width lets `.table-wrap` scroll instead, the same trade the
   fourteen-column invoice table makes. */
.table--ledger { min-width: 1180px; }

.table--ledger td, .table--ledger th { padding-left: 12px; padding-right: 12px; }

/* The scope, colour coded as plan §4.1 asks - and never colour alone: the
   cell prints the word as well, for colour blindness and for a black-and-white
   print of the Excel sheet's screen equivalent. */
.scope { font-weight: 500; }
.scope--yes     { color: var(--accent); }
.scope--no      { color: var(--danger); }
.scope--unclear { color: #B45309; }
.scope--mixed   { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Toplu Özet (IP3 Step 9)
   -------------------------------------------------------------------------- */

.filter-bar--summary {
  grid-template-columns: 160px 180px auto;
  align-items: center;
}

/* A row label is a label, not a column heading: `.table th` upcases and
   shrinks, which is right above a column and wrong beside a figure. */
.summary-table th[scope="row"] {
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: normal;
  min-width: 260px;
}

/* The two lines that are a prompt rather than a reading. Amber, and the label
   says "Kontrol Edilecek" as well - colour is never the only signal. */
.summary-table__attention td,
.summary-table__attention th { background: var(--warning-soft); }

.summary-table tfoot th,
.summary-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--navy, #0F1B3D);
}

.summary-table__total--in td  { color: var(--accent); }
.summary-table__total--out td { color: var(--danger); }

/* Chart.js keeps a canvas's aspect ratio by default and ignores the height
   attribute, which made the doughnut fill the column. The wrapper sets the
   height and the chart is told not to hold a ratio. */
.chart-box { position: relative; height: 260px; }

.summary-charts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .summary-charts { grid-template-columns: minmax(0, 1fr); }
  .filter-bar--summary { grid-template-columns: minmax(0, 1fr); }
}

/* A KPI that is a prompt rather than a reading (IP3 §6.6's "Kontrol
   Edilecek"). Amber, and the label says so as well. */
.kpi--attention { border-color: #FCD34D; background: var(--warning-soft); }
.kpi--attention .kpi__value { color: #B45309; }

/* --------------------------------------------------------------------------
   Adam-Ay matrix (IP4 Step 3)

   Not `.table--matrix`: the puantaj's grid sets `padding: 0` for 31 single
   letter columns, and these cells hold inputs. The sticky name column is
   shared, because that is the same job in both.
   -------------------------------------------------------------------------- */

.table--manmonth { font-size: 13px; }
.table--manmonth th,
.table--manmonth td { padding: 5px 8px; }
.table--manmonth tbody tr:nth-child(even) { background: var(--bg); }
.table--manmonth tbody tr:nth-child(even) .matrix__name { background: var(--bg); }
.table--manmonth thead .matrix__name { background: var(--bg); }
.table--manmonth tbody tr:hover { background: var(--accent-soft); }
.table--manmonth tbody tr:hover .matrix__name { background: var(--accent-soft); }

/* The second header row names the two sub-columns of each project. Quieter
   than the first, which carries the project itself. */
.table__subhead th {
  padding-top: 0 !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* A cell somebody types in. Narrow, right-aligned, and without the full
   field's padding - thirteen projects is a wide table already. */
.field--cell {
  width: 72px;
  padding: 4px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A figure the portal worked out rather than read. Quieter than a typed one,
   so the eye lands on the inputs first - the puantaj's rule that the ordinary
   cell should be the silent one. */
.cell--derived { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Over 100%: the row is tinted and the figure itself is marked, so colour is
   never the only signal - colour blindness, and black-and-white printing. */
.row--over { background: var(--danger-soft) !important; }
.row--over .matrix__name { background: var(--danger-soft) !important; }
.cell--over { font-weight: 600; color: var(--danger); }

.table--manmonth tfoot th {
  border-top: 2px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* A project's name is a name, not a column label: `.table th` uppercases, which
   turns "Örnek İkinci Proje" into shouting - the same fix `tbody .matrix__name`
   already carries for a person's name. */
.table--manmonth thead .col-project {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

/* Same reason on the project cards: the label is a project's name. */
.kpi__label--name { text-transform: none; letter-spacing: 0; }

.alert__list { margin: 6px 0 0; padding-left: 18px; }
.inline-form { display: inline; }
.filter-bar__label { font-size: 12px; color: var(--text-label); align-self: center; }


/* The DGS year stepper: two buttons with the year between them. Not a
   `.filter-bar`, which stretches its children into an input row. */
.year-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.year-nav__current { font-size: 16px; color: var(--text); }


/* The Hatırlatmalar counter. Drawn only when there is something in it, so the
   row does not reflow between loads for the sake of a zero. */
.nav-item__badge {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   FSMH & Kalite (İP5)
   -------------------------------------------------------------------------- */

/* Nerede sorgulanır: one official system per line, not a bullet list - these
   are links somebody clicks while checking a record against the registry, and
   the marker only adds noise. Everything else on this module borrows the
   portal's own classes (facts, grid-2, card__body); a screen with measurements
   of its own reads as a stranger. */
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list > li + li { margin-top: 12px; }

/* A KPI that is also a link - the Ana Panel's boxes. Every figure there leads
   to the list behind it, because a number somebody cannot follow up is
   decoration. It has to keep looking like a figure rather than like a link:
   the underline and the link colour would make a grid of eight boxes read as a
   paragraph of links. */
a.kpi {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

a.kpi:hover,
a.kpi:focus-visible {
  border-color: var(--accent);
}

/* Inside a card the grid is the card's last child, so its own bottom margin
   would double the card's padding. */
.card__body > .kpi-grid:last-child { margin-bottom: 0; }

/* A grid inside a card does not know how wide the card is - Ana Panel puts a
   four-box risk grid and a three-box verification grid side by side in a
   half-width card each. Fixed four columns squeezed the hint text into a
   column of single words. Measured in the browser, not guessed. */
.card__body > .kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}