/* employees.aim-ltd.uk — prototype app chrome v2 (best-in-class pass).
   Builds on aim-design-system.css tokens; adds a refined elevation,
   neutral, type and component system. */

:root{
  /* warm neutral ramp */
  --n-0:#FFFFFF; --n-25:#FBFAF8; --n-50:#F7F6F3; --n-100:#F0EEEA;
  --n-200:#E7E4DE; --n-300:#D9D5CD; --n-400:#B6B1A8; --n-500:#8C877E;
  --n-600:#6B665E; --n-700:#4A463F; --n-800:#2A2722; --n-900:#16140F;
  /* elevation */
  --sh-xs:0 1px 2px rgba(28,24,18,.05);
  --sh-sm:0 1px 3px rgba(28,24,18,.06), 0 1px 2px rgba(28,24,18,.04);
  --sh-md:0 4px 12px rgba(28,24,18,.07), 0 2px 4px rgba(28,24,18,.04);
  --sh-lg:0 12px 32px rgba(28,24,18,.10), 0 4px 8px rgba(28,24,18,.05);
  --sh-xl:0 28px 64px rgba(20,16,10,.18);
  --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:24px;
  --ring: 0 0 0 3px rgba(255,130,32,.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--aim-font);
  color:var(--n-900);
  background:var(--n-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14.5px; line-height:1.5; letter-spacing:-0.006em;
}
a{ color:inherit; text-decoration:none; }
.num,.tnum,table td,.tile .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv01" 1; }

/* ---------- App layout ---------- */
.app{ display:grid; grid-template-columns:256px 1fr; min-height:100vh; }

.sidebar{
  background:var(--n-900);
  background-image:radial-gradient(120% 60% at 50% -10%, rgba(255,130,32,.10), transparent 60%);
  color:#fff; padding:18px 14px; display:flex; flex-direction:column; gap:3px;
  position:sticky; top:0; height:100vh; border-right:1px solid rgba(255,255,255,.05);
}
.sidebar .logo{ display:flex; align-items:center; gap:11px; padding:8px 10px 20px; }
.sidebar .logo img{ height:26px; }
.sidebar .logo .sub{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--n-500); font-weight:600; }
.nav-group-label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#5d584f; margin:18px 12px 6px; font-weight:700; }
.nav-item{
  display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--r-sm);
  color:#b9b4ab; font-size:14px; font-weight:500; cursor:pointer; transition:all .14s ease; position:relative;
}
.nav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
.nav-item.active{ background:rgba(255,255,255,.07); color:#fff; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.nav-item.active::before{ content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--aim-brand),var(--aim-brand-deep)); }
.nav-item.active svg{ stroke:var(--aim-brand); }
.nav-item svg{ width:18px; height:18px; stroke:currentColor; flex:none; opacity:.92; }
.nav-item .count{ margin-left:auto; font-size:11px; font-weight:700; background:rgba(255,130,32,.16); color:var(--aim-brand); padding:2px 8px; border-radius:20px; }
.nav-spacer{ flex:1; }
.nav-user{ display:flex; align-items:center; gap:11px; padding:12px 8px 4px; border-top:1px solid rgba(255,255,255,.07); margin-top:8px; }
.nav-user .avatar{ width:34px; height:34px; border-radius:10px; background:linear-gradient(140deg,var(--aim-brand),var(--aim-brand-deep)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; box-shadow:var(--sh-sm); }
.nav-user .meta{ font-size:12.5px; line-height:1.3; } .nav-user .meta b{ display:block; color:#fff; font-weight:600; } .nav-user .meta span{ color:var(--n-500); font-size:11.5px; }

/* ---------- Main ---------- */
.main{ padding:0; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:18px 34px; background:rgba(251,250,248,.82); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--n-200); position:sticky; top:0; z-index:5; }
.topbar h1{ font-size:23px; font-weight:800; margin:0; letter-spacing:-0.022em; }
.topbar .crumbs{ font-size:12px; color:var(--n-500); margin-bottom:4px; font-weight:500; letter-spacing:0; }
.topbar .actions{ display:flex; gap:10px; align-items:center; }
.content{ padding:28px 34px 56px; max-width:1380px; }

/* search + buttons */
.search{ display:flex; align-items:center; gap:9px; background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-sm); padding:9px 13px; width:300px; box-shadow:var(--sh-xs); transition:.14s; }
.search:focus-within{ border-color:var(--aim-brand); box-shadow:var(--ring); }
.search input{ border:0; background:transparent; outline:0; font-family:inherit; font-size:14px; width:100%; }
.search svg{ width:16px; height:16px; stroke:var(--n-400); }
.btn{ display:inline-flex; align-items:center; gap:8px; border:0; border-radius:var(--r-sm); padding:10px 16px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .14s ease; letter-spacing:-0.01em; }
.btn svg{ width:16px; height:16px; stroke:currentColor; }
.btn.primary{ background:linear-gradient(180deg,#FF8C36,var(--aim-brand)); color:#fff; box-shadow:0 1px 2px rgba(224,112,26,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.primary:hover{ filter:brightness(1.04); transform:translateY(-1px); box-shadow:0 4px 12px rgba(224,112,26,.32); }
.btn.dark{ background:var(--n-900); color:#fff; box-shadow:var(--sh-sm); } .btn.dark svg{ stroke:#fff; } .btn.dark:hover{ background:#000; transform:translateY(-1px); }
.btn.ghost{ background:var(--n-0); border:1px solid var(--n-300); color:var(--n-800); box-shadow:var(--sh-xs); } .btn.ghost:hover{ border-color:var(--n-400); background:var(--n-25); }

/* ---------- Stat tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.tile{ background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg); padding:18px 18px 16px; position:relative; overflow:hidden; box-shadow:var(--sh-sm); transition:.16s; }
.tile:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); }
.tile .lab{ font-size:11.5px; letter-spacing:.02em; color:var(--n-600); display:flex; align-items:center; gap:8px; font-weight:600; }
.tile .lab .ic{ width:26px; height:26px; border-radius:8px; background:var(--n-100); display:grid; place-items:center; flex:none; }
.tile .lab .ic svg{ width:14px; height:14px; stroke:var(--n-700); }
.tile .num{ font-size:36px; font-weight:800; margin-top:12px; line-height:1; letter-spacing:-0.03em; }
.tile .foot{ display:flex; align-items:center; gap:8px; margin-top:11px; font-size:12px; color:var(--n-500); }
.tile .spark{ position:absolute; right:14px; bottom:14px; opacity:.9; }
.trend{ display:inline-flex; align-items:center; gap:3px; font-weight:700; font-size:11.5px; padding:2px 7px; border-radius:20px; }
.trend.up{ color:#15803D; background:#E7F6EC; } .trend.down{ color:#B91C1C; background:#FCEBEA; } .trend.flat{ color:var(--n-600); background:var(--n-100); }
.tile.accent .ic{ background:#FFF1E6; } .tile.accent .ic svg{ stroke:var(--aim-brand-deep); } .tile.accent .num{ color:var(--aim-brand); }
.tile.danger .ic{ background:#FCEBEA; } .tile.danger .ic svg{ stroke:#DC2626; } .tile.danger .num{ color:#DC2626; }

/* ---------- Panels ---------- */
.panel{ background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg); margin-bottom:22px; overflow:hidden; box-shadow:var(--sh-sm); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:17px 22px; border-bottom:1px solid var(--n-100); }
.panel-head h2{ font-size:15px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px; letter-spacing:-0.015em; }
.panel-head h2 svg{ width:17px; height:17px; stroke:var(--n-700); }
.panel-head .link{ font-size:13px; color:var(--n-500); font-weight:600; cursor:pointer; transition:.12s; display:inline-flex; align-items:center; gap:4px; }
.panel-head .link:hover{ color:var(--aim-brand-deep); }
.panel-body{ padding:6px 0; }
.grid-2{ display:grid; grid-template-columns:1.45fr 1fr; gap:22px; align-items:start; }

/* ---------- Tables ---------- */
table.t{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
table.t th{ text-align:left; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--n-500); font-weight:700; padding:11px 22px; border-bottom:1px solid var(--n-100); }
table.t td{ padding:13px 22px; border-bottom:1px solid var(--n-100); vertical-align:middle; }
table.t tr:last-child td{ border-bottom:0; }
table.t tbody tr{ transition:.1s; }
table.t tr.click{ cursor:pointer; }
table.t tr.click:hover td{ background:var(--n-25); }
table.t tr.click:hover td:first-child{ box-shadow:inset 3px 0 0 var(--aim-brand); }
.person{ display:flex; align-items:center; gap:12px; }
.person .avatar{ width:36px; height:36px; border-radius:10px; background:var(--n-100); color:var(--n-700); display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; box-shadow:inset 0 0 0 1px var(--n-200); }
.person b{ font-weight:600; letter-spacing:-0.01em; } .person small{ display:block; color:var(--n-500); font-size:12px; margin-top:1px; }

/* ---------- RAG badges ---------- */
.rag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:8px; white-space:nowrap; letter-spacing:-0.01em; }
.rag::before{ content:""; width:6px; height:6px; border-radius:50%; }
.rag.green{ background:#E9F7EE; color:#15803D; } .rag.green::before{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.15); }
.rag.amber{ background:#FEF4E6; color:#B45309; } .rag.amber::before{ background:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.15); }
.rag.red{ background:#FCECEB; color:#B91C1C; } .rag.red::before{ background:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.15); }
.rag.grey{ background:var(--n-100); color:var(--n-600); } .rag.grey::before{ background:var(--n-400); }
.rag.blue{ background:#E9F0FE; color:#1D4ED8; } .rag.blue::before{ background:#3B82F6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:7px; background:var(--n-100); color:var(--n-700); }

/* ---------- Donut ---------- */
.donut{ --p:72; width:132px; height:132px; border-radius:50%; position:relative;
  background:conic-gradient(#22C55E 0 calc(var(--p)*1%), #F59E0B calc(var(--p)*1%) 90%, #EF4444 90% 100%); }
.donut::after{ content:""; position:absolute; inset:13px; border-radius:50%; background:var(--n-0); box-shadow:inset 0 0 0 1px var(--n-100); }
.donut .mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.donut .mid b{ font-size:26px; font-weight:800; letter-spacing:-0.03em; } .donut .mid span{ font-size:10.5px; color:var(--n-500); text-transform:uppercase; letter-spacing:.08em; font-weight:600; }

/* ---------- Phone frame ---------- */
.phone-stage{ background:radial-gradient(140% 90% at 50% 0%, #26221c, #131210 70%); min-height:100vh; display:flex; flex-wrap:wrap; gap:38px; justify-content:center; align-items:flex-start; padding:48px 24px 64px; }
.phone-stage .stage-head{ width:100%; text-align:center; color:#fff; margin-bottom:8px; }
.phone-stage .stage-head h1{ font-size:25px; margin:0 0 8px; font-weight:800; letter-spacing:-0.02em; }
.phone-stage .stage-head p{ color:#a39d94; margin:0 auto; font-size:14.5px; max-width:640px; line-height:1.55; }
.phone{ width:366px; background:linear-gradient(160deg,#2c2926,#0c0b0a); border-radius:46px; padding:11px; box-shadow:var(--sh-xl), inset 0 0 0 1px rgba(255,255,255,.06); }
.phone .screen{ background:var(--n-50); border-radius:36px; overflow:hidden; height:752px; overflow-y:auto; position:relative; }
.phone .screen::-webkit-scrollbar{ width:0; }
.phone .notch{ height:30px; display:flex; align-items:center; justify-content:center; }
.phone .notch::after{ content:""; width:120px; height:7px; border-radius:7px; background:#000; opacity:.9; }
.cap{ width:100%; text-align:center; color:#b5afa6; font-size:13px; margin-top:14px; font-weight:600; letter-spacing:-0.01em; }

/* mobile app bits */
.m-head{ background:linear-gradient(150deg,#16140F 0%, #3a2613 55%, var(--aim-brand-deep) 125%); color:#fff; padding:22px 20px 24px; position:relative; }
.m-head::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 50% at 85% 0%, rgba(255,130,32,.22), transparent 60%); pointer-events:none; }
.m-head .row{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.m-head img{ height:23px; } .m-head .bell{ position:relative; }
.m-head .bell .dot{ position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:var(--aim-brand); border:2px solid #1a140d; }
.m-head h2{ font-size:23px; margin:20px 0 3px; font-weight:800; letter-spacing:-0.02em; position:relative; z-index:1; }
.m-head p{ margin:0; color:#d6d0c6; font-size:13.5px; position:relative; z-index:1; }
.m-body{ padding:16px; }
.m-card{ background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-md); padding:16px; margin-bottom:13px; box-shadow:var(--sh-sm); }
.m-card h3{ font-size:14px; margin:0 0 4px; font-weight:700; display:flex; align-items:center; gap:8px; letter-spacing:-0.01em; }
.m-card h3 svg{ width:17px; height:17px; stroke:var(--n-800); }
.m-card .muted{ color:var(--n-500); font-size:13px; }
.m-tile{ display:flex; align-items:center; gap:13px; }
.m-tile .ico{ width:42px; height:42px; border-radius:12px; background:#FFF1E6; display:grid; place-items:center; flex:none; box-shadow:inset 0 0 0 1px rgba(224,112,26,.12); }
.m-tile .ico svg{ width:20px; height:20px; stroke:var(--aim-brand-deep); }
.m-list-item{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--n-100); }
.m-list-item:last-child{ border-bottom:0; }
.m-btn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; border-radius:var(--r-md); padding:14px; font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; background:linear-gradient(180deg,#FF8C36,var(--aim-brand)); color:#fff; box-shadow:0 2px 8px rgba(224,112,26,.3), inset 0 1px 0 rgba(255,255,255,.25); letter-spacing:-0.01em; transition:.14s; }
.m-btn:hover{ filter:brightness(1.04); }
.m-btn svg{ width:18px; height:18px; stroke:#fff; }
.m-btn.ghost{ background:var(--n-0); border:1.5px solid var(--n-300); color:var(--n-800); box-shadow:var(--sh-xs); } .m-btn.ghost svg{ stroke:var(--n-800); }
.m-btn.dark{ background:var(--n-900); color:#fff; box-shadow:var(--sh-sm); } .m-btn.dark svg{ stroke:#fff; }

/* progress */
.steps{ display:flex; gap:5px; margin:14px 0 4px; }
.steps .s{ flex:1; height:5px; border-radius:5px; background:var(--n-200); }
.steps .s.done{ background:linear-gradient(90deg,var(--aim-brand),var(--aim-brand-deep)); }
.steps .s.now{ background:var(--aim-brand-deep); box-shadow:0 0 0 3px rgba(255,130,32,.18); }

/* form bits */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:7px; color:var(--n-700); letter-spacing:-0.01em; }
.field input,.field select{ width:100%; border:1.5px solid var(--n-200); border-radius:11px; padding:12px 13px; font-family:inherit; font-size:15px; background:var(--n-0); transition:.14s; box-shadow:var(--sh-xs); }
.field input:focus,.field select:focus{ outline:0; border-color:var(--aim-brand); box-shadow:var(--ring); }
.field .hint{ font-size:11.5px; color:var(--n-500); margin-top:6px; }
.upload{ border:1.6px dashed var(--n-300); border-radius:12px; padding:18px; text-align:center; color:var(--n-500); font-size:13px; transition:.14s; }
.upload svg{ width:24px; height:24px; stroke:var(--n-500); margin-bottom:6px; }
.upload.done{ border-style:solid; border-color:#34C36A; background:#F1FBF5; color:#15803D; }

/* sign pad */
.sigpad{ border:1.6px dashed var(--n-300); border-radius:14px; height:152px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--n-25),var(--n-0)); position:relative; box-shadow:inset 0 1px 3px rgba(0,0,0,.03); }
.sigpad .saved{ font-family:'Segoe Script','Brush Script MT',cursive; font-size:36px; color:#1a1a1a; transform:rotate(-3deg); }
.sigpad .tag{ position:absolute; bottom:9px; right:13px; font-size:10px; color:var(--n-400); }

/* tabs */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--n-200); padding:0 34px; background:var(--n-0); }
.tabs .tab{ padding:14px 16px; font-size:13.5px; font-weight:600; color:var(--n-500); border-bottom:2.5px solid transparent; cursor:pointer; transition:.12s; letter-spacing:-0.01em; }
.tabs .tab:hover{ color:var(--n-800); }
.tabs .tab.active{ color:var(--n-900); border-bottom-color:var(--aim-brand); font-weight:700; }

/* misc */
.restricted{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#B45309; background:#FEF4E6; padding:3px 8px; border-radius:6px; }
.restricted svg{ width:11px; height:11px; stroke:#B45309; }
.kv{ display:grid; grid-template-columns:152px 1fr; gap:7px 16px; font-size:14px; padding:5px 0; }
.kv .k{ color:var(--n-500); } .kv .v{ font-weight:500; }
.proto-banner{ background:var(--n-900); color:#fff; text-align:center; font-size:11.5px; padding:7px; letter-spacing:.02em; font-weight:500; }
.proto-banner b{ color:var(--aim-brand); }
.timeline-bar{ height:10px; border-radius:10px; background:var(--n-100); overflow:hidden; display:flex; }
.timeline-bar i{ display:block; height:100%; }
.header-card{ background:var(--n-0); border-bottom:1px solid var(--n-200); padding:24px 34px; display:flex; align-items:center; gap:20px; }

/* ---------- Employee self-service portal (/me) ---------- */
.emp{ max-width:460px; margin:0 auto; min-height:100vh; background:var(--n-50); box-shadow:var(--sh-lg); position:relative; }
.emp .m-head{ border-radius:0; }
.emp .m-head .row a{ text-decoration:none; }
.emp-sub{ background:var(--n-0); padding:15px 16px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--n-200); position:sticky; top:0; z-index:6; }
.emp-sub .back{ display:grid; place-items:center; color:var(--n-900); width:26px; height:26px; cursor:pointer; }
.emp-sub b{ font-size:16px; letter-spacing:-0.01em; }
.emp-sub .step{ margin-left:auto; color:var(--n-500); font-size:13px; font-weight:600; }
.emp-group{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--n-500); font-weight:700; margin:20px 2px 10px; display:flex; align-items:center; gap:8px; }
.emp .m-list-item{ text-decoration:none; }
.emp .m-list-item:hover{ background:var(--n-25); }
.setup-row{ display:flex; align-items:center; gap:11px; padding:11px 0; border-top:1px solid var(--n-100); text-decoration:none; color:inherit; }
.setup-row .lbl{ flex:1; font-size:13.5px; font-weight:500; }
.setup-row.done .lbl{ color:var(--n-500); text-decoration:line-through; text-decoration-color:var(--n-300); }
.setup-row .tickbox{ width:22px; height:22px; border-radius:7px; border:1.5px solid var(--n-300); display:grid; place-items:center; flex:none; color:#fff; }
.setup-row.done .tickbox{ background:#22C55E; border-color:#22C55E; }
.setup-row.done .tickbox svg{ width:13px; height:13px; stroke:#fff; }
.setup-row .tickbox.warn{ border-color:#F3C9A0; background:#FEF4E6; color:#B45309; font-weight:800; font-size:13px; }
.read-ack{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--n-700); margin:14px 0; cursor:pointer; line-height:1.4; }
.read-ack input{ width:19px; height:19px; margin-top:1px; flex:none; accent-color:var(--aim-brand); }
.sig-canvas{ width:100%; height:170px; border:1.6px dashed var(--n-300); border-radius:14px; background:linear-gradient(180deg,var(--n-25),var(--n-0)); touch-action:none; display:block; }
.doc-frame{ width:100%; height:62vh; border:1px solid var(--n-200); border-radius:12px; background:#fff; margin:14px 0; box-shadow:var(--sh-xs); }

/* ---------- Collapsible holiday header (worker record) ---------- */
.hol-collapse{ background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg); box-shadow:var(--sh-sm); overflow:hidden; }
.hol-collapse > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:14px; }
.hol-collapse > summary::-webkit-details-marker{ display:none; }
.hol-collapse summary .hc-left{ display:flex; align-items:center; gap:10px; }
.hol-collapse summary .hc-left svg{ width:17px; height:17px; stroke:var(--n-700); }
.hol-collapse summary .hc-left .muted{ color:var(--n-500); font-weight:600; }
.hol-collapse summary .hc-right{ display:flex; align-items:center; gap:10px; color:var(--n-600); font-size:13px; font-variant-numeric:tabular-nums; }
.hol-collapse summary .hc-right b{ color:var(--n-900); }
.hol-collapse summary .chev{ width:18px; height:18px; stroke:var(--n-400); transition:transform .18s ease; }
.hol-collapse[open] summary .chev{ transform:rotate(180deg); }
.hol-collapse .hc-body{ padding:4px 20px 18px; border-top:1px solid var(--n-100); }
.hc-stats{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.hc-stat{ flex:1; min-width:92px; text-align:center; padding:12px 8px; background:var(--n-50); border-radius:12px; cursor:help; transition:.12s; position:relative; }
.hc-tip{ display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:20;
  background:var(--n-900); color:#fff; font-size:11.5px; line-height:1.5; text-align:left; font-weight:500;
  padding:9px 12px; border-radius:10px; width:max-content; max-width:260px; box-shadow:var(--sh-lg); }
.hc-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--n-900); }
.hc-tip .hc-tip-h{ font-weight:700; color:var(--aim-brand); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:3px; }
.hc-stat:hover .hc-tip{ display:block; }
.hc-stat:hover{ background:var(--n-100); }

/* Collapsible embedded timesheet (employee portal) */
.ts-card{ border:1px solid var(--n-200); border-radius:14px; overflow:hidden; background:var(--n-0); box-shadow:var(--sh-sm); }
.ts-head{ display:flex; align-items:center; gap:12px; width:100%; border:0; background:none; padding:15px 16px; cursor:pointer; font-family:inherit; }
.ts-head .ts-ico{ width:38px; height:38px; border-radius:11px; background:#FFF1E6; display:grid; place-items:center; flex:none; }
.ts-head .ts-ico svg{ width:19px; height:19px; stroke:var(--aim-brand-deep); }
.ts-head b{ font-size:15px; letter-spacing:-.01em; } .ts-sub{ font-size:12.5px; color:var(--n-500); margin-top:1px; }
.ts-chev{ width:20px; height:20px; stroke:var(--n-400); flex:none; transition:transform .2s; }
.ts-head.open{ background:#FFF8F1; } .ts-head.open .ts-chev{ transform:rotate(180deg); }
.ts-body{ border-top:1px solid var(--n-200); }
.ts-frame{ width:100%; height:72vh; border:0; display:block; background:#fff; }
.hc-stat.big:hover{ background:#FFE7D2; }

/* Holiday policy note (booking page) — reuses the collapsible styling */
.hol-policy{ background:#FFF8F1; border:1px solid #F3C9A0; border-radius:var(--r-lg); overflow:hidden; }
.hol-policy > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; padding:13px 18px; }
.hol-policy > summary::-webkit-details-marker{ display:none; }
.hol-policy .hc-left{ display:flex; align-items:center; gap:9px; font-size:14px; }
.hol-policy .hc-left svg{ width:17px; height:17px; stroke:var(--aim-brand-deep); }
.hol-policy .hc-left .muted{ color:var(--n-500); font-weight:600; }
.hol-policy .chev{ width:18px; height:18px; stroke:var(--n-400); transition:transform .18s ease; }
.hol-policy[open] summary .chev{ transform:rotate(180deg); }
.hol-policy .hc-body{ padding:2px 18px 14px; }

/* Google Places autocomplete element */
.addr-ac{ display:block; width:100%; }
gmp-place-autocomplete{ width:100%; }
.hc-stat.big{ background:#FFF1E6; }
.hc-stat b{ display:block; font-size:24px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.hc-stat.big b{ color:var(--aim-brand-deep); }
.hc-stat span{ font-size:11px; color:var(--n-500); margin-top:2px; display:block; }