/* MJMA04.01 premium (50 reference screens) — visual implementation, not a screenshot substitute. */
:root{--navy:#071f48;--navy2:#0b2c5d;--primary:#0962ef;--text:#081f55;--muted:#6982a8;--line:#d7e5fb;--paper:#f2f6fe;--green:#079764;--shadow:0 9px 22px rgba(15,59,131,.075);--gold:#e8bd5d}
html{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#0b235a}body.app-body{background:var(--paper);font-size:13px}.app-shell{min-height:100vh}
.sidebar{width:218px;flex:0 0 218px;background:linear-gradient(155deg,#061a3a 0%,#062754 53%,#061a3a 100%);color:#ecf4ff;border:0;box-shadow:inset -1px 0 rgba(255,255,255,.12)}
.brand{padding:10px 17px;height:76px;border-bottom:0;gap:10px}.brand-icon{width:37px;height:37px;flex-basis:37px;background:#fff;border:1px solid rgba(241,187,96,.8);border-radius:8px;box-shadow:0 0 0 2px rgba(244,201,116,.13)}.brand-caption strong{font-size:19px;color:#fff;letter-spacing:.02em;line-height:1.05}.brand-caption small{color:#becce2;letter-spacing:.05em;font-size:10px}
.company-motto{border-bottom:1px solid rgba(255,255,255,.1);padding:3px 20px 16px;color:#f0f5ff;line-height:1.35;font-size:13px}
.side-scroll{padding:8px 7px 18px}.nav-top{color:#e8f3ff;min-height:44px;display:flex;align-items:center;gap:13px;font-size:13px;font-weight:600;border-radius:8px;padding:10px 15px;cursor:pointer;list-style:none;border:1px solid transparent}.nav-top::-webkit-details-marker{display:none}.nav-top:hover{background:rgba(45,101,185,.33)}.nav-top.active,.nav-group:has(.nav-item.active)>summary{background:linear-gradient(90deg,#006fff,#133b84);border-color:rgba(255,205,108,.8);color:#fff;box-shadow:0 6px 18px rgba(0,80,211,.34)}.nav-top-icon{font-size:20px;width:24px;display:inline-flex;justify-content:center;color:#e9f2ff}.nav-group{margin:1px 0;border-radius:8px}.nav-group>summary{padding:10px 15px;min-height:44px;color:#e8f3ff;letter-spacing:0;font-size:13px;font-weight:600}.nav-group>summary:hover{background:rgba(45,101,185,.33);color:#fff}.chevron{margin-left:auto;color:#d4e5ff;font-size:14px}.nav-group[open] .chevron{transform:rotate(180deg)}.nav-items{margin:0 0 7px 35px;padding:2px 0 2px 8px;border-left:1px solid rgba(124,173,238,.42)}.nav-item{min-height:32px;color:#ccdaf0;border-radius:4px;font-size:12px;padding:8px 10px}.nav-item:hover{background:rgba(19,86,173,.3);color:#fff}.nav-item.active{background:linear-gradient(90deg,#006df9,#0b3474);color:#fff;border-left:2px solid #e7b454;box-shadow:0 0 12px rgba(29,115,244,.55);font-weight:750}.sidebar-quote{margin:13px 16px 8px;border:1px solid #ad8b42;background:rgba(4,24,52,.48);border-radius:12px;min-height:116px;padding:13px 15px;color:#fff;font-family:Georgia,serif;line-height:1.5;font-size:14px}.sidebar-quote span{display:block;width:32px;height:2px;background:#e4aa35;margin-top:12px}.sidebar-bottom{display:block;border:0;padding:5px 21px 17px}.sidebar-bottom strong{color:#96b1d7;font-size:10px}.sidebar-bottom small{line-height:1.4;color:#95b0d3;font-size:9px}
.main-area{background:linear-gradient(#eff5fe,#f7faff)}.topbar{height:56px;flex:0 0 56px;padding:0 27px;background:linear-gradient(90deg,#f5f9ff,#d5e7ff);border-bottom:1px solid #bfd6f7;box-shadow:0 1px 7px rgba(14,63,133,.05)}.sidebar-toggle{display:inline-grid;place-items:center;background:none;border:0;color:#0059b4;font-size:21px;padding:7px}.topbar-left{gap:18px;flex:1}.top-search{height:39px;max-width:505px;width:min(100%,505px);border-radius:10px;border:1px solid #c6daf8;background:rgba(255,255,255,.77);display:flex;align-items:center;gap:10px;padding:0 12px;color:#295a9c}.top-search span{font-size:21px}.top-search input{border:0;background:transparent;min-width:0;width:100%;outline:none;font-size:12px;color:#103772}.top-search input::placeholder{color:#718bad}.top-search kbd{font-family:inherit;background:#e7f1ff;border:1px solid #c7dcfa;padding:3px 7px;border-radius:6px;font-size:10px;white-space:nowrap}.top-actions{gap:13px;font-size:11px}.notice-top{display:grid;place-items:center;font-size:20px;width:35px;height:35px;border-radius:50%;background:rgba(255,255,255,.6);color:#1154b0}.top-sep{background:#8fafde}.avatar{background:linear-gradient(130deg,#c6dffe,#fff);border:2px solid #fff;color:#103e9b;box-shadow:0 0 0 1px #bbd4f6}.account strong{font-size:12px;color:#082057}.account small{font-size:10px;color:#6684ae}.user-dropdown{position:relative}.user-dropdown summary{list-style:none;color:#0d3b8e;cursor:pointer;padding:8px;font-size:18px}.user-dropdown summary::-webkit-details-marker{display:none}.user-menu{position:absolute;right:0;top:32px;min-width:180px;background:white;z-index:90;border:1px solid #d2e2f7;border-radius:9px;padding:8px;box-shadow:0 12px 32px rgba(10,51,110,.18)}.user-menu button{background:#fff;border:0;padding:10px 12px;color:#123b80;text-align:left;width:100%;border-radius:5px;font-size:12px}.user-menu button:hover{background:#eef5ff}
.page-wrap{max-width:none;margin:0;width:100%;padding:0 18px 42px;flex:1;min-height:calc(100vh - 100px)}
.page-header{position:relative;min-height:177px;background:linear-gradient(96deg,#061f49 0%,#092d67 40%,rgba(8,43,95,.72) 63%,rgba(6,30,66,.28) 100%),url('/static/brand/mockup-building.webp') right center/auto 200% no-repeat,linear-gradient(#0a285b,#05193e);margin:0 -18px 16px;padding:24px 34px 26px;align-items:flex-start;color:#fff;overflow:hidden}.page-header:before{content:"";position:absolute;right:31%;height:130%;border-left:1px solid rgba(225,187,94,.2);transform:rotate(43deg);top:-38px}.page-header>div{position:relative;z-index:1}.page-header .eyebrow{font-size:10px;letter-spacing:.23em;color:#edbd60;font-weight:800;margin:0 0 9px}.page-header h1{color:#fff;font-size:36px;font-weight:850;letter-spacing:-.04em;line-height:1.08;margin:0 0 9px}.page-header h1:first-letter{color:#f2c464}.page-header p{font-size:13px;color:#e4edff;max-width:590px;line-height:1.45}.page-header .header-actions{align-self:flex-start;z-index:1}.page-header .button.outline{background:rgba(255,255,255,.9);color:#144a9a;border-color:rgba(255,255,255,.45)}.page-header .subtle-chip{background:rgba(10,67,129,.6);color:#e9f3ff;border-color:rgba(255,255,255,.22)}
.button{border-radius:8px;min-height:36px;font-size:12px;font-weight:750;padding:9px 14px}.button.primary{background:linear-gradient(180deg,#2384ff,#0056e7);box-shadow:0 7px 14px rgba(8,96,221,.18);color:#fff;border-color:#2474ef}.button.primary:hover{background:linear-gradient(180deg,#378eff,#0758d4)}.button.secondary{background:#e8f1ff;color:#0f57b3;border-color:#c7dcfb}.button.outline{background:#fff;border-color:#bfd5f8;color:#0755b2}.button.outline:hover{background:#eef6ff}.text-btn{color:#0b57af}.text-btn:hover{color:#0052d4}
.panel,.metric-card,.quick-grid>a,.form-card,.empty-card{background:#fff;border:1px solid #dbe6f8;box-shadow:0 10px 21px rgba(12,61,135,.075);border-radius:12px}.panel-title h2{color:#0d275f;font-size:15px}.panel-toolbar{border-bottom:0;gap:10px}.filter-row select,.search-wrap input{background:#fff;border:1px solid #c7d9f4;color:#123774;border-radius:8px}.search-wrap input{min-width:260px}.panel table{min-width:640px}th{background:#eaf2ff;color:#0b3879;border-color:#d8e8ff;letter-spacing:0;text-transform:none;font-size:11px;padding:11px 14px}td{color:#173c7f;font-size:11.5px;padding:12px 14px;border-color:#e4edfa}tbody tr:nth-child(2n){background:#f9fbff}tbody tr:hover{background:#edf5ff}td a.table-link{color:#005ade}td:last-child{text-align:right}.status-tag{background:#dff9ee;color:#058254;padding:4px 11px;border-radius:20px;font-weight:750;font-size:10px}.status-tag:before{content:"● ";color:#00a775}.table-footer{color:#4770a9;border-color:#e0eafb;padding:13px 17px}.toolbar-right{display:flex;gap:7px}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin:0 0 15px}.metric-card{padding:13px 15px;min-height:99px;position:relative;overflow:hidden;display:grid;grid-template-columns:49px 1fr;column-gap:12px;row-gap:3px;align-items:center}.metric-card small{font-size:11px;color:#0b327a;grid-column:2;grid-row:1;align-self:end}.metric-card strong{color:#071b64;font-size:28px;grid-column:2;grid-row:2;letter-spacing:-.04em}.metric-card .metric-caption{grid-column:2;grid-row:3;font-size:10px;color:#248960}.metric-icon{grid-column:1;grid-row:1/span 3;width:47px;height:47px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#85c4ff,#0765f0);color:#fff;font-size:24px;box-shadow:0 6px 12px rgba(0,92,235,.17)}.metric-card:nth-child(4n + 2) .metric-icon{background:linear-gradient(135deg,#81e0c4,#00a581)}.metric-card:nth-child(4n + 3) .metric-icon{background:linear-gradient(135deg,#ffc189,#ff591e)}.metric-card:nth-child(4n + 4) .metric-icon{background:linear-gradient(135deg,#d9b3ff,#6928e4)}
.table-panel{margin-top:12px}.nav-tabs{display:flex;gap:7px;margin:0 0 12px;align-items:center;flex-wrap:wrap}.nav-tab{background:#eef5ff;padding:11px 17px;color:#1c51a0;border:1px solid #d5e4fb;border-radius:8px;font-size:12px;font-weight:750}.nav-tab.active{background:#fff;border-color:#c6dcff;border-bottom:2px solid #1164f2;color:#053ea1}.feature-summary{margin:6px 0 16px}.table-link{white-space:nowrap}.table-row-actions{display:flex;gap:5px;justify-content:flex-end}.tiny-action{display:inline-grid;place-items:center;min-width:29px;height:28px;padding:0 7px;border:1px solid #cde0ff;background:#f3f8ff;border-radius:6px;color:#0654c8;font-size:13px}.tiny-action:hover{background:#dcecff}
.form-card{max-width:1000px;padding:23px}.form-step{background:#e5f0ff;color:#0064e5}.form-card-heading h2{color:#0a2865}.form-field>label{font-weight:800;color:#133571}.form-field input,.form-field textarea,.form-field select,.search-select{border-color:#c4d8f9;color:#183c7d;background:#fff}.form-field input:focus,.form-field textarea:focus{outline:2px solid rgba(17,109,244,.14)!important;border-color:#267fff!important}.required{color:#e35052}.form-footer{border-top:1px solid #e2edfa;padding-top:15px}.helper{color:#748cb2;font-size:10px;line-height:1.4}.form-field.wide{grid-column:1/-1}.field-error{color:#d84351}.notice.danger{background:#fff3f5;border:1px solid #ffcdd5;color:#a92c47}.notice.warning{background:#fff8e8;border:1px solid #fae0a1;color:#996b0f}
/* Right-hand create/edit drawer follows screenshots 04–20, 30 and 43. */
.drawer-scrim{position:fixed;inset:56px 0 0;z-index:40;background:rgba(1,24,66,.045)}.form-drawer{position:fixed;z-index:41;top:56px;bottom:0;right:0;width:min(380px,100vw);background:#fff;border-left:1px solid #d2e4fc;box-shadow:-18px 0 44px rgba(0,31,97,.18);display:flex;flex-direction:column}.drawer-head{padding:21px 20px 15px;border-bottom:1px solid #e8f1ff;display:flex;justify-content:space-between;gap:10px}.drawer-head strong{font-size:20px;line-height:1.13;display:block;letter-spacing:-.03em;color:#071e57}.drawer-head p{color:#6c85b1;font-size:11px;margin:5px 0 0}.drawer-close{border:1px solid #d8e6fa;background:#f4f8ff;border-radius:7px;height:31px;width:31px;font-size:18px;color:#1557b0;display:grid;place-items:center}.drawer-body{padding:18px 20px 20px;overflow-y:auto;flex:1}.drawer-body .form-card-heading{margin:0 0 15px}.drawer-body .form-grid{display:flex;flex-direction:column;gap:15px}.drawer-body .form-field{display:flex;flex-direction:column;gap:7px}.drawer-body .form-field.wide{grid-column:auto}.drawer-body .form-field label{font-size:11px;color:#0e2a69}.drawer-body .form-field input,.drawer-body .form-field textarea,.drawer-body .form-field select,.drawer-body .select-search{font-size:12px;width:100%;padding:10px 12px;border-radius:8px;border:1px solid #bfd5f9;min-height:39px;background:#fff}.drawer-body .select-search{padding-right:30px}.drawer-body .helper{font-size:10px}.drawer-body .section-separator{margin-top:10px;padding-top:14px;border-top:1px solid #e8effb}.drawer-intro{background:#eaf3ff;border-left:3px solid #0064ed;padding:11px 12px;font-size:11px;line-height:1.45;color:#2357a2;border-radius:8px;margin:0 0 18px}.drawer-actions{border-top:1px solid #dfeafc;padding:12px 20px 18px;display:flex;align-items:center;gap:9px;background:#fff}.drawer-actions .button{flex:1}.drawer-actions .button.primary{flex:1.3}.drawer-body .search-select{border:0;padding:0;min-height:0}.drawer-body .search-results{z-index:70}
/* Searchable dropdown states 33–37. */
.search-select{position:relative}.select-search{width:100%;padding-right:30px!important}.search-results{background:#fff;border:1px solid #c3d9fc;box-shadow:0 15px 24px rgba(14,53,119,.17);max-height:225px;overflow:auto;z-index:60;border-radius:8px}.search-results button{display:block;width:100%;padding:10px 12px;border:0;background:white;text-align:left;color:#153b7b;font-size:11px}.search-results button:hover,.search-results button:focus{background:#ebf3ff;color:#004fbb}.search-empty{padding:14px;font-size:11px;color:#6483b7}.search-state{padding:12px;font-size:11px;color:#587bad;text-align:center}.search-state.error{color:#c33c4d}.search-state.locked{background:#f4f7ff;color:#859bbd}
/* Readonly, no-data, error, unsaved and dependency states 40–50. */
.empty-card{padding:62px 20px}.empty-icon{background:#ebf3ff;color:#0c66dd}.empty-card h2{color:#09275e}.inline-state.warning{background:#fff9ea;color:#8c6213}.flash-success{margin:12px 0;background:#e1f8ed;border-color:#bcead8;color:#057b50}.readonly-panel{border:1px solid #d3e6ff;border-radius:12px;padding:20px;color:#5a79a9;background:#fff}.state-error{border-color:#ffcdd4!important;background:#fff9fa!important}.state-error h2{color:#b83249!important}.state-filter .empty-icon{background:#e7effe}.notice-warning-bar{color:#925a0f;background:#fff3d6;border:1px solid #e8cc82;padding:10px 13px;border-radius:7px;font-size:11px}.confirm-backdrop{position:fixed;inset:0;z-index:100;background:rgba(7,25,62,.57);display:grid;place-items:center;padding:18px}.confirm-dialog{background:#fff;border-radius:13px;padding:24px;width:min(380px,96vw);text-align:center;box-shadow:0 22px 70px rgba(0,0,0,.27)}.confirm-dialog .confirm-symbol{width:48px;height:48px;border-radius:50%;background:#fff5df;color:#b58522;display:grid;place-items:center;margin:0 auto 12px;font-size:22px}.confirm-dialog h2{font-size:17px;color:#0b2864;margin:6px 0}.confirm-dialog p{font-size:12px;color:#6680a8;line-height:1.6;margin:8px 0 19px}.confirm-dialog .button-group{justify-content:center}
/* Dashboard visual hierarchy; cards never show invented HR values. */
.dashboard-metric-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:-4px 0 12px}.dashboard-metric-grid .metric-card{grid-template-columns:1fr;gap:3px;min-height:112px;padding:13px}.dashboard-metric-grid .metric-icon{width:37px;height:37px;grid-column:1;grid-row:1;font-size:20px}.dashboard-metric-grid .metric-card small{grid-column:1;grid-row:2}.dashboard-metric-grid .metric-card strong{grid-column:1;grid-row:3;font-size:26px}.dashboard-metric-grid .metric-caption{grid-column:1;grid-row:4}.dashboard-row{display:grid;grid-template-columns:1.35fr 1fr .9fr;gap:11px;margin-bottom:11px}.dashboard-bottom{grid-template-columns:1fr 1fr 1fr 1fr}.dashboard-panel{border:1px solid #d8e7fb;border-radius:12px;background:#fff;padding:17px;box-shadow:0 6px 20px rgba(18,63,131,.07);min-width:0;min-height:190px}.dashboard-panel h2{font-size:15px;color:#081f62;margin:0 0 5px}.dashboard-panel p{font-size:11px;color:#6180b4;margin:0 0 14px}.dashboard-panel .dashboard-data-pending{min-height:135px;display:grid;place-items:center;background:repeating-linear-gradient(0deg,#fff 0 34px,#f2f7ff 35px 36px);border:1px solid #edf3fb;border-radius:9px;text-align:center;padding:16px;color:#7590b8;font-size:11px}.dashboard-panel .dashboard-data-pending i{font-size:19px;display:block;color:#5688d6;margin-bottom:5px}.dashboard-panel .dashboard-data-pending::before{content:"";position:absolute}.dashboard-shortcut{display:block;border:1px solid #d5e4f9;border-radius:7px;padding:9px 11px;background:#f8fbff;color:#1a4b9d;font-size:11px;margin:7px 0}.dashboard-shortcut:hover{background:#ecf5ff}
/* Hierarchy compact cards */
.tree-panel{padding:2px 0 24px}.tree-root,.tree-node ul{list-style:none}.tree-node{border-color:#bedaff}.tree-node>span{border-color:#bed6ff;background:#f8fbff;color:#163873}.tree-node>span strong{color:#0759c6}.tree-root>.tree-node>span{background:#08285e;color:#fff}.tree-root>.tree-node>span strong{color:#f4c26a}
.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-panel .panel-title{border-bottom:1px solid #e6f0ff}.detail-grid dt{color:#6984b6;font-size:11px}.detail-grid dd{color:#0a2c67;font-weight:650}.employee-tabs{display:flex;align-items:center;gap:5px;border-bottom:1px solid #dfebfb;overflow-x:auto;margin:0 18px}.employee-tabs a{padding:13px 15px;color:#6b85ad;font-weight:650;font-size:11px;white-space:nowrap}.employee-tabs a.active{border-bottom:2px solid #0563e5;color:#064cae}.detail-panel .panel-title{padding-bottom:12px}
.footer{padding:14px 20px;color:#6480a8;font-size:10px}.login-showcase{background:linear-gradient(110deg,#061e44,#0a3977),url('/static/brand/mockup-building.webp') right center/auto 100% no-repeat}.login-statement h1 em{color:#f1c367}.login-points span{color:#cddfff;border-color:#4c77b8}.login-brand strong span{color:#f1ca70}.login-badge{color:#0d66d7}.login-card h2{color:#0b2b6a}.stack-form .button.primary{justify-content:center}
@media(min-width:1000px){.page-wrap:has(.form-drawer) .page-header{padding-right:400px}.page-wrap:has(.form-drawer)>.panel,.page-wrap:has(.form-drawer)>.metric-grid{margin-right:380px}.page-wrap:has(.form-drawer)>.table-panel{margin-right:380px}}
@media(max-width:1350px){.dashboard-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-row{grid-template-columns:1.2fr 1fr}.dashboard-bottom{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1050px){.sidebar{width:198px;flex-basis:198px}.topbar{padding:0 18px}.page-header h1{font-size:29px}.dashboard-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.sidebar{left:-235px;width:218px}.menu-mobile{display:inline-grid;background:none;color:#095eb5}.sidebar-toggle{display:none}.page-header{min-height:160px;padding:20px}.page-header h1{font-size:27px}.form-drawer{width:min(420px,100vw);top:56px}.drawer-scrim{inset:56px 0 0}.dashboard-row,.dashboard-bottom{grid-template-columns:1fr}.topbar .top-search{max-width:none}}
@media(max-width:580px){.dashboard-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-header h1{font-size:25px}.topbar{gap:5px}.top-actions .account,.top-actions .top-sep,.top-search kbd{display:none}.top-search{height:32px}.page-wrap{padding:0 11px 23px}.page-header{margin:0 -11px 12px}.panel-toolbar{padding:10px}.filter-row{width:100%}.filter-row .search-wrap{width:100%}.filter-row .search-wrap input{width:100%}.page-wrap .form-grid{grid-template-columns:1fr}.footer{padding:12px}.drawer-body .form-grid{display:flex}.login-showcase{min-height:auto}.dashboard-panel{min-height:150px}}
.employee-stepper{display:flex;flex-wrap:wrap;gap:10px;padding:16px 20px;background:#fff;border:1px solid #dce8f9;border-radius:12px;margin:0 0 14px;color:#6590c2;font-size:12px;font-weight:700}.employee-stepper span{padding:8px 13px;border-radius:20px;background:#edf4ff}.employee-stepper span.current{background:linear-gradient(120deg,#0b73fc,#044fc9);color:#fff}
@media(max-width:850px){.page-wrap .dashboard-row[style*="1.75fr"]{grid-template-columns:1fr!important}}
.filter-drawer[hidden],.filter-scrim[hidden]{display:none!important}.filter-scrim{position:fixed;inset:56px 0 0;background:rgba(5,30,70,.10);z-index:51}.filter-drawer{position:fixed;right:0;top:56px;bottom:0;width:min(380px,100vw);background:#fff;z-index:52;box-shadow:-18px 0 35px rgba(5,35,91,.2);display:flex;flex-direction:column}.filter-drawer .drawer-form{display:flex;flex:1;flex-direction:column;min-height:0}.filter-drawer .drawer-body{flex:1;overflow:auto}.filter-drawer .form-grid{display:flex;flex-direction:column;gap:16px}.filter-drawer .form-field input,.filter-drawer .form-field select{font-size:12px;border:1px solid #bcd2f7;border-radius:8px;padding:10px;min-height:40px}