:root{color-scheme:light;--ink:#1f2e3d;--muted:#526578;--deep:#18354f;--panel:#fff;--bg:#f3f7fb;--line:#dce6ef;--mint:#43beaa;--green:#08766a;--pale:#e2f5f1;--danger:#a12c31;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:15px}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--green)}:focus-visible{outline:3px solid #08766a;outline-offset:3px}button:disabled{opacity:.55;cursor:wait}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.035em}p{line-height:1.55}.muted,small{color:var(--muted)}.icon{width:20px;height:20px;flex:none;vertical-align:middle}.brand{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:780;letter-spacing:-1.7px;line-height:1}.brand img{width:38px;height:38px}.brand-name{white-space:nowrap}.brand-accent{color:var(--green)}
.layout{min-height:100vh;display:grid;grid-template-columns:246px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:var(--deep);color:#eff8ff;padding:32px 20px 22px;display:flex;flex-direction:column}.sidebar .brand{padding:0 9px}.sidebar .brand-accent{color:var(--mint)}.navlabel{margin:49px 11px 13px;color:#aec4d6;font-size:10px;font-weight:750;letter-spacing:.17em}.nav{display:grid;gap:7px}.nav button,.account button{border:0;text-align:left;background:none;color:#ccddec;display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;font-size:14px;width:100%}.nav button:hover,.account button:hover{background:#254664;color:#fff}.nav button[aria-current]{background:#2a506e;color:#f0fffc;font-weight:650}.nav button[aria-current] .icon{color:var(--mint)}.account{margin-top:auto;border-top:1px solid #35546e;padding:17px 2px 0}.identity{display:flex;align-items:center;gap:10px;padding:0 5px 8px;min-width:0}.identity strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.identity small{color:#b4d4e2;font-size:11px}.avatar{background:#e0f5f1;color:#18635b;display:grid;place-items:center;border-radius:50%;height:36px;width:36px;flex:none;font-size:12px;font-weight:800}.identity>div:last-child{min-width:0}
.workspace{min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:75px;padding:0 36px;border-bottom:1px solid var(--line);background:#fafcfe}.crumb{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}.crumb strong{color:var(--ink)}.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#32576a;font-weight:650}.status::before{content:"";width:7px;height:7px;border-radius:50%;background:#188679;box-shadow:0 0 0 3px #d9f4ee}.content{max-width:1430px;margin:0 auto;padding:31px 36px 50px}.heading{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:24px}.eyebrow{color:var(--green);font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;margin-bottom:8px}h1{font-size:clamp(30px,4vw,42px);font-weight:750;line-height:1.05}.heading p{margin-top:8px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;border-radius:9px;padding:10px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap;font-weight:650;font-size:13px;min-height:40px}.btn:hover{border-color:#8faec2;background:#f1f8fb}.primary{background:var(--deep);color:#fff;border-color:var(--deep)}.primary:hover{background:#265778;color:#fff}.bright{background:var(--mint);border-color:var(--mint);color:#14334b}.bright:hover{background:#75d6c4}.ghost{background:transparent}.danger{color:var(--danger)}.button-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.date-tag{padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:13px;white-space:nowrap;text-transform:capitalize}.date-tag .icon{width:16px;margin-right:5px}
.hero{min-height:197px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;border-radius:16px;background:#204c72;color:white;padding:26px 29px;margin-bottom:21px}.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border:1px solid #9fd7e26e;border-radius:50%;width:365px;height:365px;right:-38px;top:-93px}.hero::after{width:272px;height:272px;right:10px;top:-47px;box-shadow:0 0 0 34px #8bc6dc22,0 0 0 66px #8bc6dc15}.hero-copy{max-width:62%}.hero h2{font-size:clamp(25px,3.4vw,35px);margin-bottom:7px}.hero p{color:#d7eaf6;font-size:13px;margin-bottom:16px}.hero .eyebrow{color:#75d6c4}.hero-art{position:absolute;z-index:-1;right:13%;top:50%;transform:translate(50%,-50%) rotate(-9deg);height:114px;width:114px;border-radius:29px;background:#68d3c1;box-shadow:0 12px 35px #0c213966;display:grid;place-items:center}.hero-art .icon{width:61px;height:61px;color:#163b56}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}.stat,.panel{border:1px solid var(--line);background:var(--panel);border-radius:14px}.stat{padding:16px 18px}.stat-top{display:flex;align-items:center;gap:9px;color:#435b70;font-size:13px;font-weight:650}.tile-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--pale);color:var(--green);flex:none}.tile-icon .icon{width:16px;height:16px}.stat strong{display:block;font-size:28px;letter-spacing:-.05em;margin:8px 0 3px;font-variant-numeric:tabular-nums}.stat small{font-size:11px}.panels{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:15px}.panel{min-width:0;padding:19px}.panel h2{font-size:19px}.panel-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:15px}.panel-head p{font-size:12px;margin-top:4px}.panel-stack{display:grid;gap:15px}.pill{display:inline-flex;align-items:center;border-radius:20px;padding:4px 9px;background:var(--pale);color:#175f56;font-size:11px;font-weight:650;white-space:nowrap}.pill.gray{background:#eef3f8;color:#526578}.activity{display:grid;gap:0;padding:0;list-style:none;margin:0}.activity li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #edf2f7;font-size:13px}.activity li:first-child{border-top:0}.activity small{display:block}.activity time{margin-left:auto;white-space:nowrap;font-weight:650}.chart{display:block;width:100%;height:auto}.chart text{fill:#54697a;font:11px system-ui,sans-serif}.chart line{stroke:#e3ebf3}.empty{min-height:120px;display:grid;align-content:center;justify-items:center;text-align:center;gap:8px;color:var(--muted);padding:16px;font-size:13px}.empty strong{color:var(--ink)}.empty .tile-icon{width:40px;height:40px;margin-bottom:3px}
.table-wrap{overflow-x:auto}table{border-collapse:collapse;text-align:left;width:100%;min-width:510px}td,th{padding:12px 10px;border-bottom:1px solid #e7eef5;vertical-align:middle}th{font-size:10px;color:#51677a;text-transform:uppercase;letter-spacing:.09em;font-weight:800}td{font-size:13px}tr:last-child td{border-bottom:0}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}.person-name{display:flex;align-items:center;gap:9px}.person-name small{display:block}.mono{font-variant-numeric:tabular-nums}.kiosk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px}.location{display:grid;gap:12px;justify-items:start}.location p{font-size:13px}.month{max-width:166px}.report-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.badge-card{background:#204c72;color:#fff;min-height:185px;padding:23px;border-radius:15px;display:grid;align-content:space-between;gap:13px}.badge-card .eyebrow{color:#75d6c4}.badge-card h2{font-size:29px}.badge-card p{color:#d7eaf6}
.center{min-height:100dvh;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 90% 10%,#dcf5f0,transparent 55%),var(--bg)}.login,.kiosk{width:min(100%,440px);padding:29px;background:#fff;border:1px solid var(--line);border-radius:19px;box-shadow:0 18px 80px #163c6012}.login h1{font-size:33px;margin:23px 0 9px}.login p{margin-bottom:15px}.login .btn{width:100%;margin-top:5px}.login .link-button{margin-top:15px}.link-button{padding:0;border:0;background:none;color:var(--green);text-decoration:underline;text-underline-offset:3px}.kiosk{width:min(100%,520px);text-align:center}.kiosk .brand{justify-content:center;margin-bottom:22px}.kiosk h1{font-size:clamp(27px,5vw,41px)}.kiosk p{margin-top:10px}.qr{display:block;width:min(100%,330px);height:auto;aspect-ratio:1;margin:13px auto}.kiosk-dark{background:#204c72}.countdown{display:block;color:var(--green);font-size:13px;font-weight:700}.stamp-action{display:grid;gap:10px;margin:18px 0}.stamp-action .btn{padding:14px}.form{display:grid;gap:12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form label{display:grid;gap:6px;color:var(--ink);font-size:13px;font-weight:650}.form label.check{display:flex;align-items:center;gap:8px}.check input{width:16px;height:16px}input,select{border:1px solid #c9d9e5;border-radius:8px;background:white;color:var(--ink);padding:9px 10px;min-width:0;min-height:40px;width:100%}.form-actions{display:flex;justify-content:end;gap:8px;margin-top:6px;flex-wrap:wrap}.error{color:var(--danger);font-size:13px}.error:empty{display:none}dialog{max-width:min(480px,calc(100% - 28px));width:100%;border:1px solid var(--line);border-radius:15px;padding:22px;color:var(--ink);box-shadow:0 12px 70px #18354f44}dialog::backdrop{background:#18354f6b}dialog h2{margin-bottom:13px;font-size:24px}dialog p{margin-bottom:12px;overflow-wrap:anywhere}#toast{position:fixed;z-index:3;right:20px;bottom:20px;padding:12px 16px;border-radius:9px;background:var(--deep);color:#fff;font-size:13px;max-width:calc(100% - 40px);box-shadow:0 6px 24px #18354f40}#toast:empty{display:none}
@media(max-width:1050px){.layout{grid-template-columns:200px minmax(0,1fr)}.content,.topbar{padding-inline:22px}.panels{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}}
@media(max-width:770px){.layout{display:block}.sidebar{position:static;height:auto;padding:13px 14px}.sidebar .brand{padding:0}.sidebar .brand img{width:30px;height:30px}.sidebar .brand{font-size:23px}.navlabel,.account{display:none}.nav{display:flex;gap:4px;overflow:auto;margin-top:12px}.nav button{padding:8px;font-size:12px;white-space:nowrap;width:auto}.nav .icon{width:15px;height:15px}.topbar{min-height:47px}.content{padding-top:22px}.panels{grid-template-columns:1fr}.hero-art{right:18%;width:83px;height:83px;border-radius:19px}.hero-art .icon{width:48px;height:48px}}
@media(max-width:480px){.content,.topbar{padding-inline:13px}.heading{align-items:start;flex-direction:column;gap:11px;margin-bottom:16px}.hero{padding:18px;min-height:184px}.hero-copy{max-width:74%}.hero-art{opacity:.75;right:13%;width:58px;height:58px;border-radius:14px}.hero-art .icon{width:36px;height:36px}.stats{gap:6px}.stat{padding:9px 7px}.stat-top{font-size:10px;gap:4px;min-height:26px}.stat-top .tile-icon{width:21px;height:21px;border-radius:6px}.stat-top .icon{width:12px;height:12px}.stat strong{font-size:19px}.stat small{font-size:9px}.panel{padding:12px}.login,.kiosk{padding:19px}}
.form textarea{width:100%;resize:vertical;border:1px solid #c9d9e5;border-radius:8px;padding:9px 10px;font:inherit;color:var(--ink)}
.shift-calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(3px,1vw,8px);
}
.calendar-weekday {text-align:center;color:var(--muted);font-size:.8rem;font-weight:650}
.calendar-day {
  display:grid;
  align-content:start;
  justify-items:center;
  gap:3px;
  min-height:62px;
  padding:7px 1px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  color:var(--deep);
}
.calendar-day small {font-size:.72rem;line-height:1.1}
.calendar-day[aria-current="date"] {border-color:var(--green)}
.calendar-day:hover,.calendar-day[aria-pressed="true"] {background:var(--pale);border-color:var(--green)}
.calendar-detail {margin-top:22px}
.shift-filters,.calendar-detail {flex-wrap:wrap}
.shift-search {width:min(100%,220px)}
.shift-assignees {min-width:0;margin:0;border:1px solid var(--line);border-radius:8px}
.shift-assignees legend {padding:0 4px;font-size:13px;font-weight:650}
.shift-assignees div {display:grid;gap:4px;max-height:155px;overflow:auto}
.company-logo {display:block;width:min(240px,100%);height:auto;margin-bottom:16px}
.kiosk .company-logo {margin-inline:auto;margin-bottom:22px}
.sidebar .brand img {background:white;border-radius:9px}
.warehouse-plan {position:relative;max-width:1000px;margin-inline:auto}
.warehouse-plan img {display:block;width:100%;height:auto;aspect-ratio:1175 / 809}
.warehouse-modules {
  position:absolute;
  inset:2.1% 3.6% 4.8% 4.1%;
  display:grid;
  grid-template-rows:repeat(5,minmax(0,1fr));
}
.soppalco .warehouse-modules {inset:1.85% 3.35% 5.4% 4.45%}
.warehouse-modules button {
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-start;
  padding-inline:6px;
  border:1px solid #24677b;
  color:var(--deep);
  background:#edf9fc25;
  font-size:clamp(.75rem,2vw,.92rem);
}
.warehouse-modules button:hover,.warehouse-modules button[aria-pressed="true"] {background:#bce6ef73}
.warehouse-modules button[data-occupied="true"] {border-color:var(--green);background:#85dfc983}
.warehouse-modules strong,.warehouse-modules span:not(:empty) {padding:2px 5px;border-radius:4px;background:#fff}
.map-details {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;margin-top:18px}
.map-details h3 {margin-bottom:6px;font-size:16px}