/* ================================================================
   GLOBAL TEAM ROTA — shared styles (dashboard + team-calendar)
   Self-contained (own token block) so it renders identically on any
   host page. Pairs with js/global-rota.js.
   ================================================================ */
.gr-host{
  --void:#0c1109; --deep:#111a0e; --base:#172213; --lift:#1e2e1b;
  --panel:rgba(255,255,255,.10); --panel2:rgba(255,255,255,.18); --panel3:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.16); --bord2:rgba(255,255,255,.28);
  --gold:#f0c832; --gold2:#f7d94e; --gdim:rgba(212,175,55,.12); --gglow:rgba(212,175,55,.32); --gsoft:rgba(212,175,55,.05);
  --green:#4cd657; --gndim:rgba(67,177,75,.14); --gnsoft:rgba(67,177,75,.05); --red:#ff4848; --rdim:rgba(232,64,64,.12);
  --text:#f2f7ee; --t2:rgba(242,247,238,.88); --t3:rgba(242,247,238,.60); --t4:rgba(242,247,238,.34);
  --mono:'IBM Plex Mono',monospace; --disp:'Cinzel',serif; --body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-md:0 8px 24px rgba(0,0,0,.32);
}
.gr-host *{box-sizing:border-box}
.gr-host{font-family:var(--body); color:var(--text)}
.gr-glass,.gr-host .tc-glass{background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--sh-md)}

/* toolbar */
.gr-host .tc-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.gr-host .tc-nav-group{display:flex; align-items:center; gap:10px}
.gr-host .tc-nav-btn{width:38px; height:38px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--border); color:var(--t2); cursor:pointer; transition:.25s var(--ease); font-size:13px}
.gr-host .tc-nav-btn:hover{background:var(--gdim); border-color:var(--gold); color:var(--gold)}
.gr-host .tc-period{font-family:var(--disp); font-weight:700; font-size:18px; color:var(--text); min-width:190px; text-align:center; letter-spacing:.4px}
.gr-host .tc-today-btn{padding:9px 16px; border-radius:var(--r-sm); background:var(--gdim); border:1px solid rgba(240,200,50,.35); color:var(--gold); font-weight:700; font-size:12.5px; cursor:pointer; transition:.25s var(--ease)}
.gr-host .tc-today-btn:hover{background:rgba(240,200,50,.2)}
.gr-host .tc-rota-status{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--t3); flex-wrap:wrap}
.gr-host .tc-badge{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase}
.gr-host .tc-badge.pub{background:var(--gndim); color:var(--green); border:1px solid rgba(76,214,87,.35)}
.gr-host .tc-badge.none{background:var(--panel3); color:var(--t3); border:1px solid var(--border)}

/* rota grid */
.gr-host .tc-rota-wrap{padding:0; overflow:hidden}
.gr-host .tc-rota-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.gr-host .tc-rota-grid{display:grid; min-width:880px}
.gr-host .tc-rota-corner{position:sticky; left:0; z-index:3; background:var(--base); border-bottom:1px solid var(--bord2); border-right:1px solid var(--bord2); padding:12px 14px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--t3); display:flex; align-items:center}
.gr-host .tc-rota-dayhdr{position:relative; background:var(--lift); border-bottom:1px solid var(--bord2); border-right:1px solid var(--border); padding:10px; text-align:center}
.gr-host .tc-rota-dayhdr .dn{font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--t3)}
.gr-host .tc-rota-dayhdr .dd{font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text); margin-top:2px}
.gr-host .tc-rota-dayhdr.today{background:var(--gsoft)}
.gr-host .tc-rota-dayhdr.today .dd,.gr-host .tc-rota-dayhdr.today .dn{color:var(--gold)}
.gr-host .tc-rota-dayhdr.today::before{content:'✦'; position:absolute; top:5px; right:7px; font-size:9px; color:var(--gold); text-shadow:0 0 6px var(--gglow); animation:grSpark 2.4s ease-in-out infinite}
.gr-host .tc-rota-staff{position:sticky; left:0; z-index:2; background:var(--base); border-right:1px solid var(--bord2); border-bottom:1px solid var(--border); padding:10px 14px; display:flex; align-items:center; gap:10px; min-width:200px}
.gr-host .tc-rota-staff.mine{background:linear-gradient(90deg,var(--gsoft),var(--base))}
.gr-host .tc-you{display:inline-block; margin-left:6px; font-size:9px; font-weight:800; letter-spacing:.5px; color:#1a1500; background:linear-gradient(135deg,var(--gold),var(--gold2)); padding:1px 7px; border-radius:999px; vertical-align:middle}
.gr-host .tc-rota-av{position:relative; width:34px; height:34px; flex-shrink:0; transform:rotate(45deg); border-radius:8px; border:1.5px solid var(--gold); overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1500; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 3px rgba(240,200,50,.10), 0 4px 14px rgba(0,0,0,.45), inset 0 1px 7px rgba(255,255,255,.4); transition:.3s var(--ease)}
.gr-host .tc-rota-staff:hover .tc-rota-av{box-shadow:0 0 0 3px rgba(240,200,50,.22), 0 4px 18px var(--gglow), inset 0 1px 7px rgba(255,255,255,.5)}
.gr-host .tc-rota-av .av-in{transform:rotate(-45deg); width:142%; height:142%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px}
.gr-host .tc-rota-av .av-in img{width:100%; height:100%; object-fit:cover}
.gr-host .tc-rota-av::after{content:''; position:absolute; top:-30%; left:-30%; width:60%; height:60%; background:linear-gradient(135deg,rgba(255,255,255,.7),transparent 70%); transform:rotate(-45deg)}
.gr-host .tc-rota-sname{font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gr-host .tc-rota-srole{font-size:10.5px; color:var(--t3)}
.gr-host .tc-rota-cell{border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:10px; min-height:62px; display:flex; flex-direction:column; gap:4px; justify-content:center; position:relative}
.gr-host .tc-rota-cell.today{background:var(--gsoft)}
.gr-host .tc-rota-cell.off{background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.02) 6px,rgba(255,255,255,.02) 12px)}
.gr-host .tc-rota-cell.clickable{cursor:pointer}
.gr-host .tc-rota-cell.clickable:hover{background:var(--gdim)}
.gr-host .tc-rota-cell.clickable .tc-shift{box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(240,200,50,.35)}
.gr-host .tc-rota-cell.clickable::after{content:'\f0c0'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:5px; right:7px; font-size:9px; color:var(--gold); opacity:0; transition:.2s ease}
.gr-host .tc-rota-cell.clickable:hover::after{opacity:.85}
.gr-host .tc-shift{position:relative; display:flex; flex-direction:column; gap:2px; padding:7px 9px 7px 11px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--sc,var(--green)); background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03)); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.10); animation:grCell .4s var(--ease) both}
.gr-host .tc-shift::after{content:''; position:absolute; top:5px; right:6px; width:5px; height:5px; background:var(--sc,var(--gold)); transform:rotate(45deg); opacity:.55; box-shadow:0 0 5px var(--sc,var(--gold))}
.gr-host .tc-shift-type{font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--text)}
.gr-host .tc-shift-time{font-family:var(--mono); font-size:10.5px; color:var(--t3)}
.gr-host .tc-shift.leave{border-left-style:dashed; background:rgba(255,255,255,.03)} .gr-host .tc-shift.leave .tc-shift-type{color:var(--sc)}
.gr-host .tc-off-dash{font-size:10px; color:var(--t4); text-align:center}
.gr-host .tc-rota-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; padding:0 4px}
.gr-host .tc-rl-row{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--t2)}
.gr-host .tc-rl-dot{width:11px; height:11px; border-radius:3px}
.gr-host .tc-empty-state{text-align:center; padding:50px 20px; color:var(--t3)}
.gr-host .tc-empty-state i{font-size:36px; color:var(--t4); margin-bottom:12px}
.gr-host .tc-empty-state .es-t{font-size:15px; font-weight:600; color:var(--t2); margin-bottom:6px}
.gr-host .tc-empty-state .es-s{font-size:13px; color:var(--t3); margin-bottom:16px}
.gr-host .tc-empty-sm{font-size:12px; color:var(--t4); text-align:center; padding:14px 0}
.gr-host .tc-skel-cal{height:300px; border-radius:var(--r-md); background:linear-gradient(100deg,var(--panel3) 30%,var(--panel) 50%,var(--panel3) 70%); background-size:200% 100%; animation:grShim 1.4s infinite}

/* ── shared modal shell (shift / leave / PH all reuse) ── */
.ph-overlay{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,7,6,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:grFade .28s var(--ease,ease) both; font-family:'DM Sans',sans-serif}
.ph-overlay.closing{animation:grFadeOut .2s ease both}
.ph-card{position:relative; width:min(440px,100%); max-height:calc(100vh - 40px); overflow-y:auto; border-radius:24px; background:linear-gradient(170deg,#141b12,#0b0f0c); border:1px solid rgba(240,200,50,.42); box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(240,200,50,.12); animation:grPop .5s cubic-bezier(.16,1,.3,1) both; color:#f2f7ee}
.ph-overlay.closing .ph-card{animation:grPopOut .2s ease both}
.ph-close{position:absolute; top:14px; right:16px; z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:rgba(242,247,238,.88); font-size:18px; cursor:pointer; line-height:1; transition:.2s ease}
.ph-close:hover{background:rgba(232,64,64,.12); border-color:#ff4848; color:#ff4848}
.ph-body{padding:20px 24px 26px}

/* shift modal */
.sh-head{position:relative; padding:24px 24px 18px; text-align:center; border-bottom:1px solid rgba(255,255,255,.16); background:radial-gradient(420px 190px at 50% -50%, rgba(240,200,50,.20), transparent 70%)}
.sh-eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:#f0c832}
.sh-title{font-family:'Cinzel',serif; font-weight:700; font-size:21px; color:#f2f7ee; margin:8px 0 6px}
.sh-myshift{font-size:12.5px; color:rgba(242,247,238,.88)} .sh-myshift b{color:#f0c832}
.sh-dept{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); font-size:11.5px; color:rgba(242,247,238,.60)}
.sh-dept i{color:#f0c832}
.sh-list{display:flex; flex-direction:column; gap:10px}
.sh-col{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); animation:grCell .4s cubic-bezier(.16,1,.3,1) both}
.sh-col-av{width:42px; height:42px; border-radius:50%; flex-shrink:0; overflow:hidden; background:linear-gradient(135deg,#f0c832,#f7d94e); color:#1a1500; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(240,200,50,.25)}
.sh-col-av img{width:100%; height:100%; object-fit:cover}
.sh-col-meta{flex:1; min-width:0}
.sh-col-name{font-size:14px; font-weight:600; color:#f2f7ee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sh-col-role{font-size:11.5px; color:rgba(242,247,238,.60)}
.sh-col-act{flex-shrink:0}
.sh-btn{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:8px; border:1px solid rgba(255,255,255,.16); font-size:12px; font-weight:700; cursor:pointer; transition:.2s cubic-bezier(.16,1,.3,1); font-family:'DM Sans',sans-serif}
.sh-btn.con{background:rgba(212,175,55,.12); border-color:rgba(240,200,50,.4); color:#f0c832} .sh-btn.con:hover{background:rgba(240,200,50,.2)}
.sh-btn.msg{width:40px; height:38px; justify-content:center; background:rgba(67,177,75,.14); border-color:rgba(76,214,87,.4); color:#4cd657; font-size:15px} .sh-btn.msg:hover{background:rgba(76,214,87,.22)}
.sh-btn.yes{background:#4cd657; border-color:#4cd657; color:#06210a} .sh-btn.yes:hover{filter:brightness(1.08)}
.sh-btn.no{background:transparent; color:rgba(242,247,238,.60)} .sh-btn.no:hover{color:#f2f7ee; border-color:rgba(255,255,255,.28)}
.sh-confirm{display:flex; align-items:center; gap:7px; animation:grCell .25s ease both}
.sh-confirm span{font-size:11.5px; color:rgba(242,247,238,.88); margin-right:2px}
.sh-sending,.sh-done,.sh-err{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:8px 12px}
.sh-sending{color:rgba(242,247,238,.60)} .sh-done{color:#4cd657} .sh-err{color:#ff4848}

@keyframes grCell{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
@keyframes grShim{to{background-position:-200% 0}}
@keyframes grSpark{0%,100%{opacity:.25; transform:scale(.6) rotate(0)}50%{opacity:1; transform:scale(1) rotate(25deg)}}
@keyframes grFade{from{opacity:0}to{opacity:1}}
@keyframes grFadeOut{from{opacity:1}to{opacity:0}}
@keyframes grPop{from{opacity:0; transform:scale(.9) translateY(16px)}to{opacity:1; transform:none}}
@keyframes grPopOut{to{opacity:0; transform:scale(.95) translateY(8px)}}

@media(max-width:640px){
  .gr-host .tc-period{font-size:16px; min-width:150px}
  .gr-host .tc-toolbar{justify-content:center}
}