:root{
  --bg:#0f1220; --card:#161a2b; --text:#ffffff; --muted:#aab2c5; --line:#262b41;
  --accent:#7c5cff; --accent-2:#9e8cff; --danger:#d12b2b; --ok:#2e725c; --gray:#394553;
  /* Let browsers know we’re dark so native controls invert correctly */
  color-scheme: dark;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ -webkit-text-size-adjust:100% }
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); font-size:17px; line-height:1.45;
}

/* Container scales a bit wider on big desktops */
.container{max-width:980px;margin:16px auto;padding:0 14px}
@media (min-width:1280px){ .container{max-width:1100px} }

/* Top bar */
.topnav{
  position:sticky; top:0; z-index:10;
  background:rgba(15,18,32,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line);
}
.topnav a{color:var(--text); text-decoration:none}
.topnav .brand{display:flex; align-items:center; gap:10px}
.coach-chip{font-size:.9rem; color:var(--muted); padding:3px 10px; border:1px solid var(--line); border-radius:999px}

/* Now chip */
.now-chip{
  font-size:.9rem;
  color:#e5f3ff;
  background:#133048;
  border:1px solid #2b5a78;
  padding:3px 10px;
  border-radius:999px;
}

.right{margin-left:auto}
.right a{margin-left:10px}

/* Subnav */
.subnav{display:flex; gap:10px; margin:10px 0 6px; flex-wrap:wrap}
.subnav a{
  background:#252a44; border:1px solid var(--line); color:var(--text);
  padding:10px 14px; border-radius:12px; text-decoration:none;
}
.subnav a:hover{ filter:brightness(1.08) }

/* Cards grid */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
@media (max-width:420px){ .cards{ grid-template-columns:1fr } }

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:16px; margin:12px 0;
}

/* (legacy) session card */
.card.session{
  border:2px solid #5f7b91; border-radius:12px; background:#0f1a22;
  position:relative; overflow:hidden; width:100%; margin:0;
}
.card.session.blocked{ background:#2a1f1f; border-color:#6b2a2a; }

/* Right actions (legacy card rail) */
.session-actions{
  display:grid !important;
  gap:8px !important;
  align-self:start; justify-self:stretch;
  width:100%; max-width:100%; overflow:hidden; box-sizing:border-box;
  grid-template-columns:1fr;
}
@media (min-width:480px){
  .session-actions{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (min-width:1024px){
  .session-actions{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
.session-actions .btn.small{
  width:100% !important; min-width:0; white-space:nowrap;
  padding:8px 10px; font-size:.92rem; line-height:1.1;
}
@media (max-width:420px){
  .session-actions .btn.small{ padding:6px 10px; font-size:.88rem; }
}

/* Typography / helpers */
h3.section-title{margin:6px 0 0}
.section-sub{margin:12px 0 6px; color:var(--accent-2)}
.big-date{font-size:1.05rem}
.muted{color:var(--muted)}
.time{color:#c5cbe3}
.time-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.time.big{font-size:clamp(1rem,1.4vw,1.12rem); font-weight:700; white-space:nowrap; line-height:1.2}
.client-line{margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.meta-line{opacity:.85}

/* Buttons */
.btn{
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:10px 14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; font-weight:600; line-height:1.15;
}
.btn:hover{ filter:brightness(1.05) }
.btn.small{ padding:8px 10px; font-size:.95rem }
.btn.icon{ padding:8px 10px }
.btn.subtle{ background:#252a44; color:#fff }
.btn.accent{ background:var(--accent) }
.btn.danger{ background:var(--danger) }
.btn.success{ background:var(--ok) }
.btn.gray{ background:var(--gray) }
.btn.caret{ padding:10px 12px }

/* Inputs */
.input{
  background:#11152a; color:var(--text); border:1px solid var(--line);
  padding:10px 12px; border-radius:12px;
}
.input.big{ width:100%; font-size:1.05rem; padding:14px 16px }

/* Badges */
.badge{ padding:3px 10px; border-radius:999px; border:1px solid var(--line); font-size:.82rem; color:var(--muted) }
.badge.booked{ color:#a7f3d0; border-color:#2e725c; background:#1f2f3b }
.badge.done{ color:#b3e5fc; border-color:#2a5870; background:#1f3b2b }
.badge.postponed{ color:#ffe3a3; border-color:#6c5c2a; background:#3b1f1f }
.badge.canceled{ color:#fca5a5; border-color:#6b2a2a; background:#3b1f1f }
.badge.waiting{ color:#ddd6fe; border-color:#4b3cbf; background:#3b2b12 }

/* Package mini badge */
.pkg-badge{
  background:#204c6a; border:1px solid #2b6b8f; color:#d7efff;
  font-size:12px; padding:2px 6px; border-radius:6px;
}

/* Toolbars / dropdowns */
.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.search-wrap{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.search-wrap .input{ flex:1 1 auto; min-width:220px }
.date-nav{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }

details.dropdown{ position:relative; display:inline-block }
details.dropdown > summary{ list-style:none; cursor:pointer }
details.dropdown > summary::-webkit-details-marker{ display:none }
details.dropdown[open] .menu{ display:block }
details.dropdown .menu{
  display:none; position:absolute; top:100%; right:0; min-width:220px;
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); z-index:50;
}
details.dropdown .menu a{
  display:block; padding:10px 12px; text-decoration:none; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.04);
}
details.dropdown .menu a:hover{ background:#202542 }
details.dropdown .menu a:last-child{ border-bottom:0 }

/* Tables */
table{ width:100%; border-collapse:collapse }
th,td{ border-bottom:1px solid var(--line); padding:10px; text-align:left }

/* Small screens fix */
@media (max-width:760px){
  .row.space-between{ flex-direction:column; gap:10px; align-items:flex-start }
}

/* Generic rows/helpers */
.row{ display:flex; align-items:center }
.row.gap{ gap:12px }
.row.space-between{ display:flex; justify-content:space-between }
.align-center{ align-items:center }
.hidden{ display:none }

/* === Session list (table-like rows) === */
.session-list{ display:flex; flex-direction:column; gap:10px; }

/* 3-column row: time | who | actions */
.session-row{
  display:grid;
  grid-template-columns: 170px 1fr 380px; /* desktop */
  gap:12px; align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
}
.session-row.blocked{ background:#2a1f1f; border-color:#6b2a2a; }

.time-cell{ display:flex; align-items:center; gap:10px; min-width:0; }
.time-cell .time.big{ white-space:nowrap; }

.who-cell{ min-width:0; }
.who-cell .client-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.who-cell .meta-line{ opacity:.85; }

/* actions become a responsive grid */
.actions { min-width:0; }
.actions-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:8px; margin:0;
}
.actions-grid .btn.small{ width:100%; }

/* medium screens: actions under row (full width) */
@media (max-width: 980px){
  .session-row{
    grid-template-columns: 150px 1fr; /* time | who */
  }
  .actions{ grid-column: 1 / -1; }
  .actions-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* phones: stack + 2x2 buttons */
@media (max-width: 600px){
  .session-row{ grid-template-columns: 1fr; }
  .time-cell{ order: 1; }
  .who-cell{ order: 2; }
  .actions{ order: 3; }
  .actions-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .actions-grid .btn.small{ font-size:.92rem; padding:8px 10px; }
}

/* micro phones */
@media (max-width: 380px){
  .actions-grid{ grid-template-columns: 1fr; }
}

/* Desktop refinements */
@media (min-width: 981px){
  .session-row{
    grid-template-columns: 190px 1fr auto;   /* time | who | actions (auto width) */
  }
  .actions{ justify-self: end; }
  .actions-grid{
    grid-template-columns: repeat(4, max-content);
    gap: 10px;
  }
  .actions-grid .btn.small{
    width: auto;
    padding: 8px 14px;
  }
}

/* Hover + borders */
.session-row:hover{
  border-color:#3f5566;
  background:#10172a;
}

/* align checkbox + time nicely */
.time-cell input[type="checkbox"]{ margin-right:8px; }

/* keep long names from pushing buttons off-screen */
.who-cell{ min-width:0; }
.who-cell .client-line strong{
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Swap picker visual states ===== */
body.pick-mode .session-row{
  cursor: pointer;
  outline: 2px dashed rgba(124,92,255,0.35);
}
.session-row.picked{
  outline: 2px solid var(--accent);
  background: #121a2f;
}

/* --- Fix: make date/time fields readable on iOS/Safari in dark theme --- */
input[type="date"],
input[type="time"],
select{
  color: var(--text) !important;
  background-color: #11152a !important;
  border: 1px solid var(--line) !important;
  caret-color: var(--text);
}

/* iOS/Safari text inside the control */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{
  color: var(--text);
}

/* Calendar / clock icons – turn them light */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  filter: invert(1) opacity(.85);
}

/* Placeholder + autofill colours */
input[type="date"]::placeholder,
input[type="time"]::placeholder{
  color: var(--muted);
  opacity: .9;
}
.input:-webkit-autofill{
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--text);
}

/* Firefox date/time text */
::-moz-date-and-time-text{ color: var(--text); }

/* Subtle boundary so the client package box doesn’t blend into nearby inputs */
#clientPkgBox{
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px;
}