31 lines
32 KiB
TypeScript
31 lines
32 KiB
TypeScript
export const portalDesignCss = `
|
|
:root{--omni-space-1:4px;--omni-space-2:8px;--omni-space-3:12px;--omni-space-4:16px;--omni-space-5:20px;--omni-space-6:24px;--omni-space-8:32px;--omni-radius-xs:6px;--omni-radius-sm:8px;--omni-radius-md:10px;--omni-radius-lg:12px;--omni-radius-xl:16px;--omni-radius-pill:999px;--omni-touch-target:44px;--omni-z-sticky:1100;--omni-z-modal:1300;--omni-font-family-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--omni-font-family-serif:Georgia,Cambria,"Times New Roman",serif;--omni-text-label:.75rem;--omni-text-body-small:.875rem;--omni-motion-hover:140ms cubic-bezier(.4,0,.2,1);--omni-motion-tabs:180ms cubic-bezier(.4,0,.2,1);--omni-control-height:36px;--omni-control-height-sm:30px;--omni-control-padding-x:12px;--omni-layout-gap:12px;--omni-row-height:40px}
|
|
[data-omni-theme="parchment-light"]{--omni-bg-app:#EFE3CC;--omni-bg-workspace:#F3EAD7;--omni-bg-section:#F1E6D2;--omni-surface:#F8F2E6;--omni-surface-raised:#FCF8EF;--omni-surface-muted:#E9DDC5;--omni-surface-hover:#EDE0C7;--omni-surface-selected:#E2D0AD;--omni-text-primary:#302A23;--omni-text-secondary:#756A5B;--omni-text-muted:#9A8E7D;--omni-text-inverse:#FFFFFF;--omni-border:#D9C9AC;--omni-border-subtle:#E5D8C0;--omni-border-strong:#CBB99B;--omni-border-focus:#9A743D;--omni-primary:#9A743D;--omni-primary-hover:#7D5B2D;--omni-primary-active:#684923;--omni-primary-soft:#EADBC1;--omni-gold:#B78335;--omni-gold-soft:#EFE0C2;--omni-success:#657255;--omni-success-soft:#E1E6D8;--omni-warning:#A8752F;--omni-warning-soft:#F2E3C8;--omni-danger:#A44E3F;--omni-danger-soft:#F1DDD5;--omni-info:#5F7480;--omni-info-soft:#DFE6E5;--omni-shadow-soft:0 1px 3px rgba(72,55,34,.06);--omni-shadow-medium:0 6px 18px rgba(72,55,34,.1);--omni-shadow-strong:0 14px 36px rgba(52,39,24,.16)}
|
|
[data-omni-theme="noble-green"]{--omni-bg-app:#EDE5D3;--omni-bg-workspace:#F2EAD9;--omni-bg-section:#ECE2CE;--omni-surface:#F8F2E6;--omni-surface-raised:#FCF8EF;--omni-surface-muted:#E6DBC5;--omni-surface-hover:#E3E9DE;--omni-surface-selected:#DCE5D7;--omni-text-primary:#2E302A;--omni-text-secondary:#6B6C60;--omni-text-muted:#8B8C80;--omni-text-inverse:#FFFFFF;--omni-border:#D2CCB9;--omni-border-subtle:#E2DAC8;--omni-border-strong:#9DAA98;--omni-border-focus:#315F46;--omni-primary:#315F46;--omni-primary-hover:#294F3B;--omni-primary-active:#213F30;--omni-primary-soft:#DDE7DB;--omni-gold:#B78335;--omni-gold-soft:#EFE0C2;--omni-success:#3F7557;--omni-success-soft:#DDE9E0;--omni-warning:#A8752F;--omni-warning-soft:#F2E3C8;--omni-danger:#A44E3F;--omni-danger-soft:#F1DDD5;--omni-info:#527286;--omni-info-soft:#DFE7EA;--omni-shadow-soft:0 1px 3px rgba(72,55,34,.06);--omni-shadow-medium:0 6px 18px rgba(72,55,34,.1);--omni-shadow-strong:0 14px 36px rgba(52,39,24,.16)}
|
|
[data-omni-theme="graphite-forest-dark"]{--omni-bg-app:#171A18;--omni-bg-workspace:#1D211E;--omni-bg-section:#202620;--omni-surface:#252A26;--omni-surface-raised:#2B312C;--omni-surface-muted:#212621;--omni-surface-hover:#2B342D;--omni-surface-selected:#29382E;--omni-text-primary:#EEE7DA;--omni-text-secondary:#B7B3A8;--omni-text-muted:#888E87;--omni-text-inverse:#171A18;--omni-border:#39423A;--omni-border-subtle:#303831;--omni-border-strong:#465249;--omni-border-focus:#6F9A79;--omni-primary:#527D60;--omni-primary-hover:#648E70;--omni-primary-active:#426A50;--omni-primary-soft:#29382E;--omni-gold:#C99A4D;--omni-gold-soft:#403522;--omni-success:#78916F;--omni-success-soft:#29372D;--omni-warning:#C08A45;--omni-warning-soft:#403422;--omni-danger:#C06B5F;--omni-danger-soft:#432B28;--omni-info:#7693A0;--omni-info-soft:#29363B;--omni-shadow-soft:0 1px 3px rgba(0,0,0,.18);--omni-shadow-medium:0 8px 22px rgba(0,0,0,.24);--omni-shadow-strong:0 16px 40px rgba(0,0,0,.34)}
|
|
[data-omni-density="workspace"]{--omni-bg-app:rgb(239 232 216);--omni-bg-workspace:rgb(239 232 218);--omni-bg-section:rgb(233 225 207);--omni-surface:rgb(247 241 227);--omni-surface-raised:rgb(250 245 234);--omni-surface-muted:rgb(238 231 214);--omni-surface-hover:rgb(231 230 211);--omni-surface-selected:rgb(221 231 211);--omni-text-primary:rgb(28 39 34);--omni-text-secondary:rgb(93 109 101);--omni-text-muted:rgb(108 123 116);--omni-border:rgb(211 204 184);--omni-border-subtle:rgb(225 217 198);--omni-border-focus:rgb(35 123 91);--omni-primary:rgb(31 117 85);--omni-primary-hover:rgb(24 96 69);--omni-primary-soft:rgb(230 243 236)}
|
|
[data-omni-theme="parchment-light"][data-omni-density="workspace"]{--omni-bg-app:rgb(244 237 220);--omni-bg-workspace:rgb(244 237 222);--omni-surface:rgb(250 245 232);--omni-surface-raised:rgb(252 247 235);--omni-surface-muted:rgb(242 234 216);--omni-surface-selected:rgb(236 221 190);--omni-primary:rgb(133 99 50);--omni-primary-hover:rgb(107 76 33);--omni-primary-soft:rgb(246 239 225)}
|
|
[data-omni-theme="graphite-forest-dark"][data-omni-density="workspace"]{--omni-bg-app:rgb(19 24 22);--omni-bg-workspace:rgb(20 26 23);--omni-bg-section:rgb(27 34 30);--omni-surface:rgb(26 33 29);--omni-surface-raised:rgb(35 44 39);--omni-surface-muted:rgb(29 38 33);--omni-surface-hover:rgb(38 49 42);--omni-surface-selected:rgb(39 64 49);--omni-text-primary:rgb(237 243 239);--omni-text-secondary:rgb(171 189 179);--omni-text-muted:rgb(143 164 152);--omni-border:rgb(60 76 66);--omni-border-subtle:rgb(42 54 47);--omni-border-focus:rgb(111 185 144);--omni-primary:rgb(77 147 105);--omni-primary-hover:rgb(93 163 122);--omni-primary-soft:rgb(37 59 45)}
|
|
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--omni-bg-workspace);color-scheme:light}[data-omni-theme="graphite-forest-dark"]{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:var(--omni-bg-workspace);color:var(--omni-text-primary);font:400 var(--omni-text-body-small)/1.45 var(--omni-font-family-sans)}button,input,select{font:inherit}button,input,select,.nav-item{outline:none}button:focus-visible,input:focus-visible,select:focus-visible,.nav-item:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--omni-border-focus) 30%,transparent);border-color:var(--omni-border-focus)}button{min-height:var(--omni-control-height);padding:0 var(--omni-control-padding-x);border:1px solid var(--omni-primary);border-radius:var(--omni-radius-sm);background:var(--omni-primary);color:var(--omni-text-inverse);font-weight:650;cursor:pointer;transition:background var(--omni-motion-hover),border-color var(--omni-motion-hover)}button:hover{background:var(--omni-primary-hover);border-color:var(--omni-primary-hover)}button:disabled{opacity:.55;cursor:not-allowed}button.quiet,.quiet{background:var(--omni-surface-raised);border-color:var(--omni-border);color:var(--omni-text-primary)}button.quiet:hover{background:var(--omni-surface-hover);border-color:var(--omni-border-strong)}.compact{min-height:var(--omni-control-height-sm);padding-inline:var(--omni-space-2);font-size:var(--omni-text-label)}
|
|
.topbar{position:sticky;top:0;z-index:var(--omni-z-sticky);min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:var(--omni-space-4);padding:var(--omni-space-2) max(var(--omni-space-5),calc((100vw - 1440px)/2));background:color-mix(in srgb,var(--omni-surface-raised) 94%,transparent);border-bottom:1px solid var(--omni-border-subtle);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:var(--omni-space-3);color:var(--omni-primary);text-decoration:none;white-space:nowrap;font-size:1.08rem}.mark{width:38px;height:38px;display:grid;place-items:center;border-radius:var(--omni-radius-lg);background:var(--omni-primary);color:var(--omni-text-inverse);font:700 1.25rem/1 var(--omni-font-family-serif)}.actions{display:flex;align-items:center;justify-content:flex-end;gap:var(--omni-space-2)}.status,.live,.tag{display:inline-flex;align-items:center;gap:var(--omni-space-1);min-height:26px;padding:0 var(--omni-space-2);border-radius:var(--omni-radius-pill);background:var(--omni-surface-muted);color:var(--omni-text-secondary);font-size:var(--omni-text-label);white-space:nowrap}.status.ok,.live{background:var(--omni-success-soft);color:var(--omni-success)}.status.offline,.anomaly{color:var(--omni-warning)}.theme-control{display:flex;align-items:center;gap:var(--omni-space-2);color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.theme-control select,.period-control input,input,select{min-height:var(--omni-control-height);border:1px solid var(--omni-border);border-radius:var(--omni-radius-sm);background:var(--omni-surface-raised);color:var(--omni-text-primary);padding:0 var(--omni-space-3)}
|
|
.section-nav{position:sticky;top:64px;z-index:calc(var(--omni-z-sticky) - 1);display:flex;align-items:center;gap:var(--omni-space-1);padding:var(--omni-space-2) max(var(--omni-space-5),calc((100vw - 1440px)/2));overflow-x:auto;background:color-mix(in srgb,var(--omni-surface) 96%,transparent);border-bottom:1px solid var(--omni-border-subtle);scrollbar-width:thin}.nav-item{flex:0 0 auto;min-height:var(--omni-control-height);border-color:transparent;background:transparent;color:var(--omni-text-secondary)}.nav-item:hover{background:var(--omni-surface-hover);border-color:transparent;color:var(--omni-text-primary)}.nav-item.selected{background:var(--omni-primary-soft);border-color:var(--omni-border);color:var(--omni-primary)}.period-control{display:flex;align-items:center;gap:var(--omni-space-2);margin-left:auto;color:var(--omni-text-secondary);font-size:var(--omni-text-label);white-space:nowrap}
|
|
main{width:min(100%,1480px);margin:0 auto;padding:var(--omni-space-5)}.app-view{animation:view-enter var(--omni-motion-tabs)}.hero,.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--omni-space-6);margin-bottom:var(--omni-space-4)}.hero{padding:var(--omni-space-5) var(--omni-space-6);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-lg);background:var(--omni-bg-section)}.hero h1,.view-head h1{margin:var(--omni-space-1) 0;font:700 clamp(1.65rem,3vw,2.3rem)/1.1 var(--omni-font-family-sans);letter-spacing:-.025em}.hero p,.view-head p{margin:0;color:var(--omni-text-secondary)}.eyebrow{margin:0;color:var(--omni-primary);font-size:var(--omni-text-label);font-weight:750;letter-spacing:.04em;text-transform:uppercase}.today{min-width:190px;padding-left:var(--omni-space-5);border-left:1px solid var(--omni-border)}.today span,.today small{display:block;color:var(--omni-text-secondary)}.today strong{display:block;margin:var(--omni-space-1) 0;font-size:1.1rem}.message,.login-error{margin-bottom:var(--omni-space-3);padding:var(--omni-space-3) var(--omni-space-4);border:1px solid var(--omni-warning);border-radius:var(--omni-radius-md);background:var(--omni-warning-soft);color:var(--omni-text-primary)}
|
|
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--omni-layout-gap);margin-bottom:var(--omni-layout-gap)}.stats article,.panel{border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-lg);background:var(--omni-surface-raised);box-shadow:var(--omni-shadow-soft)}.stats article{position:relative;min-height:96px;padding:var(--omni-space-4);overflow:hidden}.stats article:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--omni-primary)}.stats span{display:block;color:var(--omni-text-secondary)}.stats strong{display:block;margin-top:var(--omni-space-2);font-size:clamp(1.55rem,3vw,2.1rem);font-variant-numeric:tabular-nums}.panel{padding:var(--omni-space-4)}.layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:var(--omni-layout-gap)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--omni-space-3);margin-bottom:var(--omni-space-3)}.panel-head h2{margin:var(--omni-space-1) 0 0;font-size:1.05rem}.feed,.people{display:grid;gap:var(--omni-space-2)}.event,.person{display:grid;align-items:center;gap:var(--omni-space-3);min-height:56px;padding:var(--omni-space-2) var(--omni-space-3);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-md);background:var(--omni-surface)}.event{grid-template-columns:38px minmax(0,1fr) auto}.person{grid-template-columns:38px minmax(0,1fr) auto auto}.event:hover,.person:hover{background:var(--omni-surface-hover)}.avatar,.event-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--omni-radius-pill);background:var(--omni-primary-soft);color:var(--omni-primary);font-weight:750}.event-icon{border-radius:var(--omni-radius-sm)}.event strong,.person strong,.event small,.person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event small,.person small,.event time{color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.empty{padding:var(--omni-space-6);text-align:center;color:var(--omni-text-secondary);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.directory-toolbar{display:flex;align-items:center;gap:var(--omni-space-2);margin-bottom:var(--omni-space-3)}.directory-toolbar input{flex:1;min-width:180px}.directory-list .person{min-height:64px}
|
|
.timesheet-panel{margin-top:var(--omni-layout-gap)}.table-wrap{width:100%;overflow:auto;border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-md)}table{width:100%;min-width:760px;border-collapse:collapse;background:var(--omni-surface-raised)}th,td{height:var(--omni-row-height);padding:var(--omni-space-2) var(--omni-space-3);border-bottom:1px solid var(--omni-border-subtle);text-align:left;vertical-align:middle}th{position:sticky;top:0;z-index:1;background:var(--omni-surface-muted);color:var(--omni-text-secondary);font-size:var(--omni-text-label);font-weight:700;white-space:nowrap}tbody tr:hover{background:var(--omni-surface-hover)}td{font-variant-numeric:tabular-nums}td input,td select{width:100%}.timesheet-create{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr)) minmax(180px,2fr) auto;align-items:end;gap:var(--omni-space-2);padding:var(--omni-space-3);margin-bottom:var(--omni-space-3);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.timesheet-create label,.stack-form label,.inline-form label,.employee-dialog label{display:grid;gap:var(--omni-space-1);color:var(--omni-text-secondary);font-size:var(--omni-text-label);font-weight:650}
|
|
.finance-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.7fr);gap:var(--omni-layout-gap);margin-bottom:var(--omni-layout-gap)}.stack-form{display:grid;gap:var(--omni-space-3)}.inline-form{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr)) auto;align-items:end;gap:var(--omni-space-2)}.finance-chart{min-height:280px}.finance-chart svg{display:block;width:100%;height:280px}.chart-legend{display:flex;gap:var(--omni-space-4);color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.legend-dot{display:inline-block;width:9px;height:9px;margin-right:var(--omni-space-1);border-radius:var(--omni-radius-pill)}.income-dot{background:var(--omni-primary)}.expense-dot{background:var(--omni-gold)}.calendar-panel{overflow:auto}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(140px,1fr));min-width:980px}.calendar-weekdays span{padding:var(--omni-space-2);color:var(--omni-text-secondary);text-align:center;font-size:var(--omni-text-label);font-weight:700}.calendar-day{min-height:132px;padding:var(--omni-space-2);border-top:1px solid var(--omni-border-subtle);border-right:1px solid var(--omni-border-subtle);background:var(--omni-surface-raised)}.calendar-day:hover{background:var(--omni-surface-hover)}.calendar-day.outside{opacity:.55}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--omni-border-focus)}.day-number{display:block;margin-bottom:var(--omni-space-2);font-weight:750}.shift-card{margin:var(--omni-space-1) 0;padding:var(--omni-space-2);border-left:3px solid var(--omni-primary);border-radius:var(--omni-radius-xs);background:var(--omni-primary-soft);font-size:var(--omni-text-label)}.shift-card.actual{border-left-color:var(--omni-gold);background:var(--omni-gold-soft)}.shift-card strong,.shift-card span{display:block}.positive{color:var(--omni-success)}.negative{color:var(--omni-danger)}
|
|
.employee-dialog{width:min(92vw,620px);max-height:90vh;padding:0;overflow:auto;border:1px solid var(--omni-border);border-radius:var(--omni-radius-xl);background:var(--omni-surface-raised);color:var(--omni-text-primary);box-shadow:var(--omni-shadow-strong)}.employee-dialog::backdrop{background:rgb(10 16 13 / 52%);backdrop-filter:blur(3px)}.employee-dialog form{display:grid;gap:var(--omni-space-3);padding:var(--omni-space-6)}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--omni-space-3)}.dialog-head h2{margin:var(--omni-space-1) 0;font-size:1.5rem}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--omni-space-2)}.icon-button{min-width:var(--omni-control-height);padding:0;background:var(--omni-surface-raised);border-color:var(--omni-border);color:var(--omni-text-primary)}.role-note,.employee-dialog small{color:var(--omni-text-secondary)}.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--omni-space-3)}.pay-profile-section{display:grid;gap:var(--omni-space-3);padding:var(--omni-space-3);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.payroll-warnings{background:var(--omni-warning-soft)}.session-actions{display:flex;gap:var(--omni-space-1)}.anomaly{display:block;margin-top:var(--omni-space-1);font-size:var(--omni-text-label)}footer{padding:var(--omni-space-6);color:var(--omni-text-muted);text-align:center;font-size:var(--omni-text-label)}
|
|
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:var(--omni-space-6);background:var(--omni-bg-workspace)}.auth-card{width:min(100%,460px);padding:var(--omni-space-8);border:1px solid var(--omni-border);border-radius:var(--omni-radius-xl);background:var(--omni-surface-raised);box-shadow:var(--omni-shadow-strong)}.auth-brand{display:flex;align-items:center;gap:var(--omni-space-3);margin-bottom:var(--omni-space-8);font-size:1.2rem}.auth-card h1{margin:var(--omni-space-1) 0 var(--omni-space-3);font-size:1.875rem}.auth-copy{margin:0 0 var(--omni-space-5);color:var(--omni-text-secondary)}.auth-card form{display:grid;gap:var(--omni-space-2)}.auth-card label{font-size:var(--omni-text-label);font-weight:700}.auth-card input,.auth-card button{width:100%;min-height:48px}.auth-card small{display:block;margin-top:var(--omni-space-4);color:var(--omni-text-secondary)}@keyframes view-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
|
|
@media(max-width:900px){:root{--omni-control-height:44px;--omni-control-height-sm:40px;--omni-row-height:48px}.topbar{align-items:flex-start;flex-wrap:wrap;padding:var(--omni-space-3) var(--omni-space-4)}.actions{width:100%;justify-content:flex-start;overflow-x:auto}.section-nav{top:108px;padding-inline:var(--omni-space-4)}.period-control{margin-left:var(--omni-space-2)}main{padding:var(--omni-space-4)}.layout,.finance-layout{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-form{grid-template-columns:repeat(2,minmax(0,1fr))}.inline-form button{grid-column:1/-1}.timesheet-create{grid-template-columns:repeat(2,minmax(0,1fr))}.timesheet-create .grow,.timesheet-create button{grid-column:1/-1}}
|
|
@media(max-width:600px){.status,.theme-control{display:none}.section-nav{top:112px}.nav-item{min-height:var(--omni-touch-target)}main{padding:var(--omni-space-3)}.hero,.view-head{display:block}.hero{padding:var(--omni-space-4)}.today{margin-top:var(--omni-space-4);padding:var(--omni-space-3) 0 0;border-left:0;border-top:1px solid var(--omni-border)}.view-head button,.view-head .actions{margin-top:var(--omni-space-3)}.stats{grid-template-columns:1fr}.panel{padding:var(--omni-space-3)}.event{grid-template-columns:36px minmax(0,1fr)}.event time{grid-column:2}.person{grid-template-columns:36px minmax(0,1fr)}.person button{grid-column:2;width:100%}.directory-toolbar{align-items:stretch;flex-direction:column}.timesheet-create,.inline-form,.form-row-2{grid-template-columns:1fr}.calendar-weekdays,.calendar-grid{min-width:840px;grid-template-columns:repeat(7,120px)}.employee-dialog form{padding:var(--omni-space-4)}}
|
|
/* Workspace composition follows the supplied Krona Staff layouts while every visual value stays on Krona Library tokens. */
|
|
.platform-bar{min-height:44px;display:grid;grid-template-columns:auto minmax(280px,560px) auto;align-items:center;gap:var(--omni-space-4);padding:var(--omni-space-1) var(--omni-space-5);background:var(--omni-surface-raised);border-bottom:1px solid var(--omni-border-subtle)}.platform-context,.platform-actions{display:flex;align-items:center;gap:var(--omni-space-2);white-space:nowrap}.platform-context{color:var(--omni-text-secondary)}.platform-context strong{color:var(--omni-primary)}.app-grid{min-width:34px;min-height:34px;padding:0;background:transparent;border-color:transparent;color:var(--omni-primary);font-size:1.25rem}.global-search{min-height:34px;display:flex;align-items:center;gap:var(--omni-space-2);padding:0 var(--omni-space-3);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-sm);background:var(--omni-surface-muted);color:var(--omni-text-muted)}.global-search input{width:100%;min-height:30px;padding:0;border:0;background:transparent}.platform-actions{justify-content:flex-end}.module-bar{position:sticky;top:0;z-index:var(--omni-z-sticky);min-height:62px;display:flex;align-items:center;gap:var(--omni-space-5);padding:0 var(--omni-space-5);background:color-mix(in srgb,var(--omni-surface-raised) 96%,transparent);border-bottom:1px solid var(--omni-border-subtle);backdrop-filter:blur(14px)}.module-bar .brand{flex:0 0 auto}.module-bar .brand>span:last-child{display:grid}.module-bar .brand small{color:var(--omni-text-secondary);font-size:.67rem;font-weight:500}.module-bar .section-nav{position:static;flex:1;padding:0;background:transparent;border:0}.module-bar .nav-item{min-height:38px;padding-inline:var(--omni-space-2);font-size:var(--omni-text-label)}.module-bar .nav-item>span{font-size:1rem}
|
|
main{width:min(100%,1720px);padding:var(--omni-space-4) var(--omni-space-5) var(--omni-space-8)}.page-title-row{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:var(--omni-space-4);margin-bottom:var(--omni-space-3)}.page-title-row h1{margin:0;font-size:clamp(1.55rem,2vw,2rem);letter-spacing:-.025em}.page-title-row p{margin:var(--omni-space-1) 0 0;color:var(--omni-text-secondary)}.page-context{display:grid;justify-items:end;color:var(--omni-text-secondary)}.page-context small{color:var(--omni-text-muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-action{min-height:32px;padding:0;border:0;background:transparent;color:var(--omni-primary)}.text-action:hover{background:transparent;color:var(--omni-primary-hover)}
|
|
.metric-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--omni-space-3);margin-bottom:var(--omni-space-3)}.metric-strip article{min-height:106px;display:flex;align-items:center;gap:var(--omni-space-3);padding:var(--omni-space-4);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-lg);background:var(--omni-surface-raised);box-shadow:var(--omni-shadow-soft)}.metric-strip small,.metric-strip span{display:block;color:var(--omni-text-secondary)}.metric-strip strong{display:block;margin:var(--omni-space-1) 0;font-size:1.55rem;font-variant-numeric:tabular-nums}.metric-icon{width:46px;height:46px;flex:0 0 auto;display:grid!important;place-items:center;border-radius:var(--omni-radius-pill);background:var(--omni-primary-soft);color:var(--omni-primary)!important;font-size:1.25rem;font-weight:750}.metric-icon.danger{background:var(--omni-danger-soft);color:var(--omni-danger)!important}.compact-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-metrics article{min-height:84px;padding-block:var(--omni-space-3)}
|
|
.dashboard-grid{display:grid;grid-template-columns:minmax(420px,1.45fr) minmax(380px,1.15fr) minmax(290px,.8fr);grid-template-areas:"people attendance terminal" "payroll analytics alerts";gap:var(--omni-space-3)}.dashboard-grid>.panel{min-width:0}.dashboard-people{grid-area:people}.dashboard-attendance{grid-area:attendance}.dashboard-terminal{grid-area:terminal}.dashboard-payroll{grid-area:payroll}.dashboard-analytics{grid-area:analytics}.dashboard-alerts{grid-area:alerts}.dense-list,.alert-list{display:grid;gap:var(--omni-space-1)}.dense-row,.alert-row{min-height:46px;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:var(--omni-space-2);padding:var(--omni-space-1) var(--omni-space-2);border-bottom:1px solid var(--omni-border-subtle)}.dense-row:last-child,.alert-row:last-child{border-bottom:0}.dense-row strong,.dense-row small,.alert-row strong,.alert-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dense-row small,.alert-row small,.dense-row time{color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.alert-mark{width:28px;height:28px;display:grid;place-items:center;border-radius:var(--omni-radius-pill);background:var(--omni-warning-soft);color:var(--omni-warning);font-weight:800}.terminal-device{display:flex;align-items:center;gap:var(--omni-space-4);padding:var(--omni-space-4);margin-bottom:var(--omni-space-3);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.terminal-device strong,.terminal-device small{display:block}.terminal-device small{color:var(--omni-text-secondary)}.terminal-glyph{width:58px;height:72px;display:grid;place-items:center;border-radius:var(--omni-radius-sm);background:var(--omni-text-primary);color:var(--omni-success);font-size:1.8rem}.terminal-glyph.large{width:88px;height:112px;font-size:2.5rem}.dashboard-terminal dl,.terminal-card dl,.system-list,.inspector-list,.summary-dl{display:grid;gap:var(--omni-space-2);margin:0 0 var(--omni-space-3)}.dashboard-terminal dl div,.terminal-card dl div,.system-list div,.inspector-list div,.summary-dl div{display:flex;justify-content:space-between;gap:var(--omni-space-3);padding-bottom:var(--omni-space-2);border-bottom:1px solid var(--omni-border-subtle)}dl dt{color:var(--omni-text-secondary)}dl dd{margin:0;text-align:right;font-weight:650}.dashboard-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--omni-space-2)}.dashboard-totals>div{padding:var(--omni-space-3);background:var(--omni-surface-muted);border-radius:var(--omni-radius-md)}.dashboard-totals small,.dashboard-totals strong{display:block}.rule-chips{display:flex;flex-wrap:wrap;gap:var(--omni-space-1);margin-top:var(--omni-space-3)}.mini-chart svg{width:100%;height:150px}.mini-chart .chart-legend{margin-top:var(--omni-space-2)}.quick-bar{position:sticky;bottom:var(--omni-space-2);z-index:5;display:flex;align-items:center;gap:var(--omni-space-2);margin-top:var(--omni-space-3);padding:var(--omni-space-2) var(--omni-space-3);border:1px solid var(--omni-border);border-radius:var(--omni-radius-lg);background:color-mix(in srgb,var(--omni-surface-raised) 96%,transparent);box-shadow:var(--omni-shadow-medium);backdrop-filter:blur(12px)}
|
|
.employee-workspace{display:grid;grid-template-columns:minmax(620px,1fr) minmax(300px,360px);gap:var(--omni-space-3)}.employee-list-panel{min-width:0}.directory-list{display:grid;gap:0}.directory-list .person{min-height:58px;grid-template-columns:38px minmax(180px,1fr) auto auto;border-width:0 0 1px;border-radius:0;background:transparent;cursor:pointer}.directory-list .person.selected{background:var(--omni-surface-selected);box-shadow:inset 3px 0 var(--omni-primary)}.inspector{position:sticky;top:78px;align-self:start}.inspector-head{display:flex;align-items:center;gap:var(--omni-space-3);padding-bottom:var(--omni-space-4);border-bottom:1px solid var(--omni-border-subtle)}.inspector-head h2{margin:0 0 var(--omni-space-2)}.avatar.large{width:64px;height:64px;font-size:1.35rem}.inspector-list{margin-top:var(--omni-space-4)}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--omni-space-2)}
|
|
.segmented{display:inline-flex;align-items:center;padding:2px;border-radius:var(--omni-radius-sm);background:var(--omni-surface-muted)}.segmented button{min-height:34px;background:transparent;border-color:transparent;color:var(--omni-text-secondary)}.segmented button.selected{background:var(--omni-primary);border-color:var(--omni-primary);color:var(--omni-text-inverse)}.attendance-workspace{display:grid;grid-template-columns:minmax(600px,1.5fr) minmax(280px,.55fr);gap:var(--omni-space-3)}.attendance-workspace .event{border-width:0 0 1px;border-radius:0;background:transparent}.summary-dl dd{font-size:1.15rem}.finance-workspace{display:grid;grid-template-columns:minmax(680px,1.5fr) minmax(340px,.65fr);gap:var(--omni-space-3)}.finance-side{display:grid;align-content:start;gap:var(--omni-space-3)}.payroll-workspace{display:grid;grid-template-columns:minmax(720px,1.4fr) minmax(420px,.8fr);gap:var(--omni-space-3)}.payroll-workspace>.panel{min-width:0}.payroll-detail table{min-width:620px}.payroll-row{cursor:pointer}.rules-workspace,.terminal-workspace,.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--omni-space-3)}.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--omni-space-2)}.rule-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:var(--omni-space-3);padding:var(--omni-space-3);border:1px solid var(--omni-border-subtle);border-radius:var(--omni-radius-md);background:var(--omni-surface)}.rule-card strong,.rule-card small{display:block}.rule-card small{color:var(--omni-text-secondary)}.terminal-card{display:flex;align-items:flex-start;gap:var(--omni-space-5)}.terminal-card h2{margin-top:0}.settings-field{display:grid;gap:var(--omni-space-2);color:var(--omni-text-secondary)}.calendar-legend{display:flex;justify-content:flex-end;gap:var(--omni-space-4);margin-bottom:var(--omni-space-2);color:var(--omni-text-secondary);font-size:var(--omni-text-label)}.calendar-legend i{width:9px;height:9px;display:inline-block;margin-right:var(--omni-space-1);border-radius:var(--omni-radius-pill);background:var(--omni-primary)}.calendar-legend .actual{background:var(--omni-info)}.calendar-legend .warning{background:var(--omni-warning)}.schedule-tabs{margin-bottom:var(--omni-space-3)}
|
|
@media(max-width:1380px){.module-bar{align-items:flex-start;flex-direction:column;gap:0;padding-top:var(--omni-space-2)}.module-bar .section-nav{width:100%}.dashboard-grid{grid-template-columns:1fr 1fr;grid-template-areas:"people attendance" "payroll analytics" "terminal alerts"}.metric-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.employee-workspace{grid-template-columns:minmax(560px,1fr) 320px}.finance-workspace,.payroll-workspace{grid-template-columns:1fr}.payroll-detail{max-height:440px}}
|
|
@media(max-width:900px){.platform-bar{grid-template-columns:1fr auto}.global-search{grid-column:1/-1;grid-row:2}.module-bar{position:static}.module-bar .section-nav{top:auto}.dashboard-grid{grid-template-columns:1fr;grid-template-areas:"people" "attendance" "terminal" "payroll" "analytics" "alerts"}.metric-strip,.compact-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.employee-workspace,.attendance-workspace,.rules-workspace,.terminal-workspace,.settings-grid{grid-template-columns:1fr}.inspector{position:static}.quick-bar{position:static;flex-wrap:wrap}.finance-workspace{grid-template-columns:1fr}.rule-grid{grid-template-columns:1fr}}
|
|
@media(max-width:600px){.platform-context span,.platform-context b,.platform-actions .status{display:none}.platform-bar{padding-inline:var(--omni-space-3)}.module-bar{padding-inline:var(--omni-space-3)}.module-bar .brand{display:none}.page-title-row{align-items:flex-start;flex-direction:column}.page-title-row .actions{width:100%;overflow-x:auto}.metric-strip,.compact-metrics{grid-template-columns:1fr}.metric-strip article{min-height:82px}.dashboard-totals{grid-template-columns:1fr}.employee-workspace{display:block}.inspector{margin-top:var(--omni-space-3)}.directory-toolbar select{width:100%}.directory-list .person{grid-template-columns:36px minmax(0,1fr)}.directory-list .person .tag,.directory-list .person button{grid-column:2}.inspector-actions,.rule-grid{grid-template-columns:1fr}.terminal-card{display:grid}.quick-bar>*{width:100%}}
|
|
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
|
|
`;
|