/* =====================================================================
DMER Portal - central design system (UI-02)
"Modern Government Digital Platform": navy = authority / navigation, DMER green = primary action / active / success,
saffron = thin accent only, white surfaces, light grey page. One file for tokens, base, shell foundation and the
shared components; wwwroot/css/site.css keeps only module-specific layout.
Contrast (WCAG 2.2 AA, measured): text #17212B; secondary text #5B6878 = 5.28:1 on the page #F4F7F8 (5.68 on white);
green #087F5B on white 5.0:1; white on navy #12304A 13.6:1. Saffron #E39A22 (2.4:1) and warning #D88A00 (2.8:1)
are NEVER text colours: fills, borders, stripes and indicators only, with dark ink (#6B4500, 7.8:1) on light fills.
Breakpoints (the only ones used anywhere): mobile <= 767px | tablet 768-1023px | desktop >= 1024px | large >= 1440px
Legacy class names (.btn, .ghost, .card, .badge.approved, .alert.info, table.data, td.num ...) are styled here as
aliases of the dmer-* components: views and tests that rely on them keep working unchanged.
===================================================================== */
:root{
/* ---- colour tokens ---- */
--dmer-navy:#12304A; --dmer-navy-dark:#0B2236; --dmer-sidebar:#102F46;
--dmer-green:#087F5B; --dmer-green-dark:#056044; --dmer-green-light:#E8F5F0; --dmer-green-border:#B7DDCF;
--dmer-saffron:#E39A22; --dmer-saffron-light:#FFF5DF; --dmer-saffron-ink:#6B4500; --dmer-saffron-border:#F2CF8E;
--dmer-blue:#1677B8; --dmer-blue-light:#EAF4FB; --dmer-blue-ink:#0F5C8E; --dmer-blue-border:#B9D8EE;
--dmer-success:#16855B; --dmer-warning:#D88A00; --dmer-danger:#C0392B; --dmer-info:#1677B8;
--dmer-danger-dark:#9A2A1F; --dmer-danger-light:#FBEAE8; --dmer-danger-border:#F0C2BC;
--dmer-background:#F4F7F8; --dmer-surface:#FFFFFF; --dmer-surface-muted:#F1F5F7;
--dmer-text:#17212B; --dmer-text-strong:#3D4A57; --dmer-text-secondary:#5B6878;
--dmer-border:#D9E2E7; --dmer-border-strong:#B9C6CE;
--dmer-focus:#1677B8; --dmer-focus-on-dark:#FFFFFF;
--dmer-sidebar-text:#D5DEE5; --dmer-sidebar-muted:#A9BCCB; --dmer-sidebar-active:#34C38F; --dmer-sidebar-hover:rgba(255,255,255,.07);
/* ---- typography ---- */
--dmer-font-family:'Noto Sans','Noto Sans Devanagari',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
--dmer-font-size-xs:12px; --dmer-font-size-sm:13px; --dmer-font-size-md:15px; --dmer-font-size-table:14px;
--dmer-font-size-lg:17px; --dmer-font-size-xl:22px; --dmer-font-size-2xl:30px;
--dmer-line-height:1.55;
/* ---- spacing (4px scale) ---- */
--dmer-space-1:4px; --dmer-space-2:8px; --dmer-space-3:12px; --dmer-space-4:16px; --dmer-space-5:20px;
--dmer-space-6:24px; --dmer-space-8:32px; --dmer-space-10:40px; --dmer-space-12:48px;
/* ---- radius / shadow / sizes ---- */
--dmer-radius-sm:6px; --dmer-radius-md:8px; --dmer-radius-lg:10px; --dmer-radius-pill:999px;
--dmer-shadow-sm:0 1px 2px rgba(18,48,74,.06);
--dmer-shadow-md:0 1px 2px rgba(18,48,74,.06),0 4px 12px -6px rgba(18,48,74,.12);
--dmer-shadow-overlay:0 16px 40px -12px rgba(11,34,54,.35);
--dmer-touch:44px; --dmer-header-h:64px; --dmer-sidebar-w:264px; --dmer-content-max:1360px;
--dmer-transition:180ms ease;
/* ---- legacy aliases (module CSS in site.css still uses these names) ---- */
--primary:var(--dmer-green); --primary-600:var(--dmer-green-dark); --primary-50:var(--dmer-green-light); --primary-100:var(--dmer-green-border);
--success:var(--dmer-success); --success-50:var(--dmer-green-light);
--text:var(--dmer-text); --text-2:var(--dmer-text-strong); --text-3:var(--dmer-text-secondary);
--bg:var(--dmer-background); --card:var(--dmer-surface); --card-2:var(--dmer-surface-muted); --border:var(--dmer-border); --border-2:var(--dmer-border-strong);
--warning:var(--dmer-warning); --warning-ink:var(--dmer-saffron-ink); --warning-50:var(--dmer-saffron-light);
--error:var(--dmer-danger); --error-ink:var(--dmer-danger-dark); --error-50:var(--dmer-danger-light);
--info:var(--dmer-info); --info-ink:var(--dmer-blue-ink); --info-50:var(--dmer-blue-light);
--radius:var(--dmer-radius-md); --radius-lg:var(--dmer-radius-lg);
--shadow-sm:var(--dmer-shadow-sm); --shadow:var(--dmer-shadow-md);
--focus:0 0 0 3px rgba(22,119,184,.35);
--hdr-h:var(--dmer-header-h); --rail-w:var(--dmer-sidebar-w); --touch:var(--dmer-touch);
--font:var(--dmer-font-family);
}
/* =====================================================================
1. BASE
===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--dmer-font-family);font-size:var(--dmer-font-size-md);line-height:var(--dmer-line-height);color:var(--dmer-text);background:var(--dmer-background)}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.25;color:var(--dmer-text)}
h1{font-size:var(--dmer-font-size-2xl);font-weight:700;letter-spacing:-.01em}
h2{font-size:var(--dmer-font-size-xl);font-weight:650}
h3{font-size:var(--dmer-font-size-lg);font-weight:600}
h4{font-size:var(--dmer-font-size-md);font-weight:600}
p{margin:0 0 1em}
a{color:var(--dmer-green);text-underline-offset:2px}
a:hover{color:var(--dmer-green-dark)}
img{max-width:100%}
small,.dmer-text-sm{font-size:var(--dmer-font-size-sm)}
.muted,.dmer-text-secondary{color:var(--dmer-text-secondary)}
::selection{background:var(--dmer-green-border)}
[lang="mr"]{font-family:'Noto Sans Devanagari','Noto Sans',system-ui,sans-serif}
/* focus: a solid, offset outline on every focusable element (never removed without replacement) */
:focus-visible{outline:2px solid var(--dmer-focus);outline-offset:2px;border-radius:var(--dmer-radius-sm)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--dmer-navy);color:#fff;padding:10px 16px;border-radius:var(--dmer-radius-sm);font-weight:600}
.skip-link:focus{left:12px;color:#fff}
/* =====================================================================
2. ICONS (Bootstrap Icons 1.11.3, local: wwwroot/lib/bootstrap-icons)
Usage: next to visible text (icons never replace a label).
===================================================================== */
.dmer-icon,.bi{display:inline-flex;line-height:1;vertical-align:-.125em}
.dmer-icon-lg{font-size:1.25rem}
.dmer-icon-tile{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--dmer-radius-md);background:var(--dmer-green-light);color:var(--dmer-green-dark);font-size:1.2rem;flex:none}
.dmer-icon-tile.navy{background:#E6ECF2;color:var(--dmer-navy)}
.dmer-icon-tile.blue{background:var(--dmer-blue-light);color:var(--dmer-blue-ink)}
.dmer-icon-tile.saffron{background:var(--dmer-saffron-light);color:var(--dmer-saffron-ink)}
/* =====================================================================
3. APPLICATION SHELL (UI-03): full-height navy sidebar on the left, white header + content on the right.
Markup: _Layout.cshtml (.shell > header.dmer-header + aside.dmer-sidebar#app-rail + main.app-main). JS: shell.js.
===================================================================== */
.shell{display:grid;grid-template-columns:var(--dmer-sidebar-w) minmax(0,1fr);grid-template-rows:var(--dmer-header-h) 1fr;grid-template-areas:"rail hdr" "rail main";min-height:100vh}
.shell.no-rail{grid-template-columns:minmax(0,1fr);grid-template-areas:"hdr" "main"}
/* the sticky sidebar is one viewport tall: paint its column for the full page height (long pages, full-page captures) */
@media (min-width:1024px){.shell:not(.no-rail){background:linear-gradient(to right,var(--dmer-sidebar) var(--dmer-sidebar-w),transparent var(--dmer-sidebar-w))}}
/* ---- header ---- */
.app-header,.dmer-header{grid-area:hdr;position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--dmer-space-3);height:var(--dmer-header-h);padding:0 var(--dmer-space-6);background:var(--dmer-surface);border-bottom:1px solid var(--dmer-border);box-shadow:var(--dmer-shadow-sm)}
/* government accent stripe: saffron / white / green (decorative) */
.app-header::before,.dmer-header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--dmer-saffron) 0 33.3%,#fff 33.3% 66.6%,var(--dmer-green) 66.6%)}
.hdr-brand{display:flex;align-items:center;gap:var(--dmer-space-3);text-decoration:none;color:var(--dmer-text);min-width:0}
.hdr-brand img{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 1px var(--dmer-border);flex:none}
.hdr-txt{display:flex;flex-direction:column;min-width:0}
.hdr-t{font-weight:700;font-size:16px;line-height:1.2;color:var(--dmer-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-s{font-size:var(--dmer-font-size-xs);color:var(--dmer-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-spacer{flex:1}
.dmer-header-brand{display:none;align-items:center;gap:var(--dmer-space-2);text-decoration:none;color:var(--dmer-navy);font-weight:700;font-size:17px;min-height:var(--dmer-touch)}
.dmer-header-brand img{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 1px var(--dmer-border)}
.dmer-header-title{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dmer-header-t{font-weight:700;font-size:16px;color:var(--dmer-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmer-header-s{font-size:var(--dmer-font-size-xs);color:var(--dmer-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logout-form{margin:0}
/* mobile menu button (shown below desktop) */
.menu-btn,.dmer-menu-btn{display:none;flex:none;width:var(--dmer-touch);height:var(--dmer-touch);border-radius:var(--dmer-radius-md);border:1px solid var(--dmer-border);background:var(--dmer-surface);color:var(--dmer-navy);cursor:pointer;place-items:center;padding:0;font-size:24px;line-height:1}
.menu-btn:hover{background:var(--dmer-surface-muted)}
/* ---- user menu (disclosure) ---- */
.dmer-user{position:relative;flex:none}
.dmer-user-btn{display:flex;align-items:center;gap:var(--dmer-space-3);min-height:var(--dmer-touch);padding:4px var(--dmer-space-2) 4px 4px;border:1px solid transparent;border-radius:var(--dmer-radius-pill);background:transparent;color:var(--dmer-text);cursor:pointer;font:inherit;text-align:left}
.dmer-user-btn:hover,.dmer-user-btn[aria-expanded="true"]{background:var(--dmer-surface-muted);border-color:var(--dmer-border)}
.dmer-avatar{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--dmer-navy);color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}
.dmer-avatar-lg{width:46px;height:46px;font-size:16px}
.dmer-user-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.dmer-user-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.dmer-user-role{font-size:var(--dmer-font-size-xs);color:var(--dmer-text-secondary);white-space:nowrap}
.dmer-user-caret{font-size:12px;color:var(--dmer-text-secondary)}
.dmer-user-panel{position:absolute;right:0;top:calc(100% + 6px);width:300px;max-width:calc(100vw - 24px);background:var(--dmer-surface);border:1px solid var(--dmer-border);border-radius:var(--dmer-radius-lg);box-shadow:var(--dmer-shadow-overlay);z-index:80;overflow:hidden}
.dmer-user-panel[hidden]{display:none}
.dmer-user-info{display:flex;gap:var(--dmer-space-3);align-items:center;padding:var(--dmer-space-4);border-bottom:1px solid var(--dmer-border);background:var(--dmer-surface-muted)}
.dmer-user-info-text{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.dmer-user-info-name{font-weight:700;color:var(--dmer-text);overflow-wrap:anywhere}
.dmer-user-info-role{font-size:var(--dmer-font-size-sm);color:var(--dmer-text-secondary)}
.dmer-user-info-inst{font-size:var(--dmer-font-size-sm);color:var(--dmer-text-strong);overflow-wrap:anywhere}
.dmer-user-actions{list-style:none;margin:0;padding:var(--dmer-space-2)}
.dmer-user-actions a,.dmer-user-actions button{display:flex;align-items:center;gap:var(--dmer-space-3);width:100%;min-height:var(--dmer-touch);padding:0 var(--dmer-space-3);border:0;border-radius:var(--dmer-radius-sm);background:transparent;color:var(--dmer-text);font:inherit;font-size:14.5px;text-decoration:none;cursor:pointer;text-align:left}
.dmer-user-actions a:hover,.dmer-user-actions button:hover{background:var(--dmer-surface-muted)}
.dmer-user-actions button{color:var(--dmer-danger-dark)}
.dmer-user-actions .bi{font-size:1.05rem;width:20px}
/* ---- navy sidebar ---- */
.rail,.dmer-sidebar{grid-area:rail;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;background:var(--dmer-sidebar);color:var(--dmer-sidebar-text);display:flex;flex-direction:column;z-index:40;scrollbar-color:rgba(255,255,255,.25) transparent}
.dmer-brand{display:flex;align-items:flex-start;gap:var(--dmer-space-2);padding:var(--dmer-space-4) var(--dmer-space-4) var(--dmer-space-4);border-bottom:1px solid rgba(255,255,255,.1);min-height:var(--dmer-header-h)}
.dmer-brand-link{display:flex;align-items:center;gap:var(--dmer-space-3);text-decoration:none;color:#fff;min-width:0;flex:1;border-radius:var(--dmer-radius-sm)}
.dmer-brand-link img{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.2);flex:none}
.dmer-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.dmer-brand-title{font-size:19px;font-weight:700;letter-spacing:.06em;color:#fff}
.dmer-brand-sub{font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dmer-sidebar-text);margin-top:2px}
.dmer-brand-state{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dmer-sidebar-text);margin-top:4px}
.dmer-brand-tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#062A1E;background:var(--dmer-sidebar-active);border-radius:var(--dmer-radius-pill);padding:1px 7px}
.dmer-drawer-close{display:none;flex:none;width:var(--dmer-touch);height:var(--dmer-touch);border:1px solid rgba(255,255,255,.25);border-radius:var(--dmer-radius-md);background:transparent;color:#fff;cursor:pointer;place-items:center;font-size:18px}
.dmer-drawer-close:hover{background:var(--dmer-sidebar-hover)}
.dmer-brand,.dmer-nav{flex:none}
.dmer-nav{padding:var(--dmer-space-3) var(--dmer-space-3) var(--dmer-space-6)}
.dmer-nav-list{list-style:none;margin:0;padding:0}
.dmer-nav-list[hidden]{display:none}
.dmer-nav-group{margin-top:var(--dmer-space-2)}
.dmer-nav-group .dmer-nav-list{padding-left:var(--dmer-space-2)}
.dmer-nav-group-toggle{display:flex;align-items:center;gap:var(--dmer-space-3);width:100%;min-height:var(--dmer-touch);padding:0 var(--dmer-space-3);border:0;border-radius:var(--dmer-radius-sm);background:transparent;color:var(--dmer-sidebar-muted);font:inherit;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;text-align:left}
.dmer-nav-group-toggle:hover{background:var(--dmer-sidebar-hover);color:#fff}
.dmer-nav-group-toggle .bi{font-size:1rem;width:20px}
.dmer-nav-group-toggle .dmer-chevron{margin-left:auto;font-size:12px;width:auto}
.dmer-nav-group[data-current="true"] > .dmer-nav-group-toggle{color:#fff}
.dmer-sidebar .dmer-nav-list a,.dmer-nav-button,.rail a,.dmer-nav-link{display:flex;align-items:center;gap:var(--dmer-space-3);width:100%;min-height:var(--dmer-touch);padding:var(--dmer-space-2) var(--dmer-space-3);border:0;border-radius:var(--dmer-radius-sm);background:transparent;color:var(--dmer-sidebar-text);font:inherit;font-size:14.5px;font-weight:500;line-height:1.3;text-decoration:none;text-align:left;cursor:pointer;position:relative;transition:background var(--dmer-transition),color var(--dmer-transition)}
.dmer-sidebar .dmer-nav-list a:hover,.dmer-nav-button:hover,.rail a:hover,.dmer-nav-link:hover{background:var(--dmer-sidebar-hover);color:#fff}
.dmer-sidebar .dmer-nav-list a.active,.dmer-sidebar .dmer-nav-list a[aria-current="page"],.dmer-nav-link.active{background:rgba(52,195,143,.16);color:#fff;font-weight:700}
.dmer-sidebar .dmer-nav-list a.active::before,.dmer-sidebar .dmer-nav-list a[aria-current="page"]::before,.dmer-nav-link.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:4px;border-radius:0 3px 3px 0;background:var(--dmer-sidebar-active)}
.dmer-sidebar .dmer-nav-list .bi,.dmer-nav-button .bi{font-size:1.05rem;width:20px;flex:none;opacity:.9}
.dmer-nav-form{margin:0}
.dmer-sidebar :focus-visible{outline:2px solid var(--dmer-focus-on-dark);outline-offset:-2px}
.dmer-nav-badge{margin-left:auto;min-width:22px;padding:0 7px;border-radius:var(--dmer-radius-pill);background:var(--dmer-saffron);color:#1F1300;font-size:var(--dmer-font-size-xs);font-weight:700;text-align:center}
.rail-backdrop,.dmer-overlay{display:none}
.app-main{grid-area:main;display:flex;flex-direction:column;min-width:0}
.content,.dmer-content{flex:1;width:100%;max-width:var(--dmer-content-max);margin:0 auto;padding:var(--dmer-space-6) var(--dmer-space-8)}
.app-footer{border-top:1px solid var(--dmer-border);background:var(--dmer-surface);padding:var(--dmer-space-4) var(--dmer-space-8);font-size:var(--dmer-font-size-xs);color:var(--dmer-text-secondary);display:flex;justify-content:space-between;gap:var(--dmer-space-3);flex-wrap:wrap}
.dmer-shell-breadcrumb{margin-bottom:var(--dmer-space-3)}
html.dmer-drawer-open,html.dmer-drawer-open body{overflow:hidden}
/* in-page anchors (e.g. Conversion Status -> #my-requests) clear the sticky header */
.app-main [id]{scroll-margin-top:calc(var(--dmer-header-h) + var(--dmer-space-4))}
/* =====================================================================
4. PAGE HEADER + BREADCRUMB
===================================================================== */
.page-head,.dmer-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dmer-space-4);flex-wrap:wrap;margin-bottom:var(--dmer-space-5)}
.page-head h1,.dmer-page-header h1{margin:0 0 var(--dmer-space-1)}
.page-head p,.dmer-page-header p,.dmer-page-desc{color:var(--dmer-text-secondary);margin:0}
.head-actions,.dmer-page-actions{display:flex;gap:var(--dmer-space-3);flex-wrap:wrap;align-items:center}
/* breadcrumb:
(the legacy on 7 views is styled the same) */
.breadcrumb,.dmer-breadcrumb{font-size:var(--dmer-font-size-sm);color:var(--dmer-text-secondary);margin:0 0 var(--dmer-space-2)}
.breadcrumb span{color:var(--dmer-text-strong)}
.dmer-breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--dmer-space-1)}
.dmer-breadcrumb li{display:inline-flex;align-items:center;gap:var(--dmer-space-1)}
.dmer-breadcrumb li + li::before{content:"/";color:var(--dmer-border-strong);margin-right:var(--dmer-space-1)}
.dmer-breadcrumb a{display:inline-flex;align-items:center;min-height:32px;color:var(--dmer-text-secondary);text-decoration:none}
.dmer-breadcrumb a:hover{color:var(--dmer-green-dark);text-decoration:underline}
.dmer-breadcrumb [aria-current="page"]{color:var(--dmer-text-strong);font-weight:500}
/* =====================================================================
5. CARDS
===================================================================== */
.card,.dmer-card{background:var(--dmer-surface);border:1px solid var(--dmer-border);border-radius:var(--dmer-radius-lg);box-shadow:var(--dmer-shadow-sm);padding:var(--dmer-space-5)}
.card + .card,.dmer-card + .dmer-card{margin-top:var(--dmer-space-4)}
.grid > .card + .card,.dmer-grid > .card + .card,.dmer-grid > .dmer-card + .dmer-card{margin-top:0}
.card h2,.dmer-card h2{font-size:var(--dmer-font-size-lg)}
.dmer-card.dmer-card-flush{padding:0}
.dmer-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--dmer-space-3);flex-wrap:wrap;padding:var(--dmer-space-4) var(--dmer-space-5);border-bottom:1px solid var(--dmer-border)}
.dmer-card-header h2,.dmer-card-header h3{margin:0;font-size:var(--dmer-font-size-lg)}
.dmer-card-body{padding:var(--dmer-space-5)}
.dmer-card-footer{display:flex;justify-content:flex-end;gap:var(--dmer-space-3);flex-wrap:wrap;padding:var(--dmer-space-3) var(--dmer-space-5);border-top:1px solid var(--dmer-border);background:var(--dmer-surface-muted);border-radius:0 0 var(--dmer-radius-lg) var(--dmer-radius-lg)}
.dmer-card-accent{border-top:3px solid var(--dmer-green)}
.dmer-card-accent.navy{border-top-color:var(--dmer-navy)}
.dmer-card-accent.saffron{border-top-color:var(--dmer-saffron)}
/* KPI / stat cards */
.stat-grid,.dmer-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--dmer-space-4);margin-bottom:var(--dmer-space-4)}
.stat-grid .card + .card,.dmer-kpi-grid .card + .card,.dmer-kpi-grid .dmer-card + .dmer-card{margin-top:0}
.stat-card h2.stat-label,.dmer-kpi-label{font-size:var(--dmer-font-size-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dmer-text-secondary);margin:0 0 var(--dmer-space-2)}
.stat-card p{margin:var(--dmer-space-1) 0}
.stat-value,.dmer-kpi-value{font-size:30px;font-weight:700;color:var(--dmer-navy);line-height:1.2;font-variant-numeric:tabular-nums}
.stat-of{font-size:16px;font-weight:500;color:var(--dmer-text-secondary)}
.dmer-kpi{display:flex;gap:var(--dmer-space-3);align-items:flex-start}
.dmer-kpi p{margin:0 0 var(--dmer-space-1)}
/* layout grids */
.grid,.dmer-grid{display:grid;gap:var(--dmer-space-4)}
.grid.g2,.dmer-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3,.dmer-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dmer-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* key / value list */
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--dmer-space-2) var(--dmer-space-4);margin:0}
dl.kv dt{color:var(--dmer-text-secondary)}
dl.kv dd{margin:0;font-weight:500}
dl.kv.compact{gap:2px var(--dmer-space-3);margin:var(--dmer-space-2) 0}
/* =====================================================================
6. BUTTONS (.btn = primary; .ghost = secondary; .danger; .btn-sm; .btn-block; .loading)
===================================================================== */
.btn,.dmer-btn,.dmer-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--dmer-space-2);min-height:var(--dmer-touch);padding:var(--dmer-space-2) 18px;border-radius:var(--dmer-radius-sm);border:1px solid var(--dmer-green);background:var(--dmer-green);color:#fff;font:inherit;font-weight:600;line-height:1.2;cursor:pointer;text-decoration:none;transition:background var(--dmer-transition),border-color var(--dmer-transition),color var(--dmer-transition)}
.btn:hover,.dmer-btn-primary:hover{background:var(--dmer-green-dark);border-color:var(--dmer-green-dark);color:#fff}
.btn.ghost,.dmer-btn-secondary{background:var(--dmer-surface);color:var(--dmer-green-dark);border-color:var(--dmer-border-strong)}
.btn.ghost:hover,.dmer-btn-secondary:hover{background:var(--dmer-green-light);border-color:var(--dmer-green);color:var(--dmer-green-dark)}
.btn.danger,.dmer-btn-danger{background:var(--dmer-danger);border-color:var(--dmer-danger);color:#fff}
.btn.danger:hover,.dmer-btn-danger:hover{background:var(--dmer-danger-dark);border-color:var(--dmer-danger-dark);color:#fff}
.dmer-btn-ghost{background:transparent;border-color:transparent;color:var(--dmer-green-dark)}
.dmer-btn-ghost:hover{background:var(--dmer-green-light);color:var(--dmer-green-dark)}
.dmer-btn-link{background:none;border:0;padding:0 var(--dmer-space-1);min-height:var(--dmer-touch);color:var(--dmer-green);text-decoration:underline;font-weight:600}
.dmer-btn-link:hover{background:none;color:var(--dmer-green-dark)}
.btn:focus-visible,.dmer-btn:focus-visible{outline:2px solid var(--dmer-focus);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"],.dmer-btn:disabled{background:var(--dmer-surface-muted);border-color:var(--dmer-border);color:var(--dmer-text-secondary);cursor:not-allowed}
.btn-sm,.dmer-btn-sm{min-height:var(--dmer-touch);padding:var(--dmer-space-1) var(--dmer-space-3);font-size:13.5px}
.btn-block{width:100%}
.btn.loading{opacity:.85;cursor:progress}
/* form actions: right aligned (Cancel . Save order is applied per form in the module phases) */
.form-actions,.dmer-form-actions{display:flex;gap:var(--dmer-space-3);flex-wrap:wrap;margin-top:var(--dmer-space-2)}
.dmer-form-actions{justify-content:flex-end}
/* =====================================================================
7. FORM CONTROLS
===================================================================== */
.field,.dmer-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label,.dmer-label,.label{font-weight:600;font-size:14px;color:var(--dmer-text)}
.field .req{color:var(--dmer-danger-dark)}
.field .help,.dmer-help{font-size:var(--dmer-font-size-sm);color:var(--dmer-text-secondary)}
.input,.dmer-input,.field :where(input:not([type=checkbox]):not([type=radio])),.field select,.field textarea,.dmer-select,.dmer-textarea{min-height:var(--dmer-touch);padding:var(--dmer-space-2) var(--dmer-space-3);border:1px solid var(--dmer-border-strong);border-radius:var(--dmer-radius-sm);background:var(--dmer-surface);color:var(--dmer-text);font:inherit;transition:border-color var(--dmer-transition),box-shadow var(--dmer-transition)}
.field input::placeholder,.field textarea::placeholder,.dmer-input::placeholder{color:#7A8794}
.field input:focus,.field select:focus,.field textarea:focus,.dmer-input:focus{border-color:var(--dmer-blue);box-shadow:0 0 0 3px rgba(22,119,184,.2);outline:2px solid transparent}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--dmer-focus);outline-offset:1px}
.field input[readonly],.dmer-input[readonly]{background:var(--dmer-surface-muted);color:var(--dmer-text-strong)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--dmer-surface-muted);color:var(--dmer-text-secondary);cursor:not-allowed}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;accent-color:var(--dmer-green)}
input[type="date"]{min-height:var(--dmer-touch)}
/* validation (ASP.NET Core classes): colour + border + message text */
.input-validation-error,[aria-invalid="true"]{border-color:var(--dmer-danger)!important;background:var(--dmer-danger-light)}
.field-validation-error{color:var(--dmer-danger-dark);font-size:var(--dmer-font-size-sm);font-weight:500}
.validation-summary-valid{display:none}
.validation-summary-errors ul{margin:0;padding-left:18px}
.form-card{max-width:560px}
.inline-form{display:inline-flex;gap:6px;align-items:center;margin:0}
.order-input{width:90px;min-height:var(--dmer-touch);padding:6px var(--dmer-space-2);border:1px solid var(--dmer-border-strong);border-radius:var(--dmer-radius-sm);font:inherit}
.readonly-value{margin:0}
/* password field with show / hide button */
.pw-wrap{display:flex;align-items:stretch;gap:0}
.pw-wrap input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.pw-toggle{min-width:64px;min-height:var(--dmer-touch);border:1px solid var(--dmer-border-strong);border-left:0;border-radius:0 var(--dmer-radius-sm) var(--dmer-radius-sm) 0;background:var(--dmer-surface-muted);color:var(--dmer-green-dark);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
/* filter / toolbar card */
.toolbar,.dmer-toolbar{display:flex;flex-wrap:wrap;gap:var(--dmer-space-3) var(--dmer-space-4);align-items:flex-end;margin-bottom:var(--dmer-space-4)}
.toolbar .field{margin-bottom:0;min-width:160px}
.toolbar .field.grow{flex:1 1 260px}
.toolbar-actions{display:flex;gap:var(--dmer-space-3);flex-wrap:wrap}
/* =====================================================================
8. TABLES (table.data; td.num / th.num = numeric, right aligned - keep these class names)
===================================================================== */
.table-wrap,.dmer-table-wrap{position:relative;overflow-x:auto;border:1px solid var(--dmer-border);border-radius:var(--dmer-radius-lg);background:var(--dmer-surface)}
table.data,.dmer-table{width:100%;border-collapse:collapse;font-size:var(--dmer-font-size-table)}
table.data th,table.data td,.dmer-table th,.dmer-table td{padding:11px var(--dmer-space-3);border-bottom:1px solid var(--dmer-border);text-align:left;vertical-align:top}
table.data th,.dmer-table th{background:var(--dmer-surface-muted);font-weight:600;color:var(--dmer-text-strong);white-space:nowrap}
table.data tbody tr:hover td,.dmer-table tbody tr:hover td{background:#F7FAFB}
table.data tbody tr:last-child td{border-bottom:0}
table.data td.num,table.data th.num,.dmer-table .num{text-align:right;font-variant-numeric:tabular-nums}
table.data td.status,.dmer-table td.status{white-space:nowrap}
table.data td.actions,.dmer-table td.actions{text-align:right;white-space:nowrap}
table.data td.empty{text-align:center;color:var(--dmer-text-secondary);padding:var(--dmer-space-6)}
table.data th a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
table.data th a:hover{text-decoration:underline}
table.data tfoot th,table.data tfoot td{border-top:1px solid var(--dmer-border);border-bottom:0;background:var(--dmer-surface-muted)}
table.status-table{max-width:480px}
.dmer-table-sticky thead th{position:sticky;top:0;z-index:1}
.neg{color:var(--dmer-danger-dark);font-weight:700}
/* pager */
.pager,.dmer-pager{display:flex;justify-content:space-between;align-items:center;gap:var(--dmer-space-3);flex-wrap:wrap;margin-top:var(--dmer-space-3);font-size:14px;color:var(--dmer-text-strong)}
.pager-links{display:flex;align-items:center;gap:10px}
/* empty state */
.dmer-empty{text-align:center;padding:var(--dmer-space-8) var(--dmer-space-4);color:var(--dmer-text-secondary)}
.dmer-empty .bi{font-size:1.75rem;color:var(--dmer-border-strong);display:block;margin:0 auto var(--dmer-space-2)}
.dmer-empty-title{font-weight:600;color:var(--dmer-text);margin:0 0 var(--dmer-space-1)}
/* =====================================================================
8b. CONTAINER-QUERY CARD TABLES (UI-07; the UI-06 "available width" strategy, shared)
Wrap a table in .dmer-cq and give the table cq-md (cards when its area is <= 760 px wide) or cq-lg (<= 980 px).
The layout follows the width the table really has (sidebar open or not), never only the viewport.
Cells keep their header text through data-label (site.js). .cq-title = card heading; .cq-block = long text.
===================================================================== */
.dmer-cq{container-type:inline-size;container-name:dmercq}
@container dmercq (max-width: 760px){
.dmer-cq table.data.cq-md thead{display:none}
.dmer-cq table.data.cq-md,.dmer-cq table.data.cq-md tbody{display:block;width:100%}
.dmer-cq table.data.cq-md tr{display:block;padding:var(--dmer-space-3) var(--dmer-space-4);border-bottom:1px solid var(--dmer-border)}
.dmer-cq table.data.cq-md tbody tr:hover td{background:transparent}
.dmer-cq table.data.cq-md td{display:block;border:0;padding:4px 0;text-align:right;white-space:normal;overflow-wrap:anywhere;box-shadow:none!important}
.dmer-cq table.data.cq-md td::before{content:attr(data-label);float:left;margin-right:var(--dmer-space-3);font-weight:600;color:var(--dmer-text-secondary);text-align:left}
.dmer-cq table.data.cq-md td::after{content:"";display:table;clear:both}
.dmer-cq table.data.cq-md td.cq-title{text-align:left;font-weight:700;font-size:15px;color:var(--dmer-text);padding-bottom:var(--dmer-space-2)}
.dmer-cq table.data.cq-md td.cq-title::before{display:none}
.dmer-cq table.data.cq-md td.cq-block{text-align:left}
.dmer-cq table.data.cq-md td.cq-block::before{float:none;display:block;margin-bottom:2px}
.dmer-cq table.data.cq-md td.actions{text-align:right;padding-top:var(--dmer-space-2)}
.dmer-cq table.data.cq-md td.actions::before{display:none}
.dmer-cq table.data.cq-md td.empty{text-align:center}
.dmer-cq table.data.cq-md td.empty::before{display:none}
}
@container dmercq (max-width: 980px){
.dmer-cq table.data.cq-lg thead{display:none}
.dmer-cq table.data.cq-lg,.dmer-cq table.data.cq-lg tbody{display:block;width:100%}
.dmer-cq table.data.cq-lg tr{display:block;padding:var(--dmer-space-3) var(--dmer-space-4);border-bottom:1px solid var(--dmer-border)}
.dmer-cq table.data.cq-lg tbody tr:hover td{background:transparent}
.dmer-cq table.data.cq-lg td{display:block;border:0;padding:4px 0;text-align:right;white-space:normal;overflow-wrap:anywhere;box-shadow:none!important}
.dmer-cq table.data.cq-lg td::before{content:attr(data-label);float:left;margin-right:var(--dmer-space-3);font-weight:600;color:var(--dmer-text-secondary);text-align:left}
.dmer-cq table.data.cq-lg td::after{content:"";display:table;clear:both}
.dmer-cq table.data.cq-lg td.cq-title{text-align:left;font-weight:700;font-size:15px;color:var(--dmer-text);padding-bottom:var(--dmer-space-2)}
.dmer-cq table.data.cq-lg td.cq-title::before{display:none}
.dmer-cq table.data.cq-lg td.cq-block{text-align:left}
.dmer-cq table.data.cq-lg td.cq-block::before{float:none;display:block;margin-bottom:2px}
.dmer-cq table.data.cq-lg td.actions{text-align:right;padding-top:var(--dmer-space-2)}
.dmer-cq table.data.cq-lg td.actions::before{display:none}
.dmer-cq table.data.cq-lg td.empty{text-align:center}
.dmer-cq table.data.cq-lg td.empty::before{display:none}
}
/* wider card areas: the facts of one row sit in a compact grid (label above value) instead of one long list */
@container dmercq (min-width: 521px) and (max-width: 760px){
.dmer-cq table.data.cq-md tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--dmer-space-2) var(--dmer-space-5);align-items:start}
.dmer-cq table.data.cq-md td{text-align:left;padding:0}
.dmer-cq table.data.cq-md td::before{float:none;display:block;margin:0 0 1px;font-size:12px}
.dmer-cq table.data.cq-md td.cq-title,.dmer-cq table.data.cq-md td.cq-block,.dmer-cq table.data.cq-md td.actions,.dmer-cq table.data.cq-md td.empty{grid-column:1 / -1}
.dmer-cq table.data.cq-md td.actions{text-align:right}
}
@container dmercq (min-width: 521px) and (max-width: 980px){
.dmer-cq table.data.cq-lg tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--dmer-space-2) var(--dmer-space-5);align-items:start}
.dmer-cq table.data.cq-lg td{text-align:left;padding:0}
.dmer-cq table.data.cq-lg td::before{float:none;display:block;margin:0 0 1px;font-size:12px}
.dmer-cq table.data.cq-lg td.cq-title,.dmer-cq table.data.cq-lg td.cq-block,.dmer-cq table.data.cq-lg td.actions,.dmer-cq table.data.cq-lg td.empty{grid-column:1 / -1}
.dmer-cq table.data.cq-lg td.actions{text-align:right}
}
/* =====================================================================
9. STATUS BADGES - always dot / icon + TEXT (never colour alone).
Legacy badge classes map to the same palette.
===================================================================== */
.badge,.dmer-status{display:inline-flex;align-items:center;gap:6px;border-radius:var(--dmer-radius-pill);padding:3px 10px;font-size:12.5px;font-weight:600;line-height:1.4;border:1px solid var(--dmer-border-strong);background:var(--dmer-surface-muted);color:var(--dmer-text-strong);white-space:nowrap}
.badge::before,.dmer-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.badge.approved,.badge.active,.dmer-status-approved,.dmer-status-open{background:var(--dmer-green-light);color:var(--dmer-green-dark);border-color:var(--dmer-green-border)}
.badge.awaited,.dmer-status-pending,.dmer-status-warning{background:var(--dmer-saffron-light);color:var(--dmer-saffron-ink);border-color:var(--dmer-saffron-border)}
.badge.rejected,.dmer-status-rejected{background:var(--dmer-danger-light);color:var(--dmer-danger-dark);border-color:var(--dmer-danger-border)}
.badge.resubmitted,.badge.upcoming,.dmer-status-info{background:var(--dmer-blue-light);color:var(--dmer-blue-ink);border-color:var(--dmer-blue-border)}
.badge.draft,.badge.inactive,.dmer-status-draft{background:var(--dmer-surface-muted);color:var(--dmer-text-strong);border-color:var(--dmer-border-strong)}
.dmer-status-closed{background:#E6ECF2;color:var(--dmer-navy);border-color:#C3D0DC}
.badge.notstarted{background:var(--dmer-surface);color:var(--dmer-text-secondary);border-color:var(--dmer-border-strong);border-style:dashed}
.badge.set-by{background:var(--dmer-green-light);color:var(--dmer-green-dark);border-color:var(--dmer-green-border)}
.badge.current{background:var(--dmer-green);color:#fff;border-color:var(--dmer-green);margin-left:6px}
.badge.current::before{background:#fff}
.soon-tag{margin-left:auto;font-size:11px;font-weight:600;color:var(--dmer-text-strong);border:1px solid var(--dmer-border-strong);border-radius:var(--dmer-radius-pill);padding:1px var(--dmer-space-2)}
/* =====================================================================
10. ALERTS - icon + text + semantic colour (the icon is decorative; the message text carries the meaning)
===================================================================== */
.alert,.dmer-alert,.validation-summary-errors{position:relative;border-radius:var(--dmer-radius-md);padding:var(--dmer-space-3) var(--dmer-space-4) var(--dmer-space-3) 44px;border:1px solid var(--dmer-border);border-left-width:4px;background:var(--dmer-surface-muted);color:var(--dmer-text);margin-bottom:var(--dmer-space-4)}
.alert::before,.dmer-alert::before,.validation-summary-errors::before{position:absolute;left:var(--dmer-space-4);top:13px;font-family:bootstrap-icons;font-size:1.05rem;line-height:1;content:"\f430";content:"\f430" / ""}
.alert.info,.dmer-alert-info{background:var(--dmer-blue-light);border-color:var(--dmer-blue-border);border-left-color:var(--dmer-blue);color:var(--dmer-blue-ink)}
.alert.success,.dmer-alert-success{background:var(--dmer-green-light);border-color:var(--dmer-green-border);border-left-color:var(--dmer-green);color:var(--dmer-green-dark)}
.alert.success::before,.dmer-alert-success::before{content:"\f26a";content:"\f26a" / ""}
.alert.warning,.dmer-alert-warning{background:var(--dmer-saffron-light);border-color:var(--dmer-saffron-border);border-left-color:var(--dmer-saffron);color:var(--dmer-saffron-ink)}
.alert.warning::before,.dmer-alert-warning::before{content:"\f33a";content:"\f33a" / ""}
.alert.error,.dmer-alert-error,.validation-summary-errors{background:var(--dmer-danger-light);border-color:var(--dmer-danger-border);border-left-color:var(--dmer-danger);color:var(--dmer-danger-dark)}
.alert.error::before,.dmer-alert-error::before,.validation-summary-errors::before{content:"\f622";content:"\f622" / ""}
/* toasts (site.js dmer.toast: icon glyph + text + aria-live) */
.toast-host{position:fixed;right:var(--dmer-space-6);bottom:var(--dmer-space-6);display:flex;flex-direction:column;gap:10px;z-index:300;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;align-items:flex-start;gap:10px;background:var(--dmer-navy-dark);color:#fff;border-radius:var(--dmer-radius-md);padding:var(--dmer-space-3) var(--dmer-space-4);font-size:14.5px;font-weight:500;box-shadow:var(--dmer-shadow-overlay);border-left:5px solid var(--dmer-success);animation:dmer-toast-in var(--dmer-transition)}
.toast .toast-icon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--dmer-success);font-weight:800;font-size:13px;flex:none}
.toast.warning{border-left-color:var(--dmer-saffron)} .toast.warning .toast-icon{background:var(--dmer-saffron);color:#1F1300}
.toast.info{border-left-color:var(--dmer-blue)} .toast.info .toast-icon{background:var(--dmer-blue)}
.toast.error{border-left-color:var(--dmer-danger)} .toast.error .toast-icon{background:var(--dmer-danger)}
.toast .toast-close{margin-left:auto;background:none;border:0;color:#fff;opacity:.85;cursor:pointer;min-width:32px;min-height:32px;font-size:18px}
@keyframes dmer-toast-in{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
/* =====================================================================
11. MODAL (native