@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700&display=swap');

:root { --navy:#071b55; --blue:#174294; --royal:#2458b8; --amber:#f8ad25; --ink:#172033; --muted:#69758c; --line:#e5e9f1; --canvas:#f3f5f9; --green:#16a36a; --red:#e14c50; --orange:#f39c35; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; font-family:Inter,Segoe UI,sans-serif; color:var(--ink); background:var(--canvas); }
h1:focus { outline:none; }
button, input, select { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.desktop-shell { min-height:100vh; display:grid; grid-template-columns:280px minmax(0,1fr); transition:grid-template-columns .2s ease; }
.desktop-shell.sidebar-collapsed { grid-template-columns:76px minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:280px; display:flex; flex-direction:column; background:linear-gradient(180deg,#061747 0%,#09276a 72%,#071b55 100%); color:#fff; z-index:20; box-shadow:5px 0 18px #071b5520; transition:width .2s ease,transform .2s ease; }
.sidebar-collapsed .sidebar { width:76px; }
.sidebar-collapsed .brand { justify-content:center; padding:13px 10px; }
.sidebar-collapsed .brand-logo { width:44px; height:44px; }
.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-item span:nth-child(2),.sidebar-collapsed .nav-item small,.sidebar-collapsed .nav-section,.sidebar-collapsed .sidebar-footer div { display:none; }
.sidebar-collapsed .collapse-button { position:absolute; right:-13px; top:27px; margin:0; background:#174294; box-shadow:0 2px 7px #071b5550; transform:rotate(180deg); }
.sidebar-collapsed .nav-list { padding:8px 10px; }
.sidebar-collapsed .nav-item { justify-content:center; padding:8px; }
.sidebar-collapsed .sidebar-footer { justify-content:center; padding:15px 8px; }
.brand { height:84px; display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid #ffffff18; }
.brand-logo { width:50px; height:50px; background:white; border-radius:12px; padding:7px; overflow:hidden; flex:none; }
.brand-logo img { width:100%; height:100%; object-fit:cover; object-position:left; }
.brand-copy { display:flex; flex-direction:column; min-width:0; }
.brand-copy strong { font:700 22px Manrope,sans-serif; letter-spacing:1.5px; }
.brand-copy span { color:#aebfe9; font-size:10px; text-transform:uppercase; letter-spacing:.9px; white-space:nowrap; }
.collapse-button { margin-left:auto; width:26px; height:30px; border:0; background:#ffffff12; color:#cbd7f3; border-radius:6px; cursor:pointer; font-size:25px; }
.nav-search { margin:15px 14px 8px; height:39px; display:flex; align-items:center; gap:9px; border:1px solid #ffffff1f; background:#ffffff0d; border-radius:8px; padding:0 11px; }
.nav-search input { width:100%; border:0; outline:0; background:transparent; color:white; font-size:12px; }
.nav-search input::placeholder { color:#91a4d3; }
.app-icon { display:inline-flex; width:23px; height:23px; align-items:center; justify-content:center; font-weight:700; flex:none; }
.nav-list { overflow-y:auto; padding:5px 10px 18px; scrollbar-width:thin; scrollbar-color:#ffffff20 transparent; }
.nav-section { padding:14px 10px 8px; font-size:9px; color:#8096c9; letter-spacing:1.3px; font-weight:700; }
.nav-item { min-height:41px; padding:8px 10px; display:flex; align-items:center; gap:10px; border-radius:7px; margin:2px 0; color:#cbd7ef; font-size:12px; font-weight:500; }
.nav-parent { width:100%; border:0; background:transparent; text-align:left; cursor:pointer; font-family:inherit; }
.nav-item span:nth-child(2) { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nav-item small { font-size:9px; color:#8096c9; }
.nav-item:hover { background:#ffffff10; color:#fff; }
.nav-item.active { background:linear-gradient(90deg,#2556b5,#1d4699); color:#fff; box-shadow:inset 3px 0 var(--amber); }
.nav-item.active small { color:#fff; }
.tree-chevron { color:#7f94c5; font-size:18px; font-weight:400; transition:transform .18s ease; }
.nav-group.expanded>.nav-parent { background:#ffffff0d; color:#fff; }
.nav-group.expanded .tree-chevron { transform:rotate(90deg); color:var(--amber); }
.nav-children { position:relative; padding:3px 0 7px 31px; }
.nav-children::before { content:""; position:absolute; left:20px; top:0; bottom:10px; width:1px; background:#ffffff1d; }
.nav-child-module { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; margin:4px 0 2px; padding:5px 7px 5px 12px; color:#fff; background:#ffffff0b; border-radius:5px; }
.nav-child-module span { font-size:11px; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.nav-child-module small { color:#f8b432; font-size:9px; flex:none; }
.nav-child-module:hover { background:#ffffff15; }
.nav-child { position:relative; min-height:36px; padding:7px 8px 7px 12px; display:flex; flex-direction:column; justify-content:center; border-radius:6px; color:#aebde0; }
.nav-child i { position:absolute; left:-13px; top:17px; width:8px; height:1px; background:#ffffff2a; }
.nav-child span { font-size:10px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nav-child small { margin-top:2px; color:#6f86bb; font-size:8px; }
.nav-child:hover { color:#fff; background:#ffffff0d; }
.nav-child.active { color:#fff; background:#1b4598; }
.nav-child.active small { color:#f8b432; }
.nav-loading { color:#8ea2d2; padding:15px; font-size:12px; }
.sidebar-footer { margin-top:auto; display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid #ffffff16; background:#04143d55; }
.sidebar-footer div { display:flex; flex-direction:column; gap:2px; }
.sidebar-footer strong { font-size:10px; font-weight:600; }.sidebar-footer small { color:#8fa1cc; font-size:9px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#2dcc83; box-shadow:0 0 0 4px #2dcc8320; }
.workspace { grid-column:2; min-width:0; }
.topbar { position:sticky; top:0; height:72px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 30px; z-index:15; }
.topbar-left { display:flex; align-items:center; gap:14px; }.topbar-left>div { display:flex; flex-direction:column; gap:4px; }
.eyebrow { color:#8a95a9; font-size:8px; letter-spacing:1.1px; }.topbar-left strong { font-size:14px; }
.mobile-menu { display:none; border:0; background:transparent; font-size:22px; }
.topbar-actions { display:flex; align-items:center; gap:12px; }
.icon-button { position:relative; width:38px; height:38px; border:1px solid var(--line); background:#fff; border-radius:9px; cursor:pointer; }
.bell-symbol { font-size:23px; color:#526177; }.notification-badge { position:absolute; top:-5px; right:-4px; min-width:17px; height:17px; border-radius:9px; background:var(--red); color:#fff; font-size:9px; display:grid; place-items:center; border:2px solid #fff; }
.account-button { display:flex; align-items:center; gap:9px; border:0; background:#fff; cursor:pointer; padding:3px 0 3px 4px; text-align:left; }
.avatar { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(145deg,var(--blue),var(--navy)); color:#fff; font-size:11px; font-weight:700; }
.account-copy { display:flex; flex-direction:column; gap:2px; min-width:145px; }.account-copy strong { font-size:11px; }.account-copy small { font-size:9px; color:#8993a6; }.chevron { color:#8490a4; }
.popup { position:absolute; right:28px; top:64px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px #1b2b4d2b; z-index:40; overflow:hidden; }
.notification-popup { width:385px; }.popup-head { display:flex; align-items:center; justify-content:space-between; padding:17px 18px; border-bottom:1px solid var(--line); }.popup-head strong { font-size:14px; }.popup-head button { border:0; background:transparent; color:var(--royal); font-size:10px; cursor:pointer; }
.notification-row { display:flex; gap:11px; padding:12px 17px; border-bottom:1px solid #edf0f5; }.notification-row.unread { background:#f6f9ff; }.notice-icon { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex:none; }.notice-icon.warning{background:#fff3dc;color:#d9840c}.notice-icon.blue{background:#eaf1ff;color:#285bb7}.notice-icon.green{background:#e9f8f1;color:#16915f}.notice-icon.red{background:#ffeded;color:#d9474b}
.notification-row div { min-width:0; }.notification-row strong { display:block; font-size:10px; }.notification-row p { margin:3px 0; font-size:9px; color:#68758a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.notification-row small { font-size:8px; color:#9aa3b2; }.popup-footer { display:block; text-align:center; padding:12px; color:var(--royal); font-size:10px; font-weight:600; }
.account-popup { width:285px; padding-bottom:8px; }.profile-card { display:flex; gap:10px; padding:18px; background:#f5f8ff; }.avatar.large { width:44px; height:44px; border-radius:11px; }.profile-card div { display:flex; flex-direction:column; gap:4px; justify-content:center; }.profile-card strong { font-size:12px; }.profile-card span { color:#738096; font-size:9px; }
.profile-meta { display:grid; grid-template-columns:80px 1fr; gap:8px; padding:14px 18px; border-bottom:1px solid var(--line); font-size:9px; }.profile-meta span{color:#8b95a6}.profile-meta strong{font-weight:600}.account-popup>button { display:block; width:100%; border:0; background:#fff; text-align:left; padding:10px 18px; font-size:10px; cursor:pointer; }.account-popup>button:hover{background:#f7f9fc}.account-popup .signout{color:var(--red);border-top:1px solid var(--line)}
.content { padding:24px 28px 40px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:19px; }.breadcrumb { color:#8d98ab; font-size:9px; }.page-heading h1 { margin:6px 0 4px; font:700 23px Manrope,sans-serif; }.page-heading p { margin:0; color:#758197; font-size:11px; }.heading-actions { display:flex; gap:9px; }
.btn { height:36px; border-radius:7px; padding:0 14px; border:1px solid var(--line); font-size:10px; font-weight:600; cursor:pointer; }.btn.primary { color:#fff; background:var(--blue); border-color:var(--blue); box-shadow:0 3px 9px #17429428; }.btn.secondary{background:#fff;color:#40506a}
.context-bar { min-height:54px; padding:8px 15px; border:1px solid var(--line); background:#fff; border-radius:9px; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; box-shadow:0 2px 6px #20304a08; }.context-bar div{display:flex;flex-direction:column;gap:4px}.context-bar span{font-size:8px;color:#8a95a7}.context-bar strong{font-size:10px}.context-bar button{background:#f7f8fb;border:1px solid var(--line);border-radius:6px;padding:7px 10px;font-size:9px;color:#526075}
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }.kpi-card { position:relative; min-height:112px; padding:17px 18px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 3px 10px #23314a08; }.kpi-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:currentColor}.kpi-card>div{display:flex;flex-direction:column;gap:5px}.kpi-card span{font-size:8px;color:#7f8a9d;font-weight:600;letter-spacing:.4px}.kpi-card strong{font:700 25px Manrope,sans-serif;color:#18233a}.kpi-card small{font-size:8px;color:#8993a3}.kpi-card small b{color:var(--green)}.kpi-card small em{font-style:normal;color:var(--red);font-weight:700}.kpi-icon{position:absolute;right:17px;top:18px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center!important;font-size:16px!important}.kpi-card.blue{color:var(--royal)}.kpi-card.green{color:var(--green)}.kpi-card.orange{color:var(--orange)}.kpi-card.red{color:var(--red)}.kpi-card.blue .kpi-icon{background:#eaf1ff;color:var(--royal)}.kpi-card.green .kpi-icon{background:#e8f8f1;color:var(--green)}.kpi-card.orange .kpi-icon{background:#fff3df;color:var(--orange)}.kpi-card.red .kpi-icon{background:#ffeded;color:var(--red)}
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }.dashboard-grid.lower{grid-template-columns:1.35fr .65fr}.panel { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 3px 10px #23314a08; overflow:hidden; }.panel-head { min-height:59px; padding:14px 17px; border-bottom:1px solid #edf0f5; display:flex; align-items:center; justify-content:space-between; gap:12px; }.panel-head h2 { margin:0 0 4px; font-size:12px; }.panel-head p { margin:0;color:#8a95a8;font-size:8px}.panel-head button,.panel-head select{border:0;background:#fff;color:#788398;font-size:10px}.panel-head a{color:var(--royal);font-size:9px;font-weight:600}
.health-content { display:grid;grid-template-columns:43% 57%;align-items:center;min-height:217px;padding:13px 20px}.donut{width:145px;height:145px;margin:auto;border-radius:50%;background:conic-gradient(var(--green) 0 87.5%,var(--orange) 87.5% 89.8%,var(--royal) 89.8% 95.5%,#bdc6d4 95.5%);display:grid;place-items:center}.donut::before{content:"";position:absolute;width:92px;height:92px;border-radius:50%;background:#fff}.donut>div{position:relative;display:flex;flex-direction:column;align-items:center}.donut strong{font:700 17px Manrope}.donut span{font-size:8px;color:#8490a3}.legend>div{display:grid;grid-template-columns:10px 1fr auto 36px;align-items:center;gap:7px;padding:8px 0;border-bottom:1px solid #f0f2f6;font-size:8px}.legend i{width:7px;height:7px;border-radius:50%}.legend i.green{background:var(--green)}.legend i.orange{background:var(--orange)}.legend i.blue{background:var(--royal)}.legend i.gray{background:#bdc6d4}.legend strong{font-size:9px}.legend small{color:#8c96a7;text-align:right}
.bar-chart { height:184px; display:flex; align-items:flex-end; justify-content:space-around; padding:23px 22px 8px; background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf0f4 40px); }.bar-group{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}.bars{display:flex;align-items:flex-end;gap:4px;height:150px}.bars i{display:block;width:14px;border-radius:3px 3px 0 0;background:var(--royal)}.bars i+ i{background:var(--amber)}.bar-group span{font-size:8px;color:#8791a3}.chart-legend{display:flex;justify-content:center;gap:20px;padding:8px;font-size:8px;color:#758196}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:8px;height:8px;border-radius:2px}.chart-legend .done{background:var(--royal)}.chart-legend .late{background:var(--amber)}
.task-row{min-height:51px;display:grid;grid-template-columns:4px 1fr 70px 40px;gap:11px;align-items:center;padding:7px 17px;border-bottom:1px solid #edf0f5}.priority{height:27px;border-radius:4px}.priority.orange{background:var(--orange)}.priority.red{background:var(--red)}.priority.blue{background:var(--royal)}.priority.green{background:var(--green)}.task-row>div{display:flex;flex-direction:column;gap:4px}.task-row strong{font-size:9px}.task-row small{color:#8b95a6;font-size:8px}.task-status{justify-self:start;padding:4px 7px;border-radius:10px;font-size:7px;font-weight:600}.task-status.orange{background:#fff3df;color:#c77c14}.task-status.red{background:#ffeded;color:#d84246}.task-status.blue{background:#eaf1ff;color:#2256b4}.task-status.green{background:#e9f8f1;color:#13865a}.task-time{font-size:8px;color:#7c8799}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:13px;gap:8px}.quick-grid a{min-height:73px;border:1px solid #e7eaf0;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:8px;text-align:center;padding:5px}.quick-grid a:hover{border-color:#b7c8ee;background:#f6f9ff;color:var(--blue)}.quick-grid .app-icon{font-size:17px;color:var(--royal)}
.module-heading{align-items:flex-end}.module-summary{display:grid;grid-template-columns:65px repeat(4,1fr);align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:16px;padding:13px 16px;box-shadow:0 3px 10px #23314a08}.module-mark{width:42px;height:42px;border-radius:10px;background:#eaf1ff;color:var(--royal);display:grid;place-items:center;font-size:19px}.module-summary>div:not(.module-mark){display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--line);padding-left:18px}.module-summary span{font-size:7px;color:#8b96a8;letter-spacing:.5px}.module-summary strong{font-size:10px}.active-text{color:var(--green)}
.function-panel .panel-head{min-height:69px}.table-tools{display:flex;gap:7px}.table-tools label{height:32px;width:220px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;padding:0 8px}.table-tools input{border:0;outline:0;width:100%;font-size:9px}.table-tools button{height:32px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:4px}.data-table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:920px}.data-table th{height:38px;text-align:left;background:#f7f8fb;color:#788499;font-size:7px;letter-spacing:.4px;text-transform:uppercase;padding:0 12px;border-bottom:1px solid var(--line)}.data-table td{padding:11px 12px;border-bottom:1px solid #edf0f5;font-size:8px;vertical-align:middle}.data-table tr:hover td{background:#fafcff}.data-table td:nth-child(1){width:110px}.data-table td:nth-child(2){width:230px}.data-table td:nth-child(3){max-width:390px}.data-table strong{font-size:9px}.description{color:#6f7b8f;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.code-pill{display:inline-block;background:#edf3ff;color:#2455ad;border-radius:5px;padding:5px 7px;font-weight:700}.channel{color:#647187}.status-pill{color:var(--green);white-space:nowrap}.row-action{border:1px solid var(--line);background:#fff;width:26px;height:26px;border-radius:6px;color:var(--royal);font-size:18px;cursor:pointer}.loading-card{padding:30px;background:#fff;border:1px solid var(--line);border-radius:10px;color:#768197}
.drawer-backdrop{position:fixed;inset:0;background:#101a2c55;z-index:50}.detail-drawer{position:fixed;right:0;top:0;bottom:0;width:460px;background:#fff;z-index:55;box-shadow:-12px 0 45px #16233f2c;display:flex;flex-direction:column}.drawer-head{padding:22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}.drawer-head span,.drawer-section>span{color:var(--royal);font-size:8px;font-weight:700;letter-spacing:.5px}.drawer-head h2{margin:7px 0 0;font-size:16px;line-height:1.4}.drawer-head button{border:0;background:#f3f5f8;width:30px;height:30px;border-radius:7px;font-size:18px}.drawer-section{padding:20px 22px;border-bottom:1px solid var(--line)}.drawer-section p{font-size:10px;line-height:1.7;color:#5f6c81}.workflow-box{margin-top:10px;background:#f5f8ff;border-left:3px solid var(--royal);padding:13px;font-size:9px;line-height:1.7;color:#4f5e75}.drawer-footer{margin-top:auto;padding:16px 22px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line)}
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff4d7;color:#7b5313;padding:10px 20px;z-index:100}.dismiss{float:right;cursor:pointer}

/* Readability pass: slightly larger typography across the desktop application. */
.brand-copy span { font-size:12px; }
.nav-section { font-size:11px; }
.nav-item { font-size:14px; }
.nav-item small { font-size:11px; }
.nav-child span { font-size:12px; }
.nav-child small { font-size:10px; }
.sidebar-footer strong { font-size:12px; }
.sidebar-footer small { font-size:11px; }
.eyebrow { font-size:10px; }
.topbar-left strong { font-size:16px; }
.account-copy strong { font-size:13px; }
.account-copy small { font-size:11px; }
.breadcrumb { font-size:11px; }
.page-heading h1 { font-size:27px; }
.page-heading p { font-size:13px; }
.btn { font-size:12px; }
.context-bar span,.module-summary span { font-size:10px; }
.context-bar strong,.module-summary strong { font-size:12px; }
.context-bar button { font-size:11px; }
.kpi-card span { font-size:10px; }
.kpi-card strong { font-size:29px; }
.kpi-card small { font-size:10px; }
.panel-head h2 { font-size:15px; }
.panel-head p,.panel-head a { font-size:10px; }
.legend>div,.chart-legend,.bar-group span { font-size:10px; }
.legend strong { font-size:11px; }
.task-row strong { font-size:11px; }
.task-row small,.task-time,.quick-grid a { font-size:10px; }
.task-status { font-size:9px; }
.table-tools input,.table-tools button { font-size:11px; }
.data-table th { font-size:9px; }
.data-table td { font-size:10px; }
.data-table strong { font-size:11px; }
.notification-row strong { font-size:12px; }
.notification-row p,.popup-head button,.popup-footer { font-size:11px; }
.notification-row small { font-size:10px; }
.profile-card strong { font-size:14px; }
.profile-card span,.profile-meta,.account-popup>button { font-size:11px; }
.drawer-head h2 { font-size:20px; }
.drawer-head span,.drawer-section>span { font-size:10px; }
.drawer-section p { font-size:12px; }
.workflow-box { font-size:11px; }

/* Web App VSIAM mockup-aligned shell and dashboard */
.desktop-shell { grid-template-columns:240px minmax(0,1fr); }
.sidebar { width:240px; background:linear-gradient(180deg,#041b3d 0%,#063261 55%,#042448 100%); }
.brand { height:78px; }
.brand-logo { width:46px; height:46px; }
.brand-copy strong { font-size:21px; }
.nav-list { padding-left:8px; padding-right:8px; }
.nav-item { min-height:39px; }
.topbar { height:68px; padding:0 22px 0 18px; gap:24px; }
.topbar-left { min-width:180px; }
.topbar-left strong { font-size:18px; }
.topbar-menu { width:30px; height:34px; border:0; background:transparent; color:#24415f; font-size:21px; cursor:pointer; }
.global-search { width:min(440px,40vw); height:40px; margin-left:auto; display:flex; align-items:center; gap:8px; border:1px solid #d8e0e9; border-radius:7px; padding:0 12px; background:#fff; color:#66809b; }
.global-search input { flex:1; border:0; outline:0; color:#23364e; font-size:12px; }
.global-search input::placeholder { color:#94a3b5; }
.global-search>span { font-size:19px; }
.help-button { width:38px; height:38px; border:0; background:transparent; color:#23415f; font-size:20px; font-weight:600; cursor:pointer; }
.content { padding:22px 30px 34px; background:#f5f8fb; min-height:calc(100vh - 68px); }
.mock-dashboard { max-width:1500px; margin:auto; }
.dashboard-welcome { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dashboard-welcome h1 { margin:0 0 5px; font:700 23px Manrope,sans-serif; color:#10213b; }
.dashboard-welcome p { margin:0; color:#52627a; font-size:12px; }
.date-button { height:40px; padding:0 14px; border:1px solid #d7e0e8; border-radius:7px; background:#fff; color:#253a53; font-size:11px; font-weight:600; }
.export-button { height:40px; background:#0786a3; color:white; border:0; font-size:12px; }
.mock-kpi-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-bottom:18px; }
.mock-kpi { min-height:118px; background:#fff; border:1px solid #dfe6ed; border-radius:7px; display:flex; align-items:center; gap:16px; padding:18px; box-shadow:0 2px 7px #27415d0b; }
.round-icon { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:22px; flex:none; }
.mock-kpi.teal .round-icon{background:#0bb398}.mock-kpi.blue .round-icon{background:#2785ea}.mock-kpi.orange .round-icon{background:#fb7e0a}.mock-kpi.purple .round-icon{background:#7f3bd1}.mock-kpi.cyan .round-icon{background:#0797ae}
.mock-kpi div { display:flex; flex-direction:column; min-width:0; }
.mock-kpi small { color:#2f3d53; font-size:12px; white-space:nowrap; }
.mock-kpi strong { margin:3px 0 6px; color:#10213b; font:700 23px Manrope,sans-serif; white-space:nowrap; }
.mock-kpi p { margin:0; font-size:10px; font-weight:600; white-space:nowrap; }.mock-kpi p span{color:#738096;font-weight:400}.mock-kpi .up{color:#09a77c}.mock-kpi .down{color:#ea3d4a}
.mock-main-grid { display:grid; grid-template-columns:36% 64%; gap:16px; margin-bottom:16px; }
.mock-bottom-grid { display:grid; grid-template-columns:1.08fr 1fr 1.08fr; gap:16px; }
.mock-panel { position:relative; background:#fff; border:1px solid #dfe6ed; border-radius:7px; box-shadow:0 2px 7px #27415d0b; overflow:hidden; }
.mock-panel>h2 { margin:0; padding:18px 18px 10px; color:#152640; font-size:15px; }
.mock-health-body { height:260px; display:grid; grid-template-columns:55% 45%; align-items:center; padding:6px 17px 20px; }
.mock-donut { width:190px; height:190px; border-radius:50%; margin:auto; background:conic-gradient(#0bb398 0 52%,#2785ea 52% 77%,#ffad24 77% 91%,#df2537 91%); display:grid; place-items:center; }
.mock-donut::before { content:""; position:absolute; width:118px; height:118px; border-radius:50%; background:#fff; }
.mock-donut>div { position:relative; display:flex; flex-direction:column; text-align:center; }.mock-donut strong{font:700 20px Manrope}.mock-donut span{font-size:10px;color:#6d7c91;margin-top:4px}
.mock-legend { display:flex; flex-direction:column; gap:17px; }
.mock-legend>div { display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; font-size:10px; }
.mock-legend i { width:8px; height:8px; border-radius:50%; }.mock-legend .healthy{background:#0bb398}.mock-legend .good{background:#2785ea}.mock-legend .fair{background:#ffad24}.mock-legend .poor{background:#df2537}
.mock-legend strong { font-size:10px; }
.panel-link { display:block; color:#0776d2; font-size:10px; font-weight:600; text-align:right; padding:10px 18px 14px; }
.work-order-stats { display:grid; grid-template-columns:repeat(4,1fr); margin:3px 18px 8px; border-bottom:1px solid #e1e7ed; padding-bottom:11px; }
.work-order-stats>div { display:flex; flex-direction:column; align-items:center; border-right:1px solid #e1e7ed; }.work-order-stats>div:last-child{border:0}
.work-order-stats strong { font-size:18px; }.work-order-stats span{font-size:10px;color:#6d798d;margin-top:2px}.teal-text{color:#06a78f}.blue-text{color:#147edb}.orange-text{color:#f17b13}
.work-order-row { min-height:54px; display:grid; grid-template-columns:36px 1.6fr 1.1fr .9fr .85fr 18px; gap:10px; align-items:center; margin:0 18px; border-bottom:1px solid #e6ebf0; font-size:10px; }
.wo-icon { width:30px; height:30px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; }.wo-icon.red{color:#ea3c4b;background:#fff0f1}.wo-icon.orange{color:#f18b1e;background:#fff6e9}.wo-icon.blue{color:#3388e5;background:#eef6ff}.wo-icon.teal{color:#0ba88f;background:#eafaf7}
.work-order-row>div { display:flex; flex-direction:column; gap:3px; min-width:0; }.work-order-row strong{font-size:10px}.work-order-row small{color:#68778b;font-size:9px}.work-order-row em{font-style:normal;font-size:8px;padding:3px 6px;border-radius:8px;margin-left:6px}.red-tag{background:#ffeaed;color:#dc3545}.orange-tag{background:#fff1dd;color:#df7a14}.green-tag{background:#e7f8f2;color:#0b9c78}.overdue{color:#dc3445}.assignee{font-size:9px}.work-order-row button{border:0;background:transparent;font-size:16px}
.criticality-chart { padding:4px 23px 5px; }
.criticality-chart>div { display:grid; grid-template-columns:84px 1fr 48px; align-items:center; gap:9px; margin:13px 0; font-size:10px; }.criticality-chart>div>span{text-align:right;color:#5d6c80}.criticality-chart i{height:15px;background:#f0f3f6;display:block}.criticality-chart b{display:block;height:100%}.bar-red{background:#df2438}.bar-orange{background:#f58a14}.bar-green{background:#31ac57}.bar-gray{background:#aeb9c5}
.mini-row { min-height:54px; display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; margin:0 17px; border-bottom:1px solid #e6ebf0; }.mini-row>div{display:flex;flex-direction:column;gap:3px}.mini-row strong{font-size:10px}.mini-row small{font-size:9px;color:#68778b}.mini-row>div:last-child{text-align:right}.calendar-icon{color:#147edb;font-size:19px}.alert-symbol{font-size:22px}.alert-symbol.red{color:#df2537}.alert-symbol.orange{color:#f17b13}.alert-symbol.yellow{color:#f4ae18}.alert-row{grid-template-columns:30px 1fr auto}.alert-row time{font-size:9px;color:#6d798c}

/* Authentication */
.login-layout { min-height:100vh; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(520px,1.08fr) minmax(480px,.92fr); background:#fff; }
.login-visual { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:34px 48px; color:#fff; background:linear-gradient(145deg,#03143d 0%,#082b70 58%,#064d75 100%); }
.login-visual::before { content:""; position:absolute; width:520px; height:520px; border:1px solid #ffffff12; border-radius:50%; right:-180px; top:-170px; box-shadow:0 0 0 80px #ffffff06,0 0 0 160px #ffffff04; }
.login-visual::after { content:""; position:absolute; width:360px; height:360px; right:10%; bottom:-220px; background:radial-gradient(circle,#f8ad252d,transparent 67%); }
.login-brand { position:relative; z-index:1; display:flex; align-items:center; gap:13px; }
.login-logo { width:56px; height:56px; border-radius:13px; padding:7px; background:#fff; overflow:hidden; }.login-logo img{width:100%;height:100%;object-fit:cover;object-position:left}
.login-brand>div:last-child { display:flex; flex-direction:column; gap:3px; }.login-brand strong{font:700 25px Manrope;letter-spacing:1.5px}.login-brand span{font-size:10px;color:#b7c8e9;text-transform:uppercase;letter-spacing:.5px}
.login-message { position:relative; z-index:1; margin:auto 0; max-width:650px; }
.login-kicker { display:inline-block; color:#f9bb45; font-size:11px; font-weight:700; letter-spacing:1.8px; margin-bottom:17px; }
.login-message h1 { margin:0 0 20px; font:700 clamp(34px,3vw,51px)/1.18 Manrope,sans-serif; letter-spacing:-1px; }
.login-message>p { max-width:590px; margin:0; color:#bfd0ed; font-size:15px; line-height:1.75; }
.login-features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.login-features>div { display:flex; align-items:center; gap:11px; padding:14px; border:1px solid #ffffff18; border-radius:10px; background:#ffffff09; backdrop-filter:blur(4px); }
.login-features i { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; font-style:normal; color:#f8b432; background:#ffffff10; }
.login-features span { display:flex; flex-direction:column; gap:4px; color:#aebfdd; font-size:9px; }.login-features strong{color:#fff;font-size:15px}
.login-visual-footer { position:relative; z-index:1; color:#8299c3; font-size:10px; }
.login-form-side { display:grid; place-items:center; padding:45px; background:#f8fafc; }
.login-card { width:min(440px,100%); padding:38px 40px; background:#fff; border:1px solid #e1e7ef; border-radius:16px; box-shadow:0 22px 55px #0a204516; }
.login-card-head>span { color:#1e58ad; font-size:10px; font-weight:700; letter-spacing:1.3px; }.login-card-head h2{margin:10px 0 7px;font:700 29px Manrope}.login-card-head p{margin:0 0 28px;color:#748197;font-size:12px}
.login-field { display:block; margin-bottom:18px; }.login-field>span{display:block;margin-bottom:8px;color:#344258;font-size:11px;font-weight:600}
.login-field>div { height:46px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid #d9e0e9; border-radius:8px; background:#fff; transition:border .15s,box-shadow .15s; }.login-field>div:focus-within{border-color:#2458b8;box-shadow:0 0 0 3px #2458b813}
.login-field b{color:#8290a3;font-size:15px}.login-field input{flex:1;border:0;outline:0;font-size:12px;color:#1c2a40;min-width:0}.login-field button{border:0;background:transparent;color:#8190a4;font-size:16px;cursor:pointer}
.login-options { display:flex; align-items:center; justify-content:space-between; margin:-2px 0 20px; font-size:10px; }.login-options label{display:flex;align-items:center;gap:6px;color:#5f6d82}.login-options input{accent-color:#174294}.login-options a,.login-support a{color:#1e58ad;font-weight:600}
.login-error { margin:-5px 0 14px; padding:10px 12px; color:#c5373d; background:#fff0f1; border:1px solid #ffd8db; border-radius:7px; font-size:10px; }
.login-submit { width:100%; height:47px; border:0; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; background:linear-gradient(90deg,#123d91,#1762b4); font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 7px 16px #17429425; }.login-submit:hover{filter:brightness(1.06)}.login-submit:disabled{opacity:.65;cursor:wait}.login-submit span{font-size:18px}
.demo-account { margin-top:23px; padding:13px 14px; border:1px dashed #cbd6e4; border-radius:8px; background:#f6f9fd; }.demo-account>span{display:block;margin-bottom:9px;color:#748298;font-size:8px;font-weight:700;letter-spacing:.8px}.demo-account>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-account p{margin:0;display:flex;flex-direction:column;gap:3px}.demo-account small{color:#8490a3;font-size:8px}.demo-account strong{color:#24344c;font-size:10px}
.login-support { margin:21px 0 0; text-align:center; color:#8792a4; font-size:9px; }
.auth-loading { min-height:100vh;display:grid;place-content:center;justify-items:center;gap:10px;background:#f5f7fb;color:#66748a;font-size:12px}.auth-loading span{width:32px;height:32px;border:3px solid #dce4ef;border-top-color:#174294;border-radius:50%;animation:auth-spin .7s linear infinite}.auth-loading p{margin:0}@keyframes auth-spin{to{transform:rotate(360deg)}}

@media(max-width:1300px){.mock-kpi-grid{grid-template-columns:repeat(3,1fr)}.mock-main-grid{grid-template-columns:1fr}.mock-bottom-grid{grid-template-columns:1fr 1fr}.global-search{width:340px}}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.dashboard-grid.lower{grid-template-columns:1fr}.account-copy{display:none}.module-summary{grid-template-columns:55px repeat(2,1fr);gap:13px}.module-summary>div:nth-child(4),.module-summary>div:nth-child(5){grid-column:auto}}
@media(max-width:920px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-form-side{min-height:100vh;padding:25px}.login-card{padding:30px 27px}}
@media (max-width:760px){.desktop-shell,.desktop-shell.sidebar-collapsed{display:block}.sidebar,.sidebar-collapsed .sidebar{width:280px;transform:translateX(-100%)}.sidebar-collapsed .sidebar{transform:translateX(0)}.sidebar-collapsed .brand{justify-content:flex-start;padding:13px 18px}.sidebar-collapsed .brand-logo{width:50px;height:50px}.sidebar-collapsed .brand-copy,.sidebar-collapsed .nav-item span:nth-child(2),.sidebar-collapsed .nav-item small,.sidebar-collapsed .nav-section,.sidebar-collapsed .sidebar-footer div{display:flex}.sidebar-collapsed .collapse-button{position:static;margin-left:auto;transform:none;background:#ffffff12}.sidebar-collapsed .nav-list{padding:5px 10px 18px}.sidebar-collapsed .nav-item{justify-content:flex-start;padding:8px 10px}.sidebar-collapsed .sidebar-footer{justify-content:flex-start;padding:14px 20px}.workspace{width:100%}.topbar{height:62px;padding:0 14px}.global-search,.help-button{display:none}.topbar-left{min-width:0}.content{padding:18px 14px}.dashboard-welcome{align-items:flex-start;flex-direction:column;gap:14px}.mock-kpi-grid,.mock-bottom-grid{grid-template-columns:1fr}.mock-health-body{grid-template-columns:1fr;height:auto;gap:20px}.mock-main-grid{grid-template-columns:1fr}.work-order-row{grid-template-columns:34px 1fr auto}.work-order-row>div:nth-child(3),.work-order-row>div:nth-child(4),.assignee{display:none}.page-heading{align-items:flex-start;flex-direction:column}.kpi-grid{grid-template-columns:1fr}.health-content{grid-template-columns:1fr}.module-summary{grid-template-columns:50px 1fr}.module-summary>div:not(.module-mark){border-left:0;padding-left:0}.table-tools label{width:150px}.notification-popup{right:10px;width:calc(100vw - 20px)}.account-popup{right:10px}.detail-drawer{width:min(100%,460px)}}