/* Layout: fixed sidebar + top bar + content column; sidebar becomes an off-canvas drawer below 992px.
   Light theme on :root; dark theme in the [data-bs-theme="dark"] block at the end. */
:root {
  /* Verz brand: orange #F47936, slate text #344054 / #101828, Inter */
  --ink: #101828;
  --ink-2: #344054;
  --ink-3: #667085;
  --line: #e4e7ec;
  --canvas: #f6f7f9;
  --surface: #ffffff;
  --brand: #f47936;
  --brand-2: #d9612a;
  --brand-ink: #b4501a;
  --brand-soft: #fef0e7;
  --side: #ffffff;
  --side-ink: #344054;
  --font-head: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --radius: 10px;
  --bs-primary: #f47936;
  --bs-primary-rgb: 244, 121, 54;
  --bs-link-color: #b4501a;
  --bs-link-color-rgb: 180, 80, 26;
  --bs-link-hover-color: #8f3f14;
  --bs-link-hover-color-rgb: 143, 63, 20;
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink-2);
  --bs-border-color: var(--line);
  color-scheme: light;
}

body { background: var(--canvas); color: var(--ink-2); font-family: var(--font-body); font-size: 14.5px; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--ink); }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .card-title { font-family: var(--font-head); letter-spacing: -0.01em; text-wrap: balance; }
.text-muted { color: var(--ink-3) !important; }
.small-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--ink-3); }
.tabular, .table td { font-variant-numeric: tabular-nums; }

.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-2); --bs-btn-hover-border-color: var(--brand-2); --bs-btn-active-bg: var(--brand-2); --bs-btn-active-border-color: var(--brand-2); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); font-weight: 600; }
.btn-outline-primary { --bs-btn-color: var(--brand-ink); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); }
.btn-light { --bs-btn-bg: #eef1f4; --bs-btn-border-color: #e2e7ec; }
.form-control:focus, .form-select:focus { border-color: #f8a878; box-shadow: 0 0 0 .2rem rgba(244, 121, 54, .18); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex: 0 0 240px; background: var(--side); color: var(--side-ink);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 18px 12px; border-right: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; padding: 4px 10px 20px; }
.brand img { width: 150px; height: auto; }
.brand .app-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); display: inline-grid; place-items: center; color: #fff; font-size: 15px; }
.sidebar .nav-link { color: var(--side-ink); border-radius: 8px; padding: 8px 10px; display: flex; gap: 10px; align-items: center; font-weight: 500; }
.sidebar .nav-link:hover { color: var(--ink); background: #f2f4f7; }
.sidebar .nav-link.active { color: var(--brand-ink); background: var(--brand-soft); }
.sidebar .nav-link i { font-size: 16px; opacity: .9; }
.nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 18px 10px 6px; font-weight: 600; }
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1010; display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 24px; }
.topbar-search { position: relative; align-items: center; width: min(420px, 50vw); }
.topbar-search i { position: absolute; left: 11px; color: var(--ink-3); }
.topbar-search input { padding-left: 32px; background: var(--canvas); border-color: transparent; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px 3px 3px; background: var(--surface); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.avatar.sm { width: 24px; height: 24px; font-size: 11px; }
.btn-icon { border: 1px solid var(--line); background: var(--surface); width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; font-size: 20px; }
.content { padding: 24px; max-width: 1400px; width: 100%; }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.open { transform: none; }
  .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(10, 20, 30, .45); z-index: 1035; }
  .topbar { padding: 10px 16px; }
  .content { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---------- page head ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: 24px; margin: 0; }
.page-head .sub { color: var(--ink-3); margin: 4px 0 0; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.card-header { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card-header h2, .card-header .card-title { font-size: 16px; margin: 0; }
.card-body { padding: 18px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; }
.stat:hover { border-color: #f8b98f; }
.stat .num { font-family: var(--font-head); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.stat .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.stat.alert-stat { border-color: #f1c2bd; background: #fdf4f3; }
.stat.alert-stat .num { color: #b3372e; }

/* ---------- badges (soft) ---------- */
.badge { font-weight: 600; font-size: 12px; padding: .35em .6em; border-radius: 6px; }
.badge-soft-primary { background: #e1ecf6; color: #1b5580; }
.badge-soft-secondary { background: #eceff2; color: #4d5b68; }
.badge-soft-success { background: #e1f3e6; color: #22713a; }
.badge-soft-danger { background: #fbe4e2; color: #b3372e; }
.badge-soft-warning { background: #fdf0d5; color: #8a5a00; }
.badge-soft-info { background: #def3f7; color: #146b7c; }
.badge-soft-orange { background: #fde7d8; color: #a4470f; }
.badge-soft-purple { background: #ece5f8; color: #5a3a95; }
.badge-soft-teal { background: #dcf3ee; color: #13705f; }
.badge-soft-light { background: #f2eee2; color: #6b5d33; }
.badge-soft-dark { background: #dfe3e8; color: #26313b; }
.badge-status { font-size: 12.5px; }
.status-dot-primary { background: #2d74a8; } .status-dot-secondary { background: #8c98a3; } .status-dot-success { background: #2f8d4a; }
.status-dot-danger { background: #c9453a; } .status-dot-warning { background: #d99b1a; } .status-dot-info { background: #1f93aa; }
.status-dot-orange { background: #d9692a; } .status-dot-purple { background: #7a57bd; } .status-dot-teal { background: #1b9580; }
.status-dot-light { background: #b0a372; } .status-dot-dark { background: #3b4650; }

/* ---------- tables ---------- */
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: 10px 12px; border-color: var(--line); vertical-align: middle; }
.table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; background: #f8f9fb; white-space: nowrap; }
.table-hover > tbody > tr:hover > * { background: #fcf8f5; }
.table a.row-link { color: var(--ink); font-weight: 600; text-decoration: none; }
.table a.row-link:hover { color: var(--brand-ink); text-decoration: underline; }
.code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.table-responsive { border-radius: 0 0 var(--radius) var(--radius); }

/* ---------- progress ---------- */
.progress-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.progress-wrap .progress { flex: 1 1 auto; height: 7px; background: #e6ebf0; border-radius: 99px; }
.progress-wrap.compact .progress { max-width: 90px; }
.progress-bar { border-radius: 99px; }
.progress-label { white-space: nowrap; font-variant-numeric: tabular-nums; }
.big-progress .num { font-family: var(--font-head); font-size: 34px; font-weight: 700; line-height: 1; }
.big-progress .progress { height: 10px; }

/* ---------- filters ---------- */
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.filters .form-check { padding-top: 6px; }

/* ---------- project page ---------- */
.project-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
@media (max-width: 767.98px) { .project-hero { grid-template-columns: minmax(0, 1fr); } }
.project-hero h1 { font-size: 24px; margin: 4px 0 8px; overflow-wrap: anywhere; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: 14px; }
.meta-row b { color: var(--ink); font-weight: 600; }
.nav-tabs.project-tabs { border-bottom: 1px solid var(--line); gap: 4px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.project-tabs .nav-link { color: var(--ink-2); border: 0; border-bottom: 2px solid transparent; font-weight: 600; white-space: nowrap; padding: 10px 14px; background: none; }
.project-tabs .nav-link:hover { color: var(--ink); }
.project-tabs .nav-link.active { color: var(--brand-ink); border-bottom-color: var(--brand); background: none; }
.project-tabs .count { font-size: 11.5px; background: #e9eef2; color: var(--ink-2); border-radius: 99px; padding: 1px 7px; margin-left: 4px; }
.project-tabs .count.danger { background: #fbe4e2; color: #b3372e; }
.tab-pane { padding-top: 18px; }
.dl-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.dl-grid dt { color: var(--ink-3); font-weight: 500; }
.dl-grid dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } .dl-grid dd { margin-bottom: 6px; } }
.detail-block + .detail-block { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.detail-block h3 { font-size: 14px; margin-bottom: 6px; }
.detail-text { white-space: normal; overflow-wrap: anywhere; color: var(--ink); }
.team-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.team-list li { display: flex; align-items: center; gap: 10px; }
.team-list .role { color: var(--ink-3); font-size: 13px; }
.blocker-strip { border: 1px solid #f1c2bd; background: #fdf4f3; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.blocker-strip ul { margin: 6px 0 0; padding-left: 18px; }

/* checklist */
.checklist-section + .checklist-section { margin-top: 18px; }
.checklist-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.checklist-row:first-of-type { border-top: 0; }
.checklist-row .check-btn { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #a9b6c1; background: #fff; display: inline-grid; place-items: center; padding: 0; margin-top: 1px; color: #fff; }
.checklist-row .check-btn.done { background: #2f8d4a; border-color: #2f8d4a; }
.checklist-row .check-btn.blocked { border-color: #c9453a; background: #fbe4e2; color: #c9453a; }
.checklist-row.is-done .item-name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: #c0c8cf; }
.checklist-row .item-meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.overdue-text { color: #b3372e; font-weight: 600; }

/* migration */
.migration-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.flow-step { flex: 1 1 170px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); position: relative; }
.flow-step .step-name { font-weight: 600; font-family: var(--font-head); }
.flow-step.done { border-color: #b7dfc2; background: #f3faf5; }
.flow-step.current { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.flow-step.final { border-style: dashed; }
.flow-step.final.current { border-style: solid; border-color: #c9453a; box-shadow: inset 0 0 0 1px #c9453a; }
.flow-arrow { display: flex; align-items: center; color: var(--ink-3); }
@media (max-width: 767.98px) { .flow-arrow { transform: rotate(90deg); justify-content: center; flex: 1 1 100%; } }
.final-banner { background: #fbe4e2; color: #8f2a22; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; padding: 4px 10px; border-radius: 6px; display: inline-block; }
.mig-check { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.mig-check:first-child { border-top: 0; }
.mig-check .form-check-input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; cursor: pointer; }
.mig-check.done label { color: var(--ink-3); }
.mig-check .who { font-size: 12.5px; color: var(--ink-3); }
.count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 16px 26px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #a9b6c1; }
.timeline li.manual::after { border-color: var(--brand); background: var(--brand-soft); }
.timeline .when { font-size: 12.5px; color: var(--ink-3); }

/* notes */
.note-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.note-card + .note-card { margin-top: 10px; }
.note-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: 6px; }
.note-head b { color: var(--ink); }

/* activity feed */
.feed { list-style: none; padding: 0; margin: 0; }
.feed li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.feed li:first-child { border-top: 0; }
.feed .when { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }

.empty-state { text-align: center; color: var(--ink-3); padding: 28px 16px; }
.empty-state i { font-size: 28px; display: block; margin-bottom: 6px; color: #a9b6c1; }

/* guest pages */
body.guest { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, #fef3ec 0%, var(--canvas) 55%); }
.guest-wrap { width: min(420px, calc(100vw - 32px)); padding-block: 32px; }
.guest-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; }
.guest-brand img { width: 180px; height: auto; }
.guest-brand .app-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 600; }
.error-page { max-width: 520px; margin: 40px auto; text-align: center; }
.error-code { font-family: var(--font-head); font-size: 56px; font-weight: 700; color: #c5d0d9; line-height: 1; }

.required::after { content: " *"; color: #c9453a; }
.form-hint { font-size: 13px; color: var(--ink-3); }
textarea.form-control { min-height: 90px; }
.modal-content { border-radius: var(--radius); }

/* Bootstrap components that hard-code blue: switch them to the brand orange */
.progress { --bs-progress-bar-bg: var(--brand); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: #f8a878; box-shadow: 0 0 0 .2rem rgba(244, 121, 54, .18); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f8a878'/%3e%3c/svg%3e"); }
.pagination { --bs-pagination-color: var(--ink-2); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-hover-color: var(--brand-ink); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(244, 121, 54, .18); }
.accordion { --bs-accordion-active-bg: var(--brand-soft); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(244, 121, 54, .18); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--brand); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand); }
.min-w-0 { min-width: 0; }
.topbar .btn { white-space: nowrap; }

/* =====================================================================
   Logo: a dark-mode logo shows only in dark mode; without one, the
   light logo sits on a small light plate so it stays readable.
   ===================================================================== */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-dark { display: block; }
[data-bs-theme="dark"] .logo-light.has-dark { display: none; }
[data-bs-theme="dark"] .logo-light:not(.has-dark) { background: #f5f2ee; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; }

/* Theme switch in the top bar */
.theme-switch .dropdown-item.active { background: var(--brand-soft); color: var(--brand-ink); }

/* =====================================================================
   Dark theme
   ===================================================================== */
[data-bs-theme="dark"] {
  --ink: #f2f4f7;
  --ink-2: #c9d1db;
  --ink-3: #8d99a8;
  --line: #2a3441;
  --canvas: #0f141b;
  --surface: #161d26;
  --brand: #f47936;
  --brand-2: #ff8a4c;
  --brand-ink: #ff9a63;
  --brand-soft: #3a2418;
  --side: #121821;
  --side-ink: #c9d1db;
  --bs-body-bg: #0f141b;
  --bs-body-color: #c9d1db;
  --bs-border-color: #2a3441;
  --bs-secondary-bg: #1c2430;
  --bs-tertiary-bg: #19202a;
  --bs-link-color: #ff9a63;
  --bs-link-color-rgb: 255, 154, 99;
  --bs-link-hover-color: #ffb68c;
  --bs-link-hover-color-rgb: 255, 182, 140;
  --bs-emphasis-color: #f2f4f7;
  color-scheme: dark;
}
[data-bs-theme="dark"] body { background: var(--canvas); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .accordion-item { background: var(--surface); }
[data-bs-theme="dark"] .accordion { --bs-accordion-bg: var(--surface); --bs-accordion-active-bg: #2a1d15; --bs-accordion-active-color: var(--ink); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select { background-color: #0f141b; border-color: #2f3a48; color: var(--ink); }
[data-bs-theme="dark"] .form-control::placeholder { color: #6c7889; }
[data-bs-theme="dark"] .btn-light { --bs-btn-bg: #222b37; --bs-btn-border-color: #2f3a48; --bs-btn-color: var(--ink-2); --bs-btn-hover-bg: #2a3442; --bs-btn-hover-border-color: #394657; --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: #2a3442; }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #1b0e06; --bs-btn-hover-color: #1b0e06; --bs-btn-active-color: #1b0e06; }
[data-bs-theme="dark"] .sidebar .nav-link:hover { background: #1c2430; }
[data-bs-theme="dark"] .sidebar .nav-link.active { background: #2a1d15; }
[data-bs-theme="dark"] .table thead th { background: #19202a; }
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * { background: #1b232e; color: inherit; }
[data-bs-theme="dark"] .table { --bs-table-color: var(--ink-2); }
[data-bs-theme="dark"] .progress,
[data-bs-theme="dark"] .progress-wrap .progress { background: #26303c; }
[data-bs-theme="dark"] .stat:hover { border-color: #7a4321; }
[data-bs-theme="dark"] .stat.alert-stat { border-color: #5c2621; background: #24161a; }
[data-bs-theme="dark"] .stat.alert-stat .num,
[data-bs-theme="dark"] .overdue-text { color: #ff8a80; }
[data-bs-theme="dark"] .blocker-strip { border-color: #5c2621; background: #24161a; }
[data-bs-theme="dark"] .project-tabs .count { background: #26303c; }
[data-bs-theme="dark"] .project-tabs .count.danger { background: #4a1f1c; color: #ff8a80; }
[data-bs-theme="dark"] .flow-step.done { border-color: #24543a; background: #14231b; }
[data-bs-theme="dark"] .final-banner { background: #4a1f1c; color: #ffb4ab; }
[data-bs-theme="dark"] .checklist-row .check-btn { background: #0f141b; border-color: #4a5667; }
[data-bs-theme="dark"] .checklist-row .check-btn.blocked { background: #4a1f1c; }
[data-bs-theme="dark"] .timeline li::after { background: var(--surface); border-color: #4a5667; }
[data-bs-theme="dark"] .empty-state i { color: #4a5667; }
[data-bs-theme="dark"] .error-code { color: #2f3a48; }
[data-bs-theme="dark"] body.guest { background: linear-gradient(180deg, #1d1510 0%, var(--canvas) 55%); }
[data-bs-theme="dark"] .alert-danger { --bs-alert-bg: #2a1517; --bs-alert-border-color: #5c2621; --bs-alert-color: #ffb4ab; }
[data-bs-theme="dark"] .alert-success { --bs-alert-bg: #13241a; --bs-alert-border-color: #24543a; --bs-alert-color: #9be3b4; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-bg: #2a2110; --bs-alert-border-color: #5c4a1d; --bs-alert-color: #f5d48a; }

/* soft badges, dark versions */
[data-bs-theme="dark"] .badge-soft-primary { background: #16304a; color: #9cc8f0; }
[data-bs-theme="dark"] .badge-soft-secondary { background: #262f3b; color: #b5c0cc; }
[data-bs-theme="dark"] .badge-soft-success { background: #15301f; color: #8fdca9; }
[data-bs-theme="dark"] .badge-soft-danger { background: #3d1a18; color: #ff9d94; }
[data-bs-theme="dark"] .badge-soft-warning { background: #362a10; color: #f2c66d; }
[data-bs-theme="dark"] .badge-soft-info { background: #11313a; color: #86d6e6; }
[data-bs-theme="dark"] .badge-soft-orange { background: #3d2214; color: #ffae7d; }
[data-bs-theme="dark"] .badge-soft-purple { background: #2a2140; color: #c6b2f2; }
[data-bs-theme="dark"] .badge-soft-teal { background: #10322c; color: #82dcc8; }
[data-bs-theme="dark"] .badge-soft-light { background: #2f2b1f; color: #d8cb9c; }
[data-bs-theme="dark"] .badge-soft-dark { background: #2c3440; color: #d5dbe3; }

/* Roles & permissions matrix */
.perm-table .perm-group th { background: var(--canvas); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding-top: 14px; }
.perm-table td .form-check-input { width: 1.15em; height: 1.15em; float: none; margin: 0; cursor: pointer; }
.perm-table tbody tr:not(.perm-group):hover > * { background: var(--brand-soft); }

/* =====================================================================
   Website Health Checker components
   ===================================================================== */
:root {
  --good: #2f8d4a; --good-soft: #e1f3e6; --ok: #c98a0c; --ok-soft: #fdf0d5; --poor: #c9453a; --poor-soft: #fbe4e2;
  --sev-critical: #c9453a; --sev-warning: #d99b1a; --sev-notice: #1f93aa; --sev-passed: #2f8d4a; --sev-info: #8c98a3;
}
[data-bs-theme="dark"] {
  --good: #5cc27b; --good-soft: #15301f; --ok: #f2c66d; --ok-soft: #362a10; --poor: #ff8a80; --poor-soft: #3d1a18;
  --sev-critical: #ff8a80; --sev-warning: #f2c66d; --sev-notice: #86d6e6; --sev-passed: #5cc27b; --sev-info: #8d99a8;
}
.brand-mark.lg { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
.text-truncate { min-width: 0; }
.t-critical { color: var(--sev-critical) !important; } .t-warning { color: #a36b00; } .t-notice { color: #146b7c; } .t-passed { color: var(--good); }
[data-bs-theme="dark"] .t-warning { color: var(--sev-warning); } [data-bs-theme="dark"] .t-notice { color: var(--sev-notice); }
.yes { color: var(--good); font-weight: 600; } .no { color: var(--ink-3); }

/* dashboard hero */
.hero-scan { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 40px 24px 28px; margin-bottom: 24px;
  background-image: radial-gradient(ellipse at top, rgba(244, 121, 54, .10), transparent 60%); }
.hero-scan h1 { font-size: 30px; margin-bottom: 6px; }
.hero-scan .sub { color: var(--ink-3); max-width: 620px; margin: 0 auto 22px; }
.scan-form { max-width: 720px; margin: 0 auto; }
.scan-input { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 6px 6px 6px 16px; transition: border-color .15s; }
.scan-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(244, 121, 54, .15); }
.scan-input.is-invalid { border-color: var(--poor); }
.scan-input i { color: var(--ink-3); font-size: 20px; }
.scan-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 17px; min-width: 0; color: var(--ink); padding: 8px 0; }
.scan-input .btn { padding: 10px 18px; border-radius: 10px; white-space: nowrap; }
@media (max-width: 575.98px) { .scan-input { flex-wrap: wrap; padding: 8px; } .scan-input .btn { width: 100%; } }
.advanced-box { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-top: 10px; background: var(--canvas); }
.hero-note { color: var(--ink-3); font-size: 13px; margin: 18px 0 0; }
.site-list { list-style: none; margin: 0; padding: 0; }
.site-list li { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); min-width: 0; }
.site-list li:first-child { border-top: 0; }

/* score pills, deltas */
.score-pill { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 99px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.score-pill.sm { min-width: 30px; height: 20px; font-size: 11.5px; }
.score-pill.lg { min-width: 64px; height: 40px; font-size: 20px; }
.score-pill.good { background: var(--good-soft); color: var(--good); }
.score-pill.ok { background: var(--ok-soft); color: #8a5a00; }
.score-pill.poor { background: var(--poor-soft); color: var(--poor); }
.score-pill.na { background: var(--canvas); color: var(--ink-3); font-weight: 600; }
[data-bs-theme="dark"] .score-pill.ok { color: var(--ok); }
.delta { font-weight: 700; font-size: 12.5px; padding: 1px 6px; border-radius: 6px; }
.delta.up { color: var(--good); background: var(--good-soft); } .delta.down { color: var(--poor); background: var(--poor-soft); }

/* scan header + tabs */
.scan-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.scan-title { font-size: 24px; margin: 0 0 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.scan-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; scrollbar-width: thin; }
.scan-tab { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 13.5px; padding: 9px 12px; border-bottom: 2px solid transparent; white-space: nowrap; }
.scan-tab:hover { color: var(--ink); }
.scan-tab.active { color: var(--brand-ink); border-bottom-color: var(--brand); }
.scan-tab .count { font-size: 11px; background: #e9eef2; color: var(--ink-2); border-radius: 99px; padding: 1px 7px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.scan-tab .count.danger { background: var(--poor-soft); color: var(--poor); }
[data-bs-theme="dark"] .scan-tab .count { background: #26303c; }

/* progress */
.progress-card .stat { cursor: default; }
.progress-card .stat:hover { border-color: var(--line); }

/* overview */
.overview-top { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; }
@media (max-width: 991.98px) { .overview-top { grid-template-columns: minmax(0, 1fr); } }
.score-card .card-body { text-align: center; }
.score-ring { position: relative; width: 170px; height: 170px; margin: 0 auto 14px; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 11; }
.score-ring .track { stroke: var(--line); }
.score-ring .bar { stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.score-ring.good .bar { stroke: var(--good); } .score-ring.ok .bar { stroke: var(--sev-warning); } .score-ring.poor .bar { stroke: var(--poor); } .score-ring.na .bar { stroke: transparent; }
.score-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score-num span { font-family: var(--font-head); font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1; }
.score-num small { color: var(--ink-3); font-size: 13px; }
.sev-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sev-counts .sev { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: 13px; border: 1px solid var(--line); }
.sev-counts .sev b { font-size: 20px; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.sev-counts .critical b { color: var(--sev-critical); } .sev-counts .warning b { color: #b07800; } .sev-counts .notice b { color: var(--sev-notice); } .sev-counts .passed b { color: var(--good); }
[data-bs-theme="dark"] .sev-counts .warning b { color: var(--sev-warning); }
.sev-counts .sev:hover { border-color: #f8b98f; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cat-tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.cat-tile:hover { border-color: #f8b98f; }
.cat-name { font-weight: 600; color: var(--ink); font-size: 14px; }
.cat-bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.cat-bar span { display: block; height: 100%; border-radius: 99px; }
.cat-bar .good { background: var(--good); } .cat-bar .ok { background: var(--sev-warning); } .cat-bar .poor { background: var(--poor); }
.cat-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.dl-grid.compact { grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }

/* issue lists */
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--line); }
.issue-list li:first-child { border-top: 0; }
.issue-title { color: var(--ink); font-weight: 600; text-decoration: none; }
a.issue-title:hover { color: var(--brand-ink); text-decoration: underline; }
.issue-cat { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.issue-rows { list-style: none; margin: 0; padding: 0; }
.issue-rows li + li { border-top: 1px solid var(--line); }
.issue-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; }
.issue-row:hover { background: var(--brand-soft); }
.issue-row > .min-w-0 { flex: 1 1 auto; }
.issue-sub { font-size: 12.5px; color: var(--ink-3); display: block; }
.affected { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.affected small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.sev-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--sev-info); }
.sev-dot.s-critical { background: var(--sev-critical); } .sev-dot.s-warning { background: var(--sev-warning); } .sev-dot.s-notice { background: var(--sev-notice); } .sev-dot.s-passed { background: var(--sev-passed); }
.issues-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 991.98px) { .issues-layout { grid-template-columns: minmax(0, 1fr); } }
.issues-side { position: sticky; top: 76px; }
@media (max-width: 991.98px) { .issues-side { position: static; } }
.side-filter { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.side-filter:hover { background: var(--canvas); color: var(--ink); }
.side-filter.active { background: var(--brand-soft); color: var(--brand-ink); }
.mini { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 6px; line-height: 18px; }
.mini.critical { background: var(--poor-soft); color: var(--poor); } .mini.warning { background: var(--ok-soft); color: #8a5a00; } .mini.notice { background: #def3f7; color: #146b7c; }
[data-bs-theme="dark"] .mini.warning { color: var(--ok); } [data-bs-theme="dark"] .mini.notice { background: #11313a; color: #86d6e6; }
.sev-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sev-tabs a { text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); }
.sev-tabs a span { color: var(--ink-3); font-weight: 500; margin-left: 3px; }
.sev-tabs a.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sev-tabs a.active span { color: inherit; opacity: .75; }
.sev-tabs a.export-link { border: 0; background: none; font-weight: 500; color: var(--brand-ink); }
.group-title { font-size: 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.group-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sev-info); }
.group-title.s-critical::before { background: var(--sev-critical); } .group-title.s-warning::before { background: var(--sev-warning); } .group-title.s-notice::before { background: var(--sev-notice); } .group-title.s-passed::before { background: var(--sev-passed); }
.explain { height: 100%; border-radius: 10px; background: var(--canvas); padding: 12px 14px; }
.explain h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 6px; }
.explain p { margin: 0; font-size: 14px; color: var(--ink); }
.explain.fix { background: var(--brand-soft); }

/* data tables */
.filter-bar .filters { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); align-items: end; }
.filter-search { grid-column: span 2; }
@media (max-width: 575.98px) { .filter-search { grid-column: span 1; } }
.filter-actions { display: flex; gap: 6px; }
.data-table td { font-size: 13px; max-width: 420px; overflow-wrap: anywhere; }
.data-table td.col-url, .data-table td.col-ext { min-width: 220px; }
.data-table td.col-long { min-width: 200px; }
.data-table td.col-num, .data-table td.col-ms, .data-table td.col-bytes { white-space: nowrap; text-align: right; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link.active, .sort-link:hover { color: var(--ink); }
.url-link { color: var(--ink); font-weight: 500; text-decoration: none; word-break: break-all; }
.url-link:hover { color: var(--brand-ink); text-decoration: underline; }
.ext-icon { color: var(--ink-3); font-size: 11px; }
.ext-icon:hover { color: var(--brand-ink); }
.code-block { background: var(--canvas); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; }
.scroll-y { max-height: 420px; overflow-y: auto; }
.heading-outline { font-size: 13.5px; max-height: 420px; overflow-y: auto; }
.heading-outline .h-row { padding-top: 3px; padding-bottom: 3px; border-bottom: 1px dashed var(--line); }
.redirect-chain { margin: 0; padding-left: 20px; }
.redirect-chain li { padding: 4px 0; word-break: break-all; }
.redirect-chain li.loop { color: var(--poor); }
.issue-detail .code { white-space: nowrap; }

/* technical / ecommerce */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.check-list li:first-child { border-top: 0; }
.check-list li.ok > i { color: var(--good); }
.check-list li.missing > i { color: var(--ink-3); }
.dist-chip { border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; text-decoration: none; color: var(--ink-2); font-size: 13px; }
.dist-chip b { color: var(--ink); margin-left: 4px; }
.platform-name { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

/* compare */
.compare-head { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 16px 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
@media (max-width: 767.98px) { .compare-head { grid-template-columns: 1fr auto 1fr; } .cmp-stats { grid-column: 1 / -1; } }
.cmp-col { text-align: center; }
.cmp-date { font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cmp-arrow { text-align: center; color: var(--ink-3); font-size: 22px; }
.cmp-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.cmp-stats b { font-family: var(--font-head); font-size: 20px; margin-right: 3px; }

/* site score trend */
.trend { display: flex; align-items: flex-end; gap: 10px; height: 180px; overflow-x: auto; padding-top: 18px; }
.trend-bar { flex: 0 0 44px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-decoration: none; gap: 4px; }
.trend-bar .bar { width: 26px; border-radius: 6px 6px 2px 2px; display: block; }
.trend-bar .bar.good { background: var(--good); } .trend-bar .bar.ok { background: var(--sev-warning); } .trend-bar .bar.poor { background: var(--poor); }
.trend-bar .v { font-size: 12px; font-weight: 700; color: var(--ink); }
.trend-bar .d { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* Branding settings: logo previews on the background they will appear on */
.logo-preview { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 8px; }
.logo-preview.light { background: #ffffff; }
.logo-preview.dark { background: #121821; border-color: #2a3441; }
.logo-preview img { max-height: 48px; max-width: 240px; }
.brand img { max-width: 180px; max-height: 48px; width: auto; height: auto; }

/* Quick checklist */
.checklist-card .card-header { align-items: center; }
.checklist-meter { width: 180px; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.checklist-meter span { display: block; height: 100%; border-radius: 99px; background: var(--good); }
.checklist-meter.ok span { background: var(--sev-warning); } .checklist-meter.poor span { background: var(--poor); }
.checklist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 24px; }
.cl-group h3 { font-size: 14px; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.cl-group h3 i { color: var(--brand); }
.cl-count { margin-left: auto; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; background: var(--ok-soft); color: #8a5a00; }
.cl-count.all { background: var(--good-soft); color: var(--good); }
[data-bs-theme="dark"] .cl-count { color: var(--ok); }
.cl-group ul { list-style: none; margin: 0; padding: 0; }
.cl-group li { display: flex; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.cl-group li:first-child { border-top: 0; }
.cl-group li > i { margin-top: 2px; }
.cl-ok > i { color: var(--good); } .cl-fail > i { color: var(--poor); } .cl-na > i { color: var(--ink-3); }
.cl-label { display: block; color: var(--ink); font-weight: 500; }
.cl-evidence { display: block; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .checklist-meter { width: 100%; } .checklist-grid { grid-template-columns: minmax(0, 1fr); } }

/* Image optimiser */
.opt-stat { display: flex; flex-direction: column; min-width: 110px; }
.opt-stat .num { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.opt-stat .lbl { font-size: 12.5px; color: var(--ink-3); }
.opt-table td.opt-name { max-width: 380px; min-width: 220px; }
.opt-table td.opt-name a { word-break: break-all; font-weight: 500; }
.opt-result { min-width: 220px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-grid figure { margin: 0; background: repeating-conic-gradient(#e9edf1 0% 25%, #fff 0% 50%) 50% / 16px 16px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.compare-grid figcaption { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.compare-grid img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; display: block; }
@media (max-width: 767.98px) { .compare-grid { grid-template-columns: 1fr; } }