:root{
  --gap:12px;
  --radius:12px;
  --radius-lg:16px;

  /* dark theme palette */
  --bg:#0b1220;              /* main bg */
  --text:#e5e7eb;            /* text */
  --muted:#94a3b8;
  --line:rgba(255,255,255,0.08);

  --surface:rgba(17,24,39,0.55); /* glass surface */
  --accent:#6366f1;          /* indigo */
  --accent-2:#22c55e;        /* green (success) */
  --danger:#ef4444;          /* red */
  --office:#3b82f6;          /* blue */
  --home:#10b981;            /* green */

  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 30px 60px rgba(0,0,0,.45);

  --blur:10px;
}

html,body{overflow-x:hidden;margin:0}
*{box-sizing:border-box}
body{
  font:16px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  min-height: 100svh;
  display:flex;flex-direction:column;
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(900px 600px at 100% 10%, rgba(34,197,94,.18), transparent 60%),
    var(--bg);
}

@supports (height: 100dvh){
  body{ min-height: 100dvh; }       /* even better when supported */
}

/* Container */
.container{width:100%;max-width:1250px;margin-inline:auto;margin-bottom:auto;padding:24px}
.container:has(.auth-wrap){margin: auto;}
body.is-admin .container{max-width:100%}

/* Header / Footer */
.site-header,.site-footer{
  padding:0 24px; color:var(--text);
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface);
  backdrop-filter:blur(var(--blur)) saturate(120%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(120%);
  border-bottom:1px solid var(--line);
}
.site-footer{border-top:1px solid var(--line);border-bottom:none}
.site-header a,.site-footer a{color:inherit;text-decoration:none;opacity:.9}
.site-header a:hover,.site-footer a:hover{opacity:1}
.site-header nav{display:flex;gap:16px;align-items:center}

/* Week head (public) */
.week-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin:8px 0 16px;
}
.week-head h2{margin:0;font-weight:650;letter-spacing:.2px}
.badge{
  padding:2px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  font-size:.82rem
}
.badge.final{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.4)}

/* --- Admin header layout --- */
.admin-head{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;margin:8px 0 16px;
}
.admin-head .title{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.admin-head .meta{text-align:right;display:flex;gap:12px;align-items:center;justify-content:flex-end}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}
.admin-head .toolbar{grid-column:1 / -1}

/* Chip-style buttons/links */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:inherit;text-decoration:none;
  transition:box-shadow .12s ease, transform .12s ease;
  font-size:.95rem;font-weight:600;
}
.chip:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.chip:active{transform:none;box-shadow:var(--shadow-sm)}
.chip-danger{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.15)}
a.chip{color:inherit;text-decoration:none}
a.chip:focus-visible{text-decoration:none}

/* Grid layouts */
.week-grid{display:grid;gap:var(--gap)}
.week-grid--public{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.week-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.week-grid--admin{
  display:grid;grid-auto-flow:column;grid-auto-columns:380px;gap:var(--gap);
  width:max-content;min-height:1px;
}
@media (min-width:1400px){.week-grid--admin{grid-auto-columns:420px}}
@media (max-width:640px){.week-grid--public{grid-template-columns:1fr}}

/* Day cards */
.day{
  border-radius:var(--radius-lg);padding:12px;
  background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--shadow-md);
}
.day.today{
  border-radius:var(--radius-lg);
  box-shadow:
    inset 0 0 0 2px rgba(99,102,241,.55),
    inset 0 0 10px rgba(99,102,241,.25),
    var(--shadow-md);
}
.day.off{opacity:.65}
.day header{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
.day-total{font-weight:650;opacity:.9}
.day > .actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;opacity:.9}

/* Spans */
.spans{display:flex;flex-direction:column;gap:10px}
.pill{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  padding:8px 10px;background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:var(--shadow-sm);
}
.pill.office{border-color:var(--office)}
.pill.homeoffice{border-color:var(--home)}
.pill .note{opacity:.75}
.pill button{padding:6px 10px;border-radius:8px}

/* Inputs (global pretty controls) */
.select,.input{
  appearance:none;-webkit-appearance:none;
  padding:8px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:var(--text);line-height:1.2;
}
.select:focus,.input:focus{outline:2px solid rgba(99,102,241,.6);outline-offset:2px;background:rgba(255,255,255,.12)}
::placeholder,.input::placeholder{color:rgba(229,231,235,.6)}

/* Add chevron to selects */
.select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(229,231,235,.8) 50%),
    linear-gradient(135deg, rgba(229,231,235,.8) 50%, transparent 50%);
  background-position: calc(100% - 18px) center,
                       calc(100% - 12px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
/* Darken native pickers a bit */
select::-ms-expand{display:none}
input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6)}

/* Legacy selectors to catch any unclassed fields */
.pill input[type=time],.pill select,.pill input[type=text],
.add-span input[type=time],.add-span input[type=text]{
  padding:8px 10px;min-width:110px;border-radius:10px;
  border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:var(--text);
}
.pill input:focus,.add-span input:focus,.pill select:focus{
  outline:2px solid rgba(99,102,241,.6);outline-offset:2px;background:rgba(255,255,255,.12)
}

/* Specifics */
.note-input{min-width:180px}
@media (max-width:420px){.note-input{min-width:140px}}

/* Add-span form */
.add-span{
  border:1px dashed rgba(255,255,255,.2);border-radius:var(--radius);
  padding:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:rgba(255,255,255,.06);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);margin-top:10px
}

/* Buttons */
button{
  cursor:pointer;padding:8px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);color:var(--text);
  transition:transform .12s ease, box-shadow .12s ease;
  font-size:.95rem;font-weight:600;
}
button:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
button:focus-visible{outline:2px solid rgba(99,102,241,.6);outline-offset:2px}

/* Nav links (public + header) */
.nav a{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;color:inherit;
  transition:box-shadow .12s ease, transform .12s ease;
  font-size:.95rem;font-weight:600;
}
.nav a:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.header-nav{display:flex;gap:8px;align-items:center}

/* Alerts (bottom center) */
.alerts{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1000;
  display:flex;flex-direction:column;gap:12px;align-items:center;pointer-events:none
}
.alert{
  background:rgba(239,68,68,.15);
  border:1px solid rgba(239,68,68,.4);
  padding:10px 16px;border-radius:12px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  pointer-events:auto;animation:slideUpFade .25s ease-out;text-align:center
}
.alert.success{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.45)}
@keyframes slideUpFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Inline delete confirmation popover */
.confirm-slot{position:relative}
.confirm-pop{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(17,24,39,.85);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:10px;min-width:220px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:10;animation:fadeUp .16s ease-out both;will-change:transform,opacity
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.confirm-text{margin-bottom:8px;opacity:.9;text-align:center}
.confirm-actions{display:flex;gap:8px;justify-content:center}
.confirm-actions .danger{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.15)}

/* Errors */
.error{
  background:rgba(239,68,68,.18);
  border:1px solid rgba(239,68,68,.5);
  padding:8px;border-radius:10px;margin:8px 0;color:var(--text)
}

/* Focus ring (global) */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(99,102,241,.7);outline-offset:2px
}

/* ===== Auth (login) ===== */
.auth-wrap{
  display:grid;place-items:center;padding:24px
}
.auth-card{
  width:100%;max-width:420px;background:var(--surface);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:28px
}
.auth-card h2{margin:0 0 14px 0;font-size:1.4rem;font-weight:700}
.auth-form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;color:var(--muted)}
.field .input{width:100%}
.btn-primary{
  padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(99,102,241,.25), rgba(99,102,241,.18));
  color:var(--text);width:100%;
  transition:transform .12s ease, box-shadow .12s ease;margin-top:10px
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(0);box-shadow:var(--shadow-sm)}

/* === Admin responsiveness & header breathing room ======================= */

/* 1) Medium screens: stack meta under title, keep big columns */
@media (max-width: 1100px){
  .admin-head{
    grid-template-columns: 1fr;   /* stack */
    align-items: start;
  }
  .admin-head .meta{
    justify-content: flex-start;  /* move nav/total under title */
    text-align: left;
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* 2) Narrow screens: shrink title/nav, make toolbar scrollable chips */
@media (max-width: 820px){
  .container{ padding: 16px; }

  .admin-head .title h2{
    font-size: 1.15rem;
    line-height: 1.2;
  }
  .badge{ font-size: .78rem; padding: 2px 8px; }

  .header-nav.nav a.chip{ padding: 6px 10px; font-size: .9rem; }

  .toolbar{
    margin: 6px 0 12px;
    gap: 8px;
    overflow-x: auto;          /* allow horizontal scroll for many chips */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .toolbar .chip{
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* 3) Very small screens: tighten everything, smaller admin day columns */
@media (max-width: 640px){
  .admin-head .title h2{ font-size: 1.05rem; }
  .chip, button, .nav a{ font-size: .9rem; padding: 6px 10px; }
  .select, .input{ padding: 7px 30px 7px 10px; }

  /* keep header from cramping: allow items to wrap neatly */
  .admin-head .meta{ gap: 8px; }
  .header-nav{ gap: 6px; flex-wrap: wrap; }
}

/* 4) Ultra small (old phones): single-line chips & smaller columns */
@media (max-width: 480px){
  .week-grid--admin{ grid-auto-columns: 250px; }
  .admin-head .title{ gap: 8px; }
  .nav a.chip{ padding: 5px 9px; font-size: .85rem; }
}

/* 5) Prevent header overlaps: let long ranges wrap and breathe */
.admin-head .title,
.admin-head .meta { min-width: 0; } /* allow wrapping/truncation if needed */
.admin-head .title h2 { word-break: keep-all; }