:root{
  --p:#191d64;--pd:#12154a;--pl:#2d3299;
  --bg:#f1f5f9;--card:#fff;--bdr:#e2e8f0;
  --tx:#1e293b;--txs:#64748b;
  --full:#3b82f6;--am:#10b981;--pm:#f59e0b;
  --avail:#16a34a;--unavail:#dc2626;
  --danger:#ef4444;
  --r:8px;
  --sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
  --shm:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--tx);min-height:100vh}
.screen{display:none}.screen.active{display:block;animation:fi .18s ease}
@keyframes fi{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Header */
.hdr{background:var(--p);color:#fff;padding:0 1.25rem;height:54px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shm)}
.hdr-l{font-size:.95rem;font-weight:700;display:flex;align-items:center;gap:.4rem}
.hdr-logo{height:32px;width:auto;object-fit:contain;filter:brightness(0) invert(1)}
.hdr-r{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.hdr-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4)}
.hdr-name{font-size:.78rem;opacity:.85}

/* Buttons */
.btn{padding:.42rem .85rem;border-radius:var(--r);border:none;cursor:pointer;font-size:.8rem;font-weight:600;transition:all .14s;display:inline-flex;align-items:center;gap:.32rem;white-space:nowrap;line-height:1}
.btn-p{background:var(--p);color:#fff}.btn-p:hover{background:var(--pd)}
.btn-s{background:#fff;color:var(--tx);border:1.5px solid var(--bdr)}.btn-s:hover{background:var(--bg)}
.btn-g{background:transparent;color:#fff;opacity:.82}.btn-g:hover{opacity:1;background:rgba(255,255,255,.13)}
.btn-d{background:var(--danger);color:#fff}.btn-d:hover{background:#dc2626}
.btn-avail{background:#dcfce7;color:#166534;border:1.5px solid #bbf7d0}.btn-avail:hover{background:#bbf7d0}
.btn-sm{padding:.28rem .6rem;font-size:.75rem}
.btn-blk{width:100%;justify-content:center;padding:.7rem}

/* Forms */
.fg{margin-bottom:1rem}
.lbl{display:block;font-size:.8rem;font-weight:600;margin-bottom:.32rem;color:var(--tx)}
.lbl-opt{font-weight:400;color:var(--txs);font-size:.75rem}
.inp,.sel{width:100%;padding:.54rem .78rem;border:1.5px solid var(--bdr);border-radius:var(--r);font-size:.875rem;color:var(--tx);background:#fff;outline:none;transition:border-color .14s}
.inp:focus,.sel:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
.ta{resize:vertical;min-height:72px}
.inp-num{-moz-appearance:textfield}.inp-num::-webkit-inner-spin-button{opacity:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.err-msg{display:none;color:var(--danger);font-size:.76rem;margin-bottom:.6rem;line-height:1.55}
.err-msg code{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

/* Slot toggle */
.slot-btns{display:flex;gap:.45rem}
.slt-btn{flex:1;padding:.5rem;border:2px solid var(--bdr);border-radius:var(--r);background:#fff;cursor:pointer;font-size:.75rem;font-weight:700;text-align:center;transition:all .14s;color:var(--txs)}
.slt-btn.on-full{border-color:var(--full);background:#eef0fb;color:var(--full)}
.slt-btn.on-am{border-color:var(--am);background:#ecfdf5;color:#065f46}
.slt-btn.on-pm{border-color:var(--pm);background:#fffbeb;color:#92400e}

/* Avail toggle */
.avail-btns{display:flex;gap:.45rem}
.av-btn{flex:1;padding:.5rem;border:2px solid var(--bdr);border-radius:var(--r);background:#fff;cursor:pointer;font-size:.78rem;font-weight:700;text-align:center;transition:all .14s;color:var(--txs)}
.av-btn.on-yes{border-color:#16a34a;background:#f0fdf4;color:#166534}
.av-btn.on-no{border-color:#dc2626;background:#fef2f2;color:#991b1b}
.av-btn.on{border-color:var(--p);background:var(--p);color:#fff}

/* Weekday picker (booking recurrence) */
.wd-btns{display:flex;gap:.28rem}
.wd-btn{flex:1;padding:.38rem .2rem;border:1.5px solid var(--bdr);border-radius:var(--r);background:#fff;cursor:pointer;font-size:.72rem;font-weight:700;text-align:center;color:var(--txs);transition:all .13s;min-width:0}
.wd-btn:hover{border-color:var(--pl);color:var(--p)}
.wd-btn.on{background:var(--p);color:#fff;border-color:var(--p)}

/* Calendar */
.cal-wrap{padding:1rem 1.2rem;max-width:920px;margin:0 auto}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;gap:.5rem}
.cal-lbl{font-size:1.1rem;font-weight:800;text-align:center}
.legend{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.3rem;justify-content:center}
.vt-btns{display:flex;gap:.3rem;justify-content:center;margin:.35rem 0}
.vt-btn{padding:.22rem .8rem;border-radius:999px;border:1.5px solid var(--bdr);background:#fff;font-size:.72rem;font-weight:700;cursor:pointer;color:var(--txs);transition:all .14s}
.vt-btn.on{background:var(--p);color:#fff;border-color:var(--p)}
/* Week view */
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.4rem;padding:.75rem}
.week-day{border:1px solid var(--bdr);border-radius:8px;background:#fff;min-height:140px;overflow:hidden}
.week-day.is-today{border-color:var(--p);background:#eef0fb}
.week-day.is-avail{background:#f0fdf4}
.week-day.is-unavail{background:#fef2f2}
.week-day-hdr{background:#f8fafc;padding:.3rem .5rem;font-size:.72rem;font-weight:800;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.week-day-hdr:hover{background:#f1f5f9}
.week-day-hdr .wdn{color:var(--txs)}
.week-day-hdr .wdd{font-size:.9rem;color:var(--tx)}
.week-day-body{padding:.3rem}
/* List view */
.cal-list-wrap{padding:.75rem}
.cl-empty{text-align:center;padding:3rem 1rem;color:var(--txs)}
.cl-month{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--txs);padding:.5rem .2rem .2rem;margin-top:.5rem}
.cl-row{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .5rem;border-bottom:1px solid var(--bdr);cursor:pointer;border-radius:6px;transition:background .12s}
.cl-row:hover{background:#f8fafc}
.cl-date{min-width:52px;font-size:.78rem;font-weight:700;color:var(--tx)}
.cl-date-sub{font-size:.65rem;color:var(--txs);font-weight:400}
.cl-info{flex:1;font-size:.82rem}
.cl-client{font-weight:700}
.cl-detail{color:var(--txs);font-size:.75rem;margin-top:.1rem}
.leg-i{display:flex;align-items:center;gap:.28rem;font-size:.68rem;color:var(--txs)}
.leg-d{width:10px;height:10px;border-radius:2px}
.ld-f{background:var(--full)}.ld-a{background:var(--am)}.ld-p{background:var(--pm)}
.ld-av{background:var(--avail)}.ld-un{background:var(--unavail)}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-hdr{text-align:center;font-size:.68rem;font-weight:800;color:var(--txs);padding:.38rem 0;text-transform:uppercase;letter-spacing:.04em}
.cal-day{min-height:82px;border:1px solid var(--bdr);border-radius:6px;background:#fff;padding:.32rem;cursor:pointer;transition:border-color .13s,box-shadow .13s;position:relative}
.cal-day:hover{border-color:var(--pl);box-shadow:0 0 0 2px rgba(59,130,246,.14)}
.cal-day.is-today{border-color:var(--p);background:#eef0fb}
.cal-day.is-avail{background:#f0fdf4}
.cal-day.is-unavail{background:#fef2f2}
.cal-day.oth{opacity:.28;cursor:default;background:#f8fafc}
.cal-day.oth:hover{border-color:var(--bdr);box-shadow:none}
.dn{font-size:.72rem;font-weight:700;color:var(--txs);margin-bottom:.2rem}
.is-today .dn{color:var(--p)}
.dslots{display:flex;flex-direction:column;gap:2px}
.chip{border-radius:3px;padding:1px 4px;font-size:.64rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.c-full{background:#e8eaf6;color:#191d64}.c-am{background:#d1fae5;color:#065f46}.c-pm{background:#fef3c7;color:#92400e}
.av-tag{font-size:.6rem;font-weight:800;padding:1px 4px;border-radius:3px;margin-top:1px}
.av-tag-yes{background:#dcfce7;color:#166534}.av-tag-no{background:#fee2e2;color:#991b1b}

/* Admin */
.adm-wrap{padding:1rem 1.2rem;max-width:1440px;margin:0 auto}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.55rem;margin-bottom:.9rem}
.stat{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:.75rem;box-shadow:var(--sh);text-align:center}
.sv{font-size:1.5rem;font-weight:800;color:var(--p)}
.sl{font-size:.67rem;color:var(--txs);font-weight:600;margin-top:.1rem}

/* Country filter chips */
.country-bar{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem;align-items:center}
.c-chip{padding:.3rem .75rem;border-radius:999px;border:1.5px solid var(--bdr);background:#fff;cursor:pointer;font-size:.78rem;font-weight:600;transition:all .14s;color:var(--txs)}
.c-chip:hover{border-color:var(--pl);color:var(--p)}
.c-chip.on{background:var(--p);color:#fff;border-color:var(--p)}

.fbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:.75rem;margin-bottom:.9rem;box-shadow:var(--sh)}
.fg-f{display:flex;flex-direction:column;gap:.22rem;min-width:110px}
.flbl{font-size:.65rem;font-weight:800;color:var(--txs);text-transform:uppercase;letter-spacing:.05em}
.fsel{padding:.3rem .5rem;border:1.5px solid var(--bdr);border-radius:var(--r);font-size:.8rem;color:var(--tx);background:#fff;outline:none;cursor:pointer}
.fsel:focus{border-color:var(--p)}

/* Nav tabs */
.ntabs{display:flex;background:rgba(255,255,255,.13);border-radius:6px;padding:2px}
.ntab{padding:.26rem .72rem;border-radius:5px;font-size:.75rem;font-weight:700;cursor:pointer;color:rgba(255,255,255,.68);transition:all .14s}
.ntab.on{background:#fff;color:var(--p)}

/* Timeline */
.tl-scroll{overflow-x:auto;border:1px solid var(--bdr);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
.tl{min-width:800px;border-collapse:collapse;width:100%}
.tl th{background:#f8fafc;padding:.35rem .4rem;font-size:.63rem;font-weight:800;color:var(--txs);text-transform:uppercase;border-bottom:2px solid var(--bdr);white-space:nowrap;position:sticky;top:0;z-index:1;text-align:center}
.tl th:first-child{width:150px;position:sticky;left:0;z-index:2;border-right:2px solid var(--bdr);text-align:left}
.tl td:first-child{position:sticky;left:0;background:#fff;z-index:1;border-right:2px solid var(--bdr)}
.tl tr:hover td{background:#f8fafc}.tl tr:hover td:first-child{background:#f8fafc}
.tl td{padding:.25rem .3rem;border-bottom:1px solid var(--bdr);border-right:1px solid var(--bdr);font-size:.78rem;vertical-align:middle;min-width:34px}
.tl-un{font-weight:700;font-size:.77rem;white-space:nowrap}
.tl-co{font-size:.63rem;color:var(--txs)}
/* Timeline cells — split AM (top) / PM (bottom) half-day bars */
.tl-cell{display:flex;flex-direction:column;gap:1px;min-height:34px;padding:2px}
.tl-half{height:14px;border-radius:2px;width:100%;cursor:pointer;transition:filter .1s}
.tl-half:hover{filter:brightness(.86)}
/* Booking states */
.tl-h-bk-f{background:var(--full)}
.tl-h-bk-a{background:var(--full)} /* Half AM booked: same blue as Full Day */
.tl-h-bk-p{background:var(--full)} /* Half PM booked: same blue as Full Day */
/* Availability states */
.tl-h-av{background:#86efac;cursor:default}
.tl-h-un{background:#fca5a5;cursor:default}
/* Empty — click to add */
.tl-h-empty{background:rgba(0,0,0,.05)}
.tl-h-empty:hover{filter:none;background:rgba(59,130,246,.16)}
.tl-h-hol{background:#fb923c;cursor:default} /* Holiday (orange) */
.tl-h-sick{background:#f472b6;cursor:default} /* Sick day (pink) */
.tc-td{background:#eef0fb!important}
.tl th.tc-td{color:var(--p)}
.wknd-col{background:#fafafa}

/* List */
.ltab{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.ltab th{background:#f8fafc;padding:.6rem .85rem;text-align:left;font-size:.67rem;font-weight:800;color:var(--txs);text-transform:uppercase;border-bottom:1px solid var(--bdr)}
.ltab td{padding:.5rem .85rem;font-size:.8rem;border-bottom:1px solid var(--bdr);vertical-align:middle}
.ltab tr:last-child td{border-bottom:none}
.ltab tr:hover td{background:#f8fafc}

/* Badges */
.badge{display:inline-flex;align-items:center;padding:.16rem .52rem;border-radius:999px;font-size:.68rem;font-weight:700}
.b-f{background:#e8eaf6;color:#191d64}.b-a{background:#d1fae5;color:#065f46}.b-p{background:#fef3c7;color:#92400e}
.b-adm{background:#fce7f3;color:#9d174d}.b-ctrl{background:#e8eaf6;color:#191d64}
.b-on{background:#dcfce7;color:#166534}.b-off{background:#fee2e2;color:#991b1b}

/* Modal */
.mov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:1000;align-items:center;justify-content:center;padding:1rem}
.mov.open{display:flex}
.modal{background:#fff;border-radius:12px;padding:1.5rem;width:100%;max-width:460px;max-height:93vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.28);animation:fi .17s ease}
.modal-lg{max-width:560px}
.mtitle{font-size:1rem;font-weight:800;margin-bottom:1.1rem}
.mfoot{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.3rem;flex-wrap:wrap}
.ml{margin-right:auto}

/* Settings */
.set-wrap{padding:1rem 1.2rem;max-width:900px;margin:0 auto}
.set-card{background:#fff;border-radius:var(--r);border:1px solid var(--bdr);margin-bottom:1.2rem;box-shadow:var(--sh);overflow:hidden}
.set-head{padding:.8rem 1.1rem;border-bottom:1px solid var(--bdr);font-weight:800;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}
.stabs{display:flex;border-bottom:2px solid var(--bdr);background:#fff}
.stab{padding:.6rem 1.2rem;font-size:.82rem;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--txs);transition:all .13s}
.stab.on{color:var(--p);border-bottom-color:var(--p)}
.gtab{display:none;margin-top:1rem}.gtab.on{display:block}
.utab{width:100%;border-collapse:collapse}
.utab th{background:#f8fafc;padding:.5rem .9rem;text-align:left;font-size:.67rem;font-weight:800;color:var(--txs);text-transform:uppercase;border-bottom:1px solid var(--bdr)}
.utab td{padding:.5rem .9rem;font-size:.8rem;border-bottom:1px solid var(--bdr);vertical-align:middle}
.utab tr:last-child td{border-bottom:none}

/* Setup/Login */
.center-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,#0a0b1e 0%,#191d64 60%,#2d3299 100%)}
.center-card{background:#fff;border-radius:14px;padding:2.2rem;width:100%;max-width:480px;box-shadow:0 24px 64px rgba(0,0,0,.32)}
.card-ico{text-align:center;font-size:2rem;margin-bottom:.5rem}
.card-h{font-size:1.3rem;font-weight:800;margin-bottom:.25rem}
.card-sub{font-size:.8rem;color:var(--txs);margin-bottom:1.5rem;line-height:1.5}

/* Google sign-in button */
.btn-google{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.72rem 1.2rem;border-radius:8px;border:1.5px solid var(--bdr);background:#fff;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--tx);width:100%;transition:all .14s;box-shadow:var(--sh)}
.btn-google:hover{background:#f8fafc;border-color:var(--pl)}
.g-logo{width:20px;height:20px}

/* Steps */
.step{display:flex;gap:.75rem;margin-bottom:.65rem;font-size:.8rem;line-height:1.5}
.step-n{background:var(--p);color:#fff;border-radius:50%;width:22px;height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;margin-top:.1rem}
code{background:#f1f5f9;border:1px solid var(--bdr);border-radius:4px;padding:1px 5px;font-size:.78rem;font-family:monospace}

/* Checkbox list */
.chk-list{max-height:170px;overflow-y:auto;border:1.5px solid var(--bdr);border-radius:var(--r);padding:.35rem}
.chk-item{display:flex;align-items:center;gap:.5rem;padding:.28rem .4rem;border-radius:4px;cursor:pointer;font-size:.82rem}
.chk-item:hover{background:#f8fafc}
.chk-item input{cursor:pointer;width:15px;height:15px}

/* Spinner + Toast */
.spin-ov{display:none;position:fixed;inset:0;background:rgba(255,255,255,.72);z-index:2000;align-items:center;justify-content:center}
.spin-ov.on{display:flex}
.spinner{width:38px;height:38px;border:4px solid var(--bdr);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:1.1rem;left:50%;transform:translateX(-50%) translateY(70px);background:#1e293b;color:#fff;padding:.55rem 1rem;border-radius:8px;font-size:.8rem;font-weight:600;z-index:3000;transition:transform .26s ease;pointer-events:none;white-space:nowrap;max-width:90vw}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{background:#166534}.toast.bad{background:#991b1b}

/* Tooltip */
#tip{display:none;position:fixed;background:#1e293b;color:#fff;padding:.4rem .7rem;border-radius:6px;font-size:.72rem;z-index:500;pointer-events:none;max-width:230px;line-height:1.45}

/* Divider */
.divider{border:none;border-top:1px solid var(--bdr);margin:1rem 0}

/* Freshbooks */
.fb-status{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700;padding:.3rem .7rem;border-radius:999px}
.fb-on{background:#dcfce7;color:#166534}.fb-off{background:#fee2e2;color:#991b1b}
.fb-dot{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.8}
.fb-card{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:1.2rem;box-shadow:var(--sh);overflow:hidden}
.fb-head{padding:.8rem 1.1rem;border-bottom:1px solid var(--bdr);font-weight:800;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}
.fb-body{padding:1rem}
.fb-note{font-size:.78rem;color:var(--txs);margin-bottom:.75rem;line-height:1.55}
.fb-result{margin-top:.75rem;font-size:.82rem;padding:.55rem .75rem;border-radius:6px}
.fb-result.ok{background:#f0fdf4;color:#166534}.fb-result.err{background:#fef2f2;color:#991b1b}

@media(max-width:620px){
  .cal-day{min-height:62px;padding:.25rem}
  .cal-wrap,.adm-wrap,.set-wrap{padding:.65rem}
  .row2{grid-template-columns:1fr}
  .fbar{flex-direction:column}
  .fg-f{min-width:100%}
}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--txs)}
.empty-ic{font-size:2.2rem;margin-bottom:.5rem}
.empty-t{font-size:.9rem;font-weight:700;margin-bottom:.2rem}
.empty-s{font-size:.78rem}

@media (max-width: 390px) {
  .legend {
    grid-template-columns: 1fr;
  }

  .vt-btn {
    font-size: 0.72rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .cl-row {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .cl-client {
    font-size: 0.93rem;
  }

  .cl-detail {
    font-size: 0.75rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.hdr-meta {
  opacity: 0.7;
  font-weight: 400;
  font-size: 0.82rem;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.hdr-actions-user {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cal-nav-main {
  flex: 1 1 420px;
  min-width: 0;
  text-align: center;
}

.cal-nav-side {
  flex: 0 0 auto;
}

/* ---------- Responsive/layout fix patch ---------- */

.hdr {
  gap: 0.75rem;
}

.hdr-l,
.hdr-r,
.hdr-actions,
.hdr-actions-main,
.hdr-actions-user {
  min-width: 0;
}

.hdr-r {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: nowrap;
}

.hdr-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hdr-actions-main {
  flex: 0 1 auto;
}

.hdr-actions-user {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.hdr-avatar {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: block;
  align-self: center;
  margin: 0;
}

.hdr-name {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  white-space: nowrap;
  line-height: 1;
}

.hdr .btn,
.hdr .btn-sm,
.ntabs,
.ntab {
  align-self: center;
}

.ntabs {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
}

.ntab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  white-space: nowrap;
}

.utab {
  width: 100%;
  table-layout: auto;
}

.utab th,
.utab td {
  vertical-align: middle;
}

.utab td:last-child,
.utab th:last-child {
  white-space: nowrap;
}

.badge,
.fb-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  line-height: 1;
  min-height: 30px;
  padding: 0.22rem 0.7rem;
}

.b-on,
.b-off {
  min-width: 74px;
}

.set-card > div[style*="overflow-x:auto"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.set-head {
  gap: 0.75rem;
}

.set-head > * {
  min-width: 0;
}

.set-head > div[style*="display:flex"] {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.country-bar,
.legend,
.vt-btns,
.fbar {
  min-width: 0;
}

.fg-f {
  flex: 1 1 180px;
}

.fbar > .btn {
  flex: 0 0 auto;
}

.cal-nav-main {
  flex: 1 1 420px;
  min-width: 0;
  text-align: center;
}

.cal-nav-side {
  flex: 0 0 auto;
}

.tl-scroll,
.ltab,
.utab {
  min-width: 0;
}

/* ---------- Large desktop ---------- */
@media (min-width: 1200px) {
  .adm-wrap {
    padding: 1.1rem 1.25rem;
  }

  .stats-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
  }

  .utab th,
  .utab td,
  .ltab th,
  .ltab td {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hdr-r {
    gap: 0.75rem;
  }
}

/* ---------- Tablet / small desktop ---------- */
@media (max-width: 1024px) {
  .hdr {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hdr-r {
    gap: 0.45rem;
  }

  .hdr-actions {
    gap: 0.4rem;
  }

  .hdr-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .set-head {
    padding: 0.75rem 0.95rem;
  }

  .utab th,
  .utab td {
    padding: 0.55rem 0.75rem;
  }

  .b-on,
  .b-off {
    min-width: 70px;
  }
}

/* ---------- Tablet portrait / wide phones ---------- */
@media (max-width: 820px) {
  .hdr {
    height: auto;
    min-height: 58px;
    padding: calc(env(safe-area-inset-top, 0px) + 0.55rem) 0.9rem 0.55rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hdr-l {
    flex: 1 1 180px;
  }

  .hdr-r {
    flex: 1 1 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .hdr-actions-main,
  .hdr-actions-user {
    flex: 1 1 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .hdr-actions-user {
    align-items: center;
  }

  .ntabs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fbar {
    align-items: stretch;
  }

  .fg-f {
    flex: 1 1 calc(50% - 0.6rem);
    min-width: 180px;
  }

  .set-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .set-head > div[style*="display:flex"] {
    width: 100%;
    justify-content: flex-start;
  }

  .utab {
    min-width: 760px;
  }
}

/* Week view: allow horizontal scroll on very narrow screens */
#cal-week {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .hdr-meta {
    display: block;
    font-size: 0.72rem;
    line-height: 1.2;
  }

  .hdr-actions-main,
  .hdr-actions-user {
    width: 100%;
    justify-content: space-between;
  }

  /* Calendar nav: wrap so cal-nav-main sits on its own row above the
     Prev/Next buttons.  Without flex-wrap the legend items get squeezed
     into a single narrow column that overlaps the calendar grid. */
  .cal-nav {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.4rem;
  }

  /* Main area (label + view toggle + legend) stretches to full width
     and floats to the top row via order: -1 */
  .cal-nav-main {
    flex: 1 1 100%;
    order: -1;
  }

  /* Prev/Next buttons share the row below, each taking half the width */
  .cal-nav-side {
    flex: 1 1 calc(50% - 0.2rem);
    min-width: 0;
  }

  .cal-nav-side .btn {
    width: 100%;
  }

  /* Admin nav has no legend — keep it as a single-row flex line */
  .adm-nav {
    flex-wrap: nowrap;
  }
  .adm-nav .cal-nav-main {
    order: 0;
    flex: 1 1 auto;
  }
  .adm-nav .cal-nav-side {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .hdr {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }

  .hdr-logo {
    height: 24px;
    max-width: 120px;
  }

  .hdr-actions-main,
  .hdr-actions-user {
    width: 100%;
    gap: 0.45rem;
  }

  .hdr-actions-user {
    justify-content: flex-start;
  }

  .hdr-avatar {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .hdr-name {
    min-height: 28px;
    font-size: 0.72rem;
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
  }

  .btn {
    min-height: 40px;
  }

  .btn-sm {
    min-height: 34px;
  }

  .adm-wrap,
  .cal-wrap,
  .set-wrap {
    padding: 0.75rem;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .stat {
    padding: 0.7rem;
  }

  .sv {
    font-size: 1.2rem;
  }

  .sl {
    font-size: 0.64rem;
  }

  .fbar {
    flex-direction: column;
    gap: 0.65rem;
  }

  .fg-f {
    min-width: 0;
    width: 100%;
  }

  .fbar > .btn {
    width: 100%;
  }

  .set-head {
    padding: 0.75rem 0.85rem;
  }

  .set-head .btn {
    width: 100%;
    justify-content: center;
  }

  .utab {
    min-width: 700px;
  }

  .badge,
  .fb-status {
    min-height: 28px;
    font-size: 0.68rem;
    padding: 0.2rem 0.62rem;
  }

  .b-on,
  .b-off {
    min-width: 68px;
  }

  .ntab {
    padding: 0.38rem 0.7rem;
    font-size: 0.74rem;
  }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 420px) {
  .hdr {
    gap: 0.55rem;
  }

  .hdr-actions-main .btn,
  .hdr-actions-user .btn {
    flex: 1 1 auto;
  }

  .hdr-actions-user {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
  }

  .hdr-actions-user .hdr-name {
    padding-right: 0.2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .badge,
  .fb-status {
    min-width: 64px;
    font-size: 0.66rem;
  }

  .utab {
    min-width: 640px;
  }
}

/* ══════════════════════════════════════════════════════════
   Phase 1 Security Fix — replace all inline style= attributes
   ══════════════════════════════════════════════════════════ */

/* Setup screen */
.mw-540           { max-width: 540px; }
.mw-360           { max-width: 360px; text-align: center; }
.logo-h48         { height: 48px; width: auto; margin: 0 auto 1rem; display: block; filter: invert(1); }
.logo-h52         { height: 52px; width: auto; margin: 0 auto 1rem; display: block; filter: invert(1); }
.info-box         { background: #f8fafc; border: 1px solid var(--bdr); border-radius: var(--r); padding: 1rem; margin-bottom: 1.1rem; font-size: .8rem; }
.info-box-title   { font-weight: 800; margin-bottom: .6rem; }
.textarea-code    { min-height: 130px; font-family: monospace; font-size: .75rem; }
.step-warning     { color: #c0392b; }

/* Login screen */
.login-err-mt     { margin-top: .75rem; text-align: left; }
.auth-note        { margin-top: 1rem; font-size: .72rem; color: var(--txs); }
.cfg-btn          { margin-top: .75rem; font-size: .72rem; opacity: .7; }

/* Shared layout helpers */
.d-none           { display: none; }
.ov-x-auto        { overflow-x: auto; }
.flex-gap-5       { display: flex; gap: .5rem; }
.p-1rem           { padding: 1rem; }
.mt-1rem          { margin-top: 1rem; }

/* Admin legend row */
.leg-row          { margin-top: .6rem; display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; font-size: .68rem; color: var(--txs); }
.leg-label        { font-weight: 800; color: var(--txs); font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }
.leg-sw           { width: 22px; height: 10px; border-radius: 2px; }
.leg-sw-full      { background: var(--full); }
.leg-sw-am        { background: var(--am); }
.leg-sw-pm        { background: var(--pm); }
.leg-sw-avail     { background: #86efac; }
.leg-sw-unavail   { background: #fca5a5; }
.leg-sw-free      { background: rgba(0,0,0,.07); border: 1px solid #e2e8f0; }

/* Settings */
.sett-sub         { opacity: .7; font-weight: 400; font-size: .82rem; }
.adm-clear-btn    { align-self: flex-end; }
.set-head-flex    { display: flex; gap: .5rem; }
.danger-zone-btns { padding: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }

/* Modals */
.booking-for-note { display: none; font-size: .8rem; color: var(--txs); margin-bottom: .6rem; padding: .3rem .5rem; background: var(--bg); border-radius: var(--r); }

/* JS-generated content — innerHTML replacements */
.cal-free-lbl     { color: var(--txs); font-size: .7rem; }
.chip-sub         { font-size: .62rem; opacity: .7; }
.badge-sm         { font-size: .65rem; }
.badge-pending    { background: #f59e0b; color: #fff; }
.tbl-empty        { padding: 2rem; text-align: center; color: var(--txs); }
.tbl-email        { font-size: .76rem; }
.tbl-detail       { font-size: .76rem; color: var(--txs); }
.tbl-nowrap       { white-space: nowrap; }
.tbl-right        { text-align: right; }
.tbl-notes        { color: var(--txs); font-size: .76rem; }
.tbl-qty-dash     { color: var(--txs); }
.no-items         { color: var(--txs); font-size: .8rem; padding: .3rem; }
.fb-inactive      { padding: 2rem; color: var(--txs); font-size: .9rem; }
.fb-inactive-sub  { margin-top: .5rem; font-size: .8rem; opacity: .7; }

/* Admin timeline table layout */
.tl-hdr-cell      { text-align: left; padding: .4rem .6rem; }
.tl-name-cell     { padding: .4rem .6rem; }
.tl-grp-row       { background: #f1f5f9; }
.tl-grp-cell      { padding: .3rem .6rem; font-size: .7rem; font-weight: 800; color: var(--txs); text-transform: uppercase; letter-spacing: .06em; }
.wk-hdr-cell      { text-align: left; padding: .4rem .6rem; min-width: 110px; }
.tl-scroll-wrap   { overflow-x: auto; }
.tl-min-700       { min-width: 700px; }

/* Clickable table rows */
.ltab tbody tr { cursor: pointer; }

/* Small modal variant */
.modal-sm         { max-width: 300px; }

/* Day-picker button column */
.flex-col-gap     { display: flex; flex-direction: column; gap: .6rem; }

/* Modal footer top margin (compact dialogs) */
.mfoot-mt         { margin-top: .75rem; }

/* ── Reports view ─────────────────────────── */
.rp-toolbar{display:flex;align-items:flex-end;gap:.75rem;padding:1rem 0 .75rem;flex-wrap:wrap}
.rp-tb-grp{display:flex;flex-direction:column;gap:.28rem}
.rp-section{margin-bottom:1rem}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:720px){.rp-grid{grid-template-columns:1fr}}
.rp-card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:1.1rem 1.25rem}
.rp-card-t{font-size:.88rem;font-weight:700;color:var(--tx);margin-bottom:.9rem}
.rp-util-legend{display:flex;align-items:center;gap:.75rem;margin-bottom:.8rem;font-size:.76rem;color:var(--txs)}
.rp-leg-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:.2rem;vertical-align:middle}
.rp-leg-full{background:var(--full)}
.rp-leg-am{background:var(--am)}
.rp-leg-pm{background:var(--pm)}
.rp-util-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.55rem}
.rp-util-name{font-size:.8rem;color:var(--tx);width:110px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-util-bar-wrap{flex:1;display:flex;align-items:center;gap:.5rem}
.rp-util-bar{flex:1;height:14px;background:var(--bg);border-radius:4px;overflow:hidden;display:flex}
.rp-seg{height:100%}
.rp-seg-f{background:var(--full)}
.rp-seg-a{background:var(--am)}
.rp-seg-p{background:var(--pm)}
.rp-util-pct{font-size:.74rem;color:var(--txs);width:36px;text-align:right;flex-shrink:0}
.rp-cli-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.rp-cli-name{font-size:.8rem;color:var(--tx);width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-cli-bar-wrap{flex:1;display:flex;align-items:center;gap:.5rem}
.rp-cli-bar{height:12px;background:var(--p);border-radius:3px;min-width:2px;transition:width .2s}
.rp-cli-val{font-size:.74rem;color:var(--txs);white-space:nowrap}
.rp-svg{width:100%;height:auto;display:block}
.rpc-t{font-size:10px;fill:var(--txs);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
/* Report availability overlay */
.rp-seg-av{background:#86efac} /* available-but-unbooked */
.rp-util-pct{font-size:.72rem;color:var(--txs);width:90px;text-align:right;flex-shrink:0;line-height:1.35}
.rp-util-pct-main{color:var(--tx);font-weight:700}
.rp-avail-hint{font-size:.66rem;color:var(--txs)}

/* Controller weekly availability grid (settings modal) */
.av-week-grid{display:flex;gap:.45rem;margin-top:.2rem}
.av-week-col{display:flex;flex-direction:column;align-items:center;gap:.22rem;flex:1;min-width:0}
.av-week-lbl{font-size:.68rem;font-weight:700;color:var(--txs);text-transform:uppercase;letter-spacing:.03em}
.av-week-half{width:100%;height:18px;border-radius:3px;cursor:pointer;background:rgba(0,0,0,.06);transition:all .12s;border:1.5px solid transparent}
.av-week-half:hover{background:rgba(0,0,0,.12)}
.av-week-half.on-am{background:var(--am);border-color:var(--am)}
.av-week-half.on-pm{background:var(--pm);border-color:var(--pm)}
.av-week-sub{font-size:.6rem;color:var(--txs);opacity:.7}

/* Document upload section in booking modal */
.docs-list{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.5rem}
.doc-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;padding:.3rem .5rem;background:var(--bg);border-radius:5px}
.doc-item-icon{flex-shrink:0;font-size:.85rem}
.doc-item-name{flex:1;color:var(--p);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.doc-item-name:hover{text-decoration:underline}
.docs-upload-btn{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;user-select:none}
.doc-status{font-size:.76rem;color:var(--txs);margin-top:.35rem;min-height:1.1em}

/* Off-Day modal list */
.od-list{display:flex;flex-direction:column;gap:.4rem;max-height:200px;overflow-y:auto;margin-top:.4rem}
.od-item{display:flex;align-items:center;gap:.55rem;padding:.32rem .5rem;background:var(--bg);border-radius:5px;font-size:.8rem}
.od-icon{flex-shrink:0;font-size:.9rem}
.od-range{font-weight:600;flex:1;white-space:nowrap}
.od-type-tag{font-size:.7rem;padding:.12rem .38rem;border-radius:20px;font-weight:700;flex-shrink:0}
.od-type-hol{background:#ffedd5;color:#c2410c}
.od-type-sick{background:#fce7f3;color:#9d174d}
.od-note-txt{color:var(--txs);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
.od-sep{border-top:1px solid var(--bdr);margin:.75rem 0 .5rem}

/* ════════════════════════════════════
   MANAGER DASHBOARD (team_manager role)
   ════════════════════════════════════ */
.mgr-wrap{max-width:900px;margin:0 auto;padding:1.2rem 1rem 3rem}
.mgr-ctrl-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.mgr-ctrl-btn{padding:.45rem 1rem;border-radius:22px;border:2px solid var(--bdr);background:#fff;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .14s;color:var(--tx);line-height:1.2}
.mgr-ctrl-btn:hover{border-color:var(--p);color:var(--p)}
.mgr-ctrl-btn.active{background:var(--p);border-color:var(--p);color:#fff}
.mgr-no-ctrls{padding:.8rem;font-size:.85rem;color:var(--txs);background:var(--bg);border-radius:8px;border:1px solid var(--bdr)}
.mgr-panel{background:#fff;border:1px solid var(--bdr);border-radius:10px;overflow:hidden}
.mgr-panel-head{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--bdr);flex-wrap:wrap;background:var(--bg)}
.mgr-ctrl-name{font-weight:700;font-size:.95rem;color:var(--tx);flex:1;min-width:0}
.mgr-panel-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.mgr-nav{display:flex;align-items:center;gap:.5rem}
.mgr-month-lbl{font-size:.82rem;font-weight:600;color:var(--tx);min-width:120px;text-align:center}
.mgr-tabs{display:flex;gap:0;border-bottom:1px solid var(--bdr);background:var(--bg)}
.mgr-tab{padding:.6rem 1.1rem;font-size:.83rem;font-weight:600;cursor:pointer;color:var(--txs);border-bottom:2.5px solid transparent;transition:all .12s;user-select:none}
.mgr-tab:hover{color:var(--tx)}
.mgr-tab.on{color:var(--p);border-bottom-color:var(--p);background:#fff}
.mgr-body{padding:.85rem 1rem;min-height:180px}
.mgr-empty-list{color:var(--txs);font-size:.84rem;padding:.6rem 0}
.mgr-loading{color:var(--txs);font-size:.84rem;padding:.6rem 0;font-style:italic}
.mgr-entry-row{display:flex;align-items:center;gap:.7rem;padding:.42rem .2rem;border-bottom:1px solid var(--bg);flex-wrap:wrap}
.mgr-entry-row:last-child{border-bottom:none}
.mgr-entry-date{font-size:.8rem;font-weight:600;color:var(--tx);min-width:68px}
.mgr-entry-slot{min-width:90px}
.mgr-entry-detail{flex:1;font-size:.8rem;color:var(--txs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr-avail-row{display:flex;align-items:flex-start;gap:.65rem;padding:.42rem .2rem;border-bottom:1px solid var(--bg)}
.mgr-avail-row:last-child{border-bottom:none}
.mgr-avail-icon{font-size:.9rem;flex-shrink:0;margin-top:.1rem}
.mgr-avail-info{flex:1;min-width:0}
.mgr-avail-date{font-size:.81rem;font-weight:600;color:var(--tx)}
.mgr-avail-slot{font-size:.77rem;color:var(--txs)}
.mgr-docs-toolbar{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem;flex-wrap:wrap}
.mgr-docs-folder{font-size:.88rem;font-weight:700;color:var(--tx)}
.mgr-doc-row{display:flex;align-items:center;gap:.6rem;padding:.4rem .2rem;border-bottom:1px solid var(--bg);flex-wrap:wrap}
.mgr-doc-row:last-child{border-bottom:none}
.mgr-doc-ico{font-size:.9rem;flex-shrink:0}
.mgr-doc-name{flex:1;font-size:.81rem;color:var(--p);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mgr-doc-name:hover{text-decoration:underline}
.mgr-doc-by{font-size:.74rem;color:var(--txs);white-space:nowrap}
.mgr-doc-status{font-size:.78rem;margin-bottom:.4rem;min-height:1.1em}
.mgr-doc-status.uploading{color:var(--txs);font-style:italic}
.mgr-doc-status.ok{color:#059669}
.mgr-doc-status.err{color:#dc2626}

/* ─── Manager: Global View ─────────────────────────────────── */
.mgr-btn-global{padding:.28rem .68rem;border-radius:var(--r);border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:.75rem;font-weight:600;cursor:pointer;opacity:.82;transition:all .14s;white-space:nowrap;line-height:1}
.mgr-btn-global:hover{opacity:1;background:rgba(255,255,255,.18)}
.mgr-btn-global.on{background:#fff;color:var(--p);opacity:1;border-color:#fff}
.mgr-global-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem;padding:.65rem .9rem;background:#fff;border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:.85rem;box-shadow:var(--sh)}
.mgr-global-nav{display:flex;align-items:center;gap:.5rem}
.mgr-gl-lbl{min-width:130px;text-align:center;font-size:.9rem;font-weight:800;color:var(--tx)}
.mgr-gl-subbtns{display:flex;gap:.3rem}
/* Manager global month calendar */
.mgr-gcal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.mgr-gcal-hdr{text-align:center;font-size:.68rem;font-weight:800;color:var(--txs);padding:.38rem 0;text-transform:uppercase;letter-spacing:.04em}
.mgr-gcal-day{min-height:72px;border:1px solid var(--bdr);border-radius:6px;background:#fff;padding:.3rem;position:relative;cursor:default}
.mgr-gcal-day.is-today{border-color:var(--p);background:#eef0fb}
.mgr-gcal-day.is-wknd{background:#fafafa}
.mgr-gcal-day.oth{opacity:.28;background:#f8fafc;min-height:0}
.mgr-gcal-dn{font-size:.72rem;font-weight:700;color:var(--txs);margin-bottom:.2rem}
.mgr-gcal-day.is-today .mgr-gcal-dn{color:var(--p)}
.mgr-gcal-chips{display:flex;flex-direction:column;gap:2px}
.mgr-gcal-chip{font-size:.6rem;cursor:pointer;padding:2px 4px;display:flex;align-items:center;gap:2px}
.mgr-gcal-chip-name{font-weight:700}
/* Multi-controller booking section */
.ms-multi-header{font-size:.76rem;color:var(--txs);margin-bottom:.3rem}

/* ═══════════════════════════════════════════════
   ANALYTICS PANEL  (FE-01 → FE-20)
═══════════════════════════════════════════════ */

/* FE-02 — Filter bar */
.an-fbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:.75rem;margin-bottom:.9rem;box-shadow:var(--sh)}

/* FE-01 — Sub-tab bar */
.an-tabs{display:flex;gap:0;margin-bottom:1rem;border-bottom:2px solid var(--bdr)}
.an-tab{padding:.5rem 1.1rem;border:none;background:transparent;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--txs);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .14s;border-radius:0}
.an-tab:hover{color:var(--p)}
.an-tab.on{color:var(--p);border-bottom-color:var(--p)}

/* FE-03 — KPI cards (overview metrics row) */
.an-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:.65rem;margin-bottom:1rem}
.kpi-card{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:1rem;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi-title{font-size:.65rem;font-weight:800;color:var(--txs);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.3rem;display:flex;align-items:center;gap:.3rem}
.kpi-value{font-size:1.65rem;font-weight:800;color:var(--tx);line-height:1.1;margin-bottom:.25rem;word-break:break-word}
.kpi-delta{font-size:.73rem;font-weight:700;display:flex;align-items:center;gap:.2rem}
.kpi-up{color:#16a34a}.kpi-dn{color:var(--danger)}.kpi-neutral{color:var(--txs)}

/* Loading skeleton (FE-16) */
.kpi-skel .kpi-value,.kpi-skel .kpi-delta{background:#e2e8f0;border-radius:4px;color:transparent;animation:skel-pulse 1.4s ease-in-out infinite}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Charts grid */
.an-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem;margin-bottom:1rem}
.an-chart-card{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:1rem;box-shadow:var(--sh)}
.an-chart-wide{grid-column:1/-1}
.an-card-t{font-size:.78rem;font-weight:800;color:var(--tx);margin-bottom:.7rem;display:flex;align-items:center;gap:.35rem}
.an-chart-wrap{position:relative;height:220px}
.an-chart-wrap canvas{max-width:100%}

/* Tables layout */
.an-tables-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.7rem;margin-bottom:1rem}
.an-tbl-card{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:1rem}
.an-card-head{padding:.65rem 1rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.an-card-head .an-card-t{margin-bottom:0}
/* Period filter pill buttons (Fill Rate by Country + Controller Utilisation) */
.an-period-btns{display:flex;gap:.2rem;align-items:center;flex-shrink:0}
.an-pb{padding:.2rem .5rem;border:1px solid var(--bdr);background:transparent;border-radius:4px;font-size:.68rem;font-weight:700;cursor:pointer;color:var(--txs);transition:all .12s;line-height:1.3}
.an-pb:hover{border-color:var(--p);color:var(--p)}
.an-pb.active{background:var(--p);border-color:var(--p);color:#fff}

/* Analytics table (FE-07, FE-09, FE-17) */
.an-tbl{width:100%;border-collapse:collapse;font-size:.78rem}
.an-tbl th{background:#f8fafc;padding:.48rem .75rem;text-align:left;font-size:.63rem;font-weight:800;color:var(--txs);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--bdr);white-space:nowrap;cursor:pointer;user-select:none}
.an-tbl th:hover{color:var(--p)}
.an-tbl th.sort-asc::after{content:' ▲';color:var(--p)}
.an-tbl th.sort-desc::after{content:' ▼';color:var(--p)}
.an-tbl td{padding:.42rem .75rem;border-bottom:1px solid var(--bdr);vertical-align:middle;white-space:nowrap}
.an-tbl tr:last-child td{border-bottom:none}
.an-tbl tr:hover td{background:#f8fafc}
.an-tbl-scroll{max-height:420px;overflow-y:auto}
.an-tbl-sticky thead th{position:sticky;top:0;z-index:1}

/* FE-09 — Utilization status badges */
.an-status{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;font-size:.66rem;font-weight:700;white-space:nowrap}
.an-status-good{background:#dcfce7;color:#166534}
.an-status-warn{background:#fef9c3;color:#854d0e}
.an-status-crit{background:#fee2e2;color:#991b1b}
.an-status-na{background:#f1f5f9;color:var(--txs)}

/* Trend indicators */
.an-trend-up{color:#16a34a;font-weight:700}
.an-trend-dn{color:var(--danger);font-weight:700}
.an-trend-flat{color:var(--txs);font-weight:700}

/* Fill rate mini-bar (FE-09) */
.an-fr-bar-wrap{display:flex;align-items:center;gap:.45rem;min-width:100px}
.an-fr-bar{flex:1;height:7px;border-radius:4px;background:#f1f5f9;overflow:hidden}
.an-fr-fill{height:100%;border-radius:4px;background:var(--p);transition:width .3s}
.an-fr-pct{font-size:.72rem;font-weight:700;min-width:38px;color:var(--tx)}

/* Pagination (FE-07, FE-09) */
.an-pagination{display:flex;align-items:center;gap:.4rem;padding:.5rem .75rem;border-top:1px solid var(--bdr);font-size:.75rem;color:var(--txs)}
.an-page-btn{padding:.2rem .6rem;border:1.5px solid var(--bdr);border-radius:var(--r);background:#fff;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .13s}
.an-page-btn:hover{border-color:var(--p);color:var(--p)}
.an-page-btn:disabled{opacity:.38;cursor:default}
.an-page-info{flex:1;text-align:center}

/* FE-16 — Empty / error states */
.an-empty{padding:2.5rem 1rem;text-align:center;color:var(--txs)}
.an-empty-ic{font-size:2rem;margin-bottom:.4rem}
.an-empty-t{font-size:.88rem;font-weight:700}
.an-empty-s{font-size:.76rem;margin-top:.2rem}
.an-error-banner{background:#fef2f2;border:1px solid #fca5a5;border-radius:var(--r);padding:.7rem 1rem;color:#991b1b;font-size:.82rem;display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}

/* FE-20 — Tooltip trigger icon */
.an-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--bdr);color:var(--txs);font-size:.6rem;font-weight:800;cursor:help;flex-shrink:0;line-height:1}

/* FE-15 — Alerts section */
.an-alerts-section{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:1rem;box-shadow:var(--sh);margin-bottom:1rem}
.an-alerts-title{margin-bottom:.7rem}
.an-alert-item{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem .6rem;border-radius:6px;margin-bottom:.35rem;font-size:.8rem;cursor:pointer;transition:filter .13s}
.an-alert-item:hover{filter:brightness(.97)}
.an-alert-crit{background:#fef2f2;color:#991b1b}
.an-alert-warn{background:#fffbeb;color:#92400e}
.an-alert-info{background:#eff6ff;color:#1d4ed8}
.an-alert-ico{font-size:1rem;flex-shrink:0;margin-top:.05rem}
.an-alert-txt{flex:1;line-height:1.45}
.an-alert-lbl{font-weight:800}
.an-alert-sub{font-size:.73rem;opacity:.85;margin-top:.1rem}
.an-no-alerts{color:var(--txs);font-size:.82rem;padding:.3rem 0}

/* Responsive overrides (FE-19) */
@media(max-width:768px){
  .an-charts-grid{grid-template-columns:1fr}
  .an-chart-wide{grid-column:1}
  .an-tables-row{grid-template-columns:1fr}
  .an-kpi-row{grid-template-columns:repeat(2,1fr)}
  .an-chart-wrap{height:180px}
}
@media(max-width:480px){
  .an-kpi-row{grid-template-columns:1fr 1fr}
  .kpi-value{font-size:1.3rem}
}
.set-card-mt{margin-top:1rem}

/* ═══════════════════════════════════════════════════════════
   FEATURE UPDATES — April 2026
   1: Paperclip indicator · 2: Controller split slots · 3+4: Multi-manufacturer
   5: Public holidays (Nager.Date) · 6: Recurring skip-holiday
═══════════════════════════════════════════════════════════ */

/* F1: Paperclip icon shown on chips / rows / timeline halves that have documents */
.has-docs-icon{display:inline-block;margin-left:.22rem;font-size:.7rem;line-height:1;opacity:.85}
.tl-half.has-docs{position:relative}
.tl-half.has-docs::after{content:"📎";position:absolute;top:-1px;right:1px;font-size:.58rem;line-height:1;opacity:.95;pointer-events:none}
.cl-docs-badge{display:inline-flex;align-items:center;gap:.15rem;font-size:.7rem;padding:1px 5px;border-radius:999px;background:#e0e7ff;color:#3730a3;margin-left:.35rem;font-weight:600}

/* F2: AM/PM split inside month & week cells for controllers */
.cal-day .dslots{display:flex;flex-direction:column;gap:2px}
.dslot-half{display:flex;flex-direction:column;gap:1px;padding:1px 0;border-radius:3px;min-height:14px;position:relative}
.dslot-half-lbl{position:absolute;left:2px;top:0;font-size:.52rem;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;pointer-events:none;opacity:.7}
.dslot-half.dslot-am{background:rgba(209,250,229,.38);border-top:1px dashed rgba(16,185,129,.4)}
.dslot-half.dslot-pm{background:rgba(254,243,199,.4);border-top:1px dashed rgba(245,158,11,.4)}
.dslot-half .chip{margin-left:16px}
.week-day-body{display:flex;flex-direction:column;gap:3px}
.week-half{display:flex;flex-direction:column;gap:2px;padding:2px 4px;border-radius:4px;min-height:18px}
.week-half-lbl{font-size:.52rem;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;margin-bottom:1px}
.week-half.week-am{background:rgba(209,250,229,.42);border-left:2px solid #10b981}
.week-half.week-pm{background:rgba(254,243,199,.45);border-left:2px solid #f59e0b}

/* F5: Holiday highlighting on controller calendar */
.cal-day.is-holiday{background:#fff7ed;border-color:#fdba74}
.cal-day.is-holiday .dn{color:#c2410c}
.hol-tag{display:inline-block;font-size:.58rem;font-weight:700;padding:1px 4px;border-radius:3px;background:#fb923c;color:#fff;margin-top:1px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.week-day.is-holiday{background:#fff7ed}
.week-day.is-holiday .wdd{color:#c2410c}
.tl-hol-day{background:#fff7ed!important}
.tl-hol-day-hdr{color:#c2410c!important;position:relative}
.tl-hol-day-hdr::after{content:"🏖";font-size:.58rem;display:block;line-height:1}

/* F3+F4: Multi-manufacturer modal blocks */
.mfrs-list{display:flex;flex-direction:column;gap:.65rem;margin-bottom:.5rem}
.mfr-row{border:1px solid var(--bdr);border-radius:6px;padding:.55rem;background:#f8fafc;position:relative}
.mfr-row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.mfr-row-num{font-size:.66rem;font-weight:800;color:var(--txs);text-transform:uppercase;letter-spacing:.04em}
.mfr-row-del{background:none;border:none;color:#dc2626;font-size:.95rem;cursor:pointer;padding:0 .2rem;font-weight:700}
.mfr-row-del:hover{color:#991b1b}
.mfr-row .fg{margin-bottom:.4rem}
.mfr-row .row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mfr-docs-wrap{margin-top:.25rem}
.mfr-docs-list{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.35rem}
.mfr-doc-item{display:flex;align-items:center;gap:.35rem;font-size:.74rem;padding:.2rem .35rem;background:#fff;border:1px solid var(--bdr);border-radius:4px}
.mfr-doc-item a{color:var(--p);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfr-doc-item a:hover{text-decoration:underline}
.mfr-doc-del{background:none;border:none;color:#dc2626;cursor:pointer;padding:0 .2rem;font-size:.8rem}
.mfr-doc-status{font-size:.7rem;color:var(--txs);margin-top:.2rem;min-height:1em}
.mfr-doc-status.err{color:#dc2626}
.mfr-doc-upload-btn{font-size:.72rem;padding:.25rem .55rem}

/* F6: Holiday warning in booking modal */
.holiday-warn{background:#fff7ed;border:1px solid #fdba74;border-radius:6px;padding:.5rem .65rem;margin:.4rem 0;font-size:.78rem;color:#9a3412;line-height:1.4}
.holiday-warn.warn-block{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.holiday-skip-summary{font-size:.72rem;color:#9a3412;margin-top:.35rem;font-style:italic}

/* ─── Impersonation banner & picker ─────────────────────────────── */
.imp-bar{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;height:38px;background:#f59e0b;color:#78350f;font-size:.82rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.2);gap:.75rem}
.imp-bar.d-none{display:none}
.imp-bar-exit{background:rgba(0,0,0,.15);border:none;border-radius:5px;color:inherit;cursor:pointer;font-size:.78rem;font-weight:700;padding:.22rem .7rem;white-space:nowrap;flex-shrink:0}
.imp-bar-exit:hover{background:rgba(0,0,0,.27)}
/* When banner active: push sticky headers down so they sit below the banner */
body.imp-active .hdr{top:38px}
body.imp-active{padding-top:38px}
/* User picker list */
.modal-sub{font-size:.82rem;color:var(--tx2,#64748b);margin:-.45rem 0 .9rem;line-height:1.45}
.imp-user-list{display:flex;flex-direction:column;gap:.3rem;max-height:400px;overflow-y:auto;margin-bottom:.5rem}
.imp-user-btn{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;border:1.5px solid var(--bdr);border-radius:8px;background:#fff;cursor:pointer;transition:border-color .12s,background .12s;text-align:left;width:100%}
.imp-user-btn:hover{border-color:var(--pl);background:#f0f7ff}
.imp-user-name{font-weight:600;font-size:.88rem;color:var(--tx)}
.imp-user-meta{font-size:.76rem;color:var(--txs);white-space:nowrap;margin-left:.5rem}


/* ── Client colour swatches ──────────────────────────────────────────────── */
.mc-color-swatches{display:flex;flex-wrap:wrap;gap:.38rem;margin-top:.28rem}
.mc-color-sw{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2.5px solid transparent;transition:transform .12s,border-color .12s;flex-shrink:0}
.mc-color-sw:hover{transform:scale(1.14)}
.mc-color-sw.on{border-color:#1e293b;transform:scale(1.22);box-shadow:0 0 0 1.5px #fff inset}
.cli-color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.38rem;vertical-align:middle;flex-shrink:0}

/* ─── ComRoom — Announcement Card ───────────────────────────────── */
.cr-card-outer{width:80%;max-width:960px;margin:.9rem auto 0}
.cr-card-wrap{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.cr-card-header{background:var(--p);color:#fff;padding:.55rem 1rem;font-size:.85rem;font-weight:700;display:flex;align-items:center;gap:.4rem}
.cr-card-icon{font-size:.95rem}
/* Individual announcement */
.cr-ann-item{padding:.8rem 1rem;border-top:1px solid var(--bdr)}
.cr-ann-latest{border-top:none}
.cr-older-wrap .cr-ann-item{background:#fafbfc}
.cr-ann-meta{margin-bottom:.3rem}
.cr-ann-date{font-size:.71rem;color:var(--txs);font-weight:500}
.cr-ann-msg{font-size:.88rem;line-height:1.55;color:var(--tx);white-space:pre-wrap;word-break:break-word;margin-bottom:.55rem}
/* Reactions */
.cr-ann-reactions{display:flex;gap:.3rem;flex-wrap:wrap}
.cr-react-btn{display:inline-flex;align-items:center;gap:.22rem;padding:.2rem .52rem;border-radius:999px;border:1.5px solid var(--bdr);background:#fff;cursor:pointer;font-size:.88rem;line-height:1;transition:all .14s;color:var(--tx)}
.cr-react-btn:hover{border-color:var(--pl);background:#eef0fb}
.cr-react-btn.cr-reacted{border-color:var(--p);background:#eef0fb;color:var(--p)}
.cr-react-count{font-size:.72rem;font-weight:700}
/* Admin who-line */
.cr-who-line{font-size:.71rem;color:var(--txs);font-style:italic;margin-top:.35rem;line-height:1.5}
/* Show older toggle */
.cr-show-older{width:100%;padding:.48rem;background:#f8fafc;border:none;border-top:1px solid var(--bdr);cursor:pointer;font-size:.76rem;font-weight:600;color:var(--txs);text-align:center;transition:background .13s;display:block}
.cr-show-older:hover{background:var(--bg);color:var(--tx)}

/* ─── ComRoom — Admin Page ───────────────────────────────────────── */
.cr-wrap{max-width:860px;margin:0 auto;padding:1.5rem 1.25rem}
.cr-intro{background:#eef0fb;border:1.5px solid #c7caf7;border-radius:var(--r);padding:.75rem 1rem;margin-bottom:1.25rem;font-size:.83rem;color:#1e2460;line-height:1.5}
.cr-item{background:var(--card);border:1.5px solid var(--bdr);border-radius:var(--r);padding:.85rem 1rem;margin-bottom:.7rem;box-shadow:var(--sh);transition:border-color .14s}
.cr-item:hover{border-color:#c7caf7}
.cr-item-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.cr-item-meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.cr-item-date{font-size:.72rem;color:var(--txs)}
.cr-item-msg{font-size:.87rem;color:var(--tx);line-height:1.5;white-space:pre-wrap;word-break:break-word;background:#f8fafc;border-radius:6px;padding:.5rem .75rem;border:1px solid var(--bdr)}
.cr-item-actions{display:flex;gap:.35rem;flex-shrink:0}
.cr-target-pill{display:inline-block;padding:.18rem .55rem;background:#eef0fb;color:#191d64;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.cr-badge{display:inline-block;padding:.18rem .55rem;border-radius:999px;font-size:.7rem;font-weight:700;white-space:nowrap}
.cr-badge-on{background:#dcfce7;color:#166534}
.cr-badge-off{background:#f1f5f9;color:var(--txs)}

/* ComRoom compose modal */
.cr-msg-ta{min-height:100px}
.cr-user-list{max-height:220px;overflow-y:auto;border:1.5px solid var(--bdr);border-radius:var(--r);padding:.4rem .6rem;background:#fff}
.chk-meta{font-size:.73rem;color:var(--txs);margin-left:.2rem}
.cr-item-reactions{font-size:.76rem;color:var(--txs);letter-spacing:.05em}

/* ===== 2026 UI Refresh ===== */
:root{
  --ui-bg:#f6f8fc;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8faff;
  --ui-border:#dbe4f0;
  --ui-text:#10243e;
  --ui-muted:#5f728b;
  --ui-primary:#2346a9;
  --ui-primary-2:#1b3278;
  --ui-shadow:0 10px 26px rgba(17,32,73,.08);
  --ui-shadow-soft:0 3px 10px rgba(15,30,64,.06);
}
body{
  font-family:Inter,"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  background:radial-gradient(circle at top right,#eef3ff 0%,#f7f9fd 40%,#f6f8fc 100%);
  color:var(--ui-text);
}
.screen.active{animation:fi .2s ease}
.hdr{
  height:68px;
  background:linear-gradient(120deg,#102454 0%,#183680 60%,#1e3c90 100%);
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 12px 24px rgba(17,32,73,.22);
}
.hdr-logo{height:34px}
.hdr-name,.hdr-meta{color:rgba(255,255,255,.84)}
.btn{
  border-radius:10px;
  font-weight:700;
  letter-spacing:.01em;
}
.btn-p{background:linear-gradient(135deg,var(--ui-primary),#335fcd);box-shadow:var(--ui-shadow-soft)}
.btn-p:hover{background:linear-gradient(135deg,var(--ui-primary-2),var(--ui-primary));transform:translateY(-1px)}
.btn-s,.fsel,.inp,.sel,.btn-google{border-color:var(--ui-border)}
.btn-s:hover{background:#f3f7ff}
.btn-g{border:1px solid rgba(255,255,255,.2);border-radius:9px}
.center-card,.set-card,.fb-card,.stat,.fbar,.tl-scroll,.ltab,.week-day,.cal-day,.modal{
  border:1px solid var(--ui-border);
  box-shadow:var(--ui-shadow);
}
.center-card,.set-card,.fb-card,.stat,.fbar,.ltab,.week-day,.cal-day,.modal{border-radius:14px}
.cal-wrap,.adm-wrap,.set-wrap{padding:1.35rem}
.cal-nav,.adm-nav{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:14px;padding:.8rem 1rem;box-shadow:var(--ui-shadow-soft)}
.cal-grid{gap:8px}
.cal-day{min-height:96px;padding:.5rem;background:linear-gradient(180deg,#fff, #fbfdff)}
.cal-day:hover{border-color:#9eb2d8;box-shadow:0 0 0 3px rgba(35,70,169,.1)}
.week-day{min-height:170px}
.week-day-hdr,.tl th,.ltab th,.utab th,.set-head,.fb-head{background:#f3f7ff}
.legend,.leg-row{background:#fff;border:1px solid var(--ui-border);border-radius:12px;padding:.55rem .75rem;box-shadow:var(--ui-shadow-soft)}
.ntabs{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:3px;border-radius:10px}
.ntab{color:rgba(255,255,255,.76);padding:.32rem .82rem}
.ntab.on{color:#183680;box-shadow:var(--ui-shadow-soft)}
.stats-grid{gap:.75rem}
.sv{font-size:1.65rem}
.country-bar{padding:.25rem 0 .45rem}
.c-chip{background:var(--ui-surface);border-color:var(--ui-border);font-weight:700}
.c-chip.on{background:#e8efff;color:#1c3e99;border-color:#b8caf3}
.fbar{padding:1rem}
.fsel:focus,.inp:focus,.sel:focus{border-color:#7e99d8;box-shadow:0 0 0 3px rgba(35,70,169,.14)}
.center-bg{background:linear-gradient(140deg,#0d1c42 0%,#183680 50%,#2454b8 100%)}
.card-h{color:#112b53}
.card-sub,.flbl,.sl,.cl-detail,.cl-date-sub{color:var(--ui-muted)}
.toast{border:1px solid rgba(255,255,255,.18);box-shadow:var(--ui-shadow)}
.modal{padding:1.3rem 1.35rem}
@media(max-width:900px){
  .hdr{height:auto;padding:.6rem .8rem;align-items:flex-start;gap:.6rem}
  .hdr-r{width:100%;justify-content:space-between}
}
@media(max-width:620px){
  .cal-wrap,.adm-wrap,.set-wrap{padding:.72rem}
  .cal-nav,.adm-nav{padding:.6rem .65rem}
  .legend,.leg-row{padding:.45rem .55rem}
}

/* Auth pages banner */
.center-bg{position:relative;overflow:hidden}
.center-bg::before{
  content:"CORADAM PLANNER";
  position:absolute;
  top:16px;
  left:20px;
  font-size:.74rem;
  letter-spacing:.14em;
  font-weight:800;
  color:rgba(255,255,255,.72);
}


/* ===== 2026 Dashboard Refresh ===== */
:root{
  --color-bg:#f5f7fb;
  --color-card:#ffffff;
  --color-border:#e3e8f2;
  --color-primary:#253f91;
  --color-text:#0f1b2d;
  --color-muted:#64748b;
  --radius-card:16px;
  --shadow-card:0 4px 16px rgba(15,23,42,.04);
}
body{background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* ── Header ── */
.hdr{height:64px;background:#fff;color:var(--color-text);border-bottom:1px solid #e5eaf3;box-shadow:none;padding:0 16px 0 20px;z-index:200;justify-content:space-between;gap:8px;flex-wrap:nowrap!important;align-items:center!important}
.hdr-l{flex:0 0 auto!important;display:flex!important;align-items:center}
.hdr-logo{height:34px;width:34px;object-fit:contain;filter:none}
.hdr-c{flex:1;display:flex;justify-content:center;align-items:center;min-width:0}
.hdr-r{flex:0 0 auto!important;width:auto!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;flex-wrap:nowrap!important}
/* ── Override legacy fixed-rail / column-stack on hdr-actions ──
   Old CSS placed hdr-actions-main as position:fixed sidebar + flex-direction:column.
   These !important rules beat that regardless of screen width or selector specificity. */
.hdr-actions,
.hdr-actions-main,
.hdr-actions-user,
#s-adm .hdr-actions-main,
#s-cal .hdr-actions-main,
#s-set .hdr-actions-main,
#s-mgr .hdr-actions-main{
  position:static!important;
  left:auto!important;
  top:auto!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:0!important;
  border:none!important;
  box-shadow:none!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:6px!important;
  margin-left:0!important;
}
/* Buttons inside header must NOT go full-width — old rule set width:100% */
#s-adm .hdr-actions-main .btn,
#s-cal .hdr-actions-main .btn,
#s-set .hdr-actions-main .btn,
#s-mgr .hdr-actions-main .btn,
.hdr-actions-main .btn{
  width:auto!important;
  flex:0 0 auto!important;
  justify-content:center!important;
}
/* Override margin-left:238px on content wrappers from old lateral-rail */
#s-adm .adm-wrap,
#s-cal .cal-wrap,
#s-set .set-wrap,
#s-mgr .mgr-wrap{
  margin-left:0!important;
}
.hdr-name{color:var(--color-muted);font-size:.8rem}
.hdr-section-title{font-size:.9rem;font-weight:700;color:var(--color-text)}
.hdr-cal-title{font-size:.85rem;font-weight:600;color:var(--color-muted)}
/* header tab bar (centered) */
.hdr-c .ntabs{background:#f1f5f9;border-radius:10px;padding:3px;gap:2px}
.hdr-c .ntab{padding:.3rem .85rem;border-radius:8px;font-size:.76rem;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;transition:all .14s;white-space:nowrap}
.hdr-c .ntab:hover{background:#fff;color:var(--color-text)}
.hdr-c .ntab.on{background:var(--color-primary);color:#fff;box-shadow:0 1px 4px rgba(37,63,145,.25)}
/* header action buttons */
.btn{border-radius:8px;height:36px;padding:0 14px;font-size:12px;font-weight:600}
.btn-p{background:var(--color-primary)}
.btn-s{border:1px solid #dde5f2;background:#fff;color:#334155}
.btn-g{background:#fff;border:1px solid #dde5f2;color:#334155;opacity:1}
/* icon-only header buttons */
.hdr-icon-btn{width:36px;height:36px;border:1px solid #dde5f2;background:#fff;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#475569;transition:all .14s;flex:0 0 36px}
.hdr-icon-btn:hover{background:#f1f5f9;color:var(--color-primary);border-color:#c7d2e8}
/* avatar pill */
.hdr-avatar-pill{display:inline-flex;align-items:center;gap:6px;height:36px;border:1px solid #dde5f2;border-radius:8px;padding:0 10px;background:#fff;cursor:pointer}
.hdr-avatar-pill:hover{background:#f1f5f9}
.hdr-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:none;flex:0 0 24px}
.hdr-initials{font-size:12px;font-weight:700;color:var(--color-primary);min-width:24px;text-align:center}

/* ── Shell & sidebar — override ALL legacy lmenu/app-shell rules ── */
.app-shell{
  display:flex!important;
  min-height:calc(100vh - 64px);
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  align-items:stretch!important;
}
.lmenu{
  /* reset ALL legacy overrides */
  flex:0 0 60px!important;
  width:60px!important;
  min-width:60px!important;
  max-width:60px!important;
  border-radius:0!important;
  box-shadow:none!important;
  /* new styles */
  background:#fff;
  border-right:1px solid #e5eaf3;
  padding:10px 7px;
  display:flex!important;
  flex-direction:column;
  justify-content:space-between;
  position:sticky;
  top:64px;
  height:calc(100vh - 64px);
  overflow:visible;
  z-index:100;
}
.lmenu-title{display:none!important}
.gnav-top,.gnav-bottom{display:flex;flex-direction:column;gap:4px}
.gnav-item{
  width:46px;height:46px;
  border:none;background:transparent;border-radius:12px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#94a3b8;transition:background .14s,color .14s;
  position:relative;flex:0 0 46px;
}
.gnav-item:hover{background:#f1f5f9;color:var(--color-primary)}
.gnav-item.gnav-active{background:#eef2ff;color:var(--color-primary)}
.gnav-item svg{pointer-events:none;flex:0 0 auto}
/* tooltip on hover */
.gnav-item::after{
  content:attr(data-tip);position:absolute;
  left:54px;top:50%;transform:translateY(-50%);
  background:#1e293b;color:#fff;font-size:11px;font-weight:600;
  padding:4px 9px;border-radius:6px;white-space:nowrap;
  z-index:9999;pointer-events:none;opacity:0;transition:opacity .1s;
}
.gnav-item:hover::after{opacity:1}
/* kill ALL legacy side-tab remnants */
.ntabs-side{display:none!important}
.lmenu .btn{display:none!important}

/* ── Main content — reset legacy adm-wrap centering ── */
.app-main{flex:1;padding:20px 24px;max-width:none!important;margin:0!important;min-width:0;overflow-x:hidden}
.adm-wrap,.cal-wrap,.mgr-wrap{max-width:none!important;padding:0;margin:0!important}
.set-wrap{max-width:880px;padding:0;margin:0!important}

/* ── Stat cards ── */
.stats-grid{grid-template-columns:repeat(7,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.stat{border:1px solid var(--color-border);border-radius:14px;box-shadow:var(--shadow-card);padding:14px 12px;display:flex;align-items:center;gap:10px}
.stat::before{display:none}/* icon handled by .stat-ic */
.stat-ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 40px;line-height:1}
.stat-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sv{font-size:22px;font-weight:800;color:#111b3f;line-height:1.1}
.sl{font-size:11px;text-transform:none;color:var(--color-muted);white-space:nowrap}

/* ── Panels / cards ── */
.country-bar,.fbar,.tl-scroll,.leg-row,.cal-nav,.an-fbar,.an-tabs,.an-chart-card,.an-tbl-card,.rp-card,.rp-toolbar,.an-alerts-section{background:#fff;border:1px solid #e5eaf3;border-radius:14px;box-shadow:var(--shadow-card)}
.fbar,.an-fbar,.rp-toolbar{padding:14px 16px;gap:10px}
.fsel{height:40px;border:1px solid #dde5f2;border-radius:8px;padding:0 10px;font-size:13px}
.flbl{font-size:11px;color:#64748b;font-weight:600}
.country-bar{padding:10px 12px}
.c-chip{height:32px;border-radius:999px;border:1px solid #dde5f2}
.cal-nav{padding:12px 16px;margin-bottom:12px}
.cal-lbl{font-size:20px;color:#0f172a;font-weight:700}
.tl-scroll{overflow:auto}
.tl th{background:#f8fafc;font-size:11px}
.tl th:first-child{width:220px}
.leg-row{padding:10px 14px;margin-top:10px;border-radius:0 0 14px 14px}
#vw-an,.rp-section,.rp-grid{margin-top:12px}

/* ── Documents view (controller calendar) ── */
.docs-hdr{margin-bottom:16px}
.docs-title{font-size:1.1rem;font-weight:700;color:var(--color-text);margin:0}
.docs-list{display:flex;flex-direction:column;gap:8px}
.docs-row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:12px 14px}
.docs-ico{font-size:22px;flex:0 0 auto}
.docs-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.docs-name{font-size:.88rem;font-weight:600;color:var(--color-primary);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-name:hover{text-decoration:underline}
.docs-meta{font-size:.75rem;color:var(--color-muted)}
.docs-loading,.docs-empty,.docs-error{padding:32px;text-align:center;color:var(--color-muted);font-size:.9rem}
.an-chart-card,.an-tbl-card,.rp-card{padding:16px}

/* ── Responsive ── */
@media (max-width:1200px){
  .stats-grid{grid-template-columns:repeat(4,minmax(130px,1fr))}
}
@media (max-width:1024px){
  .hdr-c .ntab{padding:.3rem .6rem;font-size:.72rem}
}
@media (max-width:900px){
  .stats-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}
  .hdr-c{display:none}/* hide center tabs — mobile uses bottom bar or drawer */
}
@media (max-width:768px){
  .hdr{padding:0 10px!important;min-height:54px!important;height:54px!important}
  .app-main{padding:12px}
  .app-shell{display:block!important}
  .lmenu{
    position:static!important;
    flex:unset!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    flex-direction:row!important;
    border-right:none!important;
    border-bottom:1px solid #e5eaf3;
    padding:8px 12px!important;
    overflow-x:auto!important;
    top:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .gnav-top,.gnav-bottom{flex-direction:row;gap:4px}
  .gnav-item::after{display:none!important}/* no tooltip on mobile */
  .stats-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}
  /* hide action buttons on mobile — use ID selectors to beat specificity of earlier overrides */
  #s-adm .hdr-actions-main,
  #s-cal .hdr-actions-main,
  #s-set .hdr-actions-main,
  #s-mgr .hdr-actions-main,
  .hdr-actions-main{display:none!important}
  /* hide center tab bar — sidebar icons are used on mobile */
  .hdr-c{display:none!important}
  /* keep user buttons compact and non-overlapping */
  .hdr-actions-user{flex-wrap:nowrap!important;gap:4px!important}
  .hdr-name{display:none!important}
  .hdr-r{gap:4px!important}
}