/* ==========================================================================
   NEC4 ECC Contractor Platform — dark "warm console" design system
   Dark surfaces with softer near-white text and lighter/teal accents.
   Single source of truth: every component reads the tokens below.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* surfaces — dark charcoal, slightly cooler than flat VS Code grey */
  --app-bg: #1b1d23;
  --surface: #24262e;
  --surface-2: #2c2f38;
  --surface-3: #343744;
  --hover: #393d4a;
  --border: #41454f;
  --border-soft: rgba(255, 255, 255, .08);
  /* text — softer near-whites, no harsh pure white */
  --text: #d7dce5;
  --text-strong: #f4f6fb;
  --text-muted: #9aa3b2;
  /* accent + status — lighter/warmer, less "developer tool" */
  --accent: #3aa6b8;        /* soft teal (primary) */
  --accent-strong: #43b8c9; /* lighter teal for links/active */
  --accent-hover: #5fcbd9;  /* hover lift */
  --accent-soft: rgba(58, 166, 184, .18);
  --accent-2: #b091e8;      /* light indigo (secondary accent) */
  --accent-3: #f0c674;      /* warm amber (emphasis) */
  --success: #5fc9a0;       /* warmer green */
  --danger: #f29a8a;        /* softer coral */
  --warning: #f0c674;       /* warm amber — more legible than old pale yellow */
  --info: #7aa9e8;          /* light indigo-blue */
  /* shape */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 4px 14px rgba(0, 0, 0, .4);

  /* ---- Bootstrap theme variable overrides (drives every component) ---- */
  --bs-body-bg: #1b1d23;
  --bs-body-color: #d7dce5;
  --bs-emphasis-color: #f4f6fb;
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-bg: var(--surface);
  --bs-primary: #3aa6b8;
  --bs-primary-rgb: 58, 166, 184;
  --bs-link-color: var(--accent-strong);
  --bs-link-hover-color: var(--accent-hover);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-card-bg: var(--surface);
  --bs-card-cap-bg: var(--surface-2);
  --bs-card-border-color: var(--border);
  --bs-list-group-bg: var(--surface);
  --bs-list-group-border-color: var(--border);
  --bs-dropdown-bg: var(--surface-2);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-link-color: var(--text);
  --bs-dropdown-link-hover-bg: var(--hover);
  --bs-modal-bg: var(--surface);
  --bs-modal-border-color: var(--border);
  --bs-nav-tabs-link-active-bg: var(--surface);
  --bs-nav-link-color: var(--text);
  --bs-nav-link-hover-color: var(--text-strong);
  --bs-input-bg: var(--surface-3);
  --bs-input-border: var(--border);
  --bs-heading-color: var(--text-strong);
  --bs-danger: var(--danger);
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-info: var(--info);
  --bs-warning-rgb: 240, 198, 116;
  --bs-danger-rgb: 242, 154, 138;
  --bs-success-rgb: 95, 201, 160;
  --bs-info-rgb: 122, 169, 232;

  --nec-sidebar-width: 250px;
  color-scheme: dark;
}

* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border); background-clip: content-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.9375rem;
  background: var(--app-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-strong); font-weight: 600; letter-spacing: -0.01em; }
.text-muted { color: var(--text-muted) !important; }
.text-body { color: var(--text) !important; }
.text-dark { color: var(--text-strong) !important; }

.font-mono, .mono { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; }

/* ---------- App shell / sidebar ---------- */
/* App shell is a .d-flex row: sidebar (fixed) + main column (flex-grow).
   min-width:0 on the main column lets it shrink so wide tab/table content
   never squeezes the sidebar below its fixed width. */
.d-flex > .flex-grow-1 { min-width: 0; }

.app-sidebar {
  width: var(--nec-sidebar-width);
  flex: 0 0 var(--nec-sidebar-width);   /* fixed width — never shrinks when main column content pushes */
  min-width: var(--nec-sidebar-width);
  background: var(--surface);
  border-right: 1px solid var(--border) !important;
}
.app-sidebar .navbar-brand { color: var(--text-strong); letter-spacing: .01em; }
.app-sidebar .nav-link {
  color: var(--text);
  border-radius: var(--radius-sm);
  margin: 2px 10px;
  padding: .5rem .65rem;
  font-weight: 500;
  font-size: .9rem;
  transition: background .12s ease, color .12s ease;
}
.app-sidebar .nav-link:hover { background: var(--hover); color: var(--text-strong); }
.app-sidebar .nav-link.active { background: var(--accent); color: #fff; }
.app-sidebar .nav-section {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); padding: 1rem 1.1rem .35rem; font-weight: 600;
}
@media (min-width: 992px) {
  .app-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

/* slim top bar */
.topbar, .navbar.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border) !important;
}

/* offcanvas (mobile sidebar) */
.offcanvas { background: var(--surface); color: var(--text); }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--text-strong);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.card-header.bg-primary { background: var(--accent) !important; color: #fff; border-bottom: none; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-primary, .btn-primary:focus {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-hover); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-strong); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--text-strong); --bs-btn-active-bg: var(--hover);
}
.btn-outline-secondary {
  --bs-btn-color: var(--text); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text-strong);
}
.btn-outline-dark, .btn-outline-light {
  --bs-btn-color: var(--text); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--hover); --bs-btn-hover-border-color: var(--border);
  --bs-btn-hover-color: var(--text-strong);
}
.btn-success { --bs-btn-bg: #2f7d62; --bs-btn-border-color: #2f7d62; --bs-btn-hover-bg: #35926b; --bs-btn-hover-border-color: #35926b; }
.btn-danger  { --bs-btn-bg: #b5433a; --bs-btn-border-color: #b5433a; --bs-btn-hover-bg: #c94e44; --bs-btn-hover-border-color: #c94e44; }
.btn-warning { --bs-btn-bg: #b8a85e; --bs-btn-border-color: #b8a85e; color: #1e1e1e; --bs-btn-hover-bg: #c9b86a; --bs-btn-hover-border-color: #c9b86a; }
.btn-light, .btn-white { --bs-btn-color: var(--text); --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--hover); --bs-btn-hover-color: var(--text-strong); }

/* ---------- Tables ---------- */
.table { --bs-table-color: var(--text); --bs-table-bg: transparent; color: var(--text); }
.table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-bottom-color: var(--border); }
.table thead th, .table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.table td { vertical-align: middle; border-bottom-color: var(--border-soft); }
.table tbody tr:hover { background: var(--hover); }
.table-light, .table-light th { background: var(--surface-2) !important; color: var(--text-muted) !important; }
.table > :not(caption) > * { background-color: transparent; }
.table-danger td { background-color: rgba(244, 135, 113, .1) !important; }
.table-success td { background-color: rgba(78, 201, 176, .1) !important; }
.table-warning td { background-color: rgba(220, 205, 170, .08) !important; }
.table-responsive { border-radius: var(--radius); }

/* ---------- Badges ---------- */
.badge { font-weight: 500; letter-spacing: .02em; padding: .4em .6em; border-radius: 6px; font-size: .9rem; }
.badge.bg-secondary { background: var(--surface-3) !important; color: var(--text); }
.badge.bg-info { background: rgba(86, 156, 214, .18) !important; color: var(--info); }
.badge.bg-warning { background: rgba(220, 205, 170, .16) !important; color: var(--warning); }
.badge.bg-danger  { background: rgba(244, 135, 113, .18) !important; color: var(--danger); }
.badge.bg-success { background: rgba(78, 201, 176, .16) !important; color: var(--success); }
.badge.bg-primary { background: var(--accent) !important; }
.badge.bg-light   { background: var(--surface-2) !important; color: var(--text); }
.badge.bg-body    { background: var(--surface-2) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.badge.text-dark  { color: var(--text) !important; }

/* FSM state colours */
.state-notified    { background: var(--surface-3); color: var(--text); }
.state-quoted      { background: var(--accent); color: #fff; }
.state-reviewing   { background: var(--info); color: #1e1e1e; }
.state-implemented { background: var(--success); color: #1e1e1e; }
.state-rejected    { background: var(--danger); color: #1e1e1e; }
.state-assumed     { background: var(--warning); color: #1e1e1e; }

/* ---------- Forms ---------- */
.form-control, .form-select, .form-control:disabled, .form-control[readonly] {
  background-color: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text-strong);
  border-radius: var(--radius-sm);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:focus, .form-select:focus {
  background-color: var(--surface-3);
  border-color: var(--accent);
  color: var(--text-strong);
  box-shadow: 0 0 0 .2rem var(--accent-soft);
}
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23d7dce5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); }
.form-label, label { font-weight: 500; font-size: .85rem; color: var(--text); }
/* Force field labels to block so margin-bottom applies — an inline <label>
   ignores vertical margins, which left each label crammed against its input. */
.form-label { display: block; margin-bottom: .5rem; }
.form-text, .mb-3 > small.text-muted { color: var(--text-muted); margin-top: .35rem; }
.input-group-text { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }

/* ---------- Dropdowns / modals / nav tabs ---------- */
.dropdown-menu { border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius-sm); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hover); color: var(--text-strong); }
.dropdown-divider { border-color: var(--border); }
.dropdown-header { color: var(--text-muted); }
.modal-content { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.modal-header { border-bottom-color: var(--border); }

.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { color: var(--text-muted); border: 1px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.nav-tabs .nav-link:hover { color: var(--text-strong); border-color: transparent; }
.nav-tabs .nav-link.active { background: var(--surface); color: var(--text-strong); border-color: var(--border); border-bottom-color: var(--surface); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--text-muted); }
.breadcrumb-item, .breadcrumb-item a { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }

.progress { background: var(--surface-3); border-radius: 6px; }
.progress-bar { background: var(--accent); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.alert-info    { background: rgba(86,156,214,.12); border-color: rgba(86,156,214,.35); color: #cfe3f5; }
.alert-success { background: rgba(78,201,176,.12); border-color: rgba(78,201,176,.35); color: #c7ebe0; }
.alert-warning { background: rgba(220,205,170,.12); border-color: rgba(220,205,170,.35); color: var(--warning); }
.alert-danger  { background: rgba(244,135,113,.12); border-color: rgba(244,135,113,.35); color: #f6cdbc; }
.alert-primary { background: var(--accent-soft); border-color: rgba(14,99,156,.4); color: #cfe1f0; }
.alert .btn-close { filter: invert(1) grayscale(1) brightness(1.4); }

/* ---------- Utilities / components ---------- */
.page-header { margin-bottom: 1.25rem; }
.page-header h1, .page-header h2 { margin-bottom: .15rem; }
.page-header .subtitle { color: var(--text-muted); font-size: .9rem; }

.stat-card .stat-icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text-strong); line-height: 1.1; }
.stat-card .stat-label { color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty-state .bi { font-size: 2rem; color: var(--surface-3); display: block; margin-bottom: .5rem; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
hr { border-color: var(--border); opacity: .6; }
.list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); }
code, pre { color: var(--text-strong); }
.text-primary { color: var(--accent-strong) !important; }
.bg-body, .bg-dark { background: var(--app-bg) !important; }

/* ---------- HTMX / dashboard bars ---------- */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.bar-track { height: 1.4rem; background: var(--surface-3); border-radius: .4rem; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: .4rem; transition: width .4s ease; display: flex; align-items: center; }
.bar-fill span { font-size: .72rem; color: #fff; padding-left: .5rem; font-weight: 600; }

/* ---------- Parse-status chip (Programme / ContractorReport / Boq) ---------- */
/* Inline self-polling status pill. The spinner runs only while pending; the
   terminal states (done/error) render without hx-trigger so polling stops. */
.parse-status {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25em .6em; border-radius: 999px;
  font-size: .85rem; font-weight: 500; line-height: 1.2;
  border: 1px solid var(--border-soft); white-space: nowrap;
}
.parse-status i { font-size: .9em; }
.parse-status .spinner-border { width: .85rem; height: .85rem; border-width: .15em; }
.parse-status__label { font-weight: 600; }
.parse-status__time { color: var(--text-muted); font-size: .78rem; font-family: 'JetBrains Mono', monospace; }
.parse-status__msg { color: var(--text-muted); font-size: .78rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.parse-status--pending { background: rgba(240, 198, 116, .12); color: var(--warning); border-color: rgba(240, 198, 116, .3); }
.parse-status--done { background: rgba(95, 201, 160, .12); color: var(--success); border-color: rgba(95, 201, 160, .3); }
.parse-status--error { background: rgba(242, 154, 138, .12); color: var(--danger); border-color: rgba(242, 154, 138, .3); }
/* Inside a dense table <td>, keep the chip tight. */
.table .parse-status { font-size: .8rem; padding: .2em .5em; }

.footer { font-size: .8rem; color: var(--text-muted); }

/* ==========================================================================
   OPERATOR CONSOLE — component system + atmosphere
   Distinctive: mono-forward data, uppercase tracked micro-labels, accent rails,
   hover lifts, staggered load. Layered on the dark base theme.
   ========================================================================== */

/* atmosphere: faint grid + top accent glow on the app shell */
body {
  background-color: var(--app-bg);
  background-image:
    radial-gradient(900px 360px at 78% -8%, rgba(58, 166, 184, .12), transparent 70%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
}

/* micro-typography */
.micro { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.mono, .font-mono { font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; }
h1, h2, h3 { letter-spacing: -0.02em; }

/* page header */
.page-header { margin-bottom: 1.5rem; }
.page-header h1, .page-header h2 { font-size: 1.6rem; font-weight: 700; }
.page-header .subtitle { color: var(--text-muted); font-size: .92rem; margin-top: .15rem; }
.identity-strip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }

/* chips & pills */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  padding: .28rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.chip-mono { font-family: 'JetBrains Mono', monospace; }
.chip-accent { background: var(--accent-soft); border-color: rgba(14,99,156,.45); color: #cfe1f0; }
.chip-success { background: rgba(78,201,176,.14); border-color: rgba(78,201,176,.4); color: var(--success); }
.chip-danger  { background: rgba(244,135,113,.14); border-color: rgba(244,135,113,.4); color: var(--danger); }
.chip-warning { background: rgba(220,205,170,.14); border-color: rgba(220,205,170,.4); color: var(--warning); }
.chip-info    { background: rgba(86,156,214,.14); border-color: rgba(86,156,214,.4); color: var(--info); }

/* buttons: clearer hierarchy + states */
.btn { transition: background .12s ease, border-color .12s ease, color .12s ease, transform .05s ease, box-shadow .12s ease; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.btn:active { transform: translateY(1px); }
.btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* stat card */
.stat-card {
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: 0; transition: opacity .15s ease; }
.stat-card:hover { border-color: var(--hover); transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid rgba(14,99,156,.3); }
.stat-card.is-warn .stat-icon { background: rgba(220,205,170,.14); color: var(--warning); border-color: rgba(220,205,170,.3); }
.stat-card.is-danger .stat-icon { background: rgba(244,135,113,.14); color: var(--danger); border-color: rgba(244,135,113,.3); }
.stat-card.is-success .stat-icon { background: rgba(78,201,176,.14); color: var(--success); border-color: rgba(78,201,176,.3); }
.stat-card .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 1.7rem; font-weight: 700; color: var(--text-strong); line-height: 1; letter-spacing: -0.02em; }
.stat-card .stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-top: .25rem; }
.stat-card .stat-foot { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }

/* section title with accent tick */
.section-title { display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: .85rem; }
.section-title::before { content: ""; width: 3px; height: 14px; background: var(--accent); border-radius: 2px; }

/* data table refinements */
.app-table thead th { background: transparent; border-bottom: 1px solid var(--border); padding: .55rem .9rem; }
.app-table tbody td { padding: .7rem .9rem; border-bottom: 1px solid var(--border-soft); }
.app-table tbody tr { transition: background .1s ease; }
.app-table tbody tr:hover { background: var(--hover); }
.app-table tbody tr:last-child td { border-bottom: none; }
.app-table .ref { font-family: 'JetBrains Mono', monospace; color: var(--text-strong); font-weight: 600; }
.app-table .num { font-family: 'JetBrains Mono', monospace; }

/* ==========================================================================
   UNIFIED TABLE STYLING — every table inside .tab-content and .card-body,
   and the audit page table, renders at the same cell size & padding as
   .app-table. Fixes the "variations tab text smaller than title column"
   inconsistency across FIDIC tabs / audit / any in-card table.
   ========================================================================== */
.tab-content table,
.card-body > .table-responsive > table,
main table.app-table,
main table.table {
  font-size: .9rem;
}
.tab-content table thead th,
.card-body > .table-responsive > table thead th {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: .55rem .9rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tab-content table tbody td,
.card-body > .table-responsive > table tbody td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--text);
}
.tab-content table tbody tr:hover,
.card-body > .table-responsive > table tbody tr:hover { background: var(--hover); }
.tab-content table tbody tr:last-child td,
.card-body > .table-responsive > table tbody tr:last-child td { border-bottom: none; }

/* In-tab FSM state badges: neutral turquoise-tinted, matching the tab badges. */
.tab-content .badge.bg-secondary {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  border: 1px solid rgba(58, 166, 184, .3);
}
.tab-content .badge.bg-info {
  background: rgba(122, 169, 232, .16) !important;
  color: var(--info) !important;
}


/* list row-card */
.row-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border-soft); text-decoration: none; color: var(--text); transition: background .12s ease; position: relative; }
.row-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: 0; transition: opacity .12s ease; }
.row-card:hover { background: var(--hover); color: var(--text); }
.row-card:hover::before { opacity: 1; }
.row-card:last-child { border-bottom: none; }
.row-card .row-title { color: var(--text-strong); font-weight: 600; }
.row-card .row-sub { color: var(--text-muted); font-size: .85rem; }

/* segmented pill tabs */
.tabbar { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1.1rem; flex-wrap: wrap; }
.tabbar > a, .tabbar > button { border: none; background: transparent; color: var(--text-muted); padding: .42rem .85rem; border-radius: 7px; font-size: .85rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; transition: background .12s ease, color .12s ease; }
.tabbar > a:hover, .tabbar > button:hover { color: var(--text-strong); }
.tabbar > a.active, .tabbar > button.active { background: var(--accent); color: #fff; }
.tabbar .badge { background: rgba(255,255,255,.12); }
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--accent); }

/* ==========================================================================
   TAB PALETTE — recolor tabs to turquoise + white/light-grey.
   Scoped to .nav-tabs only: badges & icons inside tabs lose their green/red
   semantic colours and adopt the calm accent palette. Semantic colours in
   tables, action buttons, and danger zones are untouched.
   ========================================================================== */
.nav-tabs .nav-link { color: var(--text-muted); }
.nav-tabs .nav-link:hover { color: var(--text-strong); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { color: var(--accent-strong); }

/* Tab count badges: neutral turquoise-tinted chips, never red/green/yellow. */
.nav-tabs .badge,
.nav-tabs .badge.bg-danger,
.nav-tabs .badge.bg-warning,
.nav-tabs .badge.bg-success,
.nav-tabs .badge.bg-secondary,
.nav-tabs .badge.bg-info,
.nav-tabs .badge.bg-primary {
  background: var(--accent-soft) !important;
  color: var(--accent-strong) !important;
  border: 1px solid rgba(58, 166, 184, .35);
}
/* Active tab's badge lifts to a solid turquoise. */
.nav-tabs .nav-link.active .badge {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent);
}

/* Tab icons: override Bootstrap .text-* utilities only inside tabs. */
.nav-tabs .text-success,
.nav-tabs .text-danger,
.nav-tabs .text-warning,
.nav-tabs .text-info {
  color: var(--accent) !important;
}
.nav-tabs .nav-link.active .text-success,
.nav-tabs .nav-link.active .text-danger,
.nav-tabs .nav-link.active .text-warning,
.nav-tabs .nav-link.active .text-info {
  color: var(--accent-strong) !important;
}


/* key/value list */
.kv { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem .9rem; align-items: baseline; margin: 0; }
.kv dt { color: var(--text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kv dd { margin: 0; color: var(--text-strong); }
.kv dd.mono { font-family: 'JetBrains Mono', monospace; }

/* panel */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.panel-header h6, .panel-header .panel-title { margin: 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; gap: .45rem; }
.panel-body { padding: 1rem; }

/* empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state .bi { font-size: 1.9rem; color: var(--surface-3); display: block; margin-bottom: .6rem; }

/* status bar */
.bar-track { height: 1.5rem; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2,.7,.3,1); display: flex; align-items: center; }
.bar-fill span { font-family: 'JetBrains Mono', monospace; font-size: .72rem; color: #fff; padding-left: .5rem; font-weight: 600; }

/* alert feed item */
.alert-item { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-bottom: 1px solid var(--border-soft); }
.alert-item:last-child { border-bottom: none; }
.alert-item .alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .5rem; flex: 0 0 8px; }
.alert-item.is-danger .alert-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(244,135,113,.18); }
.alert-item.is-warning .alert-dot { background: var(--warning); box-shadow: 0 0 0 3px rgba(220,205,170,.16); }

/* staggered reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .45s cubic-bezier(.2,.7,.3,1) both; }
  .reveal:nth-child(1){animation-delay:.02s} .reveal:nth-child(2){animation-delay:.06s}
  .reveal:nth-child(3){animation-delay:.10s} .reveal:nth-child(4){animation-delay:.14s}
  .reveal:nth-child(5){animation-delay:.18s} .reveal:nth-child(6){animation-delay:.22s}
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

select.form-select option { background: var(--surface-2); color: var(--text); }

/* ==========================================================================
   DASHBOARD v2 — portfolio strip + per-project instrument strips
   "Vehicle dashboard" concept: one row of compact gauges per project, with a
   traffic-light border derived from the worst open risk. Minimal info at a
   glance, scales to many projects without card sprawl.
   ========================================================================== */

/* ── Slim portfolio strip (replaces the old 4 stat cards + 3 breakdown panels) ── */
.portfolio-strip {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem 1rem; margin-bottom: 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: .82rem;
}
.portfolio-strip .ps-item { display: inline-flex; align-items: center; gap: .35rem; color: var(--text); white-space: nowrap; }
.portfolio-strip .ps-item .bi { color: var(--text-muted); font-size: .9rem; }
.portfolio-strip .ps-item.ps-danger { color: var(--danger); font-weight: 600; }
.portfolio-strip .ps-sep { width: 1px; height: 1rem; background: var(--border); }
.portfolio-strip .ps-spacer { flex: 1 1 auto; }
.portfolio-strip .ps-link { color: var(--accent-strong); text-decoration: none; cursor: pointer; }
.portfolio-strip .ps-link:hover { color: var(--accent-hover); }

/* ── Per-project instrument strip ── */
.gauge-strip {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--text-muted);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gauge-strip:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.gauge-strip.is-green  { border-left-color: var(--success); }
.gauge-strip.is-amber  { border-left-color: var(--warning); }
.gauge-strip.is-red    { border-left-color: var(--danger); }

/* strip header: traffic light + name + contract tag + status chip + reference */
.gs-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; flex-wrap: wrap; }
.gs-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gs-light { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; background: var(--text-muted); }
.gs-light.is-green { background: var(--success); box-shadow: 0 0 0 3px rgba(95,201,160,.16); }
.gs-light.is-amber { background: var(--warning); box-shadow: 0 0 0 3px rgba(240,198,116,.16); }
.gs-light.is-red   { background: var(--danger);   box-shadow: 0 0 0 3px rgba(242,154,138,.18); }
.gs-name { font-weight: 600; color: var(--text-strong); font-size: 1rem; }
.gs-tag  { font-size: .68rem; opacity: .85; }
.gs-ref  { font-size: .75rem; color: var(--text-muted); }

/* gauges row */
.gs-gauges {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
@media (max-width: 768px) { .gs-gauges { grid-template-columns: repeat(2, 1fr); gap: .9rem .8rem; } }

.gauge { min-width: 0; }
.gauge-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .15rem; }
.gauge-value { font-family: 'JetBrains Mono', monospace; font-size: .9rem; font-weight: 600; line-height: 1.2; margin-bottom: .35rem; }
.gauge-track { height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.gauge-fill  { height: 100%; border-radius: 6px; transition: width .6s cubic-bezier(.2,.7,.3,1); }
.gauge-fill.tone-success { background: var(--success); }
.gauge-fill.tone-warning { background: var(--warning); }
.gauge-fill.tone-danger  { background: var(--danger); }
.gauge-fill.tone-info    { background: var(--info); }
.gauge-fill.tone-muted   { background: var(--surface-3); }

/* gauge value tone colors (uses Bootstrap .text-* overrides already in this file) */
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }


/* ─── Contractual clock (date-driven timeline) ───
 * Horizontal milestone strip rendered on CE detail and FIDIC claim detail
 * pages. One .clock-step per milestone; status modifier colours the dot.
 * Colour mapping matches the chip / severity tokens so the timeline reads
 * consistently with the rest of the app:
 *   done=success green   due=warning amber   overdue=danger coral   upcoming=muted
 */
.contract-clock {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0 -.5rem;
  padding: .5rem;
}
.clock-step {
  flex: 1 1 0;
  min-width: 140px;
  position: relative;
  padding: .75rem .75rem .75rem 2rem;
  border-left: 2px solid var(--border);
}
.clock-step:first-child { border-left-color: var(--success); }
.clock-step .clock-dot {
  position: absolute;
  left: -.4rem;
  top: .9rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--surface-3);
  border: 2px solid var(--border);
}
.clock-step .clock-label { font-size: .85rem; font-weight: 600; color: var(--text); }
.clock-step .clock-clause { font-size: .7rem; }
.clock-step .clock-date { font-size: .8rem; color: var(--text-muted); margin: .15rem 0 .35rem; }
.clock-step-done .clock-dot { background: var(--success); border-color: var(--success); }
.clock-step-done { border-left-color: var(--success); }
.clock-step-due .clock-dot { background: var(--warning); border-color: var(--warning); }
.clock-step-overdue .clock-dot { background: var(--danger); border-color: var(--danger); }
.clock-step-overdue { border-left-color: var(--danger); }
.clock-step-upcoming .clock-dot { background: var(--surface-3); border-color: var(--accent); }