/* ENDI brand theme: Tajawal everywhere + polished layout */
:root {
    --brand-navy: #0f1f3d;
    --brand-navy-2: #16305f;
    --brand-blue: #2457c5;
    --brand-accent: #3b82f6;
    --font-tajawal: 'Tajawal', sans-serif;
}

/* Tajawal everywhere (icon fonts excluded) */
html, body, button, input, select, textarea, table, h1, h2, h3, h4, h5, h6,
.btn, .form-control, .form-select, .dropdown-menu, .nav-link,
.dx-widget, .dx-widget input, .dx-widget textarea, .dx-button-text, .dx-texteditor-input,
.dx-datagrid, .dx-treelist, .dx-popup-title, .dx-field-item-label-text, .dx-toast-message,
.e-control, .e-css, .e-input {
    font-family: var(--font-tajawal) !important;
}
body { font-size: 15px; }

/* ===== Sidebar ===== */
.app-sidebar {
    background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%) !important;
    color: #dbe5f7;
    display: flex;
    flex-direction: column;
}
.app-sidebar .sidebar-brand {
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem 1rem; margin-bottom: .5rem;
    border-bottom: 1px solid #ffffff1f;
    text-decoration: none;
}
.app-sidebar .sidebar-brand img { max-width: 100%; height: 44px; object-fit: contain; }
.app-sidebar .nav { padding: .5rem .75rem; gap: .25rem; }
.app-sidebar .nav-link {
    display: flex; align-items: center; gap: .75rem;
    color: #c5d3ee !important; font-weight: 500;
    padding: .65rem .9rem; border-radius: 10px;
    transition: background .2s, color .2s, transform .2s;
}
.app-sidebar .nav-link i { font-size: 1.15rem; opacity: .9; }
.app-sidebar .nav-link:hover { background: #ffffff14; color: #fff !important; }
.app-sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-accent));
    color: #fff !important; box-shadow: 0 6px 16px #2457c566;
}
.app-sidebar .text-muted { color: #8fa3c8 !important; }
.app-sidebar .border-top { border-color: #ffffff1f !important; }

/* ===== Header ===== */
.app-header {
    background: #ffffffd9;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--portal-border);
    box-shadow: 0 2px 14px #0f1f3d0f;
    padding: .65rem 1.25rem;
    display: flex; align-items: center; gap: .75rem;
}
.app-header .dropdown-toggle {
    border-radius: 999px; padding: .4rem .9rem; font-weight: 600;
    border: 1px solid var(--portal-border); background: #fff;
}
.app-header .dropdown-menu { border: 0; border-radius: 12px; box-shadow: 0 12px 32px #0f1f3d26; padding: .4rem; }
.app-header .dropdown-item { border-radius: 8px; }
.language-switcher .btn { font-weight: 600; }
.app-page-context { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: .5rem; min-width: 0; padding-inline: .75rem; text-align: center; }
.app-page-context > span { overflow: hidden; color: var(--brand-navy); font-size: 1rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.app-page-help { display: inline-grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #d9e4f3; border-radius: 50%; color: #42659a; background: #f6f9ff; }
.app-page-help:hover, .app-page-help:focus-visible { color: #fff; border-color: var(--brand-blue); background: var(--brand-blue); }
.app-page-help-dialog { width: min(520px, calc(100vw - 1.5rem)); }
.app-page-help-dialog .modal-content { overflow: hidden; border: 1px solid #e2eaf5; border-radius: 18px; box-shadow: 0 24px 70px #142d5540; }
.app-page-help-dialog .modal-header { align-items: flex-start; padding: 1rem 1.2rem; }
.app-page-help-eyebrow { margin-bottom: .2rem; color: #6880a5; font-size: .66rem; font-weight: 800; letter-spacing: .1em; }
.app-page-help-overview { margin: 0; color: #425a7c; line-height: 1.7; }
.app-page-help-notes { display: grid; gap: .55rem; margin: .9rem 0 0; padding-inline-start: 1.15rem; color: #526988; line-height: 1.6; }

/* ===== Login ===== */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
    background:
        linear-gradient(135deg, #0f1f3dee 0%, #2457c5dd 100%),
        url('/imgs/pattern.png') center / cover;
}
.login-card {
    width: 100%; max-width: 440px; background: #fff; border-radius: 20px;
    box-shadow: 0 30px 80px #00000055; overflow: hidden;
    animation: loginIn .5s ease both;
}
@keyframes loginIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.login-header {
    padding: 2rem 2rem 1.25rem; text-align: center; background: #f6f9ff;
    border-bottom: 1px solid var(--portal-border);
}
.login-header img { height: 64px; max-width: 80%; object-fit: contain; margin-bottom: .75rem; }
.login-header p { margin: 0; color: var(--portal-muted); font-size: .9rem; }
.login-body { padding: 2rem; }
.login-body .form-control, .login-body .input-group-text { padding: .65rem .85rem; }
.login-body .btn-primary {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-accent));
    border: 0; border-radius: 10px; box-shadow: 0 8px 18px #2457c540;
}
.login-body .btn-primary:hover { filter: brightness(1.08); }

/* ===== Collapsible sidebar + responsive layout ===== */
.app-main { min-width: 0; }
.app-sidebar { width: 260px; transition: width .25s ease, transform .25s ease; }
.sidebar-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border-radius: 10px;
    border: 1px solid var(--portal-border); background: #fff; color: var(--brand-navy);
}
.sidebar-toggle-btn:hover { background: #eef3ff; }
.sidebar-toggle-btn i { font-size: 1.3rem; }
.sidebar-backdrop { display: none; }
.app-header { height: auto !important; min-height: 64px; flex-wrap: wrap; }
.app-header #superAdminTenantScopeForm .dx-selectbox { max-width: 100%; }

/* Desktop: collapse to icons only */
@media (min-width: 992px) {
    body.sidebar-collapsed .app-sidebar { width: 76px; }
    body.sidebar-collapsed .app-sidebar .nav-link { justify-content: center; padding: .7rem 0; }
    body.sidebar-collapsed .app-sidebar .nav-link span,
    body.sidebar-collapsed .app-sidebar .nav-link small,
    body.sidebar-collapsed .app-sidebar > div small { display: none !important; }
    body.sidebar-collapsed .app-sidebar .nav-link i { font-size: 1.35rem; margin: 0; }
    body.sidebar-collapsed .app-sidebar .sidebar-brand img { height: 36px; }
}

/* Tablet & mobile: off-canvas drawer */
@media (max-width: 991.98px) {
    body .app-sidebar {
        position: fixed; top: 0; bottom: 0; inset-inline-start: 0; height: 100%;
        width: 270px; max-width: 85vw; overflow-y: auto;
        transform: translateX(-100%); z-index: 1100;
    }
    body.app-rtl .app-sidebar { transform: translateX(100%); }
    body .app-sidebar.open { transform: none; width: 270px; box-shadow: 0 0 40px #0008; }
    .sidebar-backdrop {
        position: fixed; inset: 0; background: #0b1224aa; z-index: 1090; backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.show { display: block; }
    .app-header { padding: .5rem .85rem; }
    .app-header #superAdminTenantScopeForm { order: 5; flex: 1 1 100%; margin: 0 !important; }
    .app-header #superAdminTenantScopeForm .dx-selectbox { width: 100% !important; flex: 1; }
}

/* Risk assessment workspace */
.risk-page { display: flex; flex-direction: column; gap: 18px; min-height: calc(100dvh - 78px); padding: clamp(14px, 1.6vw, 26px); color: #172b4d; }
.risk-page-heading, .risk-detail-heading { display: flex; align-items: center; gap: 18px; }
.risk-page-heading { justify-content: space-between; padding: 2px 3px; }
.risk-eyebrow { color: #55719b; font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.risk-page-heading h1, .risk-detail-heading h1 { color: #142d55; font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 800; margin: 4px 0 5px; }
.risk-page-heading p, .risk-detail-heading p { color: #60799e; margin: 0; }
.risk-heading-mark { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #315bd4; background: #eaf0ff; font-size: 1.35rem; }
.risk-process-strip { display: flex; align-items: stretch; gap: 14px; padding: 16px 18px; border: 1px solid #dce6f4; border-radius: 18px; background: linear-gradient(110deg, #fff, #f6f9ff); box-shadow: 0 8px 26px #1837660a; }
.risk-process-step { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.risk-process-step > span { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #315bd4; font-weight: 800; }
.risk-process-step strong { display: block; font-size: .9rem; }
.risk-process-step small { display: block; margin-top: 3px; color: #7085a5; line-height: 1.45; }
.risk-process-line { align-self: center; flex: 0 0 clamp(14px, 4vw, 58px); height: 1px; background: #cad7ea; }
.risk-workspace-card, .risk-detail-card { min-width: 0; border: 1px solid #dce6f4; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px #1837660a; }
.risk-workspace-card { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 480px; overflow: hidden; }
.risk-workspace-tabs { flex: 0 0 auto; padding: 0 18px; border-bottom-color: #e4ebf5; background: #fbfcff; }
.risk-workspace-tabs .nav-link { display: inline-flex; align-items: center; gap: 9px; padding: 16px 15px; border: 0; border-bottom: 3px solid transparent; color: #647b9f; font-weight: 700; }
.risk-workspace-tabs .nav-link.active { color: #2858d4; border-bottom-color: #315bd4; background: transparent; }
.risk-workspace-content { flex: 1 1 auto; min-height: 0; padding: 16px; }
.risk-workspace-content > .tab-pane { min-height: 100%; }
.risk-section-hint { display: flex; align-items: flex-start; gap: 9px; margin: 0 2px 12px; color: #687f9f; font-size: .9rem; }
.risk-section-hint i { margin-top: 3px; color: #e59729; }
.risk-detail-heading { flex-wrap: wrap; }
.risk-back-button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dce6f4; color: #385a8d; white-space: nowrap; }
.risk-assessment-heading-main { flex: 1; min-width: 240px; }
.risk-detail-heading h1 { font-size: clamp(1.35rem, 1.8vw, 1.8rem); }
.risk-detail-heading p { font-size: .9rem; }
.risk-detail-heading p span { margin: 0 5px; color: #9cacbf; }
.risk-stage-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #dce6f4; border-radius: 999px; color: #3e5f98; background: #f5f8ff; font-size: .8rem; font-weight: 750; white-space: nowrap; }
.risk-stage-chip i { color: #315bd4; }
.risk-status-pill { padding: 7px 13px; border-radius: 999px; border: 1px solid #d9e3f1; color: #4e6688; background: #f6f8fc; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.risk-status-inprogress { color: #925700; border-color: #f7d58f; background: #fff7e6; }
.risk-status-submitted, .risk-status-underreview { color: #2554b8; border-color: #cbd8ff; background: #eef3ff; }
.risk-status-approved { color: #167448; border-color: #b7e3ce; background: #eaf8f0; }
.risk-status-rejected { color: #aa3434; border-color: #f0c7c7; background: #fff0f0; }
.risk-stage-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #dce6f4; border-radius: 16px; background: #f7f9ff; }
.risk-stage-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #315bd4; background: #e7edff; }
.risk-stage-banner strong { display: block; color: #1c355d; }
.risk-stage-banner p { margin: 3px 0 0; color: #687f9f; font-size: .88rem; }
.risk-stage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }
.risk-stage-actions .btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; font-weight: 700; }
.risk-detail-card { padding: 14px; }
.risk-card-heading { display: flex; align-items: center; justify-content: space-between; margin: 1px 2px 12px; }
.risk-card-heading > div { display: flex; align-items: center; gap: 12px; }
.risk-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #315bd4; background: #eef2ff; }
.risk-card-icon-muted { color: #69809f; background: #f1f4f8; }
.risk-card-heading h2 { margin: 0; color: #18345f; font-size: 1.03rem; font-weight: 800; }
.risk-card-heading p { margin: 3px 0 0; color: #7185a2; font-size: .83rem; }
.risk-review-history { padding-bottom: 10px; }
.risk-detail-page .dx-datagrid { border-radius: 10px; overflow: hidden; }
.risk-detail-page .risk-review-history .dx-datagrid-headers { background: #f7f9fd; }
.risk-register-layout { display: grid; grid-template-columns: minmax(205px, 245px) minmax(0, 1fr); gap: 14px; min-width: 0; align-items: stretch; }
.risk-unit-panel, .risk-register-grid-panel { min-width: 0; border: 1px solid #e1e8f1; border-radius: 13px; background: #fff; }
.risk-unit-panel { align-self: start; overflow: hidden; }
.risk-unit-panel-heading, .risk-register-grid-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e8edf5; }
.risk-unit-panel-heading strong, .risk-register-grid-heading strong { display: block; color: #203a62; font-size: .9rem; }
.risk-unit-panel-heading small, .risk-register-grid-heading small { display: block; margin-top: 3px; color: #788ba6; font-size: .76rem; line-height: 1.35; }
.risk-unit-search { display: flex; align-items: center; gap: 8px; margin: 9px 10px 2px; padding: 0 9px; border: 1px solid #dce5f1; border-radius: 8px; background: #f8faff; color: #788ba6; }
.risk-unit-search:focus-within { border-color: #6480ef; box-shadow: 0 0 0 3px rgb(69 98 230 / 12%); }
.risk-unit-search .form-control { min-width: 0; height: 34px; padding: 5px 0; border: 0; background: transparent; box-shadow: none; color: #29476f; font-size: .8rem; }
.risk-unit-search .form-control:focus { outline: 0; }
.risk-unit-tree { max-height: calc(100dvh - 455px); min-height: 180px; overflow: auto; padding: 8px; }
.risk-unit-list { list-style: none; margin: 0; padding: 0; }
.risk-unit-children { padding-inline-start: 11px; border-inline-start: 1px solid #e2e9f3; margin-inline-start: 10px; }
.risk-unit-list li[aria-expanded="false"] > .risk-unit-children { display: none; }
.risk-unit-row { display: flex; align-items: center; gap: 3px; min-width: 0; }
.risk-unit-choice { flex: 1 1 auto; min-width: 0; overflow: hidden; border: 0; border-radius: 7px; padding: 7px 8px; background: transparent; color: #39577f; text-align: start; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.risk-unit-choice:hover { background: #f3f6fc; }
.risk-unit-choice.active { background: #eaf0ff; color: #2452c1; font-weight: 700; }
.risk-unit-toggle, .risk-unit-spacer { display: grid; flex: 0 0 23px; place-items: center; width: 23px; height: 29px; border: 0; border-radius: 6px; background: transparent; color: #8192aa; font-size: .68rem; }
.risk-unit-toggle:hover { background: #f3f6fc; }
.risk-unit-report { display: grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 7px; color: #3972d4; background: transparent; }
.risk-unit-report:hover { color: #1d4db0; background: #eaf0ff; }
.risk-register-grid-panel { overflow: hidden; }
.risk-register-grid-panel > #riskRegisterGrid { padding: 8px; }
.risk-register-grid-heading .btn { flex: 0 0 auto; white-space: nowrap; }
.risk-report-dialog { width: min(1180px, calc(100vw - 2rem)); max-width: none; }
#riskRegisterReportModal .modal-content { height: min(88dvh, 850px); }
#riskRegisterReportModal .modal-body { min-height: 0; }
#riskRegisterReportFrame { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
    .risk-process-strip { flex-direction: column; }
    .risk-process-line { flex: 0 0 1px; align-self: flex-start; width: 1px; height: 12px; margin-inline-start: 16px; }
    .risk-stage-banner { align-items: flex-start; flex-wrap: wrap; }
    .risk-stage-actions { width: 100%; margin-inline-start: 56px; }
    .risk-register-layout { grid-template-columns: minmax(0, 1fr); }
    .risk-unit-tree { max-height: 220px; min-height: 100px; }
}
@media (max-width: 575.98px) {
    .risk-page { padding: 12px; gap: 12px; }
    .risk-workspace-content { padding: 10px; }
    .risk-workspace-tabs { padding: 0 8px; }
    .risk-workspace-tabs .nav-link { padding: 13px 9px; font-size: .85rem; }
    .risk-stage-actions { margin-inline-start: 0; }
    .risk-stage-actions .btn { flex: 1 1 100%; justify-content: center; }
    .risk-register-grid-heading { align-items: flex-start; flex-direction: column; }
    .risk-register-grid-heading .btn { width: 100%; justify-content: center; }
    .risk-report-dialog { width: calc(100vw - 1rem); margin-inline: .5rem; }
    .risk-back-button { order: 2; }
    .risk-status-pill { margin-inline-start: auto; }
}
@media (max-width: 575.98px) {
    .app-header .dropdown-toggle { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .language-switcher .btn { min-width: 44px; padding-inline: .5rem; }
    #app-main-content { padding: .5rem !important; }
}

.app-sidebar .nav-link i { width: 1.4rem; text-align: center; font-size: 1.05rem; }
.fa-solid, .fa-regular, .fa-light { line-height: 1; }

/* ===== Login: split screen (video + form) ===== */
body.login-body-page { margin: 0; background: #f4f7fb; color: #172b4d; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

.login-visual { position: relative; overflow: hidden; background: var(--brand-navy); display: flex; align-items: flex-end; }
.login-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.login-visual-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, #0f1f3d66 0%, #0f1f3d99 55%, #0f1f3df2 100%),
        linear-gradient(135deg, #16305f80, #2457c540);
}
.login-visual-content { position: relative; z-index: 1; padding: clamp(1.75rem, 4vw, 3.5rem); color: #fff; max-width: 560px; }
.login-visual-logo { height: 56px; margin-bottom: 1.25rem; object-fit: contain; }
.login-visual-content h2 { font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin: 0 0 .5rem; }
.login-visual-content p { margin: 0; font-size: 1.1rem; color: #cfdcf7; font-weight: 500; }
.login-visual-content::before { content: ''; display: block; width: 56px; height: 4px; border-radius: 4px; margin-bottom: 1.25rem; background: linear-gradient(90deg, var(--brand-accent), #7fb0ff); }

.login-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 4.5rem 1.5rem 2rem; background: #f4f7fb; }
.login-lang { position: absolute; top: 1.25rem; inset-inline-end: 1.25rem; }
.login-panel .login-card {
    width: 100%; max-width: 440px; background: #fff; border-radius: 20px; overflow: visible;
    border: 1px solid var(--portal-border); box-shadow: 0 24px 60px #0f1f3d1f; animation: loginIn .5s ease both;
}
.login-panel .login-header { background: transparent; border: 0; padding: 2rem 2rem 0; }
.login-panel .login-header img { height: 58px; margin: 0; }
.login-panel .login-body { padding: 1.25rem 2rem 2rem; }
.login-title { font-size: 1.55rem; font-weight: 800; margin: 0 0 .25rem; color: var(--brand-navy); }
.login-subtitle { margin: 0 0 1.5rem; color: var(--portal-muted); font-size: .95rem; }

.login-alert { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .9rem; margin-bottom: 1.1rem; border-radius: 10px; background: #fff1f1; border: 1px solid #f5c2c2; color: #b42318; font-size: .9rem; }
.login-alert i { margin-top: .2rem; }
.login-alert ul { margin: 0; padding-inline-start: 1rem; }

.field { margin-bottom: 1.1rem; }
.field-label { display: block; margin-bottom: .4rem; font-weight: 700; font-size: .9rem; color: #243b63; }
.field-control { position: relative; display: flex; align-items: center; }
.field-icon { position: absolute; inset-inline-start: 1rem; color: #8aa0c4; font-size: .95rem; pointer-events: none; transition: color .2s; }
.field-input {
    width: 100%; height: 50px; padding-inline: 2.75rem; border: 1.5px solid #d6e0f0; border-radius: 12px;
    background: #f8faff; color: #172b4d; font-size: 1rem; outline: 0; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input::placeholder { color: #a3b3cf; }
.field-input:hover { border-color: #b7c8e6; }
.field-input:focus { border-color: var(--brand-blue); background: #fff; box-shadow: 0 0 0 4px #2457c51f; }
.field-control:focus-within .field-icon { color: var(--brand-blue); }
.field-toggle { position: absolute; inset-inline-end: .35rem; width: 40px; height: 40px; border: 0; border-radius: 9px; background: transparent; color: #8aa0c4; cursor: pointer; }
.field-toggle:hover { background: #eaf0fc; color: var(--brand-blue); }
.field-error { display: block; margin-top: .3rem; color: #b42318; font-size: .82rem; }

.login-options { display: flex; justify-content: space-between; align-items: center; margin: .25rem 0 1.4rem; }
.login-check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .9rem; color: #435775; margin: 0; }
.login-check input { width: 18px; height: 18px; accent-color: var(--brand-blue); cursor: pointer; }

.login-submit {
    width: 100%; height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
    border: 0; border-radius: 12px; color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-navy-2), var(--brand-blue) 60%, var(--brand-accent));
    box-shadow: 0 12px 24px #2457c54d; transition: transform .15s, box-shadow .15s, filter .15s;
}
.login-submit:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 16px 28px #2457c566; }
.login-submit:active { transform: none; }
.login-submit:focus-visible { outline: 3px solid #2457c5aa; outline-offset: 3px; }
[dir="rtl"] .login-submit i { transform: scaleX(-1); }
.login-footer { color: var(--portal-muted); }

.login-lang form .btn { min-width: 64px; border-radius: 8px; font-weight: 700; }

@media (max-width: 991.98px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-visual { display: none; }
    .login-panel {
        min-height: 100vh;
        background: linear-gradient(135deg, #0f1f3dee, #2457c5dd), url('/imgs/pattern.png') center / cover;
    }
    .login-footer { color: #d3def5; }
    .login-lang { background: #ffffffe6; border-radius: 10px; }
}
@media (max-width: 480px) {
    .login-panel .login-body { padding: 1rem 1.25rem 1.5rem; }
    .login-panel .login-header { padding: 1.5rem 1.25rem 0; }
}
@media (prefers-reduced-motion: reduce) { .login-panel .login-card { animation: none; } .login-submit { transition: none; } }

/* ===== Login: full-screen video background ===== */
body.login-body-page { background: var(--brand-navy); }
.login-shell { position: relative; min-height: 100vh; }
.login-visual { position: fixed; inset: 0; z-index: 0; display: block; }
.login-visual-content { position: absolute; inset-block-end: 0; inset-inline-start: 0; }
.login-visual-overlay {
    background:
        linear-gradient(90deg, #0f1f3d26 0%, #0f1f3d73 100%),
        linear-gradient(180deg, #0f1f3d33 0%, #0f1f3dcc 100%);
}
[dir="rtl"] .login-visual-overlay {
    background:
        linear-gradient(270deg, #0f1f3d26 0%, #0f1f3d73 100%),
        linear-gradient(180deg, #0f1f3d33 0%, #0f1f3dcc 100%);
}
.login-panel { position: relative; z-index: 1; background: transparent; grid-column: 2; }
[dir="rtl"] .login-panel { grid-column: 2; }
.login-panel .login-card {
    max-width: 380px; /* Make the card smaller */
    background: rgba(255, 255, 255, 0.3); /* Much more transparent (30% opacity) */
    backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.login-lang { background: #ffffffe6; border-radius: 10px; }
.login-footer { color: #e3ebfb; text-shadow: 0 1px 6px #0008; }

@media (max-width: 991.98px) {
    .login-visual { display: block; }
    .login-visual-content { display: none; }
    .login-shell { grid-template-columns: 1fr; }
    .login-panel { grid-column: 1; background: transparent; }
    .login-visual-overlay { background: linear-gradient(135deg, #0f1f3db3, #2457c566); }
}

/* Fix RTL sidebar */
[dir="rtl"] .app-sidebar .nav-link { flex-direction: row !important; }
[dir="rtl"] .app-sidebar .nav-link i { margin-right: 0; margin-left: 0.6rem; }

.compliance-page { width: 100%; max-width: 100%; padding: clamp(1rem, 2vw, 1.75rem); display: grid; gap: 1rem; color: #172b4d; }
.compliance-heading h1 { margin: .2rem 0 .35rem; font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 750; }
.compliance-heading p, .compliance-card-title p { margin: 0; color: #71819a; }
.compliance-note { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid #dce5f2; border-radius: 14px; background: #f7faff; color: #52647d; }
.compliance-note i { color: #3478d4; margin-top: .2rem; }
.compliance-card { padding: 1rem; border: 1px solid #e0e8f3; border-radius: 16px; background: #fff; box-shadow: 0 3px 12px #19375b0a; }
.compliance-card-title { display: flex; align-items: center; justify-content: space-between; margin: .15rem .2rem .85rem; }
.compliance-card-title h2 { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 700; }

/* Keep the risk workspace inside the app viewport and give its grids the free height. */
#app-main-content.risk-assessments-host {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding: .35rem !important;
}
#app-main-content.risk-assessments-host > .risk-page {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    gap: 7px;
    padding: 7px;
    overflow: hidden;
    box-sizing: border-box;
}
#app-main-content.risk-assessments-host .risk-page-heading { flex: 0 0 auto; padding: 0 2px; }
#app-main-content.risk-assessments-host .risk-eyebrow,
#app-main-content.risk-assessments-host .risk-page-heading p,
#app-main-content.risk-assessments-host .risk-heading-mark,
#app-main-content.risk-assessments-host .risk-process-strip { display: none; }
#app-main-content.risk-assessments-host .risk-page-heading h1 { margin: 0; font-size: 1.18rem; }
#app-main-content.risk-assessments-host .risk-workspace-card { flex: 1 1 0; min-height: 0; }
#app-main-content.risk-assessments-host .risk-workspace-tabs { padding-inline: 8px; }
#app-main-content.risk-assessments-host .risk-workspace-tabs .nav-link { padding: 8px 12px; }
#app-main-content.risk-assessments-host .risk-workspace-content {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    padding: 7px;
    overflow: hidden;
}
#app-main-content.risk-assessments-host .risk-workspace-content > .tab-pane { height: 100%; min-height: 0; }
#app-main-content.risk-assessments-host .risk-workspace-content > .tab-pane.active.show {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#app-main-content.risk-assessments-host .risk-section-hint {
    flex: 0 0 auto;
    min-height: 22px;
    margin: 0 2px 5px;
    align-items: center;
    overflow: hidden;
    font-size: .76rem;
    line-height: 1.25;
}
#app-main-content.risk-assessments-host .risk-section-hint span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#app-main-content.risk-assessments-host #riskAssessmentsGrid,
#app-main-content.risk-assessments-host #riskRegisterGrid {
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0;
}
#app-main-content.risk-assessments-host .risk-register-layout {
    flex: 1 1 0;
    grid-template-columns: minmax(175px, 205px) minmax(0, 1fr);
    min-height: 0;
}
#app-main-content.risk-assessments-host .risk-unit-panel,
#app-main-content.risk-assessments-host .risk-register-grid-panel {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}
#app-main-content.risk-assessments-host .risk-unit-panel-heading,
#app-main-content.risk-assessments-host .risk-register-grid-heading { padding: 7px 10px; }
#app-main-content.risk-assessments-host .risk-unit-panel-heading small,
#app-main-content.risk-assessments-host .risk-register-grid-heading small { display: none; }
#app-main-content.risk-assessments-host .risk-unit-tree {
    flex: 1 1 0;
    max-height: none;
    min-height: 0;
    padding: 5px;
}
#app-main-content.risk-assessments-host .risk-unit-choice { padding-block: 4px; }
#app-main-content.risk-assessments-host .risk-unit-scope-row {
    min-height: 31px;
    padding-inline: 2px;
    border-radius: 6px;
    color: #345780;
    background: #f7f9fd;
}
#app-main-content.risk-assessments-host .risk-unit-scope-label {
    flex: 1 1 auto;
    overflow: hidden;
    color: #314c73;
    font-size: .77rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#app-main-content.risk-assessments-host .risk-unit-scope-count {
    padding-inline: 6px;
    color: #71839d;
    font-size: .7rem;
}
#app-main-content.risk-assessments-host .risk-unit-scope[aria-expanded="false"] > .risk-unit-scope-children { display: none; }
#app-main-content.risk-assessments-host .risk-register-grid-panel > #riskRegisterGrid { flex: 1 1 0; }
#app-main-content.risk-assessments-host .risk-assessment-scope-label {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* Assessment cycles and the risk register now have separate full-page workspaces. */
#app-main-content.risk-assessments-host .risk-workspace-card,
#app-main-content.risk-register-host .risk-workspace-card {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
}
#app-main-content.risk-assessments-host .risk-assessment-grid-panel {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#app-main-content.risk-register-host {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding: .35rem !important;
}
#app-main-content.risk-register-host > .risk-page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    gap: 7px;
    padding: 7px;
    overflow: hidden;
    box-sizing: border-box;
}
#app-main-content.risk-register-host .risk-page-heading { flex: 0 0 auto; padding: 0 2px; }
#app-main-content.risk-register-host .risk-eyebrow,
#app-main-content.risk-register-host .risk-page-heading p,
#app-main-content.risk-register-host .risk-heading-mark { display: none; }
#app-main-content.risk-register-host .risk-page-heading h1 { margin: 0; font-size: 1.18rem; }
#app-main-content.risk-register-host .risk-section-hint {
    flex: 0 0 auto;
    min-height: 22px;
    margin: 0 2px 5px;
    align-items: center;
    overflow: hidden;
    font-size: .76rem;
    line-height: 1.25;
}
#app-main-content.risk-register-host .risk-section-hint span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app-main-content.risk-register-host .risk-register-layout {
    display: grid;
    flex: 1 1 0;
    grid-template-columns: minmax(175px, 205px) minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}
#app-main-content.risk-register-host .risk-unit-panel,
#app-main-content.risk-register-host .risk-register-grid-panel {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}
#app-main-content.risk-register-host .risk-unit-panel-heading,
#app-main-content.risk-register-host .risk-register-grid-heading { padding: 7px 10px; }
#app-main-content.risk-register-host .risk-unit-panel-heading small,
#app-main-content.risk-register-host .risk-register-grid-heading small { display: none; }
#app-main-content.risk-register-host .risk-unit-tree { flex: 1 1 0; max-height: none; min-height: 0; padding: 5px; }
#app-main-content.risk-register-host #riskRegisterGrid {
    flex: 1 1 0;
    width: 100%;
    height: auto !important;
    min-height: 0;
}
#app-main-content.risk-register-host .risk-unit-choice { padding-block: 4px; }
#app-main-content.risk-register-host .risk-unit-scope-row { min-height: 31px; padding-inline: 2px; border-radius: 6px; color: #345780; background: #f7f9fd; }
#app-main-content.risk-register-host .risk-unit-scope-label { flex: 1 1 auto; overflow: hidden; color: #314c73; font-size: .77rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
#app-main-content.risk-register-host .risk-unit-scope-count { padding-inline: 6px; color: #71839d; font-size: .7rem; }
#app-main-content.risk-register-host .risk-unit-scope[aria-expanded="false"] > .risk-unit-scope-children { display: none; }

/* Assessment details: keep workflow context compact and give the scoring grid the viewport. */
#app-main-content:has(.risk-detail-page) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: .35rem !important;
}
#app-main-content:has(.risk-detail-page) > .risk-detail-page {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    gap: 7px;
    padding: 7px;
    overflow: hidden;
    box-sizing: border-box;
}
#app-main-content:has(.risk-detail-page) .risk-detail-heading { flex: 0 0 auto; gap: 10px; }
#app-main-content:has(.risk-detail-page) .risk-back-button { padding: .38rem .6rem; font-size: .82rem; }
#app-main-content:has(.risk-detail-page) .risk-eyebrow { font-size: .66rem; }
#app-main-content:has(.risk-detail-page) .risk-detail-heading h1 { margin: 0; font-size: 1.15rem; }
#app-main-content:has(.risk-detail-page) .risk-detail-heading p { display: none; }
#app-main-content:has(.risk-detail-page) .risk-stage-chip { padding: 5px 8px; font-size: .74rem; }
#app-main-content:has(.risk-detail-page) .risk-status-pill { padding: 5px 10px; }
#app-main-content:has(.risk-detail-page) .risk-stage-actions { gap: 5px; }
#app-main-content:has(.risk-detail-page) .risk-stage-actions .btn { padding: .36rem .58rem; font-size: .78rem; }
#app-main-content:has(.risk-detail-page) .risk-detail-card:first-of-type {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 8px;
}
#app-main-content:has(.risk-detail-page) .risk-detail-card:first-of-type .risk-card-heading { flex: 0 0 auto; margin: 0 2px 5px; }
#app-main-content:has(.risk-detail-page) .risk-detail-card:first-of-type .risk-card-icon { width: 30px; height: 30px; border-radius: 9px; }
#app-main-content:has(.risk-detail-page) .risk-detail-card:first-of-type .risk-card-heading p { display: none; }
#app-main-content:has(.risk-detail-page) #assessmentItemsGrid { flex: 1 1 0; width: 100%; height: 100% !important; min-height: 0; }
#app-main-content:has(.risk-detail-page) .risk-review-history { flex: 0 0 126px; min-height: 0; overflow: hidden; padding: 6px 8px; }
/* Set all three flex values: setting only flex-basis left flex-grow: 1 from inherited rules,
   which made a collapsed <details> panel consume most of the page and starve the main grid. */
#app-main-content:has(.risk-detail-page) details.risk-review-history:not([open]) { flex: 0 0 44px; height: 44px; padding: 5px 8px; }
#app-main-content:has(.risk-detail-page) details.risk-review-history[open] { flex: 0 0 254px; height: 254px; }
#app-main-content:has(.risk-detail-page) .risk-review-summary { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 0 2px; cursor: pointer; list-style: none; }
#app-main-content:has(.risk-detail-page) .risk-review-summary::-webkit-details-marker { display: none; }
#app-main-content:has(.risk-detail-page) .risk-review-summary > div { display: flex; align-items: center; gap: 8px; }
#app-main-content:has(.risk-detail-page) .risk-review-toggle-hint { color: #7185a2; font-size: .78rem; transition: transform .15s ease; }
#app-main-content:has(.risk-detail-page) .risk-review-history[open] .risk-review-toggle-hint { transform: rotate(180deg); }
#app-main-content:has(.risk-detail-page) .risk-review-history .risk-card-heading { margin: 0 2px 4px; }
#app-main-content:has(.risk-detail-page) .risk-review-history .risk-card-icon { width: 27px; height: 27px; border-radius: 8px; }
#app-main-content:has(.risk-detail-page) .risk-review-history .risk-card-heading h2 { font-size: .9rem; }
#app-main-content:has(.risk-detail-page) .risk-review-history .risk-card-heading p { display: none; }
#app-main-content:has(.risk-detail-page) #assessmentReviewsGrid { height: 210px !important; }
#app-main-content:has(.risk-detail-page) #assessmentReviewsGrid .dx-datagrid-header-panel { display: none; }
#app-main-content:has(.risk-detail-page) #assessmentReviewsGrid .dx-datagrid-filter-row { display: none; }

.risk-guided-entry { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dce6f5; border-radius: 10px; background: #f7f9fd; color: #60748f; font-size: .88rem; }
.risk-guided-entry > i { color: #3867e8; }
.risk-return-popup:not([hidden]) { position: fixed; inset: 0; z-index: 3100; display: grid; place-items: center; padding: 18px; }
.risk-return-popup__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(13 28 54 / 52%); backdrop-filter: blur(2px); cursor: default; }
.risk-return-popup__panel { position: relative; width: min(560px, 94vw); overflow: hidden; border: 1px solid #dce6f5; border-radius: 16px; background: #fff; box-shadow: 0 24px 80px rgb(15 35 68 / 28%); color: #18365e; }
.risk-return-popup__header { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: start; gap: 12px; padding: 22px 24px 16px; }
.risk-return-popup__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: #fff0ed; color: #c85043; font-size: 1rem; }
.risk-return-popup__heading h2 { margin: 1px 0 5px; color: #18365e; font-size: 1.12rem; font-weight: 750; line-height: 1.4; }
.risk-return-popup__heading p { margin: 0; color: #74849b; font-size: .86rem; line-height: 1.6; }
.risk-return-popup__close { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; background: #f1f5fb; color: #62758f; font-size: 1.35rem; line-height: 1; }
.risk-return-popup__close:hover { background: #e8eef8; color: #304967; }
.risk-return-popup__body { padding: 2px 24px 20px; }
.risk-return-popup__body label { display: block; margin-bottom: 7px; color: #405874; font-size: .84rem; font-weight: 700; }
.risk-return-popup__body label span { color: #c85043; }
.risk-return-popup__body textarea { display: block; width: 100%; min-height: 124px; resize: vertical; padding: 11px 13px; border: 1px solid #d5dfed; border-radius: 10px; background: #fff; color: #263f60; font: inherit; font-size: .9rem; line-height: 1.55; transition: border-color .15s ease, box-shadow .15s ease; }
.risk-return-popup__body textarea:focus { outline: 0; border-color: #416cf0; box-shadow: 0 0 0 3px rgb(65 108 240 / 15%); }
.risk-return-popup__error { margin-top: 7px; color: #b33a32; font-size: .8rem; }
.risk-return-popup__error[hidden] { display: none; }
.risk-return-popup__footer { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 24px 18px; border-top: 1px solid #e8edf5; background: #fbfcfe; }
.risk-return-popup__footer .btn { min-width: 108px; }
@media (max-width: 560px) {
    .risk-return-popup:not([hidden]) { padding: 10px; }
    .risk-return-popup__header { grid-template-columns: 38px minmax(0, 1fr) 30px; gap: 10px; padding: 18px 17px 14px; }
    .risk-return-popup__icon { width: 38px; height: 38px; }
    .risk-return-popup__body { padding: 2px 17px 17px; }
    .risk-return-popup__footer { padding: 12px 17px 15px; }
}
.risk-guided-wizard:not([hidden]) { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 18px; }
.risk-guided-wizard__backdrop { position: absolute; inset: 0; background: rgb(13 28 54 / 48%); backdrop-filter: blur(2px); }
.risk-guided-wizard__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(1320px, 96vw); height: min(860px, 94vh); max-height: 94vh; overflow: hidden; border: 1px solid #dce6f5; border-radius: 18px; background: #fff; box-shadow: 0 24px 80px rgb(15 35 68 / 28%); color: #18365e; }
.risk-guided-wizard__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 26px 16px; }
.risk-guided-wizard__header h2 { margin: 4px 0 0; font-size: 1.22rem; font-weight: 700; }
.risk-guided-wizard__eyebrow { color: #416bd1; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.risk-guided-wizard__close { width: 34px; height: 34px; border: 0; border-radius: 9px; background: #f1f5fb; color: #62758f; font-size: 1.5rem; line-height: 1; }
.risk-guided-wizard__progress { height: 5px; margin: 0 26px; overflow: hidden; border-radius: 9px; background: #eaf0fa; }
.risk-guided-wizard__progress > div { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3b6df2,#25a4d8); transition: width .2s ease; }
.risk-guided-wizard__workspace { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "risk question"; min-height: 0; overflow: hidden; border-bottom: 1px solid #e8edf5; }
.risk-guided-wizard__risk, .risk-guided-wizard__question-pane { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.risk-guided-wizard__risk { grid-area: risk; padding: 21px 24px; border-inline-end: 1px solid #e8edf5; background: #fbfcff; }
.risk-guided-wizard__question-pane { grid-area: question; padding: 21px 24px; }
.risk-guided-wizard__section-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.risk-guided-wizard__section-heading .risk-card-icon { width: 34px; height: 34px; flex: 0 0 34px; }
.risk-guided-wizard__section-heading h3 { margin: 0; color: #18365e; font-size: .98rem; font-weight: 750; }
.risk-guided-wizard__section-heading p { margin: 3px 0 0; color: #8190a6; font-size: .72rem; }
.risk-guided-wizard__risk-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.risk-guided-wizard__risk-field { min-width: 0; padding: 9px 11px; border: 1px solid #e1e8f2; border-radius: 10px; background: #fff; }
.risk-guided-wizard__risk-field.is-wide { grid-column: 1 / -1; }
.risk-guided-wizard__risk-field > span { display: block; margin-bottom: 4px; color: #8190a6; font-size: .7rem; font-weight: 650; }
.risk-guided-wizard__risk-field > div { overflow-wrap: anywhere; color: #263f60; font-size: .81rem; line-height: 1.55; white-space: pre-wrap; }
.risk-guided-wizard__question-heading { margin-bottom: 14px; }
.risk-guided-wizard__step { margin-bottom: 10px; color: #7b8ca4; font-size: .82rem; font-weight: 600; }
.risk-guided-wizard__question-pane h3 { margin: 0; color: #172f51; font-size: 1.1rem; line-height: 1.65; font-weight: 650; }
.risk-guided-wizard__choices { display: grid; gap: 10px; }
.risk-guided-wizard__choices[hidden], .risk-guided-wizard__rationale[hidden] { display: none; }
.risk-guided-wizard__rationale { display: grid; gap: 6px; margin-top: 18px; color: #526780; font-size: .78rem; font-weight: 650; }
.risk-guided-wizard__rationale textarea { width: 100%; min-height: 78px; resize: vertical; padding: 10px 12px; border: 1px solid #dce5f2; border-radius: 10px; background: #fff; color: #263f60; font: inherit; font-weight: 400; line-height: 1.5; }
.risk-guided-wizard__rationale textarea:focus { outline: 2px solid rgb(65 108 240 / 22%); border-color: #416cf0; }
.risk-guided-wizard__choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 54px; padding: 11px 15px; border: 1px solid #dce5f2; border-radius: 11px; background: #fff; color: #334a69; text-align: start; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.risk-guided-wizard__choice:hover { transform: translateY(-1px); border-color: #83a0ef; background: #f7f9ff; }
.risk-guided-wizard__choice[aria-pressed="true"] { border-color: #416cf0; background: #eff3ff; box-shadow: 0 0 0 2px rgb(65 108 240 / 12%); color: #234ec8; }
.risk-guided-wizard__choice strong { display: grid; min-width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #edf2fb; font-size: .88rem; }
.risk-guided-wizard__choice-copy { display: flex; flex-direction: column; gap: 3px; }
.risk-guided-wizard__choice-copy small { color: #72839a; font-size: .77rem; line-height: 1.45; }
.risk-guided-wizard__footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; padding: 14px 24px 17px; border-top: 1px solid #e8edf5; background: #fbfcfe; }
.risk-guided-wizard__live-result { flex: 1 1 auto; min-width: 0; }
.risk-guided-wizard__result-title { margin-bottom: 9px; color: #72839a; font-size: .76rem; font-weight: 700; }
.risk-guided-wizard__metrics { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)); gap: 7px; }
.risk-guided-wizard__metric { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 9px; border: 1px solid #e3eaf4; border-radius: 9px; background: #fff; }
.risk-guided-wizard__metric span { color: #7e8da2; font-size: .68rem; }
.risk-guided-wizard__metric strong { color: var(--risk-band-color, #18365e); font-size: .9rem; }
.risk-guided-wizard__metric--band { border-color: color-mix(in srgb, var(--risk-band-color, #8290a5) 30%, white); background: color-mix(in srgb, var(--risk-band-color, #8290a5) 12%, white); }
.risk-level-badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 29px; max-width: 100%; padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--risk-level-color) 34%, white); border-radius: 999px; background: color-mix(in srgb, var(--risk-level-color) 13%, white); color: color-mix(in srgb, var(--risk-level-color) 78%, #172f51); font-size: .77rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.risk-level-badge > i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--risk-level-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--risk-level-color) 15%, white); }
.risk-level-badge.is-pending { border-style: dashed; border-color: #d9e0eb; background: #f7f9fc; color: #8793a4; font-weight: 550; }
.risk-level-badge.is-pending > i { background: #aab4c2; box-shadow: none; }
.risk-guided-wizard__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.risk-guided-wizard__actions .btn { white-space: nowrap; }
.risk-guided-wizard__error { margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: #fff1f0; color: #b33a32; font-size: .86rem; }
@media (max-width: 720px) {
    .risk-guided-wizard:not([hidden]) { padding: 8px; }
    .risk-guided-wizard__panel { width: 100%; height: 96vh; max-height: 96vh; grid-template-rows: auto auto minmax(0, 1fr) auto; border-radius: 14px; }
    .risk-guided-wizard__header { padding: 16px 17px 12px; }
    .risk-guided-wizard__progress { margin-inline: 17px; }
    .risk-guided-wizard__workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, .72fr) minmax(220px, 1fr); grid-template-areas: "question" "risk"; }
    .risk-guided-wizard__risk, .risk-guided-wizard__question-pane { padding: 15px 17px; }
    .risk-guided-wizard__risk { border-inline-end: 0; border-top: 1px solid #e8edf5; }
    .risk-guided-wizard__footer { grid-template-columns: minmax(0, 1fr); align-items: stretch; padding: 12px 17px 14px; }
    .risk-guided-wizard__actions { justify-content: flex-end; }
    .risk-guided-wizard__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
    .risk-guided-wizard__metric { padding: 6px 7px; }
    .risk-guided-wizard__metric span { font-size: .62rem; }
    .risk-guided-wizard__metric strong { font-size: .8rem; }
}

@media (max-width: 800px) {
    #app-main-content:has(.risk-detail-page) { overflow-y: auto; }
    #app-main-content:has(.risk-detail-page) > .risk-detail-page { height: auto; min-height: 0; max-height: none; overflow: visible; }
    #app-main-content:has(.risk-detail-page) .risk-detail-card:first-of-type { min-height: 520px; }
    #app-main-content:has(.risk-detail-page) .risk-review-history { flex: 0 0 150px; }
    #app-main-content:has(.risk-detail-page) details.risk-review-history:not([open]) { flex: 0 0 44px; height: 44px; }
    #app-main-content:has(.risk-detail-page) details.risk-review-history[open] { flex: 0 0 254px; height: 254px; }
    #app-main-content:has(.risk-detail-page) #assessmentReviewsGrid { height: 210px !important; }
}
@media (max-width: 900px) {
    #app-main-content.risk-assessments-host .risk-register-layout,
    #app-main-content.risk-register-host .risk-register-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(90px, 18dvh) minmax(0, 1fr);
    }
}

/* The active screen title lives in the shared header; reclaim duplicate heading height. */
#app-main-content .audit-context-heading-relocated,
#app-main-content .audit-context-title-relocated,
#app-main-content .audit-context-help-relocated { display: none !important; }
.app-page-help-dialog .modal-body:empty { display: none; }
@media (max-width: 720px) {
    .app-header { gap: .45rem; }
    .app-page-context { padding-inline: .15rem; }
    .app-page-context > span { font-size: .88rem; }
    .app-page-help { flex-basis: 28px; width: 28px; height: 28px; }
}