/* =============================================================================
   GRC Risk Management Website — STYLES
   ========================================================================== */
:root{
  --accent:#F15D2A;            /* Dejem brand orange (brandbook) */
  --accent-d:#C9481C;
  --gold:#857550;
  --grey:#8C8C8C;
  --navy:#2A2522;              /* warm charcoal (brand dark) */
  --ink:#2a2522;
  --muted:#8a7f78;
  --line:#ece4df;
  --bg:#FBF1EC;                /* Dejem peach */
  --card:#ffffff;
  --shadow:0 1px 3px rgba(60,30,16,.08),0 1px 2px rgba(60,30,16,.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* =====================================================================
   APP SHELL — collapsible left sidebar + top app bar (Fluent style)
   ===================================================================== */
:root{--sb:250px;--sb-collapsed:66px;--ab:56px}
body.has-shell{padding-left:var(--sb);transition:padding .18s}
body.has-shell.sb-collapsed{padding-left:var(--sb-collapsed)}

#sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sb);background:#fff;
  border-right:1px solid var(--line);z-index:30;display:flex;flex-direction:column;
  transition:width .18s;overflow:visible}
body.sb-collapsed #sidebar{width:var(--sb-collapsed)}
.sb-brand{display:flex;align-items:center;gap:11px;padding:14px 16px;text-decoration:none;
  border-bottom:1px solid var(--line);min-height:var(--ab)}
.sb-tri{width:30px;height:26px;flex:0 0 auto;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:13px;padding-bottom:6px;clip-path:polygon(0 0,100% 0,50% 100%)}
.sb-tri.sm{width:20px;height:17px;font-size:9px;padding-bottom:4px}
.sb-logo{width:36px;height:auto;flex:0 0 auto;display:block}
.sb-logo.sm{width:18px}
.sb-name b{display:block;font-size:14px;color:var(--navy);line-height:1.15}
.sb-name small{font-size:10px;color:var(--muted);letter-spacing:.3px}
.sb-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 8px}
.nav-item,.nav-parent{display:flex;align-items:center;gap:11px;width:100%;text-decoration:none;
  color:var(--ink);background:none;border:none;cursor:pointer;font:inherit;font-size:13.5px;
  padding:9px 11px;border-radius:8px;text-align:left;position:relative}
.nav-item:hover,.nav-parent:hover{background:#faf3ef}
.nav-ic{width:20px;text-align:center;flex:0 0 auto;font-size:15px}
.nav-tx{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-caret{transition:transform .15s;color:var(--muted);font-size:14px}
.nav-group.open .nav-caret{transform:rotate(90deg)}
.nav-item.active{background:#fdeee7;color:var(--accent-d);font-weight:600}
.nav-item.active::before,.nav-sub-item.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;
  width:3px;border-radius:3px;background:var(--accent)}
.nav-sub{max-height:0;overflow:hidden;transition:max-height .18s}
.nav-group.open .nav-sub{max-height:320px}
.nav-sub-item{display:block;width:100%;text-decoration:none;color:var(--muted);background:none;border:none;
  cursor:pointer;font:inherit;font-size:13px;padding:8px 11px 8px 42px;border-radius:8px;text-align:left;position:relative}
.nav-sub-item:hover{background:#faf3ef;color:var(--ink)}
.nav-sub-item.active{color:var(--accent-d);font-weight:600;background:#fdeee7}
.sb-foot{padding:10px 16px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);
  display:flex;align-items:center;gap:8px}

/* collapsed rail + hover flyout */
body.sb-collapsed .nav-tx,body.sb-collapsed .nav-caret,body.sb-collapsed .sb-name,
body.sb-collapsed .sb-foot span:not(.sb-tri){display:none}
body.sb-collapsed .sb-brand{justify-content:center;padding:14px 0}
body.sb-collapsed .nav-item,body.sb-collapsed .nav-parent{justify-content:center;padding:11px 0}
body.sb-collapsed .nav-group{position:relative}
body.sb-collapsed .nav-sub{max-height:none;display:none;position:absolute;left:var(--sb-collapsed);top:0;
  min-width:190px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 10px 30px rgba(60,30,16,.18);z-index:40}
body.sb-collapsed .nav-group:hover .nav-sub{display:block}
body.sb-collapsed .nav-sub-item{padding-left:14px}

/* top app bar */
#appbar{position:sticky;top:0;z-index:20;height:var(--ab);background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 18px}
#sb-toggle{background:none;border:none;font-size:19px;cursor:pointer;color:var(--navy);width:34px;height:34px;border-radius:8px}
#sb-toggle:hover{background:#f2ece8}
#page-title{font-size:16px;font-weight:600;color:var(--navy);margin:0}
.ab-spacer{flex:1}
.ab-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}
.ab-btn:hover{border-color:var(--accent);color:var(--accent-d)}
#lang-toggle{min-width:38px;justify-content:center;font-weight:700}

/* global date filter (year › month › day) in the app bar */
.ab-datefilter{display:flex;align-items:center;gap:5px;margin-left:10px}
.ab-datefilter:empty{display:none}
.df-ic{font-size:14px;opacity:.8}
[dir=rtl] .ab-datefilter{margin-left:0;margin-right:10px}
.ms{position:relative}
.ms-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;color:var(--ink);
  padding:5px 9px;border-radius:7px;cursor:pointer;font-size:12.5px;max-width:160px;white-space:nowrap;overflow:hidden}
.ms-btn:hover{border-color:var(--accent)}
.ms-btn.has{border-color:var(--accent);background:#fdeee7;color:var(--accent-d)}
.ms-btn .ms-lab{color:var(--muted)}
.ms-btn b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.ms-btn i{font-style:normal;color:var(--muted);font-size:10px}
.ms-panel{display:none;position:absolute;top:calc(100% + 5px);left:0;z-index:50;min-width:150px;max-height:280px;
  overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(60,30,16,.18);padding:6px}
.ms.open .ms-panel{display:block}
[dir=rtl] .ms-panel{left:auto;right:0}
.ms-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:13px;cursor:pointer;white-space:nowrap}
.ms-row:hover{background:#faf3ef}
.ms-row input{cursor:pointer;accent-color:var(--accent)}
.ms-clear{display:block;width:100%;text-align:start;background:none;border:none;border-bottom:1px solid var(--line);
  padding:6px 8px;color:var(--accent-d);font-weight:600;font-size:12px;cursor:pointer;margin-bottom:4px}
.ms-clear:hover{color:var(--accent)}
.ms-empty{padding:8px;color:var(--muted);font-size:12px}

/* RTL */
[dir=rtl] body.has-shell,html[dir=rtl] body.has-shell{padding-left:0;padding-right:var(--sb)}
[dir=rtl] body.has-shell.sb-collapsed{padding-right:var(--sb-collapsed)}
[dir=rtl] #sidebar{left:auto;right:0;border-right:none;border-left:1px solid var(--line)}
[dir=rtl] .nav-item,[dir=rtl] .nav-parent,[dir=rtl] .nav-sub-item{text-align:right}
[dir=rtl] .nav-sub-item{padding:8px 42px 8px 11px}
[dir=rtl] .nav-item.active::before,[dir=rtl] .nav-sub-item.active::before{left:auto;right:0}
[dir=rtl] .nav-caret{transform:rotate(180deg)}
[dir=rtl] .nav-group.open .nav-caret{transform:rotate(90deg)}
[dir=rtl] body.sb-collapsed .nav-sub{left:auto;right:var(--sb-collapsed)}
[dir=rtl] .kpi::before{left:auto;right:0}
[dir=rtl] .hero::after{right:auto;left:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- header / nav ---- */
.topbar{
  background:
    repeating-linear-gradient(135deg, rgba(241,93,42,.35) 0 11px, transparent 11px 22px) right/150px 100% no-repeat,
    linear-gradient(120deg,#2A2522,#3a2a22);
  color:#fff;padding:0 24px;display:flex;align-items:center;gap:18px;
  height:60px;position:sticky;top:0;z-index:20;box-shadow:var(--shadow);
  border-bottom:3px solid var(--accent);
}
.topbar .logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:18px}
.topbar .logo .mark{
  width:34px;height:30px;display:grid;place-items:center;color:#fff;
  background:var(--accent);font-weight:800;font-size:14px;padding-bottom:7px;
  clip-path:polygon(0 0,100% 0,50% 100%);    /* Dejem inverted triangle */
}
.topbar .logo .wordmark{font-size:18px;font-weight:800;letter-spacing:1.5px}
.topbar .logo small{display:block;font-weight:400;font-size:11px;color:#aebfd0;letter-spacing:.3px}
.topbar nav{display:flex;gap:4px;margin-left:18px}
.topbar nav a{
  color:#d4dde7;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;
}
.topbar nav a:hover{background:rgba(255,255,255,.08);text-decoration:none}
.topbar nav a.active{background:var(--accent);color:#fff}
.topbar .spacer{flex:1}
.topbar .btn-ghost{
  color:#fff;border:1px solid rgba(255,255,255,.3);padding:7px 13px;border-radius:8px;
  font-size:13px;cursor:pointer;background:transparent;display:inline-flex;gap:7px;align-items:center;
}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.12)}

.wrap{max-width:1280px;margin:0 auto;padding:22px}

/* ---- data banner ---- */
.data-banner{
  font-size:13px;padding:8px 14px;border-radius:8px;margin-bottom:18px;font-weight:500;
}
.data-banner.is-live{background:#e6f7f1;color:#0a6b4a;border:1px solid #b8e6d4}
.data-banner.is-sample{background:#fff6e6;color:#92600a;border:1px solid #f3dca0}
.data-banner.is-error{background:#fdecee;color:#a01124;border:1px solid #f3c2c9}
.data-banner.is-signin{background:#eaf2fb;color:#0a4a8a;border:1px solid #bcd6f3;display:flex;align-items:center;gap:12px}
.banner-btn{margin-left:auto;background:var(--accent);color:#fff;border:none;padding:7px 18px;border-radius:8px;
  font-size:13px;font-weight:600;cursor:pointer}
.banner-btn:hover{filter:brightness(1.05)}
.banner-btn:disabled{opacity:.6;cursor:default}

/* ---- KPI cards ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.kpi .v{font-size:30px;font-weight:700;color:var(--navy);line-height:1.1}
.kpi .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.kpi.warn::before{background:#e8590c}
.kpi.bad::before{background:#b00020}
.kpi.good::before{background:#2e7d32}

/* ---- cards / grid ---- */
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:2fr 1fr}
@media(max-width:900px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.card h3{margin:0 0 4px;font-size:15px;color:var(--navy)}
.card .sub{font-size:12px;color:var(--muted);margin:0 0 14px}
.chart-box{position:relative;height:260px}
.chart-box canvas{position:absolute;inset:0;width:100% !important;height:100% !important}

/* ---- heat map ---- */
table.heat{border-collapse:collapse;width:100%;font-size:13px}
table.heat th{background:#f0f3f7;color:var(--navy);padding:8px;border:1px solid var(--line);font-weight:600}
table.heat td{padding:9px 8px;text-align:center;border:1px solid #eef2f6}
table.heat td.rowhead{text-align:left;font-weight:600;color:var(--ink);background:#fafbfc}
table.heat td.tot{font-weight:700;background:#f0f3f7}

/* ---- risk matrix ---- */
table.matrix{border-collapse:collapse;margin:0 auto}
table.matrix th{padding:7px 10px;font-size:13px;color:var(--navy)}
table.matrix th.axis{background:#f0f3f7;border:1px solid var(--line)}
table.matrix td{width:62px;height:54px;text-align:center;border:2px solid #fff;position:relative;vertical-align:middle}
.mx-n{display:block;font-size:18px;font-weight:700}
.mx-s{position:absolute;right:4px;bottom:2px;font-size:10px;opacity:.8}
.matrix-legend{margin-top:12px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.matrix-legend span{width:13px;height:13px;border-radius:3px;display:inline-block}

/* ---- filters ---- */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.filters input,.filters select{
  padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;background:#fff;color:var(--ink)
}
.filters input[type=search]{min-width:240px;flex:1}
.filters .btn{padding:9px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:13px}
.filters .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.filters .btn:hover{filter:brightness(.97)}
.filters .count{margin-left:auto;font-size:13px;color:var(--muted);font-weight:600}

/* ---- table ---- */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
table#risk-table{border-collapse:collapse;width:100%;font-size:13px;min-width:880px}
#risk-table thead th{
  position:sticky;top:0;background:var(--navy);color:#fff;text-align:left;padding:11px 12px;
  font-weight:600;cursor:pointer;white-space:nowrap;user-select:none
}
#risk-table thead th[data-key]::after{content:"⇅";opacity:.4;margin-left:6px;font-size:11px}
#risk-table thead th.sort-asc::after{content:"↑";opacity:1}
#risk-table thead th.sort-desc::after{content:"↓";opacity:1}
#risk-table tbody td{padding:10px 12px;border-bottom:1px solid #eef2f6;vertical-align:top}
#risk-table tbody tr:hover{background:#f7fafc}
.title-cell{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mono{font-family:'Cascadia Code',Consolas,monospace;color:var(--muted)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.warn{color:#c2410c;font-weight:600}
.pill{color:#fff;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.empty-note{color:var(--muted);text-align:center;padding:26px;font-style:italic}

#pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0;font-size:13px;color:var(--muted)}
#pager button{padding:7px 13px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
#pager button:disabled{opacity:.45;cursor:default}

/* ---- landing ---- */
.hero{background:linear-gradient(120deg,#2A2522 0%,#7a2f17 60%,var(--accent) 130%);color:#fff;border-radius:16px;
  padding:46px 40px;margin-bottom:24px;position:relative;overflow:hidden}
/* Dejem chevron accent on the right of the hero */
.hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:160px;opacity:.5;
  background-image:repeating-linear-gradient(135deg,var(--accent) 0 18px,transparent 18px 36px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
.hero h1{margin:0 0 10px;font-size:32px}
.hero p{margin:0;max-width:640px;color:#cdd9e6;font-size:15px}
.hero .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.hero .cta a{padding:11px 20px;border-radius:9px;font-weight:600;font-size:14px}
.hero .cta a.primary{background:var(--accent);color:#fff}
.hero .cta a.ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.feature .ic{width:40px;height:40px;border-radius:10px;background:#e6f4f5;color:var(--accent);
  display:grid;place-items:center;font-size:20px;margin-bottom:12px}
.feature h4{margin:0 0 6px;color:var(--navy)}
.feature p{margin:0;font-size:13px;color:var(--muted)}

footer{color:var(--muted);font-size:12px;text-align:center;padding:30px 0 18px}

/* ---- Home landing ---- */
.home-hero{background:linear-gradient(120deg,#2A2522,#7a2f17 65%,var(--accent) 130%);color:#fff;border-radius:16px;
  padding:26px 30px;margin-bottom:22px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;
  position:relative;overflow:hidden}
.home-hero::after{content:"";position:absolute;top:0;right:0;bottom:0;width:150px;opacity:.4;
  background-image:repeating-linear-gradient(135deg,#fff 0 13px,transparent 13px 26px);
  -webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000)}
.home-hero h2{margin:0 0 6px;font-size:24px}
.home-hero p{margin:0;color:#f3ddd2;font-size:13.5px;max-width:560px}
.home-qa{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.qa{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.qa:hover{background:rgba(255,255,255,.26);text-decoration:none}
.qa span{font-size:16px}
.home-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto}
.hl-row{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;border-bottom:1px solid #f1ebe7;
  padding:8px 4px;cursor:pointer;font:inherit;text-align:left}
.hl-row:hover{background:#fdf3ee}
.hl-num{color:var(--muted);font-size:11px;white-space:nowrap}
.hl-title{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.hl-act{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid #f1ebe7;font-size:12.5px}
.hl-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.hl-dot.g{background:#2e7d32}.hl-dot.o{background:var(--accent)}
.hl-actx{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.hl-date{color:var(--muted);font-size:11px;white-space:nowrap}

/* ---- placeholder (Governance / coming soon) ---- */
.placeholder{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:48px 36px;text-align:center;max-width:620px;margin:30px auto}
.ph-ic{font-size:46px;margin-bottom:8px}
.placeholder h2{margin:0 0 10px;color:var(--navy)}
.ph-badge{display:inline-block;background:#fdeee7;color:var(--accent-d);font-weight:700;padding:5px 16px;
  border-radius:20px;font-size:13px;margin-bottom:18px}
.placeholder p{color:var(--muted);margin:0 0 14px}
.ph-list{list-style:none;padding:0;margin:0;display:inline-grid;gap:8px;text-align:left}
.ph-list li{padding:9px 16px;background:#faf6f3;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:13px}
.ph-list li::before{content:"○ ";color:var(--accent)}
.lang-choice{display:flex;gap:10px;margin-top:6px}
.lang-choice .btn{padding:10px 20px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-size:14px}
.lang-choice .btn:hover{border-color:var(--accent);color:var(--accent-d)}

/* ---- Placeholder connection badge + Dejem Apps launcher ---- */
.ph-conn{display:inline-block;background:#eef2f6;color:var(--accent-d);font-size:12px;font-weight:600;
  padding:4px 12px;border-radius:20px;margin-bottom:8px}
.apps-sec{margin-bottom:8px}
.apps-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:8px}
.app-card{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s}
.app-card:hover{transform:translateY(-2px);border-color:var(--accent);text-decoration:none}
.app-no{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.app-ic{width:44px;height:44px;flex:0 0 auto;border-radius:11px;background:#fbeee8;display:grid;place-items:center;font-size:22px}
.app-body{flex:1;min-width:0;display:flex;flex-direction:column}
.app-body b{color:var(--navy);font-size:14px}
.app-body span{font-size:12px;color:var(--ink)}
.app-body small{font-size:10.5px;color:var(--muted);margin-top:2px}
.app-open{flex:0 0 auto;color:var(--accent-d);font-size:12px;font-weight:700}

/* ---- Admin gate (lock screen) ---- */
.admin-gate{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#2A2522,#3a302a);display:grid;place-items:center;padding:20px}
.ag-box{background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4);padding:30px 28px;max-width:380px;width:100%;text-align:center}
.ag-ic{font-size:40px;margin-bottom:6px}
.ag-box h2{margin:4px 0 8px;color:var(--navy);font-size:20px}
.ag-box p{color:var(--muted);font-size:13px;margin:0 0 16px;line-height:1.5}
.ag-box input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px;margin-bottom:10px;text-align:center}
.ag-box input:focus{outline:none;border-color:var(--accent)}
.ag-box .btn{width:100%;padding:11px;font-size:15px}
.ag-err{color:#b00020;font-size:13px;min-height:18px;margin-top:8px}
.ag-back{display:inline-block;margin-top:6px;color:var(--muted);font-size:12px;text-decoration:none}
.ag-back:hover{color:var(--accent-d)}

/* ---- Communication Center ---- */
.cc-endpoint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.cc-endpoint label{font-weight:600;color:var(--navy);font-size:13px}
.cc-endpoint input{flex:1;min-width:260px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.cc-ep-state{font-size:12px;color:var(--muted)}
.cc-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:14px}
.cc-tab{background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer}
.cc-tab:hover{color:var(--ink)}
.cc-tab.active{color:var(--accent-d);border-bottom-color:var(--accent)}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.cc-head h3{margin:0;font-size:15px;color:var(--navy)}
.cc-fetch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#f6fafd;border:1px solid #dbe8f5;border-radius:9px;padding:9px 12px;margin-bottom:12px}
.cc-fetch-lbl{font-size:12.5px;font-weight:600;color:#155fa0}
.cc-fetch input{flex:1;min-width:200px;max-width:340px}
.cc-fetch-state{font-size:12px;color:var(--muted)}
.cc-smsg{margin:8px 0}
.cc-smsg label{display:block;font-size:12px;color:var(--muted);font-weight:600}
.cc-smsg-ta{width:100%;margin-top:4px;font-family:inherit;font-size:13px;resize:vertical}
.cc-att-off{font-size:12.5px;color:#155fa0;background:#f6fafd;border:1px dashed #cfe0f0;border-radius:8px;padding:7px 11px;align-self:center}
.cc-tbl td,.cc-tbl th{vertical-align:middle}
.cc-in,.cc-sel{padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;width:100%;background:#fff}
.cc-ta{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;line-height:1.5;font-family:inherit;resize:vertical}
.cc-del{background:none;border:none;cursor:pointer;font-size:14px;opacity:.6}.cc-del:hover{opacity:1}
.cc-vars{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:2}
.cc-var{background:#f4ece8;color:var(--accent-d);padding:2px 7px;border-radius:6px;cursor:pointer;font-size:11.5px}
.cc-var:hover{background:#fdeee7}
.cc-tmpl{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;box-shadow:var(--shadow)}
.cc-tmpl-h{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.cc-tmpl-h .cc-in{flex:1}
.cc-sched{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.cc-sched-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cc-sname{flex:1;min-width:160px;font-weight:600;font-size:14px}
.cc-status{padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;color:#fff}
.cc-status.on{background:#2e7d32}.cc-status.off{background:#9aa5b1}
.cc-sbtns{display:flex;gap:6px;margin-inline-start:auto}
.cc-sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.cc-sgrid label{font-size:11px;color:var(--muted);font-weight:600;display:flex;flex-direction:column;gap:3px}
.cc-cron.hide{display:none}
.cc-srow{display:flex;gap:18px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.cc-groups,.cc-att{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px}
.cc-groups>span,.cc-att>span{font-weight:600;color:var(--navy)}
.cc-gck{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink)}
.cc-lg{padding:2px 9px;border-radius:20px;color:#fff;font-size:11px;font-weight:600}
.cc-lg.ok{background:#2e7d32}.cc-lg.bad{background:#b00020}.cc-lg.warn{background:#f5a623}
/* preview modal */
.cc-pv-ov{position:fixed;inset:0;background:rgba(42,37,34,.5);display:none;place-items:center;z-index:80;padding:16px}
.cc-pv-ov.show{display:grid}
.cc-pv{background:#fff;border-radius:14px;max-width:460px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden}
.cc-pv-h{background:#075E54;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.cc-pv-h .cc-pv-x{background:none;border:none;color:#fff;cursor:pointer;font-size:15px}
.cc-pv-to{padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.cc-pv-msg{margin:0;padding:16px;background:#ECE5DD;font-family:inherit;font-size:13px;line-height:1.55;white-space:pre-wrap;max-height:50vh;overflow:auto}
.cc-pv-f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 16px;font-size:12px}
.cc-pv-f .ok{color:#2e7d32;font-weight:600}.cc-pv-f .warn{color:#b5740a}
@media(max-width:767px){.cc-srow{flex-direction:column;gap:10px}.cc-endpoint input{min-width:140px}}

/* ---- Action plans (1..5) inside the risk drill ---- */
.aps{grid-column:1/-1;margin-top:6px}
.aps-h{font-weight:700;color:var(--navy);font-size:12.5px;margin-bottom:6px}
.apc{background:#fafbfc;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:9px 11px;margin-bottom:7px}
.apc-h{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.apc-n{font-weight:700;font-size:11px;color:var(--accent-d);text-transform:uppercase;letter-spacing:.4px}
.apc-st{color:#fff;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:20px}
.apc-d{margin:0 0 5px;font-size:12.5px;color:var(--ink);line-height:1.45}
.apc-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted)}
.apc-meta .warn{color:#b00020;font-weight:600}

/* ---- AI assess & propose panel ---- */
.assess{grid-column:1/-1;margin-top:4px}
.assess-btn{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#fff;border:none;border-radius:8px;
  padding:8px 15px;font-size:12.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s}
.assess-btn:hover{transform:translateY(-1px)}
.assess-btn:disabled{opacity:.6;cursor:wait}
.assess-out{margin-top:9px}
.assess-load{font-size:12.5px;color:var(--muted);padding:8px 0}
.assess-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow)}
.assess-t{font-weight:700;color:var(--navy);font-size:13px;margin:4px 0 7px;display:flex;align-items:center;gap:8px}
.assess-ai{font-size:10.5px;font-weight:700;color:#fff;background:var(--accent-d);padding:2px 9px;border-radius:20px}
.assess-ai.local{background:#8C8C8C}
.assess-list{margin:0 0 10px;padding-inline-start:18px;font-size:12.5px;color:var(--ink);line-height:1.5}
.assess-list li{margin-bottom:3px}
.assess-tbl{width:100%;border-collapse:collapse;font-size:12px}
.assess-tbl th{text-align:start;background:#f4f6f8;color:var(--navy);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line)}
.assess-tbl td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.assess-tbl td.muted{color:var(--muted)}
.assess-steps{margin:0 0 10px;padding-inline-start:20px;font-size:12.5px;color:var(--ink);line-height:1.55}
.assess-steps li{margin-bottom:5px;padding-inline-start:3px}
.assess-steps li::marker{color:var(--accent-d);font-weight:700}
.assess-exp{margin-inline-start:auto;background:#fff;border:1px solid var(--line);color:var(--accent-d);
  border-radius:7px;padding:4px 11px;font-size:11.5px;font-weight:700;cursor:pointer}
.assess-exp:hover{border-color:var(--accent)}
.assess-foot{margin-top:9px;font-size:11px;color:var(--muted);font-style:italic}

/* ---- Financial value measure (drill editor) ---- */
.fin{grid-column:1/-1;margin:4px 0;background:#fafbfc;border:1px solid var(--line);border-left:3px solid #2e7d32;border-radius:8px;padding:9px 11px}
.fin-h{font-weight:700;color:var(--navy);font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fin-h .fin-shown{font-weight:600;color:#2e7d32}
.fin-edit{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.fin-edit select,.fin-edit input{padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:12.5px}
.fin-edit input{flex:1;min-width:120px}
.fin-edit .fin-save{background:#2e7d32;color:#fff;border:none;border-radius:7px;padding:6px 14px;font-weight:700;font-size:12.5px;cursor:pointer}
.fin-edit .fin-save:hover{background:#256528}

/* ---- Financial reporting (dashboard card + register cell) ---- */
.fin-kpis{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.fin-k{flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;padding:11px;border-top:3px solid #2e7d32}
.fin-k.sav{border-top-color:#1c7ed6}.fin-k.rev{border-top-color:#2e7d32}.fin-k.total{border-top-color:var(--accent)}
.fin-k .v{font-size:19px;font-weight:800;color:var(--navy)}
.fin-k .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.fin-top{display:flex;flex-direction:column;gap:2px}
.fin-row{display:flex;justify-content:space-between;gap:12px;padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.fin-row:hover{background:#fbeee8}
.fin-row-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.fin-row-v{font-weight:700;white-space:nowrap}
.fin-row-v.sav{color:#1c7ed6}.fin-row-v.rev{color:#2e7d32}
td.fin-cell.sav{color:#1c7ed6;font-weight:600}td.fin-cell.rev{color:#2e7d32;font-weight:600}

/* ---- GRC Review action plan (drill) + review tracker page ---- */
/* review actions inside the risk drill */
.rev{grid-column:1/-1;margin:6px 0;background:#eef5fc;border:1px solid #cfe0f3;border-left:3px solid #1c7ed6;border-radius:8px;padding:10px 12px}
.rev-h{font-weight:700;color:#155fa0;font-size:12.5px;display:flex;align-items:center;gap:8px}
.rev-date{background:#1c7ed6;color:#fff;font-size:10.5px;font-weight:600;padding:1px 8px;border-radius:20px}
.rev-n{margin-inline-start:auto;background:#cfe0f3;color:#155fa0;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:20px}
.rev-act{background:#fff;border:1px solid #dbe8f5;border-radius:7px;padding:8px 10px;margin-top:7px}
.rev-act-t{font-size:12.5px;font-weight:600;color:var(--navy);display:flex;gap:7px;align-items:baseline}
.rev-i{flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:#1c7ed6;color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center}
.rev-act-d{font-size:11.5px;color:var(--ink);line-height:1.45;margin:3px 0 4px;padding-inline-start:25px}
.rev-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);padding-inline-start:25px}
.rev-meta .warn{color:#b00020;font-weight:600}
.rev-track-row{display:flex;gap:8px;align-items:center;margin-top:7px;padding-inline-start:25px}
.rev-track-row .rev-track{flex:0 0 auto}
.rev-track-row .rev-comment{flex:1;min-width:100px}

/* review action tracker table */
.rv-tbl td{vertical-align:top}
.rv-tbl .rv-risk{max-width:190px;cursor:pointer;color:var(--navy)}
.rv-tbl .rv-risk:hover{color:var(--accent-d)}
.rv-cont{color:#bcc6cf;font-size:15px;padding-inline-start:10px}
.rv-act-cell{max-width:360px;font-size:12px;line-height:1.4}
.rv-det{color:var(--muted);font-size:11px;margin-top:2px;white-space:pre-line}
.rv-track{padding:5px 8px;border:1.5px solid var(--line);border-radius:7px;font-size:12px;font-weight:600;background:#fff;cursor:pointer}
.rv-comment{width:100%;min-width:120px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px}
.rv-tbl td.soon{color:#b5740a;font-weight:600}
.rv-tbl tr.rv-od td{background:#fff6f5}
#rv-table tbody tr:hover{background:#f0f6fc}
.rv-sum-wrap{margin-bottom:14px}
.rv-sum-tbl{width:100%;border-collapse:collapse;font-size:13px;text-align:center}
.rv-sum-tbl th{background:#2A2522;color:#fff;font-weight:600;padding:9px 12px;white-space:nowrap}
.rv-sum-tbl td{padding:14px 12px;font-size:22px;font-weight:800;color:var(--navy);border-bottom:1px solid var(--line)}
.rv-sum-tbl td#rs-open{color:var(--accent-d)}
.rv-sum-tbl td#rs-openrev,.rv-sum-tbl td#rs-coverage{color:#1c7ed6}
.kpi.rev-kpi{cursor:pointer;border-left:4px solid #1c7ed6}
.kpi.rev-kpi:hover{background:#f0f6fc}
.kpi.rev-kpi .v{color:#155fa0}

/* =====================================================================
   RESPONSIVE — sticky table headers + mobile off-canvas shell (<768px)
   Desktop (>1024) and tablet (768–1024) keep the fixed sidebar unchanged.
   ===================================================================== */
.table-wrap thead th{position:sticky;top:0;z-index:2}
#sb-overlay{display:none}
.sb-close{display:none;position:absolute;top:11px;right:11px;width:34px;height:34px;border:none;
  background:#f2ece8;color:var(--navy);border-radius:8px;font-size:14px;cursor:pointer;z-index:3}
[dir=rtl] .sb-close{right:auto;left:11px}

@media (max-width:767px){
  /* content uses full width; sidebar becomes an off-canvas drawer */
  body.has-shell,[dir=rtl] body.has-shell{padding-left:0;padding-right:0}
  #sidebar{width:min(86vw,300px);transform:translateX(-100%);transition:transform .25s ease;z-index:60;box-shadow:none}
  body.sb-mobile-open #sidebar{transform:translateX(0);box-shadow:0 18px 50px rgba(0,0,0,.4)}
  [dir=rtl] #sidebar{transform:translateX(100%)}
  [dir=rtl] body.sb-mobile-open #sidebar{transform:translateX(0)}
  #sb-overlay{display:block;position:fixed;inset:0;background:rgba(20,15,12,.5);z-index:55;
    opacity:0;pointer-events:none;transition:opacity .2s}
  body.sb-mobile-open #sb-overlay{opacity:1;pointer-events:auto}
  body.sb-mobile-open{overflow:hidden}
  .sb-close{display:grid;place-items:center}

  /* app bar fit — allow the date filter to wrap to a second line */
  #appbar{padding:6px 10px;gap:6px 8px;height:auto;min-height:var(--ab);flex-wrap:wrap}
  #page-title{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
  .ab-datefilter{margin-left:0;order:5;flex-basis:100%}
  .ab-datefilter .ms{flex:1}
  .ms-btn{max-width:none;width:100%;min-height:38px;justify-content:center}

  /* spacing + stacking */
  .wrap,.wrap.wide{padding:14px 12px;max-width:100%}
  .band-head{gap:8px}.band-head h2{font-size:18px}
  .grid,.grid.cols-2,.grid.cols-3,.grid.cols-3-even{grid-template-columns:1fr!important}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi .v{font-size:22px}
  .fin-kpis{flex-direction:column}
  #heat-dept,#risk-matrix{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* tables: horizontal scroll inside their container, stay readable */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table#risk-table,table.lean{min-width:720px}

  /* filters + forms: full width, touch-friendly, no iOS zoom */
  .filters{gap:8px}
  .filters input,.filters select,.filters .btn{flex:1 1 100%;width:100%;min-height:42px}
  .filters .count{flex-basis:100%}
  input,select,textarea{font-size:16px}
  .btn{min-height:40px}

  /* charts fit width */
  .chart-box{height:230px}.chart-box.sm{height:200px}

  /* drill-down modal near full-screen */
  .drill{width:96vw;max-width:96vw;max-height:92vh}
  .drill-h{padding:14px 16px}.drill-h #drill-title{font-size:15px}
  .drill-body{padding:12px 14px}
  .kv{flex-direction:column;align-items:flex-start;gap:2px}

  /* card grids → single column */
  .tcards,.apps-cards{grid-template-columns:1fr}
  .ai-fab{transform:scale(.92)}
}

/* ---- Procurement "tear-off" checklist cards ---- */
.pc-method{margin-bottom:18px}
.pc-method-h{font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-d));
  padding:9px 16px;border-radius:10px;margin:14px 0 10px;box-shadow:var(--shadow)}
.pc-scn{margin:0 0 14px}
.pc-scn-h{font-size:13px;font-weight:700;color:var(--navy);background:#fbeee8;border-inline-start:4px solid var(--accent);
  padding:7px 12px;border-radius:7px;margin-bottom:10px}
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.tcard{border:1.5px dashed var(--accent);border-radius:12px;background:#fff;box-shadow:var(--shadow);
  overflow:hidden;break-inside:avoid}
.tcard-h{background:#2A2522;color:#fff;padding:9px 13px;display:flex;align-items:flex-start;gap:8px}
.tcard-ht{flex:1;min-width:0}
.tcard-h b{display:block;font-size:13px}
.tcard-h span{display:block;font-size:10.5px;color:#ffd9c9;margin-top:2px}
.tcard-print{flex:0 0 auto;background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:6px;
  padding:3px 8px;font-size:13px;cursor:pointer;line-height:1}
.tcard-print:hover{background:rgba(255,255,255,.3)}
.tcard-t td.bx{cursor:pointer;user-select:none}
.tcard-t td.bx:hover{background:#fbeee8}
.tcard-t td.bx.on{color:#2e7d32}
.tcard-t{width:100%;border-collapse:collapse;font-size:12px}
.tcard-t th{background:#f4f6f8;color:var(--navy);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--line);text-align:start}
.tcard-t th:not(:first-child),.tcard-t td.bx{width:34px;text-align:center}
.tcard-t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.tcard-t td.bx{font-size:15px;color:var(--accent-d)}
.tcard-t tr:last-child td{border-bottom:none}
.tcard-t td.muted{color:var(--muted);text-align:center}
@media print{
  #sidebar,#appbar,#pc-print,.ai-fab,footer{display:none!important}
  body{margin:0!important}.wrap{margin:0!important;padding:0!important;max-width:none!important}
  .tcard{box-shadow:none}
  .pc-method-h,.tcard-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- AI Risk Drafter ---- */
.nr-input{margin-bottom:18px}
.nr-lbl{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px}
.nr-input textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;font-size:14px;resize:vertical}
.nr-input textarea:focus{outline:none;border-color:var(--accent)}
.nr-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.nr-row input,.nr-row select{flex:1;min-width:160px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;font-size:13px}
.nr-row .btn{flex:0 0 auto}
.btn.lg{padding:12px 22px;font-size:14px}
.nr-ticket{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.nr-tophead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(120deg,#2A2522,var(--accent));color:#fff;padding:14px 20px}
.nr-tophead b{font-size:16px}
.nr-srcbadge{font-size:10px;font-weight:600;padding:2px 9px;border-radius:20px;margin-left:8px}
.nr-srcbadge.live{background:#2e7d32;color:#fff}.nr-srcbadge.local{background:rgba(255,255,255,.25);color:#fff}
.nr-note{background:#fff6ef;color:#92600a;font-size:12px;padding:8px 20px;border-bottom:1px solid var(--line)}
.nr-sec{padding:16px 20px;border-bottom:1px solid var(--line)}
.nr-sec h4{margin:0 0 12px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-d);
  display:flex;align-items:center;gap:10px}
.nr-copy{margin-left:auto;background:#faf3ef;border:1px solid var(--line);color:var(--ink);font-size:11px;
  padding:3px 10px;border-radius:7px;cursor:pointer;font-weight:600;text-transform:none;letter-spacing:0}
.nr-copy:hover{border-color:var(--accent);color:var(--accent-d)}
.nr-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
@media(max-width:700px){.nr-grid{grid-template-columns:1fr}}
.nr-f{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dotted var(--line);padding:6px 0;font-size:13px}
.nr-f span{color:var(--muted)}.nr-f b{text-align:right}
.nr-score{color:#fff;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700}
.nr-desc{margin-top:10px}.nr-desc span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.nr-desc p{margin:0;font-size:13px;background:#faf6f3;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.nr-table{border-collapse:collapse;width:100%;font-size:12.5px}
.nr-table th{background:#f4ece8;color:var(--navy);text-align:left;padding:7px 10px;font-weight:600}
.nr-table td{padding:7px 10px;border-bottom:1px solid #f0ebe7;vertical-align:top}
.nr-table td.num{text-align:center;color:var(--muted);width:28px}
.nr-table .mono{font-family:'Cascadia Code',Consolas,monospace;color:var(--muted);white-space:nowrap}
.nr-scorerow{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;font-weight:600;color:var(--navy)}

/* ---- Governance: document approval timeline (drill) ---- */
.gd-tl-h{font-size:12px;font-weight:700;color:var(--navy);margin:14px 0 8px}
.gd-tl{position:relative;padding-left:6px}
.gd-step{display:flex;gap:12px;padding:0 0 14px;position:relative}
.gd-step::before{content:"";position:absolute;left:11px;top:24px;bottom:-2px;width:2px;background:var(--line)}
.gd-step:last-child::before{display:none}
.gd-dot{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;z-index:1}
.gd-step.done .gd-dot{background:#2e7d32}
.gd-step.pending .gd-dot{background:#1c7ed6}
.gd-info{display:flex;flex-direction:column}
.gd-info b{font-size:13px;color:var(--navy)}
.gd-info span{font-size:12.5px;color:var(--ink)}
.gd-info small{font-size:11px;color:var(--muted)}
.gd-step.pending .gd-info b{color:#1c7ed6}
[dir=rtl] .gd-tl{padding-left:0;padding-right:6px}
[dir=rtl] .gd-step::before{left:auto;right:11px}
.nr-cta{padding:18px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nr-hint{color:var(--muted);font-size:12px;max-width:480px}
[dir=rtl] .nr-f b{text-align:left}
[dir=rtl] .nr-copy{margin-left:0;margin-right:auto}

.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);
  font-weight:700;margin:26px 0 12px}
.wrap.wide{max-width:1480px}
.hint{font-size:13px;color:var(--muted);margin:-6px 0 16px}

/* ===== VP matrix ===== */
table.vpmatrix{border-collapse:collapse;width:100%;font-size:13px;min-width:1040px;background:#fff}
.vpmatrix thead th{position:sticky;top:60px;background:#fff;color:var(--navy);font-weight:700;
  text-align:center;padding:12px 8px;border-bottom:2px solid var(--line);vertical-align:top}
.vpmatrix thead th small{display:block;font-weight:400;font-size:10px;color:#9aa5b1;margin-top:2px}
.vpmatrix th.vp-head{text-align:left;min-width:260px}
.vpmatrix td{padding:0;text-align:center;border-bottom:1px solid #eef2f6}
.vpmatrix td.vp-head{text-align:left;padding:11px 12px}
.vp-row{background:#fbfcfe}.vp-row:hover{background:#f4f8fb}
.dept-row{background:#fff}.dept-row:hover{background:#f7fafc}
.vp-ic{margin:0 8px 0 2px}
.vp-name{font-weight:700;color:var(--navy)}
.dept-name{font-weight:500;color:var(--ink);margin-left:26px}
.vp-sub{display:block;font-size:11px;color:#9aa5b1;font-weight:400;margin-left:26px}
.vp-toggle{border:none;background:#e9eef4;color:var(--navy);width:22px;height:22px;border-radius:6px;
  cursor:pointer;font-size:11px;vertical-align:middle}
.vp-toggle:hover{background:var(--accent);color:#fff}
.vpc{vertical-align:middle}
.numbtn{border:none;background:transparent;font:inherit;font-weight:700;color:var(--navy);
  cursor:pointer;padding:10px 6px;width:100%;border-radius:6px;font-variant-numeric:tabular-nums}
.numbtn:hover{background:#e6f4f5;outline:1px solid var(--accent)}
.numbtn small{font-weight:400;color:#9aa5b1;font-size:10px}
.numbtn.is-zero{color:#c2c9d1;font-weight:400;cursor:default}
.numbtn.is-zero:hover{background:transparent;outline:none}
.c-open .numbtn{color:#1c7ed6}.c-closed .numbtn{color:#2e7d32}
.c-crit .numbtn{color:#e8590c}.c-warn .numbtn{color:#c2410c}.c-bad .numbtn{color:#b00020}
.compl{position:relative;padding:8px 10px;min-width:90px}
.compl span{font-weight:700;color:var(--navy)}
.compl i{position:absolute;left:10px;right:10px;bottom:5px;height:4px;border-radius:3px;background:#2e7d32;display:block}
.compl::before{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:4px;border-radius:3px;background:#e3e8ee}
.vp-total td{background:var(--navy);color:#fff;padding:6px 4px;border:none}
.vp-total .vp-head{color:#fff}
.vp-total .numbtn{color:#fff}.vp-total .numbtn small{color:#aebfd0}
.vp-total .compl span{color:#fff}
.vp-total .numbtn:hover{background:rgba(255,255,255,.15);outline-color:#fff}

/* ===== drill-down slide-in ===== */
.drill-overlay{position:fixed;inset:0;background:rgba(42,37,34,.5);opacity:0;visibility:hidden;
  transition:opacity .2s;z-index:40;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.drill-overlay.show{opacity:1;visibility:visible}
/* centered floating modal */
.drill{position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.97);
  width:min(840px,94vw);max-height:88vh;background:#fff;z-index:41;border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s;box-shadow:0 26px 80px rgba(42,18,8,.42)}
.drill.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
.drill-h{background:linear-gradient(120deg,#2A2522,var(--accent));color:#fff;padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between}
.drill-h #drill-title{font-size:17px;font-weight:700}
.drill-sub{font-size:12px;color:#cdd9e6;margin-top:3px}
.drill-h-btns{display:flex;align-items:center;gap:8px}
.drill-rep{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;
  padding:7px 13px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap}
.drill-rep:hover{background:rgba(255,255,255,.3)}
.drill-x{background:rgba(255,255,255,.15);border:none;color:#fff;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:14px}
.drill-x:hover{background:rgba(255,255,255,.28)}
.drill-group{display:flex;align-items:center;gap:6px;padding:10px 18px;border-bottom:1px solid var(--line);background:#fafbfc}
.drill-group span{font-size:12px;color:var(--muted);margin-right:4px}
.gbtn{border:1px solid var(--line);background:#fff;color:var(--ink);padding:5px 12px;border-radius:7px;
  font-size:12px;cursor:pointer;font-weight:500}
.gbtn:hover{border-color:var(--accent)}
.gbtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.c-prog .numbtn{color:#1c7ed6}
.drill-body{overflow:auto;padding:14px 18px;flex:1}
.dgroup{margin-bottom:16px}
.dgroup-h{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-d);
  font-weight:700;padding:6px 0;border-bottom:2px solid #e6f4f5;margin-bottom:6px}
.dgroup-h span{background:#e6f4f5;color:var(--accent-d);border-radius:10px;padding:1px 8px;font-size:11px;margin-left:6px}
.risk{border:1px solid var(--line);border-radius:9px;margin-bottom:7px;overflow:hidden}
.risk.open{border-color:var(--accent)}
.risk-top{display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer}
.risk-top:hover{background:#f7fafc}
.rnum{color:var(--muted);font-size:11px;white-space:nowrap}
.rtitle{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rstat{font-size:12px;color:var(--ink);white-space:nowrap}
.rstat .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.rexp{color:#9aa5b1;font-size:11px}
.risk-detail{padding:10px 13px;background:#fafbfc;border-top:1px dashed var(--line)}
.kv{display:flex;gap:10px;font-size:12px;padding:3px 0}
.kv span{color:var(--muted);min-width:110px}
.pend.warn,.kv .warn{color:#c2410c;font-weight:600}
.ap{margin-top:8px}.ap span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.ap p{margin:0;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 10px}
.audit-link{display:inline-block;margin-top:10px;background:var(--accent);color:#fff;padding:7px 13px;
  border-radius:7px;font-size:12px;font-weight:600;text-decoration:none}
.audit-link:hover{filter:brightness(1.05);text-decoration:none}

/* ===== AuditRunner workflow steppers ===== */
.wf-wrap{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.wf-head{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px}
.wf-note{font-weight:400;color:#9aa5b1;font-size:10px;margin-left:6px}
.wf{margin-bottom:12px}
.wf-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--accent-d);font-weight:700;margin-bottom:6px}
.wf-track{display:flex;align-items:flex-start;overflow-x:auto;padding-bottom:6px}
.wf-node{flex:0 0 auto;width:96px;text-align:center;position:relative}
.wf-dot{width:30px;height:30px;border-radius:50%;margin:0 auto 5px;display:grid;place-items:center;
  font-size:13px;font-weight:700;color:#fff;background:#c2c9d1;border:2px solid #fff;box-shadow:0 0 0 1px #d7dde3}
.wf-name{font-size:10.5px;font-weight:600;color:var(--ink);line-height:1.2}
.wf-who{font-size:10px;color:var(--muted);margin-top:1px;line-height:1.2}
.wf-link{flex:1 1 auto;height:2px;background:#d7dde3;margin-top:15px;min-width:14px}
.wf-node.done .wf-dot{background:#2e7d32;box-shadow:0 0 0 1px #2e7d32}
.wf-node.current .wf-dot{background:var(--accent);box-shadow:0 0 0 3px #cdeaec}
.wf-node.rejected .wf-dot{background:#b00020;box-shadow:0 0 0 1px #b00020}
.wf-node.pending .wf-dot{background:#c2c9d1}
.wf-node.pending .wf-name,.wf-node.pending .wf-who{color:#aab2bb}
.wf-acts{margin-top:4px;display:flex;flex-direction:column;gap:2px;align-items:center}
.wf-acts span{font-size:9px;background:#eef2f6;color:var(--muted);border-radius:4px;padding:1px 5px}
.wf-node.current .wf-acts span{background:#fbe6dc;color:var(--accent-d)}

/* clickable register / top-10 rows */
tr.rrow{cursor:pointer}
tr.rrow:hover{background:#fdf1ea !important}

/* ===== AI Risk Analyst ===== */
#ai-fab{position:fixed;right:22px;bottom:22px;z-index:45;background:linear-gradient(135deg,var(--accent),#c7461e);
  color:#fff;border:none;border-radius:30px;padding:13px 20px;font-size:14px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 24px rgba(234,90,45,.45);letter-spacing:.3px}
#ai-fab:hover{filter:brightness(1.06)}
#ai-fab.hide{display:none}
#ai-panel{position:fixed;right:22px;bottom:22px;z-index:46;width:min(400px,92vw);height:min(620px,82vh);
  background:#fff;border-radius:16px;box-shadow:0 22px 70px rgba(42,18,8,.4);display:none;flex-direction:column;
  overflow:hidden;border:1px solid var(--line)}
#ai-panel.show{display:flex}
.ai-h{background:linear-gradient(120deg,#2A2522,var(--accent));color:#fff;padding:13px 16px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between}
.ai-h button{background:rgba(255,255,255,.18);border:none;color:#fff;width:28px;height:28px;border-radius:7px;cursor:pointer}
.ai-log{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:#fbf6f3}
.ai-msg{padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.5;max-width:90%}
.ai-bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-top-left-radius:3px}
.ai-user{background:var(--accent);color:#fff;align-self:flex-end;border-top-right-radius:3px}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--line);background:#fff}
.ai-chips button{font-size:11px;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:14px;
  padding:4px 10px;cursor:pointer}
.ai-chips button:hover{border-color:var(--accent);color:var(--accent-d)}
.ai-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fff}
.ai-in input{flex:1;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:13px}
.ai-in input:focus{outline:none;border-color:var(--accent)}
.ai-in button{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:0 16px;font-weight:600;cursor:pointer}

/* ---- executive band head + appetite strip ---- */
.band-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:8px 0 14px}
.band-head h2{margin:0;font-size:20px;color:var(--navy)}
.appetite-wrap{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.appetite-label{font-weight:600}
.appetite-strip{display:flex;width:230px;height:18px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.appetite-strip .seg{display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;min-width:0}
.appetite-key{display:flex;align-items:center;gap:5px}
.appetite-key .k{width:11px;height:11px;border-radius:3px;display:inline-block;margin-left:8px}
.appetite-key .k.g{background:#2e7d32}.appetite-key .k.a{background:#f5a623}.appetite-key .k.r{background:#b00020}
.kpi .t{font-size:10px;color:#9aa5b1;margin-top:2px}

/* ---- 3-col layouts ---- */
.grid.cols-3-even{grid-template-columns:1fr 1fr 1fr}
@media(max-width:900px){.grid.cols-3-even{grid-template-columns:1fr}}
.chart-box.sm{height:210px}

/* ---- bubble matrix ---- */
table.matrix td.mx-cell{padding:3px}
.bubble{display:inline-grid;place-items:center;border-radius:50%;color:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);position:relative}
.bubble b{position:absolute;font-size:13px;font-weight:700}

/* ---- top-10 / lean tables ---- */
table.lean{border-collapse:collapse;width:100%;font-size:13px;min-width:880px}
table.lean thead th{background:var(--navy);color:#fff;text-align:left;padding:10px 12px;font-weight:600;white-space:nowrap}
table.lean tbody td{padding:9px 12px;border-bottom:1px solid #eef2f6;vertical-align:middle}
table.lean tbody tr:hover{background:#f7fafc}
.pill.ghost{background:#fff !important;border:1px solid;font-weight:600}
.trend{font-weight:700}.trend.down{color:#2e7d32}.trend.up{color:#b00020}.trend.flat{color:#9aa5b1}
.muted-sm{color:#9aa5b1;font-size:11px}