/* ============================================================================
   vivo° — Design System  ·  chic / minimal
   Schibsted Grotesk · neutral palette · one language for the whole app.
   ============================================================================ */
:root{
  --color-bg:#F4F4F1; --color-surface:#FFFFFF; --color-surface-alt:#FAFAF8;
  --color-surface-2:#EFEEE9; --color-text:#171714; --color-secondary:#86857E;
  --color-tertiary:#B4B2AA; --color-border:#E7E6E0; --color-border-2:#EFEEE9;
  --color-hover:rgba(23,23,20,0.035);
  --color-accent:#171714; --color-accent-hover:#000000; --color-accent-soft:#EFEEE9;
  --grano:#8C7A52;
  --state-green:#2E7D57; --state-green-bg:#E9F2EC;
  --state-yellow:#A9791C; --state-yellow-bg:#F6F0DF;
  --state-red:#BE4A36; --state-red-bg:#F8EAE5;
  --state-critical:#8A2D22; --state-critical-bg:#F2E0DC;
  --state-oro:#9A7B1E; --state-oro-bg:#F7F1DD;
  --color-success:var(--state-green); --color-success-bg:var(--state-green-bg);
  --color-warning:var(--state-yellow); --color-warning-bg:var(--state-yellow-bg);
  --color-danger:var(--state-red); --color-danger-bg:var(--state-red-bg); --color-danger-hover:#A23A2A;
  --color-info:var(--state-green); --color-info-bg:var(--state-green-bg);
  --glass-bg:var(--color-surface); --glass-border:var(--color-border); --glass-blur:none;
  --glass-shadow:0 1px 2px rgba(23,23,20,.03), 0 8px 24px rgba(23,23,20,.05);
  --font-title:'Schibsted Grotesk', system-ui, sans-serif;
  --font-sans:'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:'Schibsted Grotesk', ui-monospace, monospace;
  --text-display:clamp(28px,3.2vw,38px);
  --text-h1:23px; --text-h2:18px; --text-h3:15px;
  --text-body:14px; --text-sm:13px; --text-xs:11px; --text-2xs:10.5px;
  --weight-regular:400; --weight-medium:500; --weight-semi:600; --weight-bold:700;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(23,23,20,.04);
  --shadow:0 1px 2px rgba(23,23,20,.03), 0 8px 24px rgba(23,23,20,.05);
  --shadow-lg:0 2px 6px rgba(23,23,20,.05), 0 18px 44px rgba(23,23,20,.09);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.18s; --dur-lg:.55s;

  /* session-status semantic aliases (Group 8) — consumed by attendance_grid,
     member_profile, my_attendance. See design-system.css comment section for
     the resolution table. All aliases resolve to existing --state-*/--color-*
     tokens; changing a status color propagates to all three surfaces. */
  --status-ok-bg:       var(--state-green-bg);
  --status-ok-fg:       var(--state-green);
  --status-late-bg:     var(--state-yellow-bg);
  --status-late-fg:     var(--state-yellow);
  --status-early-bg:    var(--state-yellow-bg);
  --status-early-fg:    var(--state-yellow);
  --status-early-rail:  var(--state-red);
  --status-warn-bg:     var(--state-red-bg);
  --status-warn-fg:     var(--state-red);
  --status-absent-bg:   var(--state-critical-bg);
  --status-absent-fg:   var(--state-critical);
  --status-rest-bg:     var(--color-surface-2);
  --status-rest-fg:     var(--color-secondary);
  --status-leave-bg:    var(--color-surface-2);
  --status-leave-fg:    var(--color-secondary);
  --status-leave-rail:  var(--state-green);
  --status-none-bg:     var(--color-surface-2);
  --status-none-fg:     var(--color-tertiary);
  --status-overtime-bg: var(--state-oro-bg);
  --status-overtime-fg: var(--state-oro);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-sans); font-weight:var(--weight-regular); color:var(--color-text);
  background:var(--color-bg); font-size:var(--text-body); line-height:1.5; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--state-green); outline-offset:2px; border-radius:4px;}
.tnum{font-variant-numeric:tabular-nums;}
h1,.h1{font-size:var(--text-h1); font-weight:var(--weight-semi); letter-spacing:-.01em; margin:0;}
h2,.h2{font-size:var(--text-h2); font-weight:var(--weight-semi); letter-spacing:-.01em; margin:0;}
h3,.h3{font-size:var(--text-h3); font-weight:var(--weight-semi); margin:0;}
.label{font-size:var(--text-2xs); font-weight:var(--weight-medium); letter-spacing:.13em; text-transform:uppercase; color:var(--color-tertiary);}
.muted{color:var(--color-secondary);}
.display{font-weight:var(--weight-bold); font-size:var(--text-display); letter-spacing:-.02em;}

.nav,.navbar{position:sticky; top:0; z-index:50; background:rgba(244,244,241,.85);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--color-border);}
.nav-inner,.navbar-inner{max-width:1080px; margin:0 auto; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 30px;}
.nav-brand{font-weight:var(--weight-bold); font-size:20px; letter-spacing:-.01em; color:var(--color-text);}
.nav-links{display:flex; gap:1px; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links li{list-style:none;}
.nav-link{font-size:var(--text-sm); color:var(--color-secondary); padding:7px 11px; border-radius:var(--radius-sm);
  transition:var(--dur); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.nav-link:hover{color:var(--color-text);}
.nav-link.active{color:var(--color-text); font-weight:var(--weight-medium); background:var(--color-surface-2);}
.nav-badge{font-size:9.5px; font-weight:var(--weight-semi); background:var(--state-yellow); color:#fff; padding:0 5px; border-radius:8px; line-height:15px;}
.nav-badge.red{background:var(--state-red);}
.nav-right{display:flex; align-items:center; gap:6px; flex:none;}
.nav-icon{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--color-secondary); position:relative; border:none; background:none; transition:var(--dur);}
.nav-icon:hover{background:var(--color-surface-2); color:var(--color-text);}
.nav-icon .dot{position:absolute; top:7px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--state-red); border:1.5px solid var(--color-bg);}
.nav-avatar{width:32px; height:32px; border-radius:50%; background:var(--color-accent); color:#fff; display:grid; place-items:center; font-weight:var(--weight-semi); font-size:12px; margin-left:2px;}
.business-switcher-btn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--color-secondary);
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:6px 11px; cursor:pointer; transition:var(--dur);}
.business-switcher-btn:hover{color:var(--color-text); border-color:var(--color-tertiary);}
.vp,.container{max-width:1080px; margin:0 auto; padding:30px;}

.btn,.btn-v{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:var(--text-sm);
  font-weight:var(--weight-semi); line-height:1; padding:11px 18px; min-height:42px; border-radius:var(--radius-sm);
  border:1px solid transparent; transition:var(--dur); cursor:pointer;}
.btn.primary,.btn-v.primary{background:var(--color-accent); color:#fff;}
.btn.primary:hover,.btn-v.primary:hover{background:var(--color-accent-hover);}
.btn.soft{background:var(--color-surface-2); color:var(--color-text);}
.btn.soft:hover{background:var(--color-border);}
.btn.ghost{background:transparent; border-color:var(--color-border); color:var(--color-text);}
.btn.ghost:hover{border-color:var(--color-tertiary); background:var(--color-surface);}
.btn.danger{background:var(--state-red); color:#fff;}
.btn.sm{padding:7px 12px; min-height:34px; font-size:var(--text-xs);}
.btn-link{font-size:var(--text-sm); font-weight:var(--weight-semi); color:var(--color-text);}
.btn-link:hover{color:var(--state-green);}

.card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--sp-5) 22px;}
.card--pad-lg{padding:var(--sp-6) var(--sp-6);}
.card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--sp-4);}
.card-head .title{font-size:var(--text-h3); font-weight:var(--weight-semi);}
.card-head .sub{font-size:11.5px; color:var(--color-tertiary);}

.stat-band{display:grid; grid-template-columns:repeat(6,1fr); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden;}
.stat{padding:16px 18px; border-right:1px solid var(--color-border-2);}
.stat:last-child{border-right:none;}
.stat-label{font-size:10px; font-weight:var(--weight-medium); letter-spacing:.1em; text-transform:uppercase; color:var(--color-tertiary);}
.stat-value{font-weight:var(--weight-semi); font-size:26px; letter-spacing:-.01em; margin-top:var(--sp-2);}
.stat-value small{font-size:13px; color:var(--color-secondary); font-weight:var(--weight-medium);}
.stat-value.green{color:var(--state-green);} .stat-value.yellow{color:var(--state-yellow);} .stat-value.red{color:var(--state-red);}
.stat-detail{font-size:11px; color:var(--color-secondary); margin-top:var(--sp-1);}

.grid-2{display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-4);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);}
.quadrant-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);}

.table{width:100%; border-collapse:collapse; font-size:var(--text-sm);}
.table th{text-align:left; font-size:var(--text-2xs); font-weight:var(--weight-semi); letter-spacing:.1em; text-transform:uppercase; color:var(--color-secondary); padding:0 12px 10px; border-bottom:1px solid var(--color-border);}
.table td{padding:11px 12px; border-bottom:1px solid var(--color-border-2); vertical-align:middle;}
.table tr:last-child td{border-bottom:none;}
.table tbody tr{transition:background var(--dur);}
.table tbody tr:hover{background:var(--color-hover);}
.table .num{text-align:right; font-variant-numeric:tabular-nums;}
.table--sticky thead th{position:sticky; top:60px; background:var(--color-surface); z-index:1;}
.table-wrap{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden;}
.table-wrap .table th{padding-top:14px;}
.table-wrap .table th,.table-wrap .table td{padding-left:18px; padding-right:18px;}
.att-cell{border-radius:var(--radius-sm); padding:8px; font-size:11.5px; text-align:center; border:1px solid var(--color-border-2);}
.att-cell.on{background:var(--state-green-bg); color:var(--state-green);}
.att-cell.late{background:var(--state-yellow-bg); color:var(--state-yellow);}
.att-cell.absent{background:var(--state-red-bg); color:var(--state-red);}
.att-cell.rest{background:var(--color-surface-2); color:var(--color-secondary);}

.list-row{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--color-border-2);}
.list-row:last-child{border-bottom:none;}
.list-row .name{flex:1;} .list-row .name b{font-weight:var(--weight-medium);}
.list-row .name small{color:var(--color-secondary); margin-left:7px; font-size:11.5px;}
.list-row .meta{font-size:12px; color:var(--color-secondary); font-variant-numeric:tabular-nums;}
.avatar{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:var(--weight-semi); font-size:13px; flex:none; background:var(--color-surface-2); color:var(--color-secondary);}
.avatar.green{background:var(--state-green-bg); color:var(--state-green);}
.avatar.yellow{background:var(--state-yellow-bg); color:var(--state-yellow);}
.avatar-stack{display:flex;} .avatar-stack .avatar{border:2.5px solid var(--color-surface); margin-left:-8px;}
.avatar-stack .avatar:first-child{margin-left:0;}

.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:var(--weight-medium); padding:4px 11px; border-radius:var(--radius-pill); background:var(--color-surface-2); color:var(--color-secondary);}
.chip.green,.badge.green,.status.green{background:var(--state-green-bg); color:var(--state-green);}
.chip.yellow,.badge.yellow,.status.yellow{background:var(--state-yellow-bg); color:var(--state-yellow);}
.chip.red,.badge.red,.status.red{background:var(--state-red-bg); color:var(--state-red);}
.chip.oro{background:var(--state-oro-bg); color:var(--state-oro);}
.badge{font-size:11px; font-weight:var(--weight-medium); padding:2px 10px; border-radius:var(--radius-pill); background:var(--color-surface-2); color:var(--color-secondary);}
.status-dot{width:8px; height:8px; border-radius:50%; flex:none; display:inline-block;}
.status-dot.green{background:var(--state-green);} .status-dot.yellow{background:var(--state-yellow);}
.status-dot.red{background:var(--state-red);} .status-dot.muted{background:var(--color-tertiary);}
.status-dot.live{background:var(--state-green); animation:pulse 2.4s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.score-ring{position:relative; width:44px; height:44px; flex:none;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring .val{position:absolute; inset:0; display:grid; place-items:center; font-weight:var(--weight-semi); font-size:14px;}
.score-bar{height:4px; background:var(--color-border); border-radius:var(--radius-pill); overflow:hidden;}
.score-bar > i{display:block; height:100%; border-radius:var(--radius-pill);}
.score--green{color:var(--state-green);} .score--yellow{color:var(--state-yellow);} .score--red{color:var(--state-red);} .score--critical{color:var(--state-critical);}
.score-legend{display:flex; height:30px; border-radius:var(--radius-sm); overflow:hidden; box-shadow:inset 0 0 0 1px var(--color-border); font-size:9.5px;}
.score-legend > div{flex:1; display:flex; align-items:center; justify-content:center; gap:5px; color:#fff;}

.chart{width:100%; display:block;}
.spark{width:100%; height:56px; display:block;}
.chart-header{display:flex; align-items:flex-end; gap:18px;}
.chart-value{font-weight:var(--weight-bold); font-size:38px; line-height:.9; letter-spacing:-.02em;}
.chart-delta{font-size:13px; font-weight:var(--weight-semi);}
.chart-delta.up{color:var(--state-green);} .chart-delta.down{color:var(--state-red);}
.chart-axis{stroke:var(--color-border);} .chart-line{fill:none; stroke:var(--state-green); stroke-width:2;}
.chart-legend{display:flex; gap:14px; font-size:11px; color:var(--color-secondary);}
.chart-legend i{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px;}

.tabs{display:flex; gap:18px; border-bottom:1px solid var(--color-border); margin-bottom:14px;}
.tab{font-size:12.5px; color:var(--color-tertiary); cursor:pointer; padding:0 0 9px; position:relative; background:none; border:none;}
.tab.active{color:var(--color-text); font-weight:var(--weight-medium);}
.tab.active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--color-text);}

.field{margin-bottom:var(--sp-4);}
.field label{display:block; font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-text); margin-bottom:6px;}
.field .help{font-size:12px; color:var(--color-secondary); margin-top:5px;}
.field .error{font-size:12px; color:var(--state-red); margin-top:5px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=time],select,textarea,.input{width:100%; font-family:inherit; font-size:var(--text-body); color:var(--color-text); background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:11px 13px; min-height:44px; transition:var(--dur);}
textarea{min-height:96px; resize:vertical;}
input:focus,select:focus,textarea:focus,.input:focus{outline:none; border-color:var(--state-green); box-shadow:0 0 0 3px var(--state-green-bg);}
input::placeholder,textarea::placeholder{color:var(--color-tertiary);}

.overlay{position:fixed; inset:0; background:rgba(23,23,20,.4); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; opacity:0; pointer-events:none; transition:opacity var(--dur);}
.overlay.open{opacity:1; pointer-events:auto;}
.modal{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); width:100%; max-width:560px; padding:var(--sp-6); max-height:90vh; overflow:auto;}
.modal-close{width:32px; height:32px; border-radius:8px; border:none; background:var(--color-surface-2); color:var(--color-secondary); cursor:pointer;}

.empty{text-align:center; padding:var(--sp-10) var(--sp-6); color:var(--color-secondary);}
.empty .empty-title{font-size:var(--text-h2); font-weight:var(--weight-semi); color:var(--color-text); margin-bottom:6px;}

.rise{opacity:0; transform:translateY(9px); animation:rise var(--dur-lg) var(--ease) forwards;}
@keyframes rise{to{opacity:1; transform:none;}}
.stack-1>*+*{margin-top:var(--sp-2);} .stack-2>*+*{margin-top:var(--sp-4);} .stack-3>*+*{margin-top:var(--sp-6);}
.row{display:flex; align-items:center; gap:var(--sp-3);}
.between{justify-content:space-between;} .grow{flex:1;}

@media (max-width:880px){
  .grid-2,.quadrant-grid,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stat-band{grid-template-columns:repeat(3,1fr);}
  .vp,.container{padding:20px;}
}
@media (max-width:520px){ .stat-band{grid-template-columns:repeat(2,1fr);} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; } }

/* ============================================================================
   Shared components — team-performance widget + score-card (member).
   The JS in components/_score_card_poll.html toggles .st-{green|yellow|orange|
   red|critical|neutral} classes on the chip / card / [data-field-state] nodes;
   the rules below map those to DS state tokens. Live here (not in a template
   partial) so every page that renders the components picks them up once via
   the normal design-system.css link — no risk of loop-duplication.
   ============================================================================ */

/* State-color bridge for chips inside the shared components. */
.chip.st-green   { background:var(--state-green-bg);    color:var(--state-green);    }
.chip.st-yellow  { background:var(--state-yellow-bg);   color:var(--state-yellow);   }
.chip.st-orange  { background:var(--state-yellow-bg);   color:var(--state-yellow);   }
.chip.st-red     { background:var(--state-red-bg);      color:var(--state-red);      }
.chip.st-critical{ background:var(--state-critical-bg); color:var(--state-critical); }
.chip.st-neutral,.chip.st-none { background:var(--color-surface-2); color:var(--color-secondary); }

/* Team-performance widget (_team_performance.html) */
.tp-widget           { padding:16px 18px; }
.tp-widget.st-green   { box-shadow: inset 3px 0 0 var(--state-green); }
.tp-widget.st-yellow  { box-shadow: inset 3px 0 0 var(--state-yellow); }
.tp-widget.st-orange  { box-shadow: inset 3px 0 0 var(--state-yellow); }
.tp-widget.st-red     { box-shadow: inset 3px 0 0 var(--state-red); }
.tp-widget.st-critical{ box-shadow: inset 3px 0 0 var(--state-critical); }
.tp-row              { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tp-heading          { min-width:0; }
.tp-sub              { font-size:11.5px; color:var(--color-tertiary); margin-top:2px; }
.tp-chips            { display:flex; gap:6px; flex-wrap:wrap; }
.tp-tag              { font-style:normal; letter-spacing:.08em; text-transform:uppercase; font-size:10px; opacity:.75; margin-right:2px; }
.tp-final            { font-size:28px; font-weight:var(--weight-semi); letter-spacing:-.01em; line-height:1; color:var(--color-text); }
.tp-widget.st-green    .tp-final { color:var(--state-green); }
.tp-widget.st-yellow   .tp-final { color:var(--state-yellow); }
.tp-widget.st-orange   .tp-final { color:var(--state-yellow); }
.tp-widget.st-red      .tp-final { color:var(--state-red); }
.tp-widget.st-critical .tp-final { color:var(--state-critical); }

/* Score card (_score_card.html) — keeps the legacy .score-card class name
   because _score_card_poll.html selects on `.score-card[data-user-id]`. */
.score-card.sc-item   { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:14px 16px; display:block; text-decoration:none; color:inherit; transition:box-shadow var(--dur), transform var(--dur); }
.score-card.sc-item:hover { box-shadow:var(--shadow); transform:translateY(-1px); }
.score-card.st-green    { box-shadow: inset 3px 0 0 var(--state-green); }
.score-card.st-yellow   { box-shadow: inset 3px 0 0 var(--state-yellow); }
.score-card.st-orange   { box-shadow: inset 3px 0 0 var(--state-yellow); }
.score-card.st-red      { box-shadow: inset 3px 0 0 var(--state-red); }
.score-card.st-critical { box-shadow: inset 3px 0 0 var(--state-critical); }
.score-card.sc-item.st-green:hover,
.score-card.sc-item.st-yellow:hover,
.score-card.sc-item.st-orange:hover,
.score-card.sc-item.st-red:hover,
.score-card.sc-item.st-critical:hover { box-shadow: inset 3px 0 0 currentColor, var(--shadow); }
.sc-header    { display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; }
.sc-avatar    { width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--color-surface-2); display:grid; place-items:center; flex:none; }
.sc-avatar img,.sc-avatar span { width:40px !important; height:40px !important; object-fit:cover; }
.sc-identity  { min-width:0; }
.sc-name      { font-size:14px; font-weight:var(--weight-medium); line-height:1.2; }
.sc-role      { font-size:11.5px; color:var(--color-secondary); margin-top:2px; text-transform:lowercase; }
.sc-final     { font-size:26px; font-weight:var(--weight-semi); letter-spacing:-.01em; line-height:1; color:var(--color-text); text-align:right; }
.score-card.st-green    .sc-final { color:var(--state-green); }
.score-card.st-yellow   .sc-final { color:var(--state-yellow); }
.score-card.st-orange   .sc-final { color:var(--state-yellow); }
.score-card.st-red      .sc-final { color:var(--state-red); }
.score-card.st-critical .sc-final { color:var(--state-critical); }
.sc-subs      { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.sc-sub-label { font-style:normal; letter-spacing:.06em; text-transform:uppercase; font-size:10px; opacity:.7; margin-right:4px; }