:root {
    --bg: #f4f6f8;
    --card-bg: #ffffff;
    --border: #dde2e7;
    --text: #1f2933;
    --muted: #6b7785;
    --accent: #1b4965;
    --critical: #c00000;
    --high: #e36c09;
    --medium: #bf8f00;
    --low: #38761d;
    --info: #31599d;
    --input-bg: #ffffff;
    --hover-bg: #eef2f5;
    --surface: #eef2f5;
    --surface-1: #eef2f5;
    --border-strong: #c3cad3;
    --flash-bg: #fdf2cf;
    --flash-border: #e6cf6e;
    --flash-text: #6b5000;
    /* Badge/pill backgrounds — paired with --critical/--high/etc as the text
       color. Both halves of the pair change together between themes so
       contrast holds up on either background. */
    --badge-critical-bg: #fbdede;
    --badge-high-bg: #fde6d2;
    --badge-medium-bg: #fdf2cf;
    --badge-low-bg: #e3f1da;
    --badge-info-bg: #dbe9ff;
    --badge-neutral-bg: #ececec;
    /* "Today" cell highlight on the Calendar — a faint tint of the accent,
       kept distinct from --surface (weekend/empty-cell shading). */
    --brand-fade: #eef4fb;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #14181f;
    --card-bg: #1c212b;
    --border: #313846;
    --text: #e7eaf0;
    --muted: #98a2b3;
    --accent: #4a86ad;
    --critical: #ff6b6b;
    --high: #ff9f4a;
    --medium: #f0c14b;
    --low: #6fcf7a;
    --info: #6fa8e0;
    --input-bg: #232a36;
    --hover-bg: #262d3a;
    --surface: #262d3a;
    --surface-1: #262d3a;
    --border-strong: #465063;
    --flash-bg: #3a3420;
    --flash-border: #6b5c22;
    --flash-text: #f0d878;
    --badge-critical-bg: #4a2426;
    --badge-high-bg: #4a3620;
    --badge-medium-bg: #453a1c;
    --badge-low-bg: #223a26;
    --badge-info-bg: #1f3350;
    --badge-neutral-bg: #2a303c;
    --brand-fade: #223140;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #14181f;
        --card-bg: #1c212b;
        --border: #313846;
        --text: #e7eaf0;
        --muted: #98a2b3;
        --accent: #4a86ad;
        --critical: #ff6b6b;
        --high: #ff9f4a;
        --medium: #f0c14b;
        --low: #6fcf7a;
        --info: #6fa8e0;
        --input-bg: #232a36;
        --hover-bg: #262d3a;
        --surface: #262d3a;
        --surface-1: #262d3a;
        --border-strong: #465063;
        --flash-bg: #3a3420;
        --flash-border: #6b5c22;
        --flash-text: #f0d878;
        --badge-critical-bg: #4a2426;
        --badge-high-bg: #4a3620;
        --badge-medium-bg: #453a1c;
        --badge-low-bg: #223a26;
        --badge-info-bg: #1f3350;
        --badge-neutral-bg: #2a303c;
        --brand-fade: #223140;
    }
}

:root[data-theme="dark"] body.page-landing,
:root[data-theme="dark"] body.page-assessment {
    background:
        radial-gradient(circle at 8% 8%, rgba(74, 134, 173, 0.10) 0%, transparent 38%),
        radial-gradient(circle at 95% 18%, rgba(74, 134, 173, 0.08) 0%, transparent 42%),
        linear-gradient(180deg, #171c25 0%, #14181f 220px, #14181f 100%);
    background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.page-landing,
    :root:not([data-theme="light"]) body.page-assessment {
        background:
            radial-gradient(circle at 8% 8%, rgba(74, 134, 173, 0.10) 0%, transparent 38%),
            radial-gradient(circle at 95% 18%, rgba(74, 134, 173, 0.08) 0%, transparent 42%),
            linear-gradient(180deg, #171c25 0%, #14181f 220px, #14181f 100%);
        background-attachment: fixed;
    }
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

/* Plain <a> tags (document/policy/assessment titles in list tables, etc.)
   had no color rule at all, so they fell back to the browser's default
   link blue — a fixed color outside our theme system that reads poorly
   on a dark background. Route them through the theme-aware accent color
   instead. Buttons styled as .link-button already set their own color
   and are unaffected. */
a { color: var(--accent); }
a:visited { color: var(--accent); }

body.page-landing,
body.page-assessment {
    background:
        radial-gradient(circle at 8% 8%, rgba(27, 73, 101, 0.07) 0%, transparent 38%),
        radial-gradient(circle at 95% 18%, rgba(49, 89, 157, 0.06) 0%, transparent 42%),
        linear-gradient(180deg, #eef2f6 0%, #f4f6f8 220px, #f4f6f8 100%);
    background-attachment: fixed;
}

body.page-login {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 45%),
        linear-gradient(135deg, #15324a 0%, #1b4965 45%, #2a6f97 100%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: var(--accent);
    color: white;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1200;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* .topbar-clock is centered by absolute position, not by flex space-between
   (which only looks centered when the brand and nav happen to be the same
   width — Arabic nav text is a different width than English, so it visibly
   drifts under space-between). Absolute-centering holds true regardless of
   sibling widths or LTR/RTL direction. position:sticky on .topbar already
   establishes the containing block this needs. */
.topbar-clock {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.brand,
.brand:visited {
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    padding: 2px 5px;
    line-height: 0;
}

.powered-by-footer {
    position: fixed;
    right: 96px;
    bottom: 16px;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--text);
    opacity: 0.8;
    pointer-events: none;
}

.login-bottom-fade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42vh;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.32) 30%,
        rgba(0, 0, 0, 0.12) 60%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 5;
}

body.page-login .powered-by-footer { display: none; }

.login-card-powered-by {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 18px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--muted);
    opacity: 0.85;
}

.login-card-powered-by-logo { height: 16px; width: auto; display: block; }

.login-copyright {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 10;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #f2f6fa;
    opacity: 0.75;
    pointer-events: none;
}

.powered-by-footer--above-ticker { bottom: 48px; }

.powered-by-footer-logo { height: 18px; width: auto; display: block; }

.topbar-clock {
    color: white;
    opacity: 0.9;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.topnav a {
    color: white;
    text-decoration: none;
    font-size: 0.92rem;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
}

.topnav a:hover { opacity: 1; text-decoration: underline; }

.topnav-user {
    font-size: 0.88rem;
    opacity: 0.85;
    padding-left: 6px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
}

.topnav .link-button {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    padding: 6px 12px;
    margin: 0;
}

.search-btn {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    margin: 0;
    background: none;
    border: none;
    border-radius: 6px;
    opacity: 0.85;
    color: white;
    cursor: pointer;
}
.search-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }

.org-dropdown { position: relative; display: flex; align-items: stretch; }

.org-dropdown-btn {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 5px 10px;
    font-size: 0.88rem;
    font-weight: 600;
}

.org-dropdown-btn:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }

.org-dropdown-caret {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 6px 6px 0;
    padding: 5px 8px;
    cursor: pointer;
}

.org-dropdown-caret:hover { background: rgba(255, 255, 255, 0.2); }

.org-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--card-bg, #1e2536);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 1300;
}

.org-dropdown.open .org-dropdown-menu { display: block; }

.org-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--text-color, #e5e7eb);
    text-decoration: none;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.org-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }

.org-dropdown-name { font-weight: 600; }

.org-dropdown-mode { font-size: 0.78rem; opacity: 0.7; white-space: nowrap; }

.org-dropdown-empty {
    padding: 12px 14px;
    font-size: 0.85rem;
    opacity: 0.7;
}

.org-dropdown-manage {
    display: block;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: var(--accent-color, #60a5fa);
    text-decoration: none;
}

.org-dropdown-manage:hover { text-decoration: underline; }

.login-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.login-brand {
    text-align: center;
    margin-bottom: 28px;
}

.login-brand-logo {
    display: block;
    margin: 0 auto 12px;
    height: 64px;
    width: auto;
}

.login-brand-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    margin: 0 auto 12px;
}

.login-brand-logo-chip .login-brand-logo { margin: 0; }

.login-brand-name {
    display: block;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.login-brand-dash { color: #9fc2da; }

.login-brand-tagline {
    display: block;
    margin-top: 6px;
    color: #cfe1ec;
    font-size: 0.95rem;
    font-weight: 400;
}

/* The topbar already shows the org/brand logo — the login/MFA cards only
   need the tagline beneath it, not a second full logo+name block. */
.login-brand--tagline-only { margin-bottom: 20px; }
.login-brand--tagline-only .login-brand-tagline { margin-top: 0; font-size: 1.05rem; }

.login-card {
    width: 100%;
    max-width: 400px;
    margin: 0;
    padding: 32px 36px 36px;
    border: none;
    border-radius: 14px;
    box-shadow: 0 24px 60px -16px rgba(10, 30, 50, 0.45), 0 2px 8px rgba(10, 30, 50, 0.12);
}

.login-card h2 {
    margin: 0 0 6px;
    font-size: 1.4rem;
    color: var(--text);
}

.login-subtitle {
    margin: 0 0 24px;
    font-size: 0.9rem;
}

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

.login-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--muted);
    font-weight: 600;
}

.login-form input {
    padding: 11px 12px;
    font-size: 0.98rem;
    border-radius: 7px;
    border: 1px solid var(--border);
}

.login-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(27, 73, 101, 0.15);
}

.login-form button {
    margin-top: 6px;
    padding: 12px;
    font-size: 1rem;
    border-radius: 7px;
}

body.page-login .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body.page-login .flash {
    max-width: 400px;
    margin: 24px auto 0;
}

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

.app-shell {
    display: flex;
    align-items: flex-start;
}

.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    z-index: 15;
}

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

.sidebar-link,
.sidebar-link:visited {
    display: block;
    padding: 12px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.sidebar-link:hover { background: var(--hover-bg); }

.sidebar-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--hover-bg);
}

.sidebar-link.disabled {
    color: var(--muted);
    font-weight: 500;
    cursor: default;
}

.sidebar-link.disabled:hover { background: none; }

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin: 16px 12px 0;
    border-top: 1px solid var(--border);
}

.sidebar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 1px;
}

.badge-soon {
    display: block;
    margin-top: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}

.container {
    flex: 1;
    max-width: 1000px;
    margin: 24px auto;
    padding: 0 16px 80px;
}

.sidebar-right {
    width: 300px;
    flex-shrink: 0;
    padding: 20px 16px 20px;
    position: sticky;
    /* Must match the topbar's rendered height (~54px). Using top:0 here
       caused a bug: once scrolled far enough to "stick", the sidebar sits
       flush at viewport y=0 (tucked under the topbar, which has a higher
       z-index) — but before that scroll threshold, it sits in normal flow
       right below the topbar instead, ~54px lower. That 54px jump pushed
       the sidebar's bottom edge down into the fixed "Powered by" footer's
       zone whenever the page was scrolled back up. Pinning top to the
       topbar's height keeps the sidebar's position identical whether it's
       stuck or still in normal flow, so there's no jump to begin with. */
    top: 54px;
    align-self: flex-start;
    /* 100vh alone doesn't know about the topbar above or the fixed
       "Powered by" footer + news ticker below — reserving both here forces
       a real internal scrollbar instead of the sidebar visually colliding
       with either. */
    max-height: calc(100vh - 54px - 90px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 15;
}

@media (max-width: 1300px) {
    .sidebar-right { display: none; }
}

.key-actions-card { padding: 14px 16px; height: 340px; flex-shrink: 0; display: flex; flex-direction: column; }
.key-actions-card .dashboard-title { font-size: 0.9rem; margin-bottom: 10px; padding-bottom: 8px; }

.org-sidebar-card { padding: 14px 16px; }
.org-sidebar-card .dashboard-title { font-size: 0.9rem; margin-bottom: 10px; padding-bottom: 8px; }

.org-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 420px;
    overflow-y: auto;
}

.org-sidebar-link {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text, #e5e7eb);
    text-decoration: none;
}

.org-sidebar-link:visited { color: var(--text, #e5e7eb); }
.org-sidebar-link:hover { background: rgba(255, 255, 255, 0.06); }
.org-sidebar-link.active,
.org-sidebar-link.active:visited { background: var(--accent, #60a5fa); color: #fff; }

.key-actions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.key-action-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 0.8rem;
    text-decoration: none;
    color: inherit;
}

.key-action-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border);
}

.key-action-body { flex: 1; min-width: 0; }

.key-action-module {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 1px;
}

.key-action-label,
.key-action-label:visited {
    font-size: 0.79rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: var(--text);
    text-decoration: none;
}

.key-action-due { font-size: 0.69rem; color: var(--muted); margin-top: 1px; }

.key-action-item.key-action-overdue .key-action-dot { background: #b00020; }
.key-action-item.key-action-overdue .key-action-due { color: #b00020; font-weight: 600; }
.key-action-item.key-action-soon .key-action-dot { background: #bf8f00; }
.key-action-item.key-action-soon .key-action-due { color: #bf8f00; }
.key-action-item.key-action-upcoming .key-action-dot { background: #2d7a4f; }

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

h2 { margin-top: 0; }

.license-panel {
    background: var(--surface, rgba(255,255,255,0.03));
    border-radius: 8px;
    padding: 14px 16px;
    margin: 12px 0 18px;
}

.license-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.license-stat-label { font-size: 0.76rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.03em; }
.license-stat-value { font-size: 0.95rem; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 8px; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-grid label, .finding-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--muted);
    gap: 4px;
}

.form-grid .full, .finding-form .full { grid-column: 1 / -1; }

/* Required-field markers ("Field Name *") are set directly in each
   template's label text as <span class="required-marker">*</span>, right
   after the caption, rather than generated by CSS — a global :has()-based
   rule was tried first (leading, then a corner-anchored trailing version)
   and both were rejected: these labels are flex-direction:column, and each
   *real element* child (not just ::before/::after) becomes its own flex
   item there — even a plain trailing <span> got pushed onto its own row
   below the caption text instead of sitting on the same line as it.
   display:contents is what fixes that: it removes the span's own box
   entirely, so its "*" text merges into the same anonymous flex item as
   the adjacent caption text run instead of forming a separate one — which
   is what actually keeps it glued onto the same line. */
.required-marker {
    display: contents;
    color: #c0392b;
    font-weight: 700;
}

input, select, textarea, button {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
}

input, select, textarea {
    width: 100%;
    max-width: 100%;
    background: var(--input-bg);
    color: var(--text);
}

.hidden {
    display: none !important;
}

button {
    background: var(--accent);
    color: white;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 9px 16px;
    font-weight: 600;
    border-radius: 4px;
    vertical-align: middle;
    margin: 0 6px 6px 0;
}

button:hover { opacity: 0.9; }

.link-button,
.link-button:visited {
    display: inline-block;
    background: var(--hover-bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 9px 14px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    font-family: inherit;
    cursor: pointer;
    margin: 0 6px 6px 0;
    vertical-align: middle;
}

/* .inline-form wraps a single button/small form so it sits inline next to
   sibling buttons/links (e.g. Run / Edit / Delete in a table row, or
   "Create Risk" next to "Corrective Action"). Without this rule the class
   did nothing — <form> is block-level by default — so the wrapped button
   dropped onto its own line and visually collided with whatever followed
   it. This single rule is the fix for that pattern everywhere it appears. */
.inline-form {
    display: inline-block;
    margin: 0 6px 6px 0;
    vertical-align: middle;
}
.inline-form .link-button,
.inline-form button {
    margin: 0;
}

.link-button.danger, .link-button.danger:visited { background: var(--badge-critical-bg); color: var(--critical); border-color: var(--border); }

/* The one TechVisor icon, reused everywhere the tool offers an AI action
   (Policy AI Draft, Predictive Risk Intelligence, Incident recommender,
   Privacy AI Draft, etc.) so users learn to recognize it once. Always place
   it as the first item in a card/section's .actions row (top-right of that
   section) so its location is predictable from page to page. */
.techvisor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary, #1d4ed8);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0 6px 6px 0;
    vertical-align: middle;
    position: relative;
    flex-shrink: 0;
}
.techvisor-btn svg { width: 18px; height: 18px; display: block; }
.techvisor-btn .techvisor-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 0.62rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--critical, #dc2626);
    color: #fff;
    border: none;
    box-shadow: none;
    margin: 0;
}

.list-table {
    width: 100%;
    border-collapse: collapse;
}

.list-table th, .list-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.muted { color: var(--muted); font-size: 0.9rem; }

/* Business Units / Projects overview tables: first column (name) stays left,
   count columns sit centered under their headings, action buttons right. */
.bu-table th, .bu-table td {
    text-align: center;
    vertical-align: middle;
}
.bu-table th:first-child, .bu-table td:first-child,
.bu-table th:nth-child(2):not(:last-child), .bu-table td:nth-child(2):not(:last-child) {
    text-align: left;
}
.bu-table th:last-child, .bu-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    background: var(--hover-bg);
    margin-right: 6px;
}

.status-compliant { background: var(--badge-low-bg); color: var(--low); }
.status-partial { background: var(--badge-medium-bg); color: var(--medium); }
.status-non-compliant { background: var(--badge-critical-bg); color: var(--critical); }
.status-not-applicable, .status-not-reviewed { background: var(--badge-neutral-bg); color: var(--muted); }
.status-completed { background: var(--badge-info-bg); color: var(--info); }
.status-in-progress { background: var(--badge-medium-bg); color: var(--medium); }
.status-draft { background: var(--badge-neutral-bg); color: var(--muted); }
.status-under-review { background: var(--badge-medium-bg); color: var(--medium); }
.status-approved { background: var(--badge-low-bg); color: var(--low); }

.renewal-overdue { background: var(--badge-critical-bg); color: var(--critical); font-weight: 600; }
.renewal-due-soon { background: var(--badge-high-bg); color: var(--high); font-weight: 600; }
.renewal-on-track { background: var(--badge-low-bg); color: var(--low); }
.status-published { background: var(--badge-info-bg); color: var(--info); }

.severity-critical { background: var(--badge-critical-bg); color: var(--critical); }
.severity-high { background: var(--badge-high-bg); color: var(--high); }
.severity-medium { background: var(--badge-medium-bg); color: var(--medium); }
.severity-low { background: var(--badge-low-bg); color: var(--low); }
.severity-informational { background: var(--badge-info-bg); color: var(--info); }

.risk-low { background: var(--badge-low-bg); color: var(--low); font-weight: 600; }
.risk-medium { background: var(--badge-medium-bg); color: var(--medium); font-weight: 600; }
.risk-high { background: var(--badge-critical-bg); color: var(--critical); font-weight: 600; }

.status-open { background: var(--badge-neutral-bg); color: var(--muted); }
.status-mitigation-planned { background: var(--badge-medium-bg); color: var(--medium); }
.status-accepted { background: var(--badge-info-bg); color: var(--info); }
.status-closed { background: var(--badge-low-bg); color: var(--low); }

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 1;
    min-width: 0;
    /* keep buttons pinned to the far edge even when the header wraps them
       onto their own line (e.g. Policy's three long buttons) — logical
       property so it flips correctly in RTL/Arabic mode */
    margin-inline-start: auto;
}

.status-summary { margin-top: 14px; }

.finding {
    border-top: 1px solid var(--border);
    padding: 16px 0;
}

.finding:first-of-type { border-top: none; padding-top: 4px; }

.finding-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }

.refs { font-size: 0.85rem; color: var(--muted); }

.finding-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.finding-form button { grid-column: 1 / -1; justify-self: start; }

.contacts-form {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.contacts-form h4.full {
    grid-column: 1 / -1;
    margin: 10px 0 0;
    color: var(--accent);
}

.contacts-form h4.full:first-of-type { margin-top: 0; }

details summary {
    cursor: pointer;
    font-size: 1rem;
    color: var(--accent);
    list-style: none;
}

details[open] summary { margin-bottom: 6px; }

.add-control-form { grid-template-columns: 1fr 1fr; }

.dashboard-chart {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: 4px auto 8px;
    border-radius: 8px;
}

.dashboard-header {
    display: block;
    margin-bottom: 1.25rem;
    margin-top: 2rem;
}
.dashboard-header .header-row {
    align-items: center;
}
.dashboard-header .header-row > div:first-child {
    flex: 1;
}
.dashboard-header .header-row .link-button {
    flex-shrink: 0;
}

.eyebrow {
    margin: 0 0 2px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.dashboard-header h2 {
    margin: 4px 0 0;
    font-size: 1.4rem;
    font-weight: 500;
}

.dashboard-actions {
    display: flex;
    gap: 6px;
}
.dashboard-actions button {
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 6px;
    border: 0.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}
.dashboard-actions button:hover {
    background: var(--surface-1);
    border-color: var(--border-strong);
}

/* 2-column module layout on home page */
.home-modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.home-module-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* compact module header card */
.home-module-col .dashboard-header {
    margin-bottom: 0;
}

.home-module-col .dashboard-header h2 {
    font-size: 1.1rem;
    margin: 0 0 2px;
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    flex: 1 1 calc(25% - 7.5px);
    background: var(--card-bg);
    border: 0.5px solid var(--border);
    border-top: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

@media (max-width: 1000px) {
    .stat-card { flex-basis: calc(50% - 5px); }
}

@media (max-width: 600px) {
    .stat-card { flex-basis: 100%; }
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 400;
}

.stat-card.stat-completed { border-top-color: var(--low); }
.stat-card.stat-completed .stat-value { color: var(--low); }
.stat-card.stat-pending { border-top-color: var(--medium); }
.stat-card.stat-pending .stat-value { color: var(--medium); }
.stat-card.stat-overdue { border-top-color: var(--critical, #b00020); }
.stat-card.stat-overdue .stat-value { color: var(--critical, #b00020); }
.stat-card.stat-compliant { border-top-color: var(--low); }
.stat-card.stat-compliant .stat-value { color: var(--low); }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dashboard-grid .card { margin-bottom: 0; }

.dashboard-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 1000px) {
    .home-modules-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* ── Scope picker (org / subsidiary / department) ── */
.js-scope-tree { max-width: 520px; }

/* Modal overlay and box */
.scope-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.scope-modal-box {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    padding: 20px;
}

.scope-modal-box h3 {
    margin: 0 0 16px;
    font-size: 1.2rem;
    color: var(--accent);
}

.scope-modal-content {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
}

.scope-modal-section {
    margin-bottom: 12px;
}

.scope-modal-section:last-child {
    margin-bottom: 0;
}

.scope-modal-label,
.scope-modal-branch {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.scope-modal-branch {
    margin-top: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

.scope-modal-dept {
    margin-left: 0;
    margin-bottom: 4px;
    text-align: left;
}

.scope-modal-empty {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted);
    padding: 2px 0;
}

/* Beat the .form-grid label column layout — the modal lives inside module
   create forms, so checkbox rows must be forced back to a horizontal row. */
.form-grid label.scope-check,
.finding-form label.scope-check,
label.scope-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
}

.scope-modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.scope-modal-buttons button {
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.scope-modal-buttons button:first-child {
    background: var(--accent);
    color: white;
}

.scope-modal-buttons button:last-child {
    background: var(--hover-bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.scope-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.scope-toggle-btn {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    font-family: inherit;
    padding: 6px 8px;
    border-radius: 6px;
    border: 0.5px solid var(--border);
    background: var(--card-bg);
    color: var(--muted);
    cursor: pointer;
}
.scope-toggle-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 500;
}

.scope-panel {
    border: 0.5px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}
.scope-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 2px 0;
    cursor: pointer;
    margin: 0;
    text-align: left;
}
.scope-check input { margin: 0; width: 14px; height: 14px; flex-shrink: 0; }
.scope-check label { margin: 0; }

.scope-orglevel {
    padding: 8px 10px;
    background: var(--surface);
    border-bottom: 0.5px solid var(--border);
    text-align: left;
}
.scope-orglevel-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 4px;
    text-align: left;
}

.scope-branch { border-bottom: 0.5px solid var(--border); }
.scope-branch:last-child { border-bottom: none; }
.scope-branch-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    cursor: pointer;
    text-align: left;
}
.scope-chevron {
    font-size: 0.65rem;
    color: var(--muted);
    width: 10px;
    display: inline-block;
    text-align: center;
    flex-shrink: 0;
}
.scope-branch-name {
    flex: 1;
    font-weight: 500;
    color: var(--text);
    text-align: left;
    font-size: 0.8rem;
}
.scope-depts {
    padding: 4px 10px 8px 28px;
    background: var(--card-bg);
    text-align: left;
}
.scope-depts .scope-indent { font-weight: 400; }

.scope-summary {
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--brand-fade);
    border-radius: 6px;
    font-size: 0.72rem;
    color: var(--accent);
    line-height: 1.4;
}

.ioc-widget-card {
    padding: 14px 16px;
    height: 340px;
    max-height: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.ioc-widget-card .dashboard-title { font-size: 0.9rem; margin-bottom: 4px; padding-bottom: 8px; }

.ioc-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ioc-widget-list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
}

.ioc-widget-list li:last-child { border-bottom: none; padding-bottom: 0; }

.ioc-row-top {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.ioc-badge {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ioc-badge-malware  { background: #fde8e8; color: #7b1d1d; }
.ioc-badge-botnet   { background: #fef3cd; color: #7d5a00; }
.ioc-badge-phishing { background: #fde8f0; color: #7b1d4a; }
.ioc-badge-other    { background: #e8edf5; color: #1e3a5f; }

.ioc-status {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ioc-status-online  { background: #e8f5e9; color: #1b5e20; }
.ioc-status-offline { background: #f1f1f1; color: #666; }

:root[data-theme="dark"] .ioc-badge-malware  { background: #4a2426; color: #ff9b9b; }
:root[data-theme="dark"] .ioc-badge-botnet   { background: #453a1c; color: #f0d878; }
:root[data-theme="dark"] .ioc-badge-phishing { background: #4a2440; color: #ff9bd4; }
:root[data-theme="dark"] .ioc-badge-other    { background: #1f3350; color: #9bc4ff; }
:root[data-theme="dark"] .ioc-status-online  { background: #223a26; color: #8be09a; }
:root[data-theme="dark"] .ioc-status-offline { background: #2a303c; color: #98a2b3; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ioc-badge-malware  { background: #4a2426; color: #ff9b9b; }
    :root:not([data-theme="light"]) .ioc-badge-botnet   { background: #453a1c; color: #f0d878; }
    :root:not([data-theme="light"]) .ioc-badge-phishing { background: #4a2440; color: #ff9bd4; }
    :root:not([data-theme="light"]) .ioc-badge-other    { background: #1f3350; color: #9bc4ff; }
    :root:not([data-theme="light"]) .ioc-status-online  { background: #223a26; color: #8be09a; }
    :root:not([data-theme="light"]) .ioc-status-offline { background: #2a303c; color: #98a2b3; }
}

.ioc-widget-meta.ioc-date {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ioc-body { min-width: 0; }

.ioc-summary,
.ioc-summary:visited {
    display: block;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    word-break: break-all;
    font-size: 0.77rem;
}

.ioc-widget-meta {
    display: block;
    color: var(--muted);
    margin-top: 2px;
    font-size: 0.69rem;
}

/* Dashboard status breakdown rows */
.dash-status-box { display: flex; flex-direction: column; gap: 5px; }
.dash-status-title { font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.dash-status-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 0.78rem;
}
.dash-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-status-name { flex: 1; font-weight: 500; }
.dash-status-count { font-size: 0.85rem; font-weight: 600; }
.dash-status-pct { font-size: 0.68rem; color: var(--muted); min-width: 28px; text-align: right; }

/* Brand logo */
.brand-logo { height: 38px; width: auto; display: block; }

.brand-name-default { color: #fff; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.01em; }

.evidence-section {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.evidence-label { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 6px; }

.evidence-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.evidence-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.9rem;
}

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

.link-button.small { padding: 3px 8px; font-size: 0.78rem; }

.evidence-upload-form {
    display: flex;
    gap: 8px;
    align-items: center;
}

.evidence-paste {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--muted);
    text-align: center;
    cursor: text;
    background: var(--card-bg);
}

.evidence-paste:focus {
    outline: none;
    border-color: var(--accent);
    color: var(--text);
}

.flash {
    background: var(--flash-bg);
    border: 1px solid var(--flash-border);
    color: var(--flash-text);
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.news-ticker {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 20;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.news-ticker-label {
    flex-shrink: 0;
    background: #143247;
    padding: 9px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.news-ticker-track-wrap {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}

.news-ticker-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: news-ticker-scroll 140s linear infinite;
}

.news-ticker-track:hover { animation-play-state: paused; }

@keyframes news-ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.news-ticker-item,
.news-ticker-item:visited {
    display: inline-block;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    padding: 9px 0;
}

.news-ticker-item:hover { text-decoration: underline; }

.news-ticker-source {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    padding: 2px 6px;
    margin-right: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.news-ticker-sep {
    display: inline-block;
    margin: 0 18px;
    opacity: 0.5;
}