/* Shared presentation layer: original component IDs and event handlers stay intact. */
:root { --ui-surface:light-dark(#fff,#171e2a); --ui-bg:light-dark(#f3f6fa,#10151e); --ui-text:light-dark(#182335,#edf3fc); --ui-muted:light-dark(#526176,#a7b5ca); --ui-border:light-dark(#dce4ee,#303c50); --ui-accent:light-dark(#075fd8,#7fb5ff); }
:root[data-theme="light"] {color-scheme:light}
:root[data-theme="dark"] {color-scheme:dark}
body {background:var(--ui-bg);color:var(--ui-text)}
button,a,input,select,textarea {touch-action:manipulation}
:focus-visible {outline:2px solid var(--ui-accent)!important;outline-offset:3px}
.container {width:100%;max-width:1800px;padding-inline:clamp(12px,2vw,32px)}
.modal-dialog {max-width:calc(100vw - 24px);margin:24px auto}
.modal-content,.am-box,.ps-modal,.su-box {background:var(--ui-surface)!important;color:var(--ui-text);border:1px solid var(--ui-border)!important;border-radius:18px!important;box-shadow:0 24px 80px #0004!important}
.modal-header,.modal-footer,.am-head,.am-foot {padding:18px 22px;border-color:var(--ui-border)!important}
.modal-title {font-weight:650;letter-spacing:-.02em}
.modal-body {padding:22px;max-height:calc(100dvh - 185px);overflow:auto;overscroll-behavior:contain}
.modal .form-control,.am-box input,.am-box textarea,.am-box select {background:var(--ui-bg);color:var(--ui-text);border-color:var(--ui-border);border-radius:9px;min-height:38px}
.modal-backdrop.in {opacity:.55}
.modal .close {color:var(--ui-text);opacity:.8;min-width:32px;min-height:32px}
.table-responsive {overflow-x:auto;overscroll-behavior-x:contain}
body.astra-modern {--bg0:var(--ui-bg);--bg1:var(--ui-surface);--bg2:light-dark(#eaf0f8,#222d3e);--bg3:light-dark(#d9e3f0,#344156);--border:var(--ui-border);--border2:var(--ui-border);--text0:var(--ui-text);--text1:var(--ui-muted);--text2:light-dark(#627087,#9baac0);--blue:var(--ui-accent);--green:light-dark(#167740,#60d99b);--amber:light-dark(#875b00,#edc469);--purple:light-dark(#7245bc,#c5a8ff);--red:light-dark(#b92c3a,#ff8290);font-family:var(--font-ui)}
.astra-modern .app {height:100dvh;min-height:0}
.astra-modern .tbar,.astra-modern .sbar {background:var(--ui-surface)}
.astra-modern .tbar {padding:10px 16px;gap:12px}
.astra-modern .tbar-title {font-size:14px}
.astra-modern .tabs {overflow-x:auto;padding-inline:12px}
.astra-modern .tab {padding:12px 18px;font-size:12px}
.astra-modern .sidebar {width:168px}
.astra-modern .body,.astra-modern .main {min-height:0;min-width:0}
.astra-modern .am-overlay {padding:16px;background:#0007;backdrop-filter:blur(5px)}
.astra-modern .am-box {max-height:calc(100dvh - 32px);max-width:calc(100vw - 32px);overflow:auto}
.astra-theme {display:flex;gap:2px;border:1px solid var(--ui-border);border-radius:9px;padding:2px}
.astra-theme button {background:transparent;color:var(--ui-muted);border:0;border-radius:6px;padding:5px 8px;font-size:11px}
.astra-theme button[aria-checked="true"] {background:var(--bg2);color:var(--ui-accent)}
@media(max-width:760px){
 .container{padding-inline:10px}.modal-dialog{margin:10px auto}.modal-body{padding:16px}.modal-header,.modal-footer{padding:14px 16px}
 .astra-modern .sidebar{display:none}.astra-modern .tbar{flex-wrap:wrap;gap:7px;padding:8px 10px}.astra-modern .tbar-sub,.astra-modern .tbar-sep{display:none}
 .astra-modern .tab{padding:11px 13px}.astra-modern .sbar{overflow-x:auto;white-space:nowrap}.astra-modern .am-row{flex-wrap:wrap}
 .astra-modern .body{overflow:auto}.astra-modern input,.astra-modern select{max-width:100%}
 .su-bar{flex-wrap:wrap!important}.su-wrap{inset:8px!important}.modal .row{margin-inline:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.login-container{position:relative;top:auto;left:auto;transform:none;margin:clamp(20px,5vh,64px) auto;max-width:440px;width:calc(100% - 32px);padding:clamp(24px,4vw,40px);border-radius:22px}
.login-logo{width:100%;justify-content:center;margin:0 0 8px!important;gap:14px}
.login-logo img{width:76px;height:auto}.login-logo h1{font-size:clamp(22px,5vw,32px)!important;white-space:nowrap;letter-spacing:.08em!important}
.astra-modern .am-modal{background:var(--ui-surface);border-radius:18px;box-shadow:0 24px 80px #0005;max-height:calc(100dvh - 32px)}
.astra-modern .am-hdr,.astra-modern .am-ftr{padding:16px 20px}.astra-modern .am-body{padding:20px;gap:14px}
.astra-modern .am-in,.astra-modern .am-ta{padding:9px 10px;border-radius:8px;font-size:13px}.astra-modern .am-lbl{font-size:12px}.astra-modern .am-btn{padding:9px 16px;border-radius:8px}
@media(max-width:600px){.astra-modern .dock-hint{display:none}.astra-modern .am-col{min-width:100%}.astra-modern .am-ptable{display:block;overflow-x:auto}.astra-modern .am-hdr,.astra-modern .am-ftr{padding:12px}.astra-modern .am-body{padding:14px}}
@media(max-width:600px){.astra-modern .dock-hdr{flex-wrap:wrap;gap:6px}.astra-modern .dock-hdr .sb-footer-title{display:none}.astra-modern .dock-hdr .seg{flex-shrink:0}.astra-modern .dock-title{white-space:nowrap}.astra-modern .seg-b{white-space:nowrap}.astra-modern .dock-hdr .ed-btn{padding:4px 7px}}
/* Compact shared chrome and accessible controls, including legacy Bootstrap forms. */
.header-container{padding:18px 22px!important;margin:16px 0!important;gap:20px;flex-wrap:wrap;background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:18px!important;box-shadow:0 4px 18px #00000008!important}
.logo-section{min-width:0;gap:12px!important}.logo-section img{width:56px!important;height:56px!important;object-fit:contain}.logo-section h1{font-size:clamp(22px,2.5vw,32px)!important;white-space:nowrap;letter-spacing:.03em!important}.logo-section p{margin:0;color:var(--ui-muted)}
.header-right{gap:12px!important;min-width:0}.header-right p{margin:0}.header-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.header-actions .btn,.tabcontent>.btn{min-height:38px;min-width:38px;border-radius:10px}
.tab-container{margin:0 0 14px!important;padding:4px!important;display:inline-flex!important;gap:4px;max-width:100%;overflow-x:auto;vertical-align:middle}
.tab-container .tablinks{padding:10px 16px!important;white-space:nowrap;min-height:40px}
.container>.theme-seg{margin:4px 0 12px}.container>.row{clear:both}
.dataTables_wrapper{padding-top:10px}.dataTables_filter input,.dataTables_length select{background:var(--ui-surface)!important;color:var(--ui-text)!important;border:1px solid var(--ui-border)!important;border-radius:8px!important;min-height:36px}
.table{color:var(--ui-text)}.table>thead>tr>th{background:var(--ui-surface)!important;color:var(--ui-muted)!important;border-bottom:1px solid var(--ui-border)!important;padding:12px 10px!important}.table>tbody>tr>td{border-color:var(--ui-border)!important;vertical-align:middle}
.appearance-control{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface);align-self:center;flex-shrink:0}
.appearance-control button{padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--ui-muted);font:500 12px system-ui;cursor:pointer}.appearance-control button[aria-checked=true]{background:var(--ui-bg);color:var(--ui-accent)}
.appearance-floating{position:fixed;right:16px;top:12px;z-index:20}
.modal-content{overflow:hidden}.modal-content>form{margin:0}.modal-header{text-align:left!important;background:var(--ui-surface)}.modal-header center{text-align:left}.modal-title{font-size:18px!important;line-height:1.4}.modal .control-label{font-weight:600;color:var(--ui-muted);margin-bottom:6px}.modal-footer{background:var(--ui-bg);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.modal-footer .btn{min-height:40px;border-radius:9px;margin:0!important}.modal-body .container-fluid{padding-inline:0}.modal font[color]{color:inherit}.modal .form-control{box-shadow:none;line-height:1.5}.modal textarea.form-control{min-height:100px;resize:vertical}.modal .btn-danger{color:#fff}
.astra-modern .am-modal{overflow:hidden}.astra-modern .am-body{min-height:0}.astra-modern .am-ftr{flex-shrink:0;background:var(--ui-bg);flex-wrap:wrap}.astra-modern .am-x{width:32px;height:32px}.astra-modern .am-ptable td{min-width:68px}.astra-modern .tab{min-height:44px}.astra-modern .tbar{min-height:52px}
.su-ov{--su-bg:var(--ui-surface)!important;--su-panel:var(--ui-bg)!important;--su-text:var(--ui-text)!important;--su-mut:var(--ui-muted)!important;--su-line:var(--ui-border)!important;--su-acc:var(--ui-accent)!important}.su-box{max-height:calc(100dvh - 24px)}
@media(max-width:760px){
 .header-container{padding:14px!important;gap:12px;margin-top:10px!important}.header-right{width:100%;justify-content:space-between!important;flex-wrap:wrap}.header-right .header-right{width:auto}.logo-section img{width:44px!important;height:44px!important}.logo-section p,.welcome-text{display:none}.clock-display{font-size:11px}
 .container>.theme-seg{float:none!important;margin-bottom:12px}.tab-container{display:flex!important;width:100%}.tab-container .tablinks{flex:1;padding-inline:10px!important}
 .dataTables_wrapper>.row{display:flex;flex-wrap:wrap;gap:8px}.dataTables_wrapper>.row>div{width:100%}.dataTables_filter{text-align:left!important}.dataTables_filter input{max-width:65vw}
 .modal-dialog{width:calc(100vw - 20px)!important;margin:10px!important}.modal-body [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}.modal-body .form-group{min-width:0}.modal-body{max-height:calc(100dvh - 160px)}
 .page-header{flex-wrap:wrap;gap:12px}.page-header>div:last-child{flex-wrap:wrap}.appearance-floating{position:static;margin:12px}
 .su-box{width:calc(100vw - 16px)!important;height:calc(100dvh - 16px)!important}.su-hd{flex-wrap:wrap}.su-body{flex-direction:column}.su-side{width:100%!important;max-height:150px;border-right:0!important;border-bottom:1px solid var(--ui-border)}.su-tl{display:flex;overflow-x:auto}.su-ti{white-space:nowrap}.su-bar{padding:10px!important}.su-ft{flex-wrap:wrap;gap:8px}
}
@media print{.appearance-control,.theme-seg,.astra-theme{display:none!important}}
/* Screenshot corrections: isolate dashboard tokens from legacy OS-only styles. */
body.dashboard-page{--bg:var(--ui-bg);--surface:var(--ui-surface);--text:var(--ui-text);--muted:var(--ui-muted);--border:var(--ui-border);--fill:light-dark(#e5eaf1,#283346);--mesh:none;--bg-primary:var(--ui-bg);--bg-secondary:var(--ui-surface);--bg-elevated:var(--ui-surface);--label-primary:var(--ui-text);--label-secondary:var(--ui-muted);background:var(--ui-bg);color:var(--ui-text)}
.dashboard-page{--shadow:0 6px 24px light-dark(rgba(24,35,53,.06),rgba(0,0,0,.24))}
.dashboard-page .main-body{background:var(--ui-bg);color:var(--ui-text)}
.dashboard-page :is(.sidebar,.page-header,.card){background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
.dashboard-page :is(.page-title,.kpi-value,.chart-title,.ai-title,.ai-body,.contrib-name,.sidebar-logo .app-name){color:var(--ui-text)}
.dashboard-page .page-header{padding:20px 24px}.dashboard-page .sidebar-logo{background:var(--fill)}
/* Global form width must not make confirmation-footer forms occupy a whole row. */
.modal-footer>form{width:auto!important;flex:0 0 auto;display:inline-flex!important;margin:0!important;align-items:center}
.modal-footer>.btn{flex:0 0 auto}.modal-footer::before,.modal-footer::after{display:none!important}
/* Equal field/button edges, with visibility controls inside the field. */
.login-container{box-sizing:border-box;max-width:522px}
.login-container>form,.login-container .ios-form-group,.login-container .input-wrapper{width:100%;min-width:0;box-sizing:border-box}
.login-container .input-wrapper{display:block;position:relative}
.login-container .ios-input,.login-container .ios-btn-primary{display:block;box-sizing:border-box;width:100%!important;max-width:none;min-width:0;height:52px;margin-inline:0;border-radius:10px}
.login-container .ios-input{padding:12px 14px}.login-container .input-wrapper .ios-input{padding-right:48px}
.login-container .toggle-pass{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;margin:0;background:transparent;border:0}
.login-container .login-logo{display:flex;align-items:center;justify-content:center;gap:16px;padding:0}
.login-container .login-logo h1{font-size:44px!important;letter-spacing:.06em!important;margin:0}
/* The source logo has transparent padding; frame the visible mark so the
   mark/title group is visually centered without changing the image asset. */
.login-logo .brand-mark,.logo-section .brand-mark{display:block;position:relative;overflow:hidden;flex:0 0 auto;width:112px;height:112px}
.login-container .login-logo .brand-mark img,.header-container .logo-section .brand-mark img{display:block;width:100%!important;height:100%!important;max-width:none;object-fit:contain;transform:translateY(5%) scale(1.7)}
.header-container .logo-section .brand-mark{width:104px;height:104px}
.container.artemis-workspace{box-sizing:border-box;width:100%;max-width:none;margin-inline:auto;padding-inline:clamp(12px,1.2vw,24px)}
/* Muted slate light workspace: retain light mode without white coding surfaces. */
body.astra-modern{--ui-bg:light-dark(#dbe2e9,#10151e);--ui-surface:light-dark(#e5eaf0,#171e2a);--ui-text:light-dark(#233246,#edf3fc);--ui-muted:light-dark(#4d6077,#a7b5ca);--ui-border:light-dark(#bdc9d5,#303c50);--bg2:light-dark(#d0dae5,#222d3e);--bg3:light-dark(#bbc9d8,#344156)}
@media(max-width:600px){.login-logo .brand-mark{width:88px;height:88px}.login-container .login-logo{gap:12px}.login-container .login-logo h1{font-size:32px!important}.header-container .logo-section .brand-mark{width:84px;height:84px}.dashboard-page .page-header{padding:16px}.modal-footer{column-gap:8px;row-gap:8px}}
