/* =========================================================================
   AI Project Benefit Dashboard — corporate blue / grey theme
   ========================================================================= */
:root {
  /* Retinted to match the Home page's palette (templates/dashboard/home.html):
     same navy, but the blue accent, neutrals and radii now follow Home's
     warmer, less blue-cast tone instead of the old cool blue-grey. */
  --navy: #0f2c4d;
  --navy-700: #123a63;
  --blue: #1e4fa0;
  --blue-600: #17408a;
  --blue-soft: #dce6f5;
  --ink: #16181d;
  --slate: #4b5158;
  --muted: #6b7178;
  --line: #e7e6e2;
  --line-strong: #d8d6d1;
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --success: #1f7a44;
  --success-soft: #e5f3ea;
  --warn: #a45a09;
  --warn-soft: #fbf0e1;
  --danger: #b3261e;
  --danger-soft: #fbe9e8;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(23, 64, 138, .12);
  --shadow-sm: 0 4px 10px rgba(23, 64, 138, .08);
  font-synthesis-weight: none;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; color: var(--navy); font-weight: 700; }
h1 { font-size: 1.7rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.03rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- Sidebar --------------------------------------------------- */
/* Retinted to match the Home page's pill nav (templates/dashboard/home.html):
   light surface + ink text + a blue-soft "active" pill, instead of the old
   solid navy panel. Shared by every page including Benefit Entry. */
.layout { display: flex; align-items: stretch; min-height: 100vh; }
.sidebar {
  flex: none;
  width: 232px;
  background: var(--surface);
  color: var(--ink);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 16px;
  box-shadow: 1px 0 0 var(--line);
}
.shell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; }
.brand:hover { text-decoration: none; }
.sidebar .brand {
  padding: 6px 10px 16px;
  margin-bottom: 8px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2f7fd6, #1e4fa0);
  font-size: .82rem;
  letter-spacing: .04em;
  flex: none;
}
.brand-mark-logo {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px;
  flex: none;
}
.brand-mark-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { font-size: 1.02rem; white-space: nowrap; }
.sidebar .brand-text { white-space: normal; font-size: .95rem; line-height: 1.25; }
.mainnav { display: flex; flex-direction: column; gap: 4px; }
.mainnav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .92rem;
}
.mainnav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.mainnav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.mainnav a { position: relative; transition: background .15s, color .15s, box-shadow .15s; }
/* Active item: layered look — soft gradient fill, inner
   top highlight and a drop shadow. */
.mainnav a.active {
  color: var(--blue-600);
  background: linear-gradient(180deg, #e8effa 0%, var(--blue-soft) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 4px 10px -2px rgba(23, 64, 138, .22);
}
.mainnav a.active svg { opacity: 1; stroke-width: 2.1; }

.nav-section-title {
  margin: 12px 0 2px;
  padding: 0 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-section-title:first-child { margin-top: 0; }

.sidebar-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-user {
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-logout { flex: none; }
.sidebar .btn-ghost { background: var(--surface-2); color: var(--ink); }
.sidebar .btn-ghost:hover { background: var(--line); }

.avatar-circle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .02em;
  flex: none;
}

@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    box-shadow: 0 1px 0 var(--line);
  }
  .sidebar .brand { padding: 0; margin: 0; border-bottom: 0; }
  .mainnav { flex-direction: row; flex-wrap: wrap; margin-left: auto; gap: 6px; }
  .mainnav a { padding: 8px 12px; }
  .nav-section-title { display: none; }
}
/* Sidebar collapse toggle (state kept on <html class="sidebar-collapsed">) */
.sidebar-toggle {
  position: fixed;
  top: 18px;
  left: 190px;
  z-index: 50;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--slate);
  cursor: pointer;
  transition: background .15s, color .15s, left .15s;
}
.sidebar-toggle:hover { background: var(--blue-soft); color: var(--blue); }
.sidebar-toggle svg { width: 18px; height: 18px; }
.sidebar .brand { padding-right: 44px; }
.sidebar-collapsed .sidebar { display: none; }
.sidebar-collapsed .sidebar-toggle { left: 14px; box-shadow: var(--shadow-sm); }
.sidebar-collapsed .page { padding-top: 64px; }
@media (max-width: 900px) {
  .sidebar-toggle { display: none; }
  .sidebar-collapsed .sidebar { display: flex; }
  .sidebar-collapsed .page { padding-top: 28px; }
}
.usernav { display: flex; align-items: center; gap: 10px; }
.user-chip {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
}
.user-chip:hover { text-decoration: none; background: rgba(255, 255, 255, .18); }
.pill {
  display: inline-block;
  min-width: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue-600);
  color: #fff;
  font-size: .74rem;
  text-align: center;
  font-weight: 600;
}

/* ---------- Layout --------------------------------------------------- */
.page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.page-head p { margin: 0; }
.stack > * + * { margin-top: 22px; }
.grid { display: grid; gap: 18px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* ---------- Cards -------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }
.card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-head h3 { margin: 0; }
.card-body { padding: 20px; }

/* KPI tiles */
.kpi { padding: 18px 20px; }
.kpi .label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
}
.kpi .value {
  font-size: 1.72rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi .sub { font-size: .84rem; color: var(--slate); margin-top: 2px; }
.kpi.accent { background: linear-gradient(160deg, #123a63, #0f2c4d); border-color: #0f2c4d; }
.kpi.accent .label { color: rgba(255, 255, 255, .72); }
.kpi.accent .value { color: #fff; }
.kpi.accent .sub { color: rgba(255, 255, 255, .8); }
.kpi.is-actual .value { color: var(--success); }

/* Project detail page's Remark — a distinct bordered box under the
   Project Information field list, rather than a bare paragraph, so it
   reads as its own callout even when empty. */
.remark-box {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--surface-2);
}
.remark-box-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #5f5f5f;
  font-weight: 700;
  margin-bottom: 6px;
}
.remark-box p { margin: 0; font-size: .88rem; color: #76787b; line-height: 1.5; }

/* ---------- Buttons --------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:disabled { cursor: default; opacity: .8; }
.btn.is-saving { cursor: progress; }
.btn-spinner {
  width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-sm { padding: 7px 12px; font-size: .85rem; }
.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover { background: #123469; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-700); }
.btn-outline { background: #fff; border-color: var(--line-strong); color: var(--navy); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue-600); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .2); }
.usernav .btn-ghost { border-color: rgba(255, 255, 255, .18); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Forms -------------------------------------------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > label, .form label { font-weight: 600; font-size: .88rem; color: var(--slate); }
.input, input[type=text], input[type=email], input[type=password],
input[type=number], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(29, 78, 216, .18);
  border-color: var(--blue-600);
}
.helptext, .helptext * { font-size: .8rem; color: var(--muted); }
ul.errorlist { margin: 4px 0 0; padding: 0; list-style: none; color: var(--danger); font-size: .84rem; }
.form-card { max-width: 460px; margin: 40px auto; }
.checkline { display: flex; align-items: center; gap: 10px; }
.checkline input { width: auto; }
.checkline label { margin: 0; }

/* ---------- Filter bar ---------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  position: sticky;
  top: 0;
  z-index: 20;
}
.filters .field { gap: 4px; min-width: 150px; }
.filters .field label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Multi-select dropdown (checkboxes + Select all) --------- */
.msel { position: relative; }
.msel-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.msel-btn:hover { border-color: var(--blue); }
.msel.open .msel-btn { border-color: var(--blue-600); outline: 3px solid rgba(29, 78, 216, .18); }
.msel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-caret { width: 16px; height: 16px; flex: none; color: var(--muted); transition: transform .15s; }
.msel.open .msel-caret { transform: rotate(180deg); }
.msel-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 40;
}
.msel.open .msel-panel { display: block; }
.filters .field .msel-opt,
.be-name-msel .msel-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.msel-opt:hover { background: var(--surface-2); }
.msel-opt input { width: auto; margin: 0; }
/* Needs to out-specificity ".filters .field .msel-opt { display:flex }"
   above, or [hidden] never actually hides the row. */
.filters .field .msel-opt[hidden],
.be-name-msel .msel-opt[hidden] { display: none; }
.msel-all { border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 9px; font-weight: 600; }
.msel-search {
  display: block;
  width: 100%;
  padding: 7px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: .85rem;
  position: sticky;
  top: 0;
  background: #fff;
}

.month-range { display: flex; align-items: center; gap: 6px; }
.month-range select { width: auto; min-width: 84px; }
.month-range-sep { color: var(--muted); }

/* ---------- Tables ------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th {
  background: var(--surface-2);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
table.data tbody tr:last-child td, table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--blue-soft); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .strong { font-weight: 600; color: var(--navy); }

/* Sortable column header: label + a small icon — a static "⇅" when the
   column isn't the active sort, a filled arrow in the accent color when
   it is, so the currently-sorted column reads at a glance. */
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
}
.sort-link:hover { color: var(--navy); text-decoration: none; }
.sort-icon { font-size: .8em; color: var(--line-strong); }
.sort-link:hover .sort-icon { color: var(--muted); }
.sort-link.is-active { color: var(--blue-600); }
.sort-link.is-active .sort-icon { color: var(--blue-600); }
table.data th.num .sort-link { justify-content: flex-end; }

/* ---------- Tracking KPI wide table -------------------
   5 categories (Hard/Loss/Time/Cost/Realized) x 12 months x Plan+Actual,
   plus a YTD column each — 133 columns if all shown at once, which is what
   made the table unreadable. A tab bar above the table (.kpi-tabs) picks
   at most one category's 12-month detail to show at a time (see app.js
   initKpiTableToggles) so the table opens on a manageable ~14 columns; the
   YTD summary per category stays visible regardless of which tab is open.
   The Project column stays frozen on the left so you always know which row
   you're looking at. */
:root {
  --violet: #6c4fb6;
  --violet-soft: #efe9fb;
  --teal: #0f9d8f;
  --teal-soft: #e3f6f3;
}

.kpi-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }

/* Tab bar: one tab per category, colored to match its accent so the active
   tab's color carries straight through to the group header it opens. */
.kpi-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.kpi-tab {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--slate);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  padding-left: 26px;
}
.kpi-tab::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tab-color, var(--muted));
}
.kpi-tab.cat-hard { --tab-color: var(--blue); }
.kpi-tab.cat-loss { --tab-color: var(--violet); }
.kpi-tab.cat-time { --tab-color: var(--teal); }
.kpi-tab.cat-cost { --tab-color: var(--warn); }
.kpi-tab.cat-realized { --tab-color: var(--success); }
.kpi-tab:hover { border-color: var(--tab-color, var(--blue)); color: var(--ink); }
.kpi-tab[aria-selected="true"] {
  background: var(--tab-color, var(--blue));
  border-color: var(--tab-color, var(--blue));
  color: #fff;
}
.kpi-tab[aria-selected="true"]::before { background: #fff; }

.kpi-table table.data { font-size: .84rem; }
.kpi-table th, .kpi-table td { padding: 9px 12px; white-space: nowrap; }

/* Summary column headers (Project, Plan Total Benefit (MB/Y), ...) wrap
   onto up to 2 lines at a fixed width instead of forcing the column as
   wide as the longest label on one line. */
.kpi-table th.kpi-head {
  white-space: normal;
  max-width: 118px;
  line-height: 1.3;
  vertical-align: bottom;
}
.kpi-table th.kpi-head .sort-link { display: inline; }
.kpi-table th.kpi-head .sort-icon { margin-left: 4px; }

/* Project name: clamp to 2 lines instead of stretching the frozen column
   to fit the longest project name in the list — hover shows the full name
   via the native title tooltip. */
.kpi-table th:first-child, .kpi-table td.kpi-frozen { width: 220px; max-width: 220px; }
.kpi-table td.kpi-frozen .kpi-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.kpi-table td.kpi-frozen .kpi-name-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kpi-table th.kpi-group {
  text-align: center;
  border-left: 1px solid var(--line);
  border-top: 3px solid transparent;
  background: var(--surface-2);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--slate);
}
.kpi-table th.kpi-group.cat-hard { border-top-color: var(--blue); }
.kpi-table th.kpi-group.cat-loss { border-top-color: var(--violet); }
.kpi-table th.kpi-group.cat-time { border-top-color: var(--teal); }
.kpi-table th.kpi-group.cat-cost { border-top-color: var(--warn); }
.kpi-table th.kpi-group.cat-realized { border-top-color: var(--success); }

/* A category's whole column block — group header, monthly detail, and its
   YTD column alike — is hidden until its tab is the active one. Previously
   only the monthly cells were tab-controlled, which left every category's
   YTD column visible all the time; with no monthly detail to fill the gap
   between them, the 5 YTD columns collapsed together into one confusing
   cluster of numbers with barely any header to tell them apart. Now
   there's nothing category-related on screen until you pick a tab. */
.kpi-table .kpi-col,
.kpi-table th.kpi-group,
.kpi-table th.kpi-ytd,
.kpi-table td.kpi-ytd { display: none; }
.kpi-table.cat-hard-open .kpi-col-hard,
.kpi-table.cat-hard-open th.kpi-group.cat-hard,
.kpi-table.cat-hard-open th.kpi-ytd.cat-hard,
.kpi-table.cat-hard-open td.kpi-ytd.cat-hard,
.kpi-table.cat-loss-open .kpi-col-loss,
.kpi-table.cat-loss-open th.kpi-group.cat-loss,
.kpi-table.cat-loss-open th.kpi-ytd.cat-loss,
.kpi-table.cat-loss-open td.kpi-ytd.cat-loss,
.kpi-table.cat-time-open .kpi-col-time,
.kpi-table.cat-time-open th.kpi-group.cat-time,
.kpi-table.cat-time-open th.kpi-ytd.cat-time,
.kpi-table.cat-time-open td.kpi-ytd.cat-time,
.kpi-table.cat-cost-open .kpi-col-cost,
.kpi-table.cat-cost-open th.kpi-group.cat-cost,
.kpi-table.cat-cost-open th.kpi-ytd.cat-cost,
.kpi-table.cat-cost-open td.kpi-ytd.cat-cost,
.kpi-table.cat-realized-open .kpi-col-realized,
.kpi-table.cat-realized-open th.kpi-group.cat-realized,
.kpi-table.cat-realized-open th.kpi-ytd.cat-realized,
.kpi-table.cat-realized-open td.kpi-ytd.cat-realized { display: table-cell; }

.kpi-table th.kpi-sub, .kpi-table td.kpi-sub { font-size: .74rem; padding: 7px 9px; }
.kpi-table .kpi-plan { color: var(--muted); }
.kpi-table td.kpi-act { color: var(--ink); font-weight: 600; }
.kpi-table th.kpi-act, .kpi-table td.kpi-act { background: var(--surface-2); }
.kpi-table .kpi-zero { color: var(--line-strong); font-weight: 400; }

.kpi-table th.kpi-ytd, .kpi-table td.kpi-ytd { font-weight: 700; border-right: 1px solid var(--line); }
.kpi-table th.kpi-ytd.cat-hard, .kpi-table td.kpi-ytd.cat-hard { background: var(--blue-soft); }
.kpi-table th.kpi-ytd.cat-loss, .kpi-table td.kpi-ytd.cat-loss { background: var(--violet-soft); }
.kpi-table th.kpi-ytd.cat-time, .kpi-table td.kpi-ytd.cat-time { background: var(--teal-soft); }
.kpi-table th.kpi-ytd.cat-cost, .kpi-table td.kpi-ytd.cat-cost { background: var(--warn-soft); }
.kpi-table th.kpi-ytd.cat-realized, .kpi-table td.kpi-ytd.cat-realized { background: var(--success-soft); }

.kpi-table th:first-child, .kpi-table td.kpi-frozen {
  position: sticky;
  left: 0;
  background: var(--surface);
  box-shadow: 2px 0 0 var(--line);
}
.kpi-table th:first-child { z-index: 3; }
.kpi-table td.kpi-frozen { z-index: 1; }

/* Each project gets a clearly bordered row rather than zebra banding —
   more breathing room on the always-visible summary cells, a heavier
   divider between rows than the default table, so one project's data
   doesn't blur into the next even across a very wide table. */
.kpi-table td.kpi-frozen,
.kpi-table td:nth-child(2),
.kpi-table td:nth-child(3),
.kpi-table td:nth-child(4),
.kpi-table td:nth-child(5),
.kpi-table td:nth-child(6),
.kpi-table td:nth-child(7),
.kpi-table td:nth-child(8),
.kpi-table td:nth-child(9) { padding-top: 13px; padding-bottom: 13px; }
.kpi-table table.data tbody tr td { border-bottom: 1px solid var(--line-strong); }
.kpi-table table.data tbody tr:hover { background: var(--blue-soft); }
.kpi-table table.data tbody tr:hover td.kpi-frozen { background: var(--blue-soft); }

/* Scrollable table frame instead of Prev/Next pagination: the whole
   filtered list renders at once into a fixed-height box the user scrolls
   with the mouse wheel, header pinned to the top of that box the whole
   time. Sticking the <thead> as a unit (rather than each <th>) keeps the
   two header rows (summary + monthly sub-header) in their normal relative
   order without needing to hardcode a per-row top offset. */
.kpi-table-scroll { max-height: 72vh; overflow-y: auto; }
.kpi-table-scroll thead { position: sticky; top: 0; z-index: 4; }
.kpi-table-scroll thead th:first-child { z-index: 5; }

/* ---------- Badges ----------------------------------- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-grey { background: #ecebe7; color: var(--slate); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-green { background: var(--success-soft); color: var(--success); }
.badge-amber { background: var(--warn-soft); color: var(--warn); }
.badge-red { background: var(--danger-soft); color: var(--danger); }

/* ---------- Charts ---------------------------------- */
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 340px; }

/* Plain HTML legend for "showValues" bar/line charts (makeGroupedBar /
   makeLine), replacing Chart.js's own canvas-drawn legend. Chart.js's
   built-in legend and the barValueLabelsPlugin's value bubbles both claim
   the same reserved strip above the plot area, and no combination of
   legend/layout padding fully separates them for every bar height — an
   HTML element sitting outside the canvas can't ever overlap canvas-drawn
   content, so this is the one fix that actually holds. */
.chart-legend {
  position: absolute;
  top: 2px;
  right: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .78rem;
  color: var(--slate);
  z-index: 2;
  pointer-events: none;
}
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }

/* ---------- Flash messages ------------------------- */
.messages { max-width: 1240px; margin: 16px auto 0; padding: 0 24px; display: grid; gap: 10px; }
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
}
.flash-success { border-color: #bfe3cd; background: var(--success-soft); color: #14532d; }
.flash-error { border-color: #f0c3c0; background: var(--danger-soft); color: #7f1d1d; }
.flash-info, .flash-debug { border-color: #c3d6ef; background: var(--blue-soft); color: #1e3a5f; }
.flash-warning { border-color: #ecd4b0; background: var(--warn-soft); color: #7c3a04; }

/* ---------- Chart drill-down modal -------------------------------- */
body.modal-open { overflow: hidden; }

.chart-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.chart-modal[hidden] { display: none; }
.chart-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 30, 50, .45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.chart-modal-panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: min(1040px, 100%);
  height: min(720px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chart-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.chart-modal-head h3 { margin: 0; }
.chart-modal-close {
  border: none;
  background: none;
  font-size: 1rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 6px;
  border-radius: 6px;
}
.chart-modal-close:hover { color: var(--ink); background: var(--surface-2); }
.chart-modal-body {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  flex: 1 1 auto;
  min-height: 0;
}
.chart-modal-list { padding: 16px 20px; overflow-y: auto; min-height: 0; }
.chart-modal-detail { border-left: 1px solid var(--line); padding: 20px; overflow-y: auto; min-height: 0; }
@media (max-width: 720px) {
  .chart-modal-body { grid-template-columns: 1fr; overflow-y: auto; }
  .chart-modal-detail { border-left: 0; border-top: 1px solid var(--line); overflow-y: visible; }
}

.cm-list-title { font-weight: 700; color: var(--navy); font-size: .9rem; margin-bottom: 10px; }
.cm-project {
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.cm-project:hover { background: var(--surface-2); }
.cm-project.is-selected { background: var(--blue-soft); border-color: var(--blue); }
.cm-project .name { font-weight: 600; font-size: .9rem; }
.cm-project .meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.cm-hint { color: var(--muted); font-size: .82rem; margin-top: 6px; }

/* Project detail pane — right side of the completion drill-down popup */
.cm-detail-title { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0 0 4px; }
.cm-detail-sub { color: var(--muted); font-size: .82rem; margin: 0 0 20px; }
.cm-detail-sub a { font-weight: 600; }

.cm-detail-section { margin-bottom: 22px; }
.cm-detail-section:last-child { margin-bottom: 0; }
.cm-detail-section h4 {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.cm-kv { margin: 0; display: grid; grid-template-columns: 42% 58%; }
.cm-kv dt { padding: 8px 0; color: var(--muted); font-size: .8rem; border-bottom: 1px solid var(--line); }
.cm-kv dd { padding: 8px 0; margin: 0; font-size: .86rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.cm-kv dt:last-of-type, .cm-kv dd:last-of-type { border-bottom: 0; }

/* Project detail popup's free-text Remark, from Project.remark */
.cm-remark {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: pre-wrap;
}

.cm-benefit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .84rem;
}
.cm-benefit-row + .cm-benefit-row { margin-top: 6px; }
.cm-benefit-row .label { color: var(--slate); font-weight: 700; flex: none; }
.cm-benefit-row .vals { color: var(--muted); text-align: right; }
.cm-benefit-row .vals b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-benefit-row.is-actual { background: #e9f5ef; }
.cm-benefit-row.is-actual .label { color: var(--success); }
.cm-benefit-row.is-actual .vals b { color: var(--success); }

.cm-remark-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 20px;
  font-size: .86rem;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.cm-remark-box.is-empty { color: var(--muted); font-style: italic; }

/* ---------- Benefit Entry ---------------------------------- */
.row-clickable { cursor: pointer; }
.row-clickable:hover td { background: var(--surface-2); }

/* "Over Plan Project" momentum line — the month-over-month jump that got a
   project onto the list, shown under its name and again in the popup.
   ".down" is the "Under Plan Project" mirror — a decline, so red instead
   of green. */
.momentum-badge { color: var(--success); font-weight: 600; font-size: .78rem; margin-top: 2px; }
.momentum-badge.down { color: var(--danger); }

/* "Under Plan Project" Delayed tab — days overdue on the plan start claim
   date, shown as a pill instead of a momentum line since there's no
   month-over-month figure to report. */
.delay-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
  font-size: .74rem;
}

/* "Over Plan Project" tab bar: one card-style tab per benefit metric,
   doubling as a mini stat row (each card shows how many projects qualify)
   so switching tabs also gives an at-a-glance comparison across metrics.
   Accent colors match the Tracking KPI page's category colors. */
.op-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.op-tab {
  --tab-color: var(--blue);
  --tab-tint: var(--blue-soft);
  flex: 1 1 170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.op-tab-hard { --tab-color: var(--blue); --tab-tint: var(--blue-soft); }
.op-tab-loss { --tab-color: var(--violet); --tab-tint: var(--violet-soft); }
.op-tab-time { --tab-color: var(--teal); --tab-tint: var(--teal-soft); }
.op-tab-realized { --tab-color: var(--success); --tab-tint: var(--success-soft); }
.op-tab-delayed { --tab-color: var(--danger); --tab-tint: var(--danger-soft); }
.op-tab:hover { border-color: var(--tab-color); transform: translateY(-1px); }
.op-tab.active { border-color: var(--line-strong); border-top-color: var(--tab-color); background: var(--tab-tint); }
.op-tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  font-weight: 600;
  font-size: .86rem;
}
.op-tab-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--tab-color);
  flex: none;
}
.op-tab.active .op-tab-label { color: var(--ink); }
.op-tab-count {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.op-tab.active .op-tab-count { color: var(--tab-color); }

/* "Plan 100% / Plan [75%] / Actual" monthly summary table — one per tab,
   sitting between the filter bar and the project list on the Over Plan /
   Under Plan pages (see _metric_summary_table.html). Plan [75%] is a
   minimum-acceptable target (75% of Plan 100%), shown bracketed under
   each Plan figure. */
.ss-panel { margin: 18px 0; }
.ss-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.ss-table { width: 100%; border-collapse: collapse; background: #fff; font-size: .86rem; }
.ss-table th, .ss-table td { padding: 10px 14px; text-align: center; white-space: nowrap; }
.ss-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-bottom: 0;
}
.ss-table tbody th, .ss-table tbody td:first-child { text-align: left; }
.ss-table tbody td:first-child { font-weight: 700; }
.ss-table .ss-plan { background: var(--surface-2); }
.ss-table .ss-plan td, .ss-table .ss-actual td { font-weight: 700; border-bottom: 1px solid var(--line); }
.ss-table .ss-sub { font-size: .72rem; font-weight: 400; color: var(--muted); margin-top: 1px; }
.ss-table td.ss-total, .ss-table .ss-plan td.ss-total, .ss-table .ss-actual td.ss-total {
  background: var(--line);
  font-weight: 800;
}
.ss-table tbody td:not(.ss-label) { font-variant-numeric: tabular-nums; }

/* Same fix as the Tracking KPI table: wrap wide headers onto 2 lines and
   clamp a long project name instead of both forcing the column wide. */
.op-table th.op-head { white-space: normal; max-width: 130px; vertical-align: bottom; line-height: 1.3; }
.op-table td.op-name-col, .op-table th.op-name-col { width: 240px; max-width: 240px; }
.op-table .op-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* Over/On/Under Plan tables: same "no pagination, scroll the box instead"
   pattern as the Tracking KPI table (.kpi-table-scroll) — the whole
   filtered list renders at once into a fixed-height frame the user
   scrolls with the mouse wheel, header pinned to the top of that box. */
.op-table-scroll { max-height: 65vh; overflow-y: auto; }
.op-table thead { position: sticky; top: 0; z-index: 2; }


.chart-modal-body.single-col {
  grid-template-columns: 1fr;
  padding: 20px;
  overflow-y: auto;
  min-height: 0;
}

/* Tracking KPI project list: navy header, clickable rows that open the
   monthly-detail popup (#tk-modal). */
.tk-list table.data thead th,
.tk-list table.data thead th:first-child { background: var(--navy); color: #fff; }
.tk-list table.data thead th .sort-link,
.tk-list table.data thead th .sort-icon { color: #fff; }
.tk-list .tk-row { cursor: pointer; }
.tk-list .tk-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
#tk-modal .kpi-toolbar { margin: 0 0 8px; }
#tk-modal-overview { margin-top: 20px; }
.tk-month-table { margin-top: 12px; overflow-x: auto; }
.tk-month-table table.data { font-size: .8rem; }
.tk-month-table th, .tk-month-table td { padding: 7px 9px; white-space: nowrap; }
.tk-month-table tr.is-actual td { background: var(--surface-2); font-weight: 600; }

.benefit-entry-project {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* JS toggles these with el.hidden — .field's/.field-row's own `display`
   would otherwise win over the browser's default [hidden]{display:none}
   rule (same specificity pitfall fixed for .msel-opt earlier). */
.field[hidden] { display: none; }
.field-row[hidden] { display: none; }

/* MB/M monthly grid — one Hard/Loss/Time/Cost box per month. */
.month-grid-wrap { padding: 12px; }
.month-grid {
  display: grid;
  grid-template-columns: 56px repeat(4, minmax(72px, 1fr));
  gap: 6px 10px;
  align-items: center;
  min-width: 460px;
}
.month-grid-head {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 700;
  padding-bottom: 4px;
}
.month-grid-label { font-size: .85rem; font-weight: 600; color: var(--slate); }
.month-grid input { width: 100%; margin: 0; }

.entry-mode-field ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.entry-mode-field li { display: flex; }
.entry-mode-field label { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.entry-mode-field input[type=radio] { width: auto; }

/* ---------- Landing page --------------------------- */
.hero {
  background: linear-gradient(150deg, #0f2c4d 0%, #163a63 55%, #1e4fa0 130%);
  color: #fff;
  border-radius: 18px;
  padding: 56px 48px;
  overflow: hidden;
  position: relative;
}
.hero h1 { color: #fff; font-size: 2.3rem; max-width: 18ch; }
.hero p { color: rgba(255, 255, 255, .86); font-size: 1.08rem; max-width: 54ch; }
.hero .btn-row { margin-top: 26px; }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; }
.feature-list .dot {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .8rem;
}
.stat-strip { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 34px; }
.stat-strip .s .n { font-size: 1.5rem; font-weight: 700; color: #fff; }
.stat-strip .s .t { font-size: .82rem; color: rgba(255, 255, 255, .72); }

/* Home page (00_data/layout.png) — top bar + two-column tile grid, Home page only */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 28px;
  background: var(--navy);
}
.topbar-brand { display: flex; align-items: center; }
.topbar-logo {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  flex: none;
}
.topbar-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.topnav { display: flex; align-items: center; gap: 32px; }
.topnav a { color: #fff; font-weight: 600; opacity: .85; }
.topnav a:hover, .topnav a.active { opacity: 1; text-decoration: none; }
.topnav-more { color: rgba(255, 255, 255, .7); letter-spacing: .12em; }

.page.page-home {
  max-width: 1680px;
  padding: 64px 48px 96px;
}

/* Benefit Entry's project table has too many columns for the default
   1240px page width to fit without horizontal scroll — give it more room. */
.page.page-benefit-entry,
.page.page-dash,
.page.page-aiad-pms {
  max-width: 1680px;
}
/* Fluid scale, scoped to this page only — everything here grows/shrinks
   smoothly with the viewport instead of jumping at fixed breakpoints, same
   approach as the Home page's own <style> block. */
.page-benefit-entry {
  /* Scales continuously between a 900px and a 2200px-wide viewport (typical
     laptop to a big external monitor) — below/above that it just holds at
     the min/max. Values picked so the difference is actually visible, not
     just a couple of px (a previous pass maxed out by ~850px, so anything
     wider than that looked identical — this covers the realistic range
     people actually resize/switch monitors across instead). */
  --be-space-x: clamp(16px, 4.92px + 1.231vw, 32px);
  --be-space-y: clamp(24px, 7.38px + 1.846vw, 48px);
  --be-card-pad: clamp(16px, 7.69px + 0.923vw, 28px);
  --be-cell-y: clamp(8px, 3.85px + 0.462vw, 14px);
  --be-cell-x: clamp(10px, 4.46px + 0.615vw, 18px);
  --be-fs-table: clamp(0.82rem, 0.682rem + 0.246vw, 1.02rem);
  --be-fs-h1: clamp(1.5rem, 0.946rem + 0.985vw, 2.3rem);
}
.page-benefit-entry.page {
  padding-top: var(--be-space-y);
  padding-bottom: var(--be-space-y);
  padding-left: var(--be-space-x);
  padding-right: var(--be-space-x);
}
.page-benefit-entry .ov-title { font-size: var(--be-fs-h1); }
.page-benefit-entry .card-pad,
.page-benefit-entry .card-head,
.page-benefit-entry .card-body { padding: var(--be-card-pad); }
.page-benefit-entry table.data th,
.page-benefit-entry table.data td {
  padding: var(--be-cell-y) var(--be-cell-x);
  font-size: var(--be-fs-table);
}

/* Tab bar switching between the Benefit Entry section's "All Projects"
   list and its "This Month" shortlist — plain underline tabs, each a real
   link (full page nav, no JS), so it's obvious at a glance which one is
   showing and that the other is a click away. */
.be-tabs { display: flex; gap: 32px; border-bottom: 1px solid var(--line); margin: 14px 0 20px; }
.be-tab {
  padding: 10px 2px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.be-tab:hover { color: var(--ink); text-decoration: none; }
.be-tab.active { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); }

/* ---- Benefit Entry: toolbar + BU pills + card grid (image-7 layout) ---- */
.be-toolbar { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.be-name-msel { flex: 1 1 320px; max-width: 420px; margin: 0; }
.be-search {
  flex: 1 1 320px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.be-search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.be-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: .95rem; color: var(--ink); font-family: inherit; }
.be-select, .be-reset {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 12px 18px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.be-reset:hover, .be-select:hover { background: var(--surface-2); }

.be-note { margin: 2px 0 18px; font-size: .92rem; }
.be-bu-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.be-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.be-pill:hover { background: var(--surface-2); }
.be-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.be-pill-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 999px;
  background: rgba(15, 24, 42, .08);
  font-size: .78rem; font-weight: 700;
}
.be-pill.active .be-pill-count { background: rgba(255, 255, 255, .22); color: #fff; }

.be-group { margin-bottom: 28px; }
.be-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.be-group-title { display: flex; align-items: center; gap: 12px; }
.be-bu-chip {
  display: inline-grid; place-items: center;
  padding: 4px 10px; border-radius: 8px;
  background: var(--blue-soft); color: var(--blue);
  font-weight: 700; font-size: .82rem;
}
.be-group-name { font-weight: 600; color: var(--slate); font-size: 1rem; }

.be-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.be-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .2s ease, transform .15s ease, border-color .15s ease;
}
.be-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: transparent; }
/* Completed / Completed-Pilot projects get a faint green wash */
.be-card.is-completed { background: #eef8f1; border-color: #cfe8d8; }
.be-card-body { flex: 1 1 auto; }
.be-card-title { margin: 0 0 4px; font-size: 1.02rem; color: var(--navy); }
.be-card-owner { color: var(--muted); font-size: .88rem; margin-bottom: 14px; }
.be-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.be-chip {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: .8rem;
  color: var(--muted);
}
.be-chip b { color: var(--ink); font-weight: 700; }
.be-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 14px;
}
.be-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.be-stat-l { font-size: .7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.be-stat-v { font-size: .9rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.be-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.be-status { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.be-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.be-status.is-completed { color: var(--success); background: var(--success-soft); }
.be-status.is-pending { color: var(--warn); background: var(--warn-soft); }
.be-status.is-exploring { color: var(--blue); background: var(--blue-soft); }
.be-status.is-cancelled { color: var(--danger); background: var(--danger-soft); }
.be-status.is-other { color: var(--slate); background: var(--surface-2); }
.be-action { color: var(--blue); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.be-card:hover .be-action { text-decoration: underline; }
.be-empty { padding: 30px; text-align: center; }

@media (max-width: 900px) { .be-cards { grid-template-columns: 1fr; } }
.home-title {
  text-align: center;
  font-size: 2.6rem;
  margin: 0 0 40px;
}
.home-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
  min-height: 420px;
}
.home-stack { display: flex; flex-direction: column; gap: 20px; }
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  border-radius: 28px;
  background: var(--surface);
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 44, 77, .06), 0 18px 40px -22px rgba(15, 44, 77, .35);
}
a.tile {
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
}
a.tile:hover {
  box-shadow: 0 4px 10px -2px rgba(15, 44, 77, .16), 0 30px 60px -24px rgba(15, 44, 77, .45);
  transform: translateY(-3px);
  text-decoration: none;
}
a.tile:active { transform: translateY(-1px); }
.tile-main .tile-label { font-size: 1.4rem; font-weight: 700; color: var(--navy); }
.home-stack .tile { flex: 1; min-height: 96px; }
.tile-placeholder {
  box-shadow: 0 1px 2px rgba(15, 44, 77, .04), 0 10px 24px -18px rgba(15, 44, 77, .25);
  color: var(--muted);
}
.tile-placeholder .ft-badge {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
@media (max-width: 860px) {
  .home-grid { grid-template-columns: 1fr; }
  .tile-main { min-height: 260px; }
}
@media (max-width: 640px) {
  .page.page-home { padding: 40px 20px 64px; }
  .topbar { padding: 10px 16px; }
  .topnav { gap: 18px; }
}

/* ---------- Detail page ---------------------------- */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }

/* Grid items stretch to the row's full height by default, but a column's
   own cards still only take their natural (shorter) height, leaving a gap
   below the last one whenever the other column is taller — visible on the
   project detail page, where "Project Information" is shorter than the
   two stacked charts beside it. Growing that last card's Remark box to
   fill the leftover space closes the gap without the card looking
   artificially padded. */
.detail-grid > .stack { display: flex; flex-direction: column; }
.detail-grid > .stack > .card:last-child { flex: 1 1 auto; display: flex; flex-direction: column; }
.detail-grid > .stack > .card:last-child > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.detail-grid > .stack > .card:last-child .remark-box { flex: 1 1 auto; }
dl.kv { margin: 0; display: grid; grid-template-columns: 40% 60%; }
dl.kv dt { padding: 8px 0; color: var(--muted); font-size: .84rem; border-bottom: 1px solid var(--line); }
dl.kv dd { padding: 8px 0; margin: 0; font-size: .9rem; border-bottom: 1px solid var(--line); }

.scorebar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 4px; }
.scorebar > span { display: block; height: 100%; background: var(--blue-600); }

/* ---------- Pagination ---------------------------- */
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pager a, .pager span {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: .86rem;
  color: var(--slate);
}
.pager .current { background: var(--navy); color: #fff; border-color: var(--navy); }

.inline-form { display: inline; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* =========================================================================
   "Overall AI Project" front-page dashboard
   ========================================================================= */
.ov-title { font-size: 1.9rem; color: var(--navy); margin: 0; letter-spacing: -.01em; }
.ov-sub { color: var(--muted); font-size: .82rem; font-weight: 600; }

/* Rhythm: every block on the page is one of these rows, 16px apart. */
.dash-row { display: grid; gap: 16px; margin-top: 16px; }
.dash-row.r-2 { grid-template-columns: 1fr 1fr; }
.dash-row.r-wide-left { grid-template-columns: 1.2fr 1fr; }
.dash-row.r-wide-right { grid-template-columns: 1fr 1.2fr; }
@media (max-width: 1024px) {
  .dash-row.r-2, .dash-row.r-wide-left, .dash-row.r-wide-right { grid-template-columns: 1fr; }
}
/* Cards sitting in a row stretch to equal height, body fills the slack. */
.dash-row > .card {
  display: flex;
  flex-direction: column;
  /* Without this, a grid item's default min-width:auto sizes it to fit a
     wide child (e.g. a many-column table) instead of the grid track,
     blowing the whole row — and the page — out past its own container. */
  min-width: 0;
}
.dash-row > .card > .card-body,
.dash-row > .card > .table-wrap { flex: 1 1 auto; }

/* KPI count strip */
.ov-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 560px) { .ov-kpis { grid-template-columns: repeat(2, 1fr); } }
.ov-kpi {
  border-radius: var(--radius);
  padding: 18px 16px;
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
.ov-kpi .n { font-size: 2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ov-kpi .t { font-size: .78rem; margin-top: 8px; opacity: .92; font-weight: 600; letter-spacing: .02em; }
.ov-kpi.k1 { background: linear-gradient(150deg, #0f2c4d, #123a63); }
.ov-kpi.k2 { background: linear-gradient(150deg, #123a63, #1e4fa0); }
.ov-kpi.k3 { background: linear-gradient(150deg, #1e4fa0, #2f7fd6); }
.ov-kpi.k4 { background: linear-gradient(150deg, #2f7fd6, #6fb2e8); }
.ov-kpi.k5 { background: linear-gradient(150deg, #6b7280, #a3a9b3); }

/* Benefit realized — three KPI tiles (Plan FY · Plan YTD · Actual YTD) */
.br-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .br-tiles { grid-template-columns: 1fr; } }
.br-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.br-tile .eyebrow {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--muted);
}
.br-tile .eyebrow b { color: var(--slate); }
.br-tile .sub-label { font-size: .78rem; font-weight: 600; color: var(--slate); margin-top: 4px; }
.br-tile .big {
  font-size: 1.9rem; font-weight: 800; color: var(--navy); line-height: 1.05;
  font-variant-numeric: tabular-nums; margin-top: 6px;
}
.br-tile .big .unit { font-size: .82rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.br-tile .ach {
  align-self: flex-start;
  margin-top: 6px; padding: 2px 9px; border-radius: 999px;
  font-size: .76rem; font-weight: 700;
  background: var(--success-soft); color: var(--success);
}
.br-tile .ach.under { background: var(--warn-soft); color: var(--warn); }
.br-tile .split {
  display: flex; gap: 16px; margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--line); font-size: .82rem;
}
.br-tile .split span { color: var(--muted); }
.br-tile .split b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.br-tile.is-actual { background: #e9f5ef; border-color: #bfe3cd; }
.br-tile.is-actual .big { color: var(--success); }
.br-tile.is-actual .split { border-top-color: #bfe3cd; }

.ov-chart { position: relative; height: 260px; }
.ov-chart.tall { height: 360px; }

/* "i" info icon + hover/focus tooltip explaining how a number or chart is
   calculated (see templates/dashboard/_info_tip.html). Pure CSS, no JS —
   :focus-within so keyboard tab focus opens it as well as mouse hover. */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--muted); cursor: help; }
.info-tip .info-icon { width: 15px; height: 15px; display: block; }
.info-tip:hover, .info-tip:focus { color: var(--blue); outline: none; }
.info-tip-bubble {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy);
  color: #fff;
  font-size: .74rem;
  font-weight: 400;
  line-height: 1.45;
  padding: 9px 11px;
  border-radius: 8px;
  width: max-content;
  max-width: 260px;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 40;
  pointer-events: none;
}
.info-tip-bubble.wide { max-width: 340px; }
.field.is-disabled { opacity: .5; }
/* Left-anchored variant — bubble grows to the right of the icon so it can't
   clip off the left edge (used for the wide Status legend near a panel edge). */
.info-tip-bubble.left { left: 0; transform: translateX(0) translateY(4px); }
.info-tip:hover .info-tip-bubble.left,
.info-tip:focus .info-tip-bubble.left,
.info-tip:focus-within .info-tip-bubble.left { transform: translateX(0) translateY(0); }
.info-tip-bubble.left::after { left: 13px; transform: none; }
.info-tip-list { margin: 0; padding-left: 16px; list-style: disc; }
.info-tip-list li { margin: 0 0 4px; }
.info-tip-list li:last-child { margin-bottom: 0; }
.info-tip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble, .info-tip:focus-within .info-tip-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Impact panel — grey base layer holding the chart card + stacked plan/actual
   tiles, so the white pieces read as a raised layer above it. */
.impact-panel {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.impact-chart { margin: 0; }
.impact-tiles { display: flex; flex-direction: column; gap: 12px; }
.impact-tiles .br-tile { flex: 1 1 0; justify-content: center; box-shadow: var(--shadow-sm); }
@media (max-width: 1024px) {
  .impact-panel { grid-template-columns: 1fr; }
}

/* ---------- Fiscal Year page --------------------------------------- */
.fy-kpi-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
@media (max-width: 720px) { .fy-kpi-cols { grid-template-columns: 1fr; } }
.fy-kpi-col .br-tiles { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
@media (max-width: 520px) { .fy-kpi-col .br-tiles { grid-template-columns: 1fr; } }
.fy-kpi-head {
  margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--line);
  font-size: .95rem;
}
.fy-kpi-head.cat-hard { color: var(--blue); border-bottom-color: var(--blue); }
.fy-kpi-head.cat-loss { color: var(--violet); border-bottom-color: var(--violet); }

.fy-table thead th:first-child { width: 260px; }
.fy-team-row { cursor: pointer; background: var(--surface-2); user-select: none; }
.fy-team-row:hover { background: var(--blue-soft); }
.fy-toggle-icon {
  display: inline-block; width: 14px; text-align: center;
  color: var(--muted); font-weight: 700;
}
.fy-platform-row td:first-child { padding-left: 34px; color: var(--muted); }
.fy-total-row td {
  font-weight: 700; color: var(--navy);
  border-top: 2px solid var(--line-strong); background: var(--surface-2);
}

/* ---------- Auth pages (Sign in / Sign up) --------------------------
   Full-bleed navy gradient background (the same one the split-screen
   version used for its left panel) with a single centered form card —
   .page-auth strips the shared .page's max-width/padding for this page. */
.page-auth {
  max-width: none;
  padding: 0;
  min-height: 100vh;
}
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: var(--bg);
}

/* Left: navy brand panel, same gradient + glow as the AIAD PMS hero */
.auth-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 64px clamp(32px, 6vw, 96px);
  color: #fff;
  background: linear-gradient(135deg, #0f2c4d 0%, #163a63 45%, #1e4fa0 120%);
}
.auth-brand-glow {
  position: absolute;
  width: 520px; height: 520px;
  right: -160px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 170, 255, .35), transparent 65%);
  pointer-events: none;
}
.auth-brand::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  left: -140px; bottom: -160px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
}
.auth-brand-inner { position: relative; max-width: 480px; }
.auth-eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 18px;
}
.auth-brand-title {
  font-size: clamp(2.2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 18px;
  color: #fff;
}
.auth-brand-sub { color: rgba(255, 255, 255, .78); font-size: 1.02rem; margin: 0 0 32px; }
.auth-brand-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-brand-points li {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; color: rgba(255, 255, 255, .9);
}
.auth-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #7fb2ff;
  box-shadow: 0 0 0 4px rgba(127, 178, 255, .2);
  flex: none;
}

/* Right: form */
.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.auth-form-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 40px 36px;
  animation: auth-card-in .45s ease both;
}
.auth-form-card .field { margin-bottom: 16px; }
.auth-form-card input[type="text"],
.auth-form-card input[type="email"],
.auth-form-card input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-form-card input:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.auth-form-card .btn-primary { padding-top: 12px; padding-bottom: 12px; font-size: .95rem; }
.auth-form-card .errorlist {
  list-style: none; margin: 6px 0 0; padding: 0;
  color: var(--danger); font-size: .82rem;
}
.auth-form-card > form > .errorlist {
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { padding: 40px 28px; }
  .auth-brand-points { display: none; }
  .auth-brand-sub { margin-bottom: 0; }
}

/* Full-screen overlay shown while the auth page is loading/navigating —
   fades out on arrival and fades back in on submit/link click so the
   redirect to the next page doesn't flash an unstyled page. */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #0b2038 0%, #123a63 55%, #1e4fa0 130%);
  opacity: 1;
  transition: opacity .35s ease, visibility .35s ease;
}
.page-transition-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-transition-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.auth-form-head { text-align: center; margin-bottom: 26px; }
.auth-form-brand {
  display: inline-block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.auth-form-head h2 { margin-bottom: 4px; }
.auth-switch { text-align: center; margin-top: 18px !important; }
.btn-block { width: 100%; }

/* Card footer — "See all" links under a table */
.card-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  text-align: right;
}

/* =========================================================================
   AIAD PMS 2026 page
   ========================================================================= */
/* ---- Hero header (styled after the user's mockup — brand navy/blue,
   not the mockup's purple) ---- */
.aiad-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f2c4d 0%, #163a63 45%, #1e4fa0 120%);
  border-radius: 22px;
  padding: 30px 34px 24px;
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(15, 44, 77, .6);
}
.aiad-hero-glow {
  position: absolute;
  top: -42%;
  right: -5%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 170, 255, .5) 0%, rgba(30, 79, 160, .22) 45%, rgba(30, 79, 160, 0) 70%);
  pointer-events: none;
}
.aiad-hero-top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.aiad-eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .72);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.aiad-title {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  margin: 0 0 16px;
}
.aiad-group-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  margin: 0;
}
.aiad-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #ff5a4d;
  box-shadow: 0 0 0 4px rgba(255, 90, 77, .22);
}
.aiad-hero-meta { text-align: right; flex: none; }
.aiad-hero-logo { font-weight: 800; font-size: 1.5rem; letter-spacing: .05em; color: #fff; }
.aiad-hero-logo span { color: #ffb020; }
.aiad-asof { margin-top: 10px; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .78); }

.aiad-hero-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 26px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  overflow: hidden;
}
.aiad-strip-item { padding: 16px 22px; border-left: 1px solid rgba(255, 255, 255, .12); }
.aiad-strip-item:first-child { border-left: none; }
.aiad-strip-label { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .7); margin-bottom: 6px; }
.aiad-strip-val { font-size: 1.5rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.aiad-strip-val span { font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .6); margin-left: 4px; }

.aiad-hero .aiad-cards { position: relative; margin-top: 26px; }
.aiad-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.aiad-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #b7bcc6;
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 24, 42, .06), 0 8px 18px -12px rgba(15, 24, 42, .28);
  transition: box-shadow .2s ease, transform .15s ease, border-color .15s ease;
}
.aiad-card:hover {
  transform: translateY(-3px);
  border-color: #8ea0c4;
  box-shadow: 0 2px 6px rgba(15, 24, 42, .08), 0 18px 30px -14px rgba(15, 24, 42, .42);
}
.aiad-card:hover .aiad-weight { background: var(--blue-soft); color: var(--blue); }
.aiad-card h3 {
  font-size: .98rem;
  font-weight: 600;
  margin: 0 96px 18px 0;
  color: #1b2430;
  line-height: 1.3;
}
.aiad-weight {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: .72rem;
  font-weight: 600;
  color: #3a3f47;
  background: #c3c7d0;
  padding: 5px 11px;
  border-radius: 8px;
}
.aiad-metrics { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.aiad-metrics > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.aiad-metrics dt { color: #6b7178; font-size: .84rem; }
.aiad-metrics dt::after { content: " :"; }
.aiad-metrics dd {
  margin: 0;
  font-weight: 700;
  color: #16181d;
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

/* ---- metric tab pills ---- */
.aiad-metric-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 8px; }
.aiad-pill {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--slate);
  border-radius: 12px;
  padding: 12px 26px;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.aiad-pill:hover { background: var(--surface-2); }
.aiad-pill.active { background: var(--blue-soft); border-color: transparent; color: var(--blue); }

/* ---- KPI table blocks (inline) ---- */
.aiad-kpi-block { margin-top: 30px; }
.aiad-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aiad-section-title { font-size: 1.15rem; margin: 0; }
.aiad-view-switch { display: flex; gap: 8px; flex-wrap: wrap; }
.aiad-view-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.aiad-view-btn:hover { background: var(--surface-2); }
.aiad-view-btn.active { background: var(--blue-soft); border-color: transparent; color: var(--blue); }

.aiad-subtabs { display: flex; gap: 6px; margin-bottom: 10px; }
.aiad-subtabs button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--slate);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
}
.aiad-subtabs button.active { background: var(--gold-soft); border-color: transparent; color: var(--warn); }

.aiad-table-host {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  overflow: auto;
}
.page-aiad-pms .filters { margin-bottom: 24px; }
.aiad-pop-summary { margin-bottom: 18px; }
.aiad-status-tabs { margin: 0 0 14px; }
.op-tab-st-over { --tab-color: var(--success); --tab-tint: var(--success-soft); }
.op-tab-st-on { --tab-color: var(--blue); --tab-tint: var(--blue-soft); }
.op-tab-st-under { --tab-color: var(--warn); --tab-tint: var(--gold-soft); }
.op-tab-st-delayed { --tab-color: var(--danger); --tab-tint: var(--danger-soft); }
.aiad-list-scroll { max-height: 520px; overflow-y: auto; }
.aiad-loading, .aiad-error { padding: 40px; text-align: center; color: var(--muted); }

@media (max-width: 1100px) {
  .aiad-cards { grid-template-columns: repeat(2, 1fr); }
  .aiad-hero-strip { grid-template-columns: repeat(2, 1fr); }
  .aiad-strip-item:nth-child(3) { border-left: none; }
  .aiad-strip-item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 760px) {
  .aiad-cards { grid-template-columns: 1fr; }
  .aiad-hero-strip { grid-template-columns: 1fr; }
  .aiad-strip-item { border-left: none; }
  .aiad-strip-item + .aiad-strip-item { border-top: 1px solid rgba(255, 255, 255, .12); }
  .aiad-hero-top { flex-direction: column; }
  .aiad-hero-meta { text-align: left; }
  .aiad-kpi-head { align-items: flex-start; }
  .aiad-view-switch { width: 100%; }
  .aiad-view-btn { flex: 1 1 auto; text-align: center; }
}