/* De Compliance Afdeling — visual identity layer.
   This file is loaded after the functional module styles so the prototype keeps
   its behaviour while sharing one recognisable brand system. */
:root{
    --dca-blue:#1428b8;
    --dca-blue-dark:#0d1d86;
    --dca-blue-soft:#eef0ff;
    --dca-orange:#ff9700;
    --dca-orange-dark:#c96e00;
    --dca-orange-soft:#fff2dc;
    --ink:#18203d;
    --muted:#66708a;
    --line:#dfe3ef;
    --line-soft:#eff1f7;
    --bg:#f5f6fb;
    --nav:#fff;
    --nav-dark:#fff;
    --teal:var(--dca-blue);
    --teal-soft:var(--dca-blue-soft);
    --blue:var(--dca-blue);
    --blue-soft:var(--dca-blue-soft);
    --amber:var(--dca-orange-dark);
    --amber-soft:var(--dca-orange-soft);
    --shadow:0 10px 30px rgba(20,40,184,.08);
}

html,body{background:var(--bg);color:var(--ink)}
::selection{background:#dfe3ff;color:var(--dca-blue-dark)}
a{color:var(--dca-blue)}
:where(a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
    outline:3px solid rgba(255,151,0,.42);
    outline-offset:2px;
}

/* Main navigation */
.sidebar{
    background:#fff;
    color:var(--ink);
    border-right:1px solid var(--line);
    box-shadow:8px 0 28px rgba(20,40,184,.045);
}
.brand{
    height:100px;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
    border-top:4px solid var(--dca-orange);
    background:#fff;
    justify-content:center;
}
.brand img{display:block;width:100%;max-width:202px;height:auto}
.nav-scrollable{padding:15px 12px;overflow-y:auto;scrollbar-color:#cfd4eb transparent}
.nav-label{color:#858da8}
.nav-link{color:#49516d}
.nav-link>span{color:var(--dca-blue)}
.nav-link:hover{background:#f4f5ff;color:var(--dca-blue-dark)}
.nav-link.active{
    background:var(--dca-blue-soft);
    color:var(--dca-blue);
    font-weight:700;
}
.nav-link.active:before{
    left:-12px;
    top:7px;
    bottom:7px;
    width:4px;
    background:var(--dca-orange);
}
.nav-link em{background:var(--dca-orange-soft);color:#9d5600}
.sidebar-footer{
    background:#f7f8ff;
    border-color:var(--line);
    color:var(--ink);
}
.sidebar-footer>span{background:var(--dca-blue);color:#fff}
.sidebar-footer small{color:var(--muted)}

/* Header, content and typography */
.top-row{
    background:rgba(255,255,255,.96);
    border-bottom-color:var(--line);
    box-shadow:0 3px 14px rgba(20,40,184,.035);
}
.global-search>span,.icon-button{color:var(--dca-blue)}
.global-search-results a:hover,.notification-panel>a:hover{background:#f5f6ff}
.notification-dot{background:var(--dca-orange)}
.avatar{background:var(--dca-blue-soft);color:var(--dca-blue)}
.content{background-image:radial-gradient(circle at 100% 0,rgba(20,40,184,.035),transparent 28rem)}
.eyebrow{color:var(--dca-blue)}
.eyebrow:before{
    content:"";
    display:inline-block;
    width:13px;
    height:3px;
    margin:0 7px 2px 0;
    border-radius:3px;
    background:var(--dca-orange);
}
h1,h2,h3{color:var(--ink)}
h1[tabindex="-1"]:focus{outline:none}

/* Controls */
.btn.primary{
    background:var(--dca-blue);
    color:#fff;
    box-shadow:0 4px 12px rgba(20,40,184,.2);
}
.btn.primary:hover{background:var(--dca-blue-dark)}
.btn.secondary:hover{border-color:#aeb6dd;background:#f8f8ff;color:var(--dca-blue)}
.text-button{color:var(--dca-blue)}
input:focus,select:focus,textarea:focus{
    border-color:var(--dca-blue)!important;
    box-shadow:0 0 0 3px var(--dca-blue-soft)!important;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--dca-blue)}
.view-tabs button.active,.detail-tabs button.active,.policy-main-tabs button.active{
    color:var(--dca-blue);
    border-color:var(--dca-orange);
}
.reg-view-tabs button.active,.reg-detail-tabs button.active{
    color:var(--dca-blue);
    border-color:var(--dca-orange);
}

/* Cards and tables */
.panel,.table-panel,.content-section,.side-section,.settings-card,
.guided-steps,.guided-form-card,.guided-inspector>section,.document-outline,.policy-inspector>section{
    border-color:var(--line);
    box-shadow:0 5px 18px rgba(20,40,184,.035);
}
.metric:hover,.module-choice-card:hover,.asset-type-card:hover,.workload-card:hover{
    border-color:#b9c0e6;
    box-shadow:var(--shadow);
}
.metric-icon,.type-icon,.module-icon,.section-marker,.action-state{
    background:var(--dca-blue-soft);
    color:var(--dca-blue);
}
th{background:#f7f8fc;color:#626b87}
tbody tr:hover{background:#fafaff}
.tag-list span,.prototype-label,.record-type,.link-chips span,.link-chips a{background:#f0f1f8;color:#545e7a}

/* Branded summary surfaces. Risk and status colours remain semantic. */
.supporting-summary,.governance-settings-summary,.committee-hero,.policy-hero{
    background:linear-gradient(135deg,var(--dca-blue-dark),var(--dca-blue));
    border-color:var(--dca-blue-dark);
    box-shadow:0 12px 28px rgba(20,40,184,.14);
}
.supporting-summary span,.governance-settings-summary span,.committee-hero .eyebrow{color:#d8dcff}
.supporting-summary small,.governance-settings-summary small,.committee-hero p{color:#eef0ff}
.committee-members span{background:#fff;color:var(--dca-blue);border-color:#8f9be5}
.meeting-readiness>i b{background:var(--dca-orange)}
.policy-hero .eyebrow:before,.committee-hero .eyebrow:before{background:var(--dca-orange)}
.module-block{border-left-color:var(--dca-orange)}
.document-paper>header{border-bottom-color:var(--dca-orange)}
.document-paper>header>span{color:var(--dca-blue)}

/* Regulatory information uses calm brand surfaces; green stays reserved for
   content that is actually complete or accepted. */
.reg-profile-banner,.reg-library-intro,.reg-monitoring-intro,.reg-measure-intro{
    background:#f8f8ff;
    border-color:#daddf4;
}
.reg-avg-highlight{
    background:linear-gradient(135deg,#f0f2ff,#fafaff);
    border-color:#ccd2f5;
}
.reg-avg-highlight-counts{border-color:#dfe2f3}
.reg-dca-advice,.reg-linked-measures>a{background:#f7f8ff;border-color:#e0e3f3}

/* The overview shows that the actual source is present, not only its workflow. */
.reg-source-overview{overflow:hidden;margin-bottom:15px}
.reg-source-overview>header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:19px 21px 15px;
    background:linear-gradient(135deg,#f4f5ff,#fff);
    border-bottom:1px solid var(--line);
}
.reg-source-overview>header h2{margin:4px 0}
.reg-source-overview>header p{margin:0;color:var(--muted);font-size:9px;line-height:1.45}
.reg-source-total{
    flex:0 0 auto;
    display:flex;
    align-items:baseline;
    gap:5px;
    padding:8px 11px;
    border:1px solid #d8dcf5;
    border-radius:8px;
    background:#fff;
    color:var(--muted);
    font-size:8px;
    white-space:nowrap;
}
.reg-source-total strong{font:800 20px Manrope;color:var(--dca-blue)}
.reg-source-preview{display:grid;grid-template-columns:1fr 1fr;padding:5px 18px}
.reg-source-preview button{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 12px;
    gap:9px;
    align-items:center;
    min-width:0;
    padding:10px 3px;
    border:0;
    border-bottom:1px solid var(--line-soft);
    background:#fff;
    color:var(--ink);
    text-align:left;
}
.reg-source-preview button:nth-child(odd){padding-right:14px;border-right:1px solid var(--line-soft)}
.reg-source-preview button:nth-child(even){padding-left:14px}
.reg-source-preview button:hover{background:#fafaff}
.reg-source-preview button>span{color:var(--dca-blue);font-size:8px;font-weight:800}
.reg-source-preview button>strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.reg-source-preview button>i{color:#8991aa;font-style:normal}
.reg-source-overview>footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:13px 20px;
    background:#fafaff;
}
.reg-source-overview>footer>div{display:flex;gap:14px;color:var(--muted);font-size:8px}
.reg-source-overview>footer>div strong{color:var(--ink)}
.reg-source-overview>footer .btn{font-size:9px}

/* One clear applicability decision at a time. */
.reg-decision-guide{
    overflow:hidden;
    border:1px solid #d9ddf3;
    border-radius:9px;
    background:#fff;
}
.reg-decision-guide>header{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:11px;
    align-items:start;
    padding:15px 16px 12px;
}
.reg-decision-guide>header>span{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--dca-blue);
    color:#fff;
    font-weight:800;
}
.reg-decision-guide small,.reg-recorded-decision small{display:block;font-size:8px;color:var(--muted)}
.reg-decision-guide>header small,.reg-tool-advice small,.reg-recorded-decision>header small{color:var(--dca-blue);font-weight:800;letter-spacing:.07em}
.reg-decision-guide h3,.reg-recorded-decision h3{margin:3px 0;font-size:13px}
.reg-decision-guide p{margin:0;color:#44506b;font-size:10px;line-height:1.5}
.reg-tool-advice{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:10px;
    align-items:center;
    margin:0 16px 14px 57px;
    padding:11px 12px;
    border-radius:7px;
    background:#f5f3fc;
}
.reg-tool-advice>span{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#e6e0f5;color:#6750a2}
.reg-tool-advice strong{display:block;margin:2px 0;font-size:10px}
.reg-tool-advice p{font-size:9px;color:var(--muted)}
.reg-decision-guide>footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 16px;
    border-top:1px solid var(--line);
    background:#fafaff;
}
.reg-decision-guide>footer strong{display:block;font-size:10px}
.reg-decision-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.reg-decision-buttons .btn,.reg-decision-buttons .text-button{font-size:9px}
.reg-recorded-decision{overflow:hidden;border:1px solid #cfe3d8;border-radius:9px;background:#fbfefc}
.reg-recorded-decision>header{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:13px 15px}
.reg-recorded-decision>header>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:800}
.reg-recorded-decision>header .btn{font-size:9px}
.reg-recorded-decision dl{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0 15px 13px 55px}
.reg-recorded-decision dl>div{padding:9px 12px 0 0;border-top:1px solid #e2eee7}
.reg-recorded-decision dt{font-size:8px;color:var(--muted)}
.reg-recorded-decision dd{margin:3px 0 0;font-size:9px;line-height:1.45}
.reg-review-needed{border:1px solid #d7dff5;background:#f2f4ff;color:#37486f}
.reg-review-needed>span{background:var(--dca-blue);color:#fff}
.reg-review-complete{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:center;margin-top:9px;padding:10px;border-radius:7px;background:var(--green-soft);color:#315f49}
.reg-review-complete>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;color:var(--green);font-weight:800}
.reg-review-complete strong,.reg-review-complete small{display:block}.reg-review-complete strong{font-size:9px}.reg-review-complete small{font-size:8px;margin-top:2px}
.reg-audit-note{display:block;margin-top:9px;text-align:right;color:var(--muted);font-size:8px}

/* Keep the monitoring legend readable as four separate labels. */
.reg-impact-legend{
    flex:0 0 auto;
    justify-content:flex-end;
    gap:8px;
}
.reg-monitoring-intro>.reg-impact-legend>span{
    display:flex;
    flex:0 0 auto;
    gap:6px;
    width:auto;
    height:auto;
    min-height:28px;
    padding:5px 9px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    color:#505a76;
    white-space:nowrap;
}
.reg-impact-legend i{flex:0 0 7px}

@media(max-width:1050px){
    .reg-monitoring-intro{align-items:flex-start;flex-direction:column}
    .reg-impact-legend{justify-content:flex-start}
}

@media(max-width:850px){
    .reg-source-preview{grid-template-columns:1fr}
    .reg-source-preview button:nth-child(odd){padding-right:3px;border-right:0}
    .reg-source-preview button:nth-child(even){padding-left:3px}
    .reg-source-overview>footer{align-items:flex-start;flex-direction:column}
    .reg-decision-guide>footer{align-items:flex-start;flex-direction:column}
    .reg-decision-buttons{justify-content:flex-start}
    .reg-tool-advice{margin-left:16px}
    .reg-recorded-decision dl{grid-template-columns:1fr;padding-left:55px}
}

/* Small screens keep the recognisable shield/wordmark without crowding content. */
@media(max-width:780px){
    .brand{height:82px;padding:12px 7px;border-top-width:3px;overflow:hidden}
    .brand img{width:126px;max-width:none;transform:translateX(30px)}
}
