/* ================================================================
   LEAVE CALENDAR — shared styles (dashboard / Leave Centre / HR Monitor / Comms)
   Self-contained (own token block, scoped to .lc-host). Modal classes are
   lc-prefixed so they never clash with the rota modal. Pairs with
   js/leave-calendar.js.
   ================================================================ */
.lc-host{
  --void:#0c1109; --base:#172213; --lift:#1e2e1b;
  --panel:rgba(255,255,255,.10); --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; --red:#ff4848; --orange:#FF8C00;
  --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);
  font-family:var(--body); color:var(--text); display:block;
}
.lc-host *{box-sizing:border-box}
.lc-host .lc-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)}
.lc-host .lc-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px}
.lc-host .lc-nav-group{display:flex; align-items:center; gap:10px}
.lc-host .lc-nav-btn{width:36px; height:36px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--border); color:var(--t2); cursor:pointer; transition:.25s var(--ease)}
.lc-host .lc-nav-btn:hover{background:var(--gdim); border-color:var(--gold); color:var(--gold)}
.lc-host .lc-period{font-family:var(--disp); font-weight:700; font-size:18px; color:var(--text); min-width:170px; text-align:center}
.lc-host .lc-today-btn{padding:8px 15px; border-radius:var(--r-sm); background:var(--gdim); border:1px solid rgba(240,200,50,.35); color:var(--gold); font-weight:700; font-size:12px; cursor:pointer}
.lc-host .lc-kpis{display:flex; gap:9px; flex-wrap:wrap}
.lc-host .lc-kpi{display:flex; flex-direction:column; align-items:flex-end; padding:6px 13px; border-radius:var(--r-sm); background:var(--panel3); border:1px solid var(--border)}
.lc-host .lc-kpi b{font-family:var(--mono); font-size:17px; line-height:1; color:var(--gold)}
.lc-host .lc-kpi span{font-size:9.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--t3); margin-top:3px}

.lc-host .lc-layout{display:grid; grid-template-columns:1fr 290px; gap:16px; align-items:start}
.lc-host .lc-cal-wrap{padding:14px}
.lc-host .lc-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:7px}
.lc-host .lc-dow span{text-align:center; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--t3)}
.lc-host .lc-dow span.we{color:var(--gold)}
.lc-host .lc-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:7px}
.lc-host .lc-day{position:relative; overflow:hidden; min-height:98px; border-radius:var(--r-md); background:var(--panel3); border:1px solid var(--border); padding:7px; display:flex; flex-direction:column; gap:4px; transition:.25s var(--ease); animation:lcCell .4s var(--ease) both}
.lc-host .lc-day.other{opacity:.36}
.lc-host .lc-day.we{background:rgba(240,200,50,.035)}
.lc-host .lc-day.today{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 0 20px var(--gglow); background:var(--gsoft)}
.lc-host .lc-day.ph-day{background:linear-gradient(165deg,rgba(240,200,50,.16),var(--panel3)); border-color:rgba(240,200,50,.42); cursor:pointer}
.lc-host .lc-day.ph-day:hover{border-color:var(--gold); background:linear-gradient(165deg,rgba(240,200,50,.24),var(--panel))}
.lc-host .lc-day.ph-day *{cursor:pointer}
.lc-host .lc-day.ph-day::after{content:'\f521'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:6px; bottom:3px; font-size:28px; color:rgba(240,200,50,.10); pointer-events:none}
.lc-host .lc-day-num{font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--t2); display:flex; align-items:center; justify-content:space-between}
.lc-host .lc-day.today .lc-day-num{color:var(--gold)}
.lc-host .lc-ph{display:inline-flex; align-items:center; gap:3px; font-size:9px; color:#1a1500; background:linear-gradient(135deg,var(--gold),var(--gold2)); padding:2px 8px; border-radius:999px; font-weight:800; letter-spacing:.5px; box-shadow:0 0 10px var(--gglow); animation:lcPulse 2.6s ease-in-out infinite}
.lc-host .lc-ph i{font-size:8px}
.lc-host .lc-ph-name{font-size:10px; font-weight:700; color:var(--gold); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative; z-index:1}
.lc-host .lc-pill{display:flex; align-items:center; gap:6px; padding:3px 7px 3px 4px; border-radius:999px; font-size:11px; font-weight:600; background:rgba(255,255,255,.06); border-left:3px solid var(--lc,var(--green)); color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:.2s ease}
.lc-host .lc-pill:hover{background:rgba(255,255,255,.12)}
.lc-host .lc-pill.pending{opacity:.62; border-left-style:dashed}
.lc-host .lc-ini{width:18px; height:18px; border-radius:50%; background:var(--lc,var(--green)); color:#0c1109; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}
.lc-host .lc-ini img{width:100%; height:100%; object-fit:cover}
.lc-host .lc-more{font-size:10px; color:var(--t3); padding-left:4px}

.lc-host .lc-side{display:flex; flex-direction:column; gap:14px}
.lc-host .lc-side-card{padding:14px}
.lc-host .lc-side-head{display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--t3); margin-bottom:11px}
.lc-host .lc-side-head i{color:var(--gold)}
.lc-host .lc-list{display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto}
.lc-host .lc-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); background:var(--panel3); border:1px solid var(--border); border-left:3px solid var(--lc,var(--green))}
.lc-host .lc-av{width:30px; height:30px; border-radius:50%; background:var(--lc,var(--green)); color:#0c1109; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden}
.lc-host .lc-av img{width:100%; height:100%; object-fit:cover}
.lc-host .lc-meta{min-width:0; flex:1}
.lc-host .lc-name{font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lc-host .lc-sub{font-size:10.5px; color:var(--t3)}
.lc-host .lc-empty{font-size:12px; color:var(--t4); text-align:center; padding:14px 0}
.lc-host .lc-legend-wrap{display:flex; flex-direction:column; gap:8px}
.lc-host .lc-leg{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--t2)}
.lc-host .lc-leg-dot{width:12px; height:12px; border-radius:4px; flex-shrink:0}
.lc-host .lc-skel{height:380px; border-radius:var(--r-md); background:linear-gradient(100deg,var(--panel3) 30%,var(--panel) 50%,var(--panel3) 70%); background-size:200% 100%; animation:lcShim 1.4s infinite}

/* ── MODALS (global, lc-prefixed) ── */
/* Overlay scrolls and top-aligns the card (margin:auto centres it when it fits,
   but a tall card starts at the top + the overlay scrolls — so the close button
   is never clipped above the viewport). */
/* Background scroll lock while a modal is open. */
html.lc-modal-open, html.lc-modal-open body{overflow:hidden!important; touch-action:none}
/* Top padding clears any sticky page header (~70px) so the card never sits under it;
   bottom/side padding keep it off the edges. Overlay scrolls for tall cards. */
.lc-overlay{position:fixed; inset:0; z-index:320; display:flex; align-items:flex-start; justify-content:center; padding:88px 20px 28px; overflow-y:auto; -webkit-overflow-scrolling:touch; background:rgba(5,7,6,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:lcFade .28s ease both; font-family:'DM Sans',sans-serif}
.lc-overlay.closing{animation:lcFadeOut .2s ease both}
.lc-card{position:relative; width:min(440px,100%); margin: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:lcPop .5s cubic-bezier(.16,1,.3,1) both; color:#f2f7ee}
.lc-overlay.closing .lc-card{animation:lcPopOut .2s ease both}
.lc-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}
.lc-close:hover{background:rgba(232,64,64,.12); border-color:#ff4848; color:#ff4848}
.lc-mhead{position:relative; overflow:hidden; padding:26px 24px 20px; text-align:center; border-bottom:1px solid rgba(255,255,255,.16); background:radial-gradient(420px 200px at 50% -50%, color-mix(in srgb, var(--c,#f0c832) 38%, transparent), transparent 70%)}
.lc-mhead.ph{background:radial-gradient(420px 200px at 50% -40%, rgba(240,200,50,.28), transparent 70%)}
.lc-spark{position:absolute; color:#f0c832; font-size:11px; opacity:.6; animation:lcSpark 2.6s ease-in-out infinite; text-shadow:0 0 8px rgba(240,200,50,.32)}
.lc-spark.s1{top:16px; left:34px} .lc-spark.s2{top:30px; right:42px; animation-delay:.7s} .lc-spark.s3{top:56px; left:54px; font-size:8px; animation-delay:1.2s}
.lc-crown{font-size:38px; color:#f0c832; filter:drop-shadow(0 4px 14px rgba(240,200,50,.32)); animation:lcCrown 3.4s ease-in-out infinite; margin-bottom:6px}
.lc-eyebrow{font-size:10px; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:#f0c832}
.lc-licon{width:52px; height:52px; margin:0 auto 10px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:21px; color:#0c1109; box-shadow:0 6px 18px rgba(0,0,0,.4)}
.lc-mtitle{font-family:'Cinzel',serif; font-weight:700; font-size:22px; color:#f2f7ee; margin:6px 0 4px}
.lc-mdate{font-size:13px; color:rgba(242,247,238,.88)}
.lc-away{display:inline-block; margin-top:12px; padding:5px 14px; border-radius:999px; background:rgba(212,175,55,.12); border:1px solid rgba(240,200,50,.35); color:#f0c832; font-size:11.5px; font-weight:700}
.lc-status{display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:5px 14px; border-radius:999px; font-size:12px; font-weight:700; color:var(--sc); background:color-mix(in srgb, var(--sc) 15%, transparent); border:1px solid color-mix(in srgb, var(--sc) 40%, transparent)}
/* person overlay (all-mode) */
.lc-phead{position:relative; padding:28px 24px 20px; text-align:center; border-bottom:1px solid rgba(255,255,255,.16); background:radial-gradient(420px 220px at 50% -40%, color-mix(in srgb, var(--c,#f0c832) 30%, transparent), transparent 72%)}
.lc-photo{width:96px; height:96px; margin:0 auto 12px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,#f0c832,#f7d94e); color:#1a1500; font-size:34px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px rgba(240,200,50,.2), 0 10px 30px rgba(0,0,0,.5)}
.lc-photo img{width:100%; height:100%; object-fit:cover}
.lc-pname{font-family:'Cinzel',serif; font-weight:700; font-size:22px; color:#f2f7ee}
.lc-prole{font-size:12.5px; color:rgba(242,247,238,.60); margin-top:3px}
.lc-mbody{padding:20px 24px 26px}
.lc-country{display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:rgba(242,247,238,.60); margin-bottom:16px}
.lc-country i{color:#f0c832}
.lc-what{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:rgba(242,247,238,.60); margin-bottom:12px; text-align:center}
.lc-ex{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-left:3px solid var(--c,#f0c832); margin-bottom:10px}
.lc-ex-ic{flex-shrink:0; width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c,#f0c832) 16%, transparent); color:var(--c,#f0c832); font-size:14px}
.lc-ex div{display:flex; flex-direction:column; gap:2px} .lc-ex b{font-size:13px; color:#f2f7ee} .lc-ex span{font-size:12px; color:rgba(242,247,238,.60); line-height:1.5}
.lc-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
.lc-stat{text-align:center; padding:13px 8px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16)}
.lc-stat b{display:block; font-family:'IBM Plex Mono',monospace; font-size:21px; color:#f0c832; line-height:1} .lc-stat span{font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:rgba(242,247,238,.60); margin-top:5px; display:block}
.lc-r{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:13px}
.lc-r:last-child{border-bottom:0} .lc-r span{color:rgba(242,247,238,.60)} .lc-r b{color:#f2f7ee; font-weight:600} .lc-r .mono{font-family:'IBM Plex Mono',monospace; font-size:11.5px}
.lc-note{margin-top:14px; padding:13px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); border-left:3px solid #f0c832; font-size:13px; color:rgba(242,247,238,.88); line-height:1.6}
.lc-note-h{font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:rgba(242,247,238,.60); margin-bottom:7px} .lc-note-h i{color:#f0c832}

@keyframes lcCell{from{opacity:0; transform:scale(.97)}to{opacity:1; transform:none}}
@keyframes lcShim{to{background-position:-200% 0}}
@keyframes lcPulse{0%,100%{box-shadow:0 0 8px var(--gglow)}50%{box-shadow:0 0 16px var(--gold)}}
@keyframes lcFade{from{opacity:0}to{opacity:1}} @keyframes lcFadeOut{from{opacity:1}to{opacity:0}}
@keyframes lcPop{from{opacity:0; transform:scale(.9) translateY(16px)}to{opacity:1; transform:none}} @keyframes lcPopOut{to{opacity:0; transform:scale(.95) translateY(8px)}}
@keyframes lcCrown{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(4deg)}}
@keyframes lcSpark{0%,100%{opacity:.2; transform:scale(.6) rotate(0)}50%{opacity:1; transform:scale(1.1) rotate(22deg)}}

.lc-host .lc-pills{display:flex; flex-direction:column; gap:4px; min-width:0}

@media(max-width:1100px){ .lc-host .lc-layout{grid-template-columns:1fr} .lc-host .lc-side{flex-direction:row; flex-wrap:wrap} .lc-host .lc-side-card{flex:1; min-width:230px} }

/* ── TABLET / SMALL ── */
@media(max-width:760px){
  .lc-host .lc-cal-wrap{padding:10px}
  .lc-host .lc-grid{gap:5px} .lc-host .lc-dow{gap:5px}
  .lc-host .lc-day{min-height:84px}
}

/* ── PHONE: month grid stays, leave shown as compact colour DOTS ── */
@media(max-width:640px){
  .lc-host .lc-toolbar{flex-direction:column; align-items:stretch; gap:10px; margin-bottom:12px}
  .lc-host .lc-nav-group{justify-content:center}
  .lc-host .lc-period{font-size:16px; min-width:0; flex:1}
  .lc-host .lc-kpis{justify-content:center}
  .lc-host .lc-kpi{flex:1; align-items:center; padding:7px 8px} .lc-host .lc-kpi b{font-size:15px}
  .lc-host .lc-cal-wrap{padding:8px}
  .lc-host .lc-grid{gap:3px} .lc-host .lc-dow{gap:3px}
  .lc-host .lc-dow span{font-size:9px}
  .lc-host .lc-day{min-height:52px; padding:4px 4px 5px; border-radius:9px; gap:3px}
  .lc-host .lc-day-num{font-size:11px}
  .lc-host .lc-ph{padding:1px 5px; font-size:8px} .lc-host .lc-ph i{display:none}
  .lc-host .lc-ph-name{display:none}                         /* name shown only in the PH modal on phones */
  .lc-host .lc-day.ph-day::after{font-size:20px; right:3px; bottom:1px}
  /* pills → wrapping row of dots */
  .lc-host .lc-pills{flex-direction:row; flex-wrap:wrap; gap:3px; align-content:flex-start}
  .lc-host .lc-pill{padding:0; background:none!important; border:none!important; gap:0; border-radius:50%}
  .lc-host .lc-pill .lc-nm{display:none}
  .lc-host .lc-ini{width:14px; height:14px; box-shadow:0 0 0 1px rgba(255,255,255,.25)}
  .lc-host .lc-ini i{font-size:7px}
  .lc-host .lc-more{font-size:9px; padding:0; align-self:center; color:var(--t2)}
  /* side cards stack full width */
  .lc-host .lc-side{flex-direction:column}
  .lc-host .lc-side-card{min-width:0; width:100%}
  /* modals fill the phone width comfortably (cleared from the header, overlay scrolls) */
  .lc-overlay{padding:74px 12px 20px}
  .lc-card{width:100%; border-radius:20px}
  .lc-photo{width:80px; height:80px; font-size:28px}
  .lc-stats{gap:7px} .lc-stat{padding:11px 5px} .lc-stat b{font-size:18px}
}

/* ── NARROW PHONE (≤400px) — keep 7 cols readable ── */
@media(max-width:400px){
  .lc-host .lc-grid{gap:2px} .lc-host .lc-dow{gap:2px}
  .lc-host .lc-day{min-height:46px; padding:3px}
  .lc-host .lc-day-num{font-size:10px}
  .lc-host .lc-ini{width:12px; height:12px}
  .lc-host .lc-pills{gap:2px}
}