/* ============================================================================
   DDPM-Portal · COMPONENTS  — reusable UI. Consumes tokens.css only.
   No hardcoded colors/sizes: everything is var(--token).
   ============================================================================ */

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: var(--surface-alt); color: var(--text);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--text-on-primary); }
.btn--primary:active { background: var(--primary-active); }

.btn--accent { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: var(--fw-semibold); }
.btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }

.btn--outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn--ghost:hover { background: var(--surface-alt); color: var(--text); }

.btn--danger { background: var(--danger); color: var(--color-white); border-color: var(--danger); }
.btn--danger:hover { background: var(--color-danger-600); filter: brightness(0.94); }

.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.btn--lg { padding: var(--space-3) var(--space-6); font-size: var(--fs-md); }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: var(--space-2); }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.card__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-strong); }
.card__body { padding: var(--space-5); }
.card__footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--divider);
  background: var(--surface-alt);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── KPI cards (dashboard) ─────────────────────────────────────────────── */
.kpi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi-card__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-medium); }
.kpi-card__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.1; margin-top: var(--space-2); }
.kpi-card__meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
.kpi-card--accent { border-top: 3px solid var(--accent); }
.kpi-card--primary { border-top: 3px solid var(--primary); }
.kpi-card--danger  { border-top: 3px solid var(--danger); }
.kpi-card--success { border-top: 3px solid var(--success); }
.kpi-card--warning { border-top: 3px solid var(--warning); }
/* Clickable KPI / hub cards (deep-link into the PM Sheet etc.) */
a.kpi-card, a.card { color: inherit; text-decoration: none; transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast); }
a.kpi-card:hover, a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--primary); }

/* ── Badges (status / priority) ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.15em 0.6em; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill); line-height: 1.5; white-space: nowrap;
  background: var(--surface-alt); color: var(--text);
}
/* Token-driven badge: pass --badge-color inline from the DB lookup's hex. */
.badge--dot::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--badge-color, var(--text-muted));
}
.badge--soft { background: color-mix(in srgb, var(--badge-color, var(--text-muted)) 14%, var(--surface)); color: color-mix(in srgb, var(--badge-color, var(--text-muted)) 75%, var(--text-strong)); }
.badge--solid { background: var(--badge-color, var(--text-muted)); color: var(--color-white); }

.badge--success { background: var(--success-soft); color: var(--color-success-600); }
.badge--warning { background: var(--warning-soft); color: var(--color-warning-600); }
.badge--danger  { background: var(--danger-soft);  color: var(--color-danger-600); }
.badge--info    { background: var(--info-soft);    color: var(--color-info-600); }
.badge--muted   { background: var(--surface-alt);  color: var(--text-muted); }

/* ── Tables ────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; }
.table thead th {
  background: var(--surface-alt); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
}
.table tbody tr { border-bottom: 1px solid var(--divider); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--color-teal-50); }
.table--striped tbody tr:nth-child(even) { background: var(--surface-alt); }
.table__row--overdue { background: var(--danger-soft); }
.table__row--overdue:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
/* Aging alert: open tasks 24–48h old (≥48h reuses the red --overdue class). */
.table__row--aging { background: var(--warning-soft); }
.table__row--aging:hover { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.form-field { margin-bottom: var(--space-4); }
.form-field__label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text); margin-bottom: var(--space-1); }
.form-field__label .req { color: var(--danger); }
.form-field__hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
.form-field__error { font-size: var(--fs-xs); color: var(--danger); margin-top: var(--space-1); }

.input, .select, .textarea {
  width: 100%; padding: var(--space-2) var(--space-3);
  font-size: var(--fs-base); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-slate-400); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.input::placeholder, .textarea::placeholder { color: var(--color-slate-400); }
.textarea { min-height: 6rem; resize: vertical; line-height: var(--lh-base); }
.input--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); }
.input--error, .select--error, .textarea--error { border-color: var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; }

.input-group { display: flex; gap: var(--space-2); align-items: center; }

/* ── Alerts / flash ────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  border: 1px solid transparent; font-size: var(--fs-base);
}
.alert > span:nth-child(2) { flex: 1; }
.alert__close {
  flex: none; background: none; border: 0; cursor: pointer; padding: 0 2px;
  color: inherit; opacity: .55; font-size: var(--fs-sm); line-height: 1.4;
}
.alert__close:hover { opacity: 1; }
.alert__icon { flex-shrink: 0; font-weight: var(--fw-bold); }
.alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--color-success-600); }
.alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--color-warning-600); }
.alert--danger  { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 30%, transparent);  color: var(--color-danger-600); }
.alert--info    { background: var(--info-soft);    border-color: color-mix(in srgb, var(--info) 30%, transparent);    color: var(--color-info-600); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); }
.tabs__tab {
  padding: var(--space-3) var(--space-4); font-weight: var(--fw-medium);
  color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab--active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(35,39,46,0.45);
  z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 32rem; z-index: var(--z-modal); max-height: 90vh; overflow: auto;
}
.modal__header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--divider); display: flex; justify-content: space-between; align-items: center; }
.modal__body { padding: var(--space-5); }
.modal__footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--divider); display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ── PM Sheet (inline-editable grid) ───────────────────────────────────── */
.sheet-cell { cursor: cell; position: relative; }
.sheet-cell:hover { background: var(--color-teal-50); box-shadow: inset 0 0 0 1px var(--primary-soft-border); }
.sheet-cell.is-editing { background: var(--surface); box-shadow: inset 0 0 0 2px var(--primary); padding: 0; }
.sheet-cell .sheet-editor { width: 100%; border: none; background: transparent; padding: var(--space-2) var(--space-3); font: inherit; color: inherit; }
.sheet-cell .sheet-editor:focus { outline: none; }
.sheet-cell textarea.sheet-editor { min-height: 4rem; resize: vertical; }
.table tbody tr.is-done > td:first-child { box-shadow: inset 3px 0 0 var(--success); }
.sheet-cell--saving { opacity: 0.5; }
/* Synced horizontal scrollbar shown ABOVE the grid (mirrors the table-wrap's bottom one). */
.table-scroll-top { overflow-x: auto; overflow-y: hidden; margin-bottom: var(--space-1); }
.table-scroll-top > div { height: 1px; }
/* PM Sheet: the wrap scrolls BOTH axes within the viewport so the sticky thead
   stays visible while scrolling rows (sticky works against the scroll parent). */
#sheetScroll { max-height: calc(100vh - 250px); overflow: auto; }
#sheetScroll thead th { z-index: 5; }
/* PM Sheet column sizing + wrapping: comments show in full (wrap, never clip);
   rows top-align so tall wrapped cells read cleanly. */
#sheetTable th, #sheetTable td { vertical-align: top; }
#sheetTable td[data-type="text"] { white-space: pre-line; min-width: 14rem; overflow-wrap: anywhere; }
#sheetTable th.th--wide { min-width: 20rem; }                /* Production */
#sheetTable th.th--narrow { width: 7rem; min-width: 7rem; }  /* Assign Date / Status / Completion */
#sheetTable .badge { white-space: normal; text-align: left; } /* badges may wrap in narrow cols */
/* "+" add-row button living inside the first header cell. */
.th-add {
  width: 22px; height: 22px; margin-right: var(--space-2); padding: 0;
  border: 1px solid var(--primary); border-radius: 50%; background: var(--primary);
  color: var(--text-on-primary); font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.th-add:hover { background: var(--accent); border-color: var(--accent); }
/* Open-activity affordance inside the Project Name cell. */
.sheet-open { margin-left: var(--space-1); color: var(--text-muted); text-decoration: none; font-weight: 600; }
.sheet-open:hover { color: var(--accent); }

/* Project-name typeahead (PM Sheet add-row modal + inline project cell). */
.typeahead { position: absolute; z-index: 1200; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); max-height: 16rem; overflow-y: auto; min-width: 12rem; }
.typeahead__item { padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--fs-sm); white-space: nowrap; }
.typeahead__item:hover { background: var(--color-teal-50); }
.typeahead__item--create { color: var(--accent); border-top: 1px solid var(--divider); }

/* Active-filter chips (rendered where the Clear button used to live). */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); font-size: var(--fs-xs); }
.chip__x { margin-left: 2px; color: var(--text-muted); text-decoration: none; font-weight: 700; line-height: 1; }
.chip__x:hover { color: var(--danger); }

/* ── Checklist ─────────────────────────────────────────────────────────── */
.checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.checklist__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); }
.checklist__item:hover { background: var(--surface-alt); }
.checklist__item input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--primary); }
.checklist__item--done label { text-decoration: line-through; color: var(--text-muted); }
.checklist__progress { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Activity timeline ─────────────────────────────────────────────────── */
.timeline { list-style: none; padding: 0; position: relative; }
.timeline__item { position: relative; padding: 0 0 var(--space-4) var(--space-6); }
.timeline__item::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--divider); }
.timeline__item:last-child::before { bottom: auto; height: 16px; }
.timeline__dot { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); z-index: 1; }
.timeline__meta { font-size: var(--fs-xs); color: var(--text-muted); }
.timeline__text { font-size: var(--fs-sm); }

/* ── Notification bell + panel ─────────────────────────────────────────── */
.bell { position: relative; background: none; border: none; cursor: pointer; padding: var(--space-2); border-radius: var(--radius-md); color: var(--text-muted); }
.bell:hover { background: var(--surface-alt); color: var(--text); }
.bell__count {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: var(--color-white); font-size: 10px; font-weight: var(--fw-bold);
  border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown);
}
.notif-item { display: block; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--divider); color: var(--text); }
.notif-item:hover { background: var(--surface-alt); text-decoration: none; }
.notif-item--unread { background: var(--primary-soft); }
.notif-item__time { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* ── Empty state ───────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-muted); }
.empty-state__icon { font-size: var(--fs-3xl); opacity: 0.4; margin-bottom: var(--space-3); }
.empty-state__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); margin-bottom: var(--space-2); }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pagination { display: flex; gap: var(--space-1); align-items: center; justify-content: center; padding: var(--space-4) 0; }
/* Three-zone bar: "Showing X–Y of Z" · page links · per-page selector. */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) 0; }
.pagination-bar .pagination { padding: 0; flex: 1; }
.pagination-bar__per { display: flex; align-items: center; gap: var(--space-2); }
.select--sm { padding: var(--space-1) var(--space-2); font-size: var(--fs-sm); }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 var(--space-2); display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); background: var(--surface); font-size: var(--fs-sm);
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.pagination .is-active { background: var(--primary); color: var(--color-white); border-color: var(--primary); }
.pagination .is-disabled { opacity: 0.4; pointer-events: none; }

/* ── Avatar ────────────────────────────────────────────────────────────── */
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex-shrink: 0;
}
.avatar--sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.avatar--accent { background: var(--accent-soft); color: var(--color-coral-700); }

/* ── Topbar: avatar dropdown + global search ───────────────────────────── */
button.topbar__user { background: none; border: 0; padding: var(--space-1); font: inherit; text-align: left; border-radius: var(--radius-md); }
button.topbar__user:hover { background: var(--surface-alt); }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1300;
  min-width: 11rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-1);
}
.dropdown-menu__item { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; }
.dropdown-menu__item:hover { background: var(--color-teal-50); color: var(--primary); }
.dropdown-menu__item--btn { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font: inherit; }

/* ── Styled popups (replace native alert/confirm) ──────────────────────── */
.toast-stack {
  position: fixed; top: calc(var(--topbar-h) + var(--space-3)); right: var(--space-4);
  z-index: 1600; display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 24rem; width: calc(100vw - 2 * var(--space-4));
}
.toast-stack .alert { box-shadow: var(--shadow-lg); }
.modal--confirm { max-width: 26rem; }
.modal--confirm .modal__body p { margin: 0; }

.global-search { flex: 1; max-width: 28rem; position: relative; }
.global-search .input { width: 100%; }
.typeahead__group { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--surface-alt); }
.typeahead__sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width: 900px) { .global-search { display: none; } }

/* ── Report: month-over-month deltas + insights ────────────────────────── */
.delta--good { color: var(--success); font-weight: var(--fw-semibold); }
.delta--bad  { color: var(--danger);  font-weight: var(--fw-semibold); }

.insight-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.insight {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-md);
  border-left: 3px solid var(--border); background: var(--surface-alt); font-size: var(--fs-sm);
}
.insight__icon {
  flex: none; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: 50%; font-size: var(--fs-xs); font-weight: 700; color: #fff; background: var(--text-muted);
}
.insight--warn { border-left-color: var(--danger);  background: var(--danger-soft); }
.insight--warn .insight__icon { background: var(--danger); }
.insight--good { border-left-color: var(--success); background: var(--success-soft); }
.insight--good .insight__icon { background: var(--success); }
.insight--info { border-left-color: var(--primary); }
.insight--info .insight__icon { background: var(--primary); }

/* ── Leaderboard: podium + ranked table ────────────────────────────────── */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.podium__place {
  flex: 1 1 12rem; max-width: 15rem; text-align: center;
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.podium__place--1 { order: 2; border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-10px); }
.podium__place--2 { order: 1; }
.podium__place--3 { order: 3; }
.podium__medal { font-size: 2rem; line-height: 1; margin-bottom: var(--space-2); }
.podium__name  { font-weight: var(--fw-semibold); margin-top: var(--space-2); }
.podium__score { font-size: var(--fs-2xl); font-weight: 800; color: var(--primary); line-height: 1.1; }
.leaderboard__top { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
@media (max-width: 640px) { .podium__place--1 { transform: none; } }