.sf-portal-scope{
  --ink:#0E1626; --ink-soft:#3A4358;
  --paper:#F5F6F8; --card:#FFFFFF;
  --line:#E4E7ED;
  --teal:#0C8C86; --teal-dark:#076661; --teal-soft:#E3F4F2;
  --amber:#C87E11; --amber-soft:#FDF1DD;
  --green:#1C8A4B; --green-soft:#E4F5EA;
  --red:#C1382E; --red-soft:#FCE9E7;
  --slate:#5A6478; --slate-soft:#EEF0F3;
  --sidebar:#0E1626; --sidebar-soft:#8891A6;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper); color:var(--ink);
  border-radius:14px; overflow:auto; box-shadow:0 1px 4px rgba(0,0,0,0.08);
}
.sf-portal-scope *{box-sizing:border-box;}
.sf-portal-scope h1,.sf-portal-scope h2,.sf-portal-scope h3{font-family:'Space Grotesk',sans-serif;}
.sf-portal-scope button{font-family:inherit;cursor:pointer;}
.sf-portal-scope input,.sf-portal-scope select,.sf-portal-scope textarea{font-family:inherit;}
.sf-portal-scope a{color:inherit;}
.sf-loading{padding:60px;text-align:center;color:var(--slate);}

/* login */
.sf-login-wrap{min-height:520px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 15% 20%, rgba(12,140,134,0.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(200,126,17,0.10), transparent 45%), var(--sidebar);
  padding:24px;}
.sf-login-card{width:100%;max-width:820px;background:var(--card);border-radius:18px;display:grid;
  grid-template-columns:1.1fr 1fr;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.35);}
.sf-login-side{background:linear-gradient(160deg,#0E1626 0%,#132038 60%,#0C8C86 160%);color:#fff;
  padding:36px 32px;display:flex;flex-direction:column;justify-content:center;}
.sf-login-side .sf-mark{display:flex;align-items:center;gap:9px;margin-bottom:18px;}
.sf-login-side .sf-dot{width:11px;height:11px;border-radius:3px;background:var(--teal);box-shadow:0 0 0 4px rgba(12,140,134,0.28);}
.sf-login-side .sf-mark span{font-weight:700;font-size:19px;}
.sf-login-side h1{font-size:24px;line-height:1.3;margin:0 0 10px;font-weight:600;}
.sf-login-side p{color:#B7C0D4;font-size:13.5px;line-height:1.6;max-width:32ch;}
.sf-login-form{padding:36px 32px;}
.sf-login-form h2{font-size:18px;margin:0 0 6px;}
.sf-hint{font-size:12.5px;color:var(--slate);margin-bottom:18px;}
.sf-field{margin-bottom:14px;}
.sf-field-checkbox{margin-bottom:8px;font-size:13px;}
.sf-field-checkbox label{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--ink);}
.sf-field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.sf-field select,.sf-field input,.sf-field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;font-size:13.5px;background:#fff;color:var(--ink);}
.sf-field select:focus,.sf-field input:focus,.sf-field textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal);}
.sf-link-btn{background:none;border:none;color:var(--teal-dark);font-size:12.5px;font-weight:600;padding:0;cursor:pointer;}
.sf-error{background:var(--red-soft) !important;color:var(--red) !important;padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}
.sf-success{background:var(--green-soft);color:var(--green);padding:9px 12px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}

/* buttons */
.sf-btn{border:none;border-radius:9px;padding:10px 16px;font-size:13.5px;font-weight:600;display:inline-flex;
  align-items:center;gap:7px;}
.sf-btn-primary{background:var(--ink);color:#fff;}
.sf-btn-primary:hover{background:#000;}
.sf-btn-teal{background:#0C8C86;color:#fff;}
.sf-btn-teal:hover{background:#076661;}
.sf-btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line);}
.sf-btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.sf-btn-danger{background:var(--red-soft);color:var(--red);}
.sf-btn-block{width:100%;justify-content:center;}
.sf-btn-sm{padding:6px 10px;font-size:12px;border-radius:7px;}
.sf-btn[disabled]{opacity:.55;cursor:default;}

/* app shell — responsive: full desktop layout above 880px, and below that the sidebar becomes
   a slide-out drawer (toggled by a hamburger button in a mobile topbar) so the main content
   always has the full screen width to itself, and nothing needs to scroll sideways to be used. */
.sf-app{display:flex;min-height:600px;position:relative;}
.sf-mobile-topbar{display:none;}
.sf-sidebar-backdrop{display:none;}
/* Mobile quick navigation: a role-aware bottom bar complements the full sidebar.
   It is deliberately presentation-only; the existing server/API permission checks remain
   authoritative for every destination. */
.sf-bottom-nav{display:none;}

.sf-sidebar{background:var(--sidebar);color:#fff;width:220px;flex:0 0 220px;z-index:2;}
.sf-sidebar-inner{padding:20px 14px;position:sticky;top:0;max-height:100vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;}
.sf-sidebar .sf-mark{display:flex;align-items:center;gap:9px;padding:0 6px 18px;}
.sf-sidebar .sf-dot{width:10px;height:10px;border-radius:3px;background:var(--teal);}
.sf-sidebar .sf-mark span{font-weight:700;font-size:16px;}
.sf-nav-group{margin-bottom:16px;}
.sf-nav-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:var(--sidebar-soft);
  padding:0 10px;margin-bottom:6px;font-weight:600;}
.sf-nav-item{display:flex;align-items:center;gap:9px;padding:10px;border-radius:8px;font-size:13px;
  color:#D3D9E6;font-weight:500;margin-bottom:2px;cursor:pointer;white-space:nowrap;min-height:38px;}
.sf-nav-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
.sf-nav-item.active{background:var(--teal);color:#fff;}
.sf-nav-badge{margin-left:auto;background:#D32F2F;color:#fff;font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:10px;min-width:18px;text-align:center;}
.sf-sidebar-foot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.1);}
.sf-who{padding:10px;border-radius:9px;background:rgba(255,255,255,0.05);}
.sf-who .sf-name{font-size:12.5px;font-weight:600;color:#fff;}
.sf-who .sf-role{font-size:10.5px;color:var(--sidebar-soft);margin-top:2px;}
.sf-who .sf-role span{background:var(--teal);color:#fff;padding:1.5px 7px;border-radius:20px;font-size:9.5px;
  font-weight:700;text-transform:uppercase;}
.sf-foot-link{display:block;margin-top:8px;font-size:12px;color:var(--sidebar-soft);text-decoration:none;
  padding:8px 10px;cursor:pointer;background:none;border:none;text-align:left;width:100%;white-space:nowrap;}
.sf-foot-link:hover{color:#fff;}

.sf-main{padding:22px 26px 50px;max-width:1300px;flex:1 1 auto;min-width:0;width:100%;}
.sf-topbar{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.sf-topbar h1{font-size:20px;margin:0;}
.sf-topbar .sf-sub{color:var(--slate);font-size:12.5px;margin-top:3px;}

.sf-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px;}
.sf-card h3{font-size:14.5px;margin:0 0 12px;}
@media (min-width:881px){
  .sf-card{box-shadow:0 1px 3px rgba(15,25,40,0.04);transition:box-shadow 0.15s ease;}
  .sf-card:hover{box-shadow:0 4px 16px rgba(15,25,40,0.07);}
}
.sf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sf-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

/* ---- mobile / tablet (≤880px): sidebar becomes an off-canvas drawer ---- */
@media (max-width:880px){
  .sf-app{display:block;}
.sf-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;
    min-height:64px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,0.98);border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(14,22,38,0.10);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);align-items:stretch;justify-content:space-around;
    gap:3px;}
  .sf-bottom-nav-item{flex:1 1 0;min-width:0;max-width:150px;border:0;background:transparent;
    color:#6B7280;border-radius:10px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:5px 3px;line-height:1;touch-action:manipulation;}
  .sf-bottom-nav-item:active{background:rgba(12,140,134,0.08);}
  .sf-bottom-nav-item.active{color:var(--teal-dark);font-weight:700;}
  .sf-bottom-nav-icon{font-size:20px;line-height:1.05;font-weight:500;}
  .sf-bottom-nav-label{font-size:10.5px;line-height:1.15;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:100%;}
  .sf-bottom-nav-menu{color:var(--ink-soft);}
  .sf-mobile-topbar{display:flex;align-items:center;gap:12px;background:var(--sidebar);color:#fff;
    padding:14px 16px;position:sticky;top:0;z-index:5;}
  .sf-mobile-topbar .sf-hamburger{background:none;border:none;color:#fff;font-size:22px;line-height:1;
    padding:4px 6px;cursor:pointer;}
  .sf-mobile-topbar .sf-mark{display:flex;align-items:center;gap:8px;}
  .sf-mobile-topbar .sf-dot{width:9px;height:9px;border-radius:3px;background:var(--teal);}
  .sf-mobile-topbar span{font-weight:700;font-size:15px;}
  .sf-sidebar{position:fixed;top:0;left:0;height:100vh;max-height:100vh;z-index:20;width:250px;flex:none;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 30px rgba(0,0,0,0.3);}
  .sf-sidebar-inner{position:static;height:100%;max-height:none;overscroll-behavior:contain;}
  .sf-app.sf-sidebar-open .sf-sidebar{transform:translateX(0);}
  .sf-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(14,22,38,0.5);z-index:19;}
  .sf-app.sf-sidebar-open .sf-sidebar-backdrop{display:block;}
  .sf-main{padding:16px 14px calc(104px + env(safe-area-inset-bottom));max-width:100%;}
  .sf-grid-2,.sf-grid-4{grid-template-columns:1fr;}
  .sf-form-row{grid-template-columns:1fr !important;}
  .sf-topbar h1{font-size:18px;}
  .sf-login-card{grid-template-columns:1fr !important;max-width:420px;}
  .sf-login-side{padding:26px 22px !important;}
  .sf-login-form{padding:26px 22px !important;}
  .sf-btn{padding:11px 16px;}
  .sf-modal{max-width:92vw;padding:18px;}
}
@media (max-width:480px){
  .sf-card{padding:14px;}
  .sf-portal-scope table{font-size:11.5px;}
  .sf-portal-scope td,.sf-portal-scope th{padding:7px 6px;}
}

.sf-stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;}
.sf-stat .sf-num{font-family:'Space Grotesk';font-size:24px;font-weight:700;}
.sf-stat .sf-lbl{font-size:11.5px;color:var(--slate);margin-top:2px;}

.sf-portal-scope table{width:100%;border-collapse:collapse;font-size:12.5px;}
.sf-portal-scope th{text-align:left;color:var(--slate);font-weight:600;font-size:11px;text-transform:uppercase;
  letter-spacing:0.03em;padding:8px 9px;border-bottom:1px solid var(--line);}
.sf-portal-scope td{padding:9px;border-bottom:1px solid var(--line);vertical-align:middle;}
.sf-portal-scope tr:last-child td{border-bottom:none;}
@media (min-width:881px){
  .sf-portal-scope tbody tr:hover td{background:rgba(15,25,40,0.025);}
}
.sf-table-wrap{overflow-x:auto;scrollbar-width:thin;}
.sf-table-wrap::-webkit-scrollbar{height:8px;}
.sf-table-wrap::-webkit-scrollbar-thumb{background:#c7cdd3;border-radius:4px;}
.sf-table-wrap::-webkit-scrollbar-thumb:hover{background:#a8b0b8;}
@media (min-width:881px){
  .sf-table-wrap{cursor:grab;}
  .sf-table-wrap.sf-dragging{cursor:grabbing;user-select:none;}
  .sf-table-wrap.sf-dragging *{user-select:none;}
}
.sf-tag{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10.5px;font-weight:700;}
.sf-teal{background:var(--teal-soft);color:var(--teal-dark);}
.sf-amber{background:var(--amber-soft);color:var(--amber);}
.sf-green{background:var(--green-soft);color:var(--green);}
.sf-red{background:var(--red-soft);color:var(--red);}
.sf-qty-low{color:var(--red);font-weight:700;}
/* Forces the Analytics/Income chart to white-background/black-text regardless of any theme
   stylesheet that might otherwise win on specificity over the SVG's own inline styles. */
.sf-chart-wrap, .sf-chart-wrap svg{background:#ffffff !important;}
.sf-chart-wrap svg rect.sf-chart-bg{fill:#ffffff !important;}
.sf-chart-wrap svg circle.sf-chart-bar{fill:#1f7a5c !important;}
.sf-chart-wrap svg path.sf-chart-line{stroke:#1f7a5c !important;}
.sf-chart-wrap svg text{fill:#000000 !important;}
.sf-chart-wrap svg line{stroke:#000000 !important;}
.sf-slate{background:var(--slate-soft);color:var(--slate);}
.sf-order-id{font-family:monospace;font-weight:600;font-size:11.5px;background:var(--ink);color:#fff;
  padding:3px 7px;border-radius:5px;}
.sf-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;}
.sf-tab-btn{background:none;border:none;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--slate);
  border-bottom:2px solid transparent;}
.sf-tab-btn.active{color:var(--ink);border-bottom-color:var(--teal);}
.sf-empty{padding:26px 10px;text-align:center;color:var(--slate);font-size:12.5px;}
.sf-empty b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:4px;}
.sf-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;}
.sf-actions-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.sf-note{font-size:11.5px;color:var(--slate);margin-top:6px;}
.sf-divider{height:1px;background:var(--line);margin:16px 0;}
.sf-small-muted{font-size:11.5px;color:var(--slate);}
.sf-toast{position:fixed;bottom:22px;right:22px;background:#111417;color:#fff;padding:11px 16px;
  border-radius:10px;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,0.25);z-index:9999;max-width:320px;}
.sf-wa-parts-panel{position:fixed;bottom:22px;right:22px;background:#111417;color:#fff;padding:14px 16px;
  border-radius:10px;font-size:12.5px;box-shadow:0 12px 30px rgba(0,0,0,0.25);z-index:9999;max-width:320px;}
.sf-wa-parts-panel .sf-wa-parts-title{font-weight:600;margin-bottom:8px;}
.sf-wa-parts-panel .sf-wa-parts-btn{display:block;width:100%;text-align:left;background:#22282f;color:#fff;
  border:none;border-radius:6px;padding:8px 10px;margin-bottom:6px;cursor:pointer;font-size:12.5px;}
.sf-wa-parts-panel .sf-wa-parts-btn:disabled{background:#1a3a2a;color:#8fd4ab;cursor:default;}
.sf-wa-parts-panel .sf-wa-parts-close{background:none;border:none;color:#9aa4b0;font-size:11.5px;
  cursor:pointer;padding:2px 0;margin-top:2px;}
.sf-portal-notice{padding:16px;background:#FDF1DD;border-radius:10px;color:#7a4e0a;}
.sf-modal-backdrop{position:fixed;inset:0;background:rgba(14,22,38,0.5);display:flex;align-items:center;
  justify-content:center;z-index:9998;padding:20px;}
.sf-modal{background:#fff;border-radius:14px;padding:24px;max-width:400px;width:100%;}
.sf-confirm-modal{max-width:440px;}
.sf-confirm-table{width:100%;border-collapse:collapse;margin:14px 0;}
.sf-confirm-table td{padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px;vertical-align:top;}
.sf-confirm-table tr:last-child td{border-bottom:none;}
.sf-confirm-label{color:var(--slate);white-space:nowrap;padding-right:16px;font-weight:600;}
.sf-confirm-value{text-align:right;word-break:break-word;}

/* Modern attendance workspace — inspired by contemporary time-tracking dashboards. */
.sf-att-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px;padding:5px;background:var(--slate-soft);border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%;}
.sf-att-tab{border:0;background:transparent;color:var(--slate);padding:10px 14px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;}
.sf-att-tab.active{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(15,25,40,.08);}
.sf-att-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:24px;border-radius:22px;background:linear-gradient(135deg,var(--teal) 0%,var(--teal-dark) 100%);color:#fff;margin-bottom:16px;box-shadow:0 18px 40px rgba(15,25,40,.16);}
.sf-att-hero-copy{max-width:680px}.sf-att-hero h2{margin:3px 0 7px;font-size:28px;letter-spacing:-.03em}.sf-att-hero p{margin:0;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55}.sf-att-clock-face{min-width:118px;height:118px;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}.sf-att-clock-face span{font-size:20px;font-weight:800}.sf-att-clock-face small{font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.6);margin-top:4px}
.sf-eyebrow{font-size:9px;font-weight:800;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}.sf-att-hero .sf-eyebrow{color:rgba(255,255,255,.58)}
.sf-att-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px}.sf-att-status-card,.sf-att-side,.sf-att-leave-card,.sf-att-policy-editor{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 28px rgba(15,25,40,.05)}
.sf-att-status-card{padding:22px;min-height:330px}.sf-att-status-card.is-active{border-color:rgba(31,122,92,.3);box-shadow:0 12px 34px rgba(31,122,92,.08)}.sf-att-status-top{display:flex;justify-content:space-between;align-items:center}.sf-att-bigtime{font-size:32px;font-weight:800;letter-spacing:-.04em;margin:28px 0 6px}.sf-att-actions{display:flex;gap:8px;margin-top:28px}.sf-att-primary{min-width:145px}.sf-att-clockin-zone{display:flex;justify-content:center;margin:24px 0 12px}.sf-att-clockin{width:154px;height:154px;border-radius:50%;border:9px solid var(--teal-soft);background:var(--teal);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(31,122,92,.25);cursor:pointer;transition:transform .18s,box-shadow .18s}.sf-att-clockin:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(31,122,92,.3)}.sf-att-clockin b{font-size:16px}.sf-att-clockin small{font-size:9px;opacity:.75;margin-top:4px}.sf-att-clockin-icon{font-size:24px;margin-bottom:3px}.sf-att-project{margin-top:8px}
.sf-att-side{padding:14px;display:flex;flex-direction:column;gap:8px}.sf-att-mini{padding:14px;border:1px solid var(--line);border-radius:13px;background:#fff}.sf-att-mini span{display:block;color:var(--slate);font-size:10px;margin-bottom:4px}.sf-att-mini b{font-size:13px}.sf-att-policy{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-radius:15px;margin:14px 0;border:1px solid var(--line);background:#fff}.sf-att-policy b{display:block;font-size:13px}.sf-att-policy small{display:block;color:var(--slate);font-size:11px;margin-top:4px}.sf-att-policy>span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.sf-att-policy.eligible{background:var(--green-soft);border-color:rgba(31,122,92,.18)}.sf-att-policy.eligible>span{color:var(--green)}.sf-att-policy.locked{background:#fff8ed;border-color:#fed7aa}.sf-att-policy.locked>span{color:#a65c00}
.sf-att-today{margin-top:14px}.sf-att-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sf-att-section-head h3{margin:3px 0 0;font-size:16px}.sf-att-timeline{display:flex;flex-direction:column;gap:0}.sf-att-event{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.sf-att-event:last-child{border-bottom:0}.sf-att-event-dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.sf-att-event-dot.late{background:#d97706;box-shadow:0 0 0 4px #fff1d6}.sf-att-event-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.sf-att-event-main>b{font-size:12px}.sf-att-event>strong{font-size:11px}.sf-att-badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.sf-att-badge.green{background:var(--green-soft);color:var(--green)}.sf-att-badge.amber{background:#fff1d6;color:#a65c00}.sf-att-badge.red{background:var(--red-soft);color:var(--red)}.sf-att-badge.slate{background:var(--slate-soft);color:var(--slate)}
.sf-att-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.sf-att-kpi{padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:16px}.sf-att-kpi span{display:block;color:var(--slate);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.sf-att-kpi b{display:block;font-size:23px;margin-top:4px;letter-spacing:-.03em}.sf-att-live-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sf-att-person{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}.sf-att-avatar{width:38px;height:38px;flex:none;border-radius:12px;background:var(--teal-soft);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;font-weight:800}.sf-att-person-main{min-width:0;flex:1}.sf-att-person-main>b,.sf-att-person-main>span{display:block}.sf-att-person-main>b{font-size:12px}.sf-att-person-main>span{margin-top:5px}.sf-att-person-meta{text-align:right}.sf-att-person-meta b{display:block;font-size:11px}.sf-att-person-meta small{display:block;color:var(--slate);font-size:9px;margin-top:4px}.sf-live-dot{color:#16a36f;font-size:10px;font-weight:800;letter-spacing:.05em}.sf-live-dot::first-letter{font-size:14px}
.sf-att-request-list{display:flex;flex-direction:column;gap:9px}.sf-att-request{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}.sf-att-request>div:first-child>b,.sf-att-request>div:first-child>span,.sf-att-request>div:first-child>small{display:block}.sf-att-request>div:first-child>b{font-size:13px}.sf-att-request>div:first-child>span{font-size:11px;color:var(--slate);margin-top:4px}.sf-att-request>div:first-child>small{font-size:10px;color:var(--slate);margin-top:5px}.sf-att-request>div:last-child{text-align:right}.sf-att-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sf-att-policy-editor{padding:14px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start}.sf-att-policy-editor-main>b,.sf-att-policy-editor-main>span,.sf-att-policy-editor-main>small{display:block}.sf-att-policy-editor-main>b{font-size:12px}.sf-att-policy-editor-main>span{font-size:10px;color:var(--slate);margin-top:2px}.sf-att-policy-editor-main select{margin:9px 0 6px;width:100%;font-size:11px}.sf-att-policy-editor-main small{font-size:9.5px;color:var(--slate);line-height:1.45}.sf-att-policy-head{margin-bottom:12px}.sf-att-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sf-att-settings-grid .sf-card:last-child{grid-column:1/-1}.sf-att-toggle-row{display:flex;gap:18px;flex-wrap:wrap}.sf-att-toggle-row label{font-size:11px;font-weight:600}.sf-face-modal{max-width:460px!important}.sf-face-head{display:flex;justify-content:space-between;align-items:flex-start}.sf-face-head h3{margin:3px 0 0}.sf-face-frame{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:#0b1119;margin:14px 0}.sf-face-frame video{width:100%;height:100%;object-fit:cover}.sf-face-guide{position:absolute;inset:16% 20%;border:2px dashed rgba(255,255,255,.7);border-radius:46% 46% 42% 42%;box-shadow:0 0 0 999px rgba(0,0,0,.16)}.sf-face-msg{padding:9px 11px;background:var(--slate-soft);border-radius:10px;font-size:10px;margin-bottom:10px}
@media(max-width:800px){.sf-att-grid,.sf-att-settings-grid,.sf-att-live-grid,.sf-att-policy-grid{grid-template-columns:1fr}.sf-att-side{display:grid;grid-template-columns:1fr 1fr}.sf-att-hero{padding:18px}.sf-att-hero h2{font-size:23px}.sf-att-clock-face{min-width:88px;height:88px}.sf-att-clock-face span{font-size:15px}.sf-att-policy-editor{grid-template-columns:auto 1fr}.sf-att-policy-editor>button{grid-column:2;justify-self:start}.sf-att-request{grid-template-columns:1fr}.sf-att-request>div:last-child{text-align:left}.sf-att-summary{grid-template-columns:1fr 1fr}.sf-att-summary .sf-att-kpi:last-child{grid-column:1/-1}.sf-att-tabs{width:100%;overflow:auto}.sf-att-tab{flex:0 0 auto}}
@media(max-width:480px){.sf-att-hero{align-items:flex-start}.sf-att-clock-face{min-width:76px;height:76px}.sf-att-clock-face span{font-size:12px}.sf-att-side{grid-template-columns:1fr}.sf-att-summary{grid-template-columns:1fr}.sf-att-summary .sf-att-kpi:last-child{grid-column:auto}.sf-att-status-card{padding:16px}.sf-att-bigtime{font-size:25px}}


/* Staff leave-request notification: compact Jibble-style floating alert. */
.sf-leave-notification-pop{position:fixed;z-index:100000;right:22px;top:22px;width:min(430px,calc(100vw - 28px));display:flex;gap:12px;align-items:flex-start;padding:14px 15px;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-left:4px solid #C1382E;border-radius:16px;box-shadow:0 18px 50px rgba(15,25,40,.18);transform:translateY(-18px);opacity:0;transition:transform .22s ease,opacity .22s ease}.sf-leave-notification-pop.show{transform:translateY(0);opacity:1}.sf-leave-notification-icon{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#C1382E;color:#fff;font-weight:800;font-size:18px}.sf-leave-notification-main{min-width:0;display:flex;flex-direction:column;gap:5px;padding-right:4px}.sf-leave-notification-main b{font-size:14px;color:var(--text,#18212f)}.sf-leave-notification-main span{font-size:12px;line-height:1.45;color:var(--muted,#667085)}.sf-leave-notification-main .sf-btn{align-self:flex-start;margin-top:5px}.sf-leave-notification-close{margin-left:auto;border:0;background:transparent;color:#7a8491;font-size:24px;line-height:1;cursor:pointer;padding:0 2px}.sf-leave-nav-badge{background:#C1382E!important;color:#fff!important;box-shadow:0 0 0 2px var(--sidebar,#fff)}
@media(max-width:640px){.sf-leave-notification-pop{right:14px;top:14px;width:calc(100vw - 28px)}}
.sf-day-checks{display:flex;flex-wrap:wrap;gap:6px}.sf-day-check{display:inline-flex;align-items:center;gap:5px;border:1px solid #d7dce3;border-radius:999px;padding:5px 9px;background:#fff;font-size:12px;cursor:pointer}.sf-day-check input{margin:0}.sf-day-check input:checked+span{font-weight:700}.sf-day-check:has(input:checked){border-color:var(--sf-primary,#8b1e2d);background:rgba(139,30,45,.06)}
/* Biometric consent modal */
.sf-biometric-consent-modal{width:min(760px,96vw);max-height:92vh;overflow:auto}

/* Notification badges on mobile quick-navigation icons.  The badge is positioned
   relative to the icon only, so it never changes the width or alignment of the
   five bottom-navigation slots. */
.sf-bottom-nav-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;line-height:1;min-height:21px;}
.sf-bottom-nav-badge{position:absolute;top:-8px;right:-13px;display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:#D32F2F;color:#fff;
  font-size:10px;line-height:17px;font-weight:700;border:2px solid rgba(255,255,255,0.98);box-sizing:border-box;}
.sf-track-map{width:100%;height:280px;border:0;border-radius:12px;margin:12px 0}

/* Vendor marketplace management cards */
.sf-ms-admin-grid{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:20px}
.sf-ms-admin-preview{background:#f7f8f9;border-radius:16px;padding:12px}.sf-ms-admin-image{height:220px;border-radius:12px;overflow:hidden;background:#eef1f3;display:flex;align-items:center;justify-content:center}.sf-ms-admin-image img{width:100%;height:100%;object-fit:cover}
.sf-ms-upload-row{display:flex;gap:10px;flex-wrap:wrap}.sf-ms-upload{display:block;padding:12px 16px;border:1px dashed #cbd3d8;border-radius:12px;background:#fafbfb;cursor:pointer}.sf-ms-upload input{display:block;margin-top:7px}
.sf-ms-admin-options{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0}.sf-ms-admin-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}
.sf-ms-admin-product{border:1px solid #e3e7e9;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.05)}.sf-ms-admin-product-images{height:190px;display:grid;grid-template-columns:repeat(2,1fr);background:#f1f3f4}.sf-ms-admin-product-images img{width:100%;height:190px;object-fit:cover}.sf-ms-admin-noimage{grid-column:1/-1;display:flex;align-items:center;justify-content:center;color:#7a8389}.sf-ms-admin-product-body{padding:16px}.sf-ms-status{display:inline-block;font-size:12px;padding:4px 8px;border-radius:999px;background:#eef4f0;margin-bottom:7px}.sf-ms-admin-product-body h3{margin:4px 0}.sf-ms-admin-product-body p{color:#626b70}
@media(max-width:700px){.sf-ms-admin-grid{grid-template-columns:1fr}.sf-ms-admin-image{height:240px}.sf-ms-admin-products{grid-template-columns:1fr}}

/* Vendor Storefront management uses the same product-card structure as the public customer marketplace. */
.sf-vendor-storefront-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:16px}.sf-vendor-storefront-product{position:relative}.sf-vendor-storefront-image{overflow:hidden}.sf-vendor-storefront-image img,.sf-vendor-storefront-image .fh-placeholder{display:block;width:100%;height:100%;object-fit:cover}.sf-vendor-storefront-status{position:absolute;left:12px;top:12px;margin:0!important;background:rgba(255,255,255,.94)!important}.sf-vendor-storefront-locations{display:block;margin-top:10px;color:#777;font-size:12px;line-height:1.45}.sf-vendor-storefront-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}.sf-vendor-storefront-actions .sf-btn{margin:0}.sf-vendor-storefront-product:hover{box-shadow:0 8px 24px rgba(0,0,0,.07)}.sf-vendor-storefront-product .fh-meal-info p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:4.95em;line-height:1.65;margin-bottom:0}
@media(max-width:700px){.sf-vendor-storefront-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sf-vendor-storefront-image{height:150px}.sf-vendor-storefront-product .fh-meal-info{padding:10px}.sf-vendor-storefront-product .fh-meal-info h3{font-size:14px}.sf-vendor-storefront-product .fh-meal-info p{font-size:12px}.sf-vendor-storefront-locations{font-size:11px}.sf-vendor-storefront-actions{gap:5px}.sf-vendor-storefront-actions .sf-btn{font-size:11px;padding:7px 9px}}
@media(max-width:390px){.sf-vendor-storefront-product-grid{grid-template-columns:1fr}.sf-vendor-storefront-image{height:190px}}
/* Rider live-location viewer (openRiderLocationViewer, app.js) — Leaflet marker for the
   staff "Track rider" modal, same look as the public tracking pages' rider marker. */
.sf-rider-marker-wrap{background:transparent!important;border:0!important}
.sf-rider-marker{width:38px;height:38px;border-radius:50%;background:#111;color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.3);display:grid;place-items:center;border:3px solid #fff;font-size:20px;line-height:1;transition:transform .2s}
/* Incident Reports audit history (renderIncidentDetails, app.js). */
.sf-audit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sf-audit-list li{padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:10px;font-size:12px}