/* availability.css — patched UX version */

/* ── Panel ───────────────────────────────────────────────────────────────── */
.availability-panel { display:block; }
.availability-panel.hidden { display:none !important; }

/* ── Two-column layout ───────────────────────────────────────────────────── */
.availability-root {
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:16px;
  align-items:start;
  padding:16px;
  box-sizing:border-box;
  width:100%;
  transition: grid-template-columns .25s ease;
}
.availability-root.sidebar-all-collapsed {
  grid-template-columns: 48px 1fr;
}
.availability-left { min-width:0; display:flex; flex-direction:column; gap:12px; transition: width .25s ease; }
.availability-left.is-all-collapsed { }
.availability-main { min-width:0; }

.availability-card {
  background:#fff;
  border:1.5px solid var(--border,#e3e6f0);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:0 2px 8px rgba(60,68,120,.06);
}
.availability-card-title {
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted,#6b7394);
  margin-bottom:10px;
}
.availability-sub, .availability-card-sub {
  font-size:12px;
  color:var(--muted,#6b7394);
}
.availability-card-sub { margin-top:8px; line-height:1.4; }

/* ── Collapsible sidebar cards ────────────────────────────────────────────── */
.av-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:0;
}
.av-card-head .availability-card-title {
  margin-bottom:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  transition:opacity .15s ease;
  opacity:1;
}
.av-collapse-btn {
  border:none !important;
  background:transparent !important;
  color:var(--muted,#6b7394) !important;
  border-radius:999px !important;
  width:22px !important; height:22px !important;
  font-size:16px !important;
  line-height:1 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  outline:none !important;
  font-family:inherit !important;
  transition:background .12s, color .12s;
}
.av-collapse-btn:hover {
  background:rgba(66,85,255,.08) !important;
  color:var(--accent,#4255ff) !important;
}
/* Collapsed state: black filled circle so it's always visible */
.av-collapse-btn.is-collapsed {
  background:#111827 !important;
  color:#fff !important;
  width:28px !important;
  height:28px !important;
  font-size:18px !important;
}
.av-collapse-btn.is-collapsed:hover {
  background:#374151 !important;
  color:#fff !important;
}
/* Collapsed card: hide title text, pin button to top-right */
.av-collapsible-card.is-collapsed {
  padding:8px 10px !important;
}
.av-collapsible-card.is-collapsed .av-card-head {
  justify-content:flex-end;
  width:100%;
}
.av-collapsible-card.is-collapsed .av-card-head .availability-card-title {
  display:none !important;
}
.av-collapsible-card .av-card-body {
  overflow:hidden;
  transition:max-height .22s ease, opacity .18s ease;
  max-height:800px;
  opacity:1;
}
.av-collapsible-card.is-collapsed .av-card-body {
  max-height:0 !important;
  opacity:0 !important;
  pointer-events:none;
}
/* Sidebar fully collapsed: no overflow clipping, compact gap */
.availability-left.is-all-collapsed {
  overflow:visible;
  gap:8px;
}

/* ── Top controls ─────────────────────────────────────────────────────────── */
.availability-toolbar { display:flex; flex-wrap:wrap; gap:6px; }
.availability-chip {
  border:1.5px solid var(--border,#e3e6f0) !important;
  background:#fff !important;
  border-radius:999px !important;
  padding:6px 12px !important;
  font-family:inherit !important;
  font-size:12px !important;
  font-weight:700 !important;
  cursor:pointer !important;
  transition:background .12s, color .12s, border-color .12s;
  color:var(--muted,#6b7394) !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  outline:none !important;
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}
.availability-chip:hover { background:rgba(66,85,255,.07); color:var(--accent,#4255ff); border-color:#d8ddff; }
.availability-chip.is-active { background:#111827; color:#fff; border-color:#111827; }

/* ── Courses card ─────────────────────────────────────────────────────────── */
.av-course-filter { display:flex; flex-direction:column; gap:8px; }
.av-course-actions { display:flex; gap:8px; flex-wrap:wrap; }
.availability-mini-btn {
  border:1.5px solid var(--border,#e3e6f0) !important;
  background:#fff !important;
  color:var(--text,#1a1d28) !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:700 !important;
  padding:6px 11px !important;
  cursor:pointer !important;
  transition:all .12s;
  font-family:inherit !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  outline:none !important;
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}
.availability-mini-btn:hover { background:#f7f8fd; }
.availability-mini-btn.is-active { background:#111827; color:#fff; border-color:#111827; }
.availability-mini-btn--primary { background:rgba(66,85,255,.08); color:var(--accent,#4255ff); border-color:#d8ddff; }
.availability-mini-btn--primary:hover { background:rgba(66,85,255,.14); }

.av-course-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:320px;
  overflow:auto;
  padding-right:2px;
}
.av-course-check {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  transition:background .1s, border-color .1s;
  border:1.5px solid #edf1f7;
  background:#fff;
}
.av-course-check:hover { background:#f8faff; border-color:#dce5ff; }
.av-course-check input {
  accent-color:var(--accent,#4255ff);
  width:14px; height:14px;
  flex-shrink:0; cursor:pointer;
}
.av-course-swatch {
  width:11px; height:11px;
  border-radius:3px;
  border:2px solid;
  flex-shrink:0;
}
.av-course-code { font-weight:800; color:var(--text,#1a1d28); }
.av-course-meta { margin-left:auto; font-size:10px; color:var(--muted,#6b7394); white-space:nowrap; }

/* ── Admin selectors ──────────────────────────────────────────────────────── */
.av-select {
  width:100%;
  border:1.5px solid var(--border,#e3e6f0);
  border-radius:10px;
  padding:8px 10px;
  font-family:inherit;
  font-size:13px;
  background:#fff;
  color:var(--text,#1a1d28);
  outline:none;
  cursor:pointer;
}
.av-select:focus { border-color:var(--accent,#4255ff); box-shadow:0 0 0 3px rgba(66,85,255,.1); }
.availability-checks { display:flex; flex-direction:column; gap:5px; max-height:220px; overflow:auto; padding-right:2px; }
.availability-check { display:flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; padding:4px 2px; }
.availability-check input { accent-color:var(--accent,#4255ff); width:13px; height:13px; }
.availability-field + .availability-field { margin-top:10px; }
.availability-label { font-size:11px; font-weight:700; color:var(--muted,#6b7394); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:6px; }

/* ── Gaps ─────────────────────────────────────────────────────────────────── */
.availability-list { display:flex; flex-direction:column; gap:6px; }
.availability-gap-item { padding:8px 10px; border-radius:10px; background:#fff9f0; border:1px solid #fde8c8; }
.availability-gap-date { font-weight:700; font-size:12px; color:#7a3e00; }
.availability-gap-text { font-size:11px; color:#7a5200; margin-top:2px; }

/* ── Block time tabs ──────────────────────────────────────────────────────── */
.availability-tabs {
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
.availability-tab {
  border:1.5px solid var(--border,#e3e6f0) !important;
  background:#fff !important;
  color:var(--muted,#6b7394) !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
  padding:7px 12px !important;
  cursor:pointer !important;
  font-family:inherit !important;
  line-height:1.2 !important;
  box-shadow:none !important;
  outline:none !important;
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}
.availability-tab.is-active {
  background:#111827;
  color:#fff;
  border-color:#111827;
}
.availability-tab-panel { display:none; }
.availability-tab-panel.is-active { display:block; }

.availability-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.availability-form input,
.availability-form select {
  width:100%;
  min-height:36px;
  border:1.5px solid var(--border,#e3e6f0);
  border-radius:10px;
  padding:7px 10px;
  background:#fff;
  font-family:inherit;
  font-size:12px;
  outline:none;
}
.availability-form input:focus,
.availability-form select:focus { border-color:var(--accent,#4255ff); box-shadow:0 0 0 3px rgba(66,85,255,.1); }

/* ── Main card / head ─────────────────────────────────────────────────────── */
.availability-main-card { overflow:visible; }
.availability-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.availability-head-actions { display:flex; gap:8px; flex-wrap:wrap; }
.availability-title { font-size:18px; font-weight:800; color:var(--text,#1a1d28); }

/* ── Lesson actions panel ─────────────────────────────────────────────────── */
.availability-action-card {
  border:1.5px solid var(--border,#e3e6f0) !important;
  border-radius:14px !important;
  background:#fbfcff !important;
  margin-bottom:12px !important;
  overflow:hidden !important;
}
.availability-action-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
}
.availability-action-title {
  font-size:13px;
  font-weight:800;
  color:#1a1d28;
}
.availability-action-sub {
  font-size:12px;
  color:#6b7394;
  margin-top:3px;
}
.availability-toggle-btn {
  border:none !important;
  background:#111827 !important;
  color:#fff !important;
  border-radius:999px !important;
  width:28px !important; height:28px !important;
  font-size:20px !important;
  line-height:1 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-shrink:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  outline:none !important;
  font-family:inherit !important;
}
.availability-action-body {
  display:none;
  padding:0 14px 14px 14px;
}
.availability-action-card.is-open .availability-action-body { display:block; }

.availability-presets {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.availability-preset {
  border:1px solid #dbe2ff !important;
  background:#fff !important;
  color:#334155 !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:700 !important;
  padding:7px 10px !important;
  cursor:pointer !important;
  font-family:inherit !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  outline:none !important;
  display:inline-flex !important;
  align-items:center !important;
}
.availability-preset:hover { background:#f3f6ff; }
.availability-preset.is-active { background:#111827; color:#fff; border-color:#111827; }

.availability-message-box {
  border:1px solid #dde3f5 !important;
  background:linear-gradient(160deg,#f8faff 0%,#fff 100%) !important;
  border-radius:16px !important;
  padding:18px 18px 16px !important;
  box-sizing:border-box !important;
  box-shadow:0 2px 12px rgba(66,85,255,.07) !important;
}
.availability-message-label {
  font-size:13px;
  font-weight:900;
  color:#1a1d28;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.availability-message-meta {
  font-size:13px;
  font-weight:600;
  color:#4255ff;
  margin-top:0;
  margin-bottom:14px;
  background:rgba(66,85,255,.07);
  border-radius:8px;
  padding:6px 10px;
  display:inline-block;
}
.availability-message-text {
  width:100% !important;
  min-height:120px !important;
  border:1.5px solid #dde3f5 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  font-family:inherit !important;
  font-size:14px !important;
  line-height:1.55 !important;
  resize:vertical !important;
  outline:none !important;
  background:#fff !important;
  color:var(--text,#1a1d28) !important;
  box-sizing:border-box !important;
  display:block !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.04) !important;
  transition:border-color .15s, box-shadow .15s !important;
}
.availability-message-text:focus {
  border-color:var(--accent,#4255ff) !important;
  box-shadow:0 0 0 3px rgba(66,85,255,.12), inset 0 1px 3px rgba(0,0,0,.04) !important;
}
.availability-cc-row {
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1.5px solid #dde3f5;
  border-radius:12px;
  background:#f0f4ff;
  padding:11px 14px;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.availability-cc-row:hover { background:#e8eeff; border-color:#c5d0ff; }
.availability-cc-row input {
  width:16px; height:16px;
  accent-color:var(--accent,#4255ff);
  flex-shrink:0;
}
.availability-cc-copy {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
}
.availability-cc-title {
  font-size:13px;
  font-weight:800;
  color:#1e2a4a;
}
.availability-cc-email {
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid #c5d0ff;
  font-size:12px;
  color:#4255ff;
  font-weight:700;
  box-shadow:0 1px 4px rgba(66,85,255,.08);
}
.availability-cc-help {
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
  color:#6b7394;
  padding:0 2px;
}
.availability-message-actions {
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.availability-message-status {
  margin-top:12px;
  min-height:24px;
}
.availability-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  background:#f4f6fb;
  color:#475569;
}
.availability-status--ok {
  background:#ecfdf5;
  color:#166534;
  border:1px solid #bbf7d0;
}
.availability-status--error {
  background:#fef2f2;
  color:#b91c1c;
  border:1px solid #fecaca;
}

/* ── Calendar container ───────────────────────────────────────────────────── */
.availability-calendar-wrap { position:relative; }
#availability-calendar {
  position:relative;
  overflow:auto;
  border:1.5px solid var(--border,#e3e6f0);
  border-radius:14px;
  background:#fff;
  max-height:calc(100vh - 300px);
}
.availability-grid {
  display:grid;
  position:relative;
  background:#fff;
  min-width:700px;
}

/* Sticky header + gutter above events */
.availability-time-head {
  position:sticky;
  top:0; left:0;
  background:#fafbff;
  z-index:8;
  border-bottom:1.5px solid var(--border,#e3e6f0);
}
.availability-day-head {
  position:sticky;
  top:0;
  background:#fafbff;
  z-index:7;
  padding:10px 6px;
  text-align:center;
  font-size:12px;
  font-weight:800;
  border-bottom:1.5px solid var(--border,#e3e6f0);
  border-left:1px solid #eef2f7;
}
.availability-time-cell {
  position:sticky;
  left:0;
  background:#fafbff;
  z-index:7;
  padding:0 8px;
  font-size:11px;
  color:#4b5563;
  font-weight:800;
  white-space:nowrap;
  border-right:1px solid var(--border,#e3e6f0);
  border-bottom:1px solid #eef2f7;
  display:flex;
  align-items:flex-start;
  padding-top:4px;
  height:56px;
  box-sizing:border-box;
}
.availability-slot {
  position:relative;
  height:56px;
  border-left:1px solid #f1f5f9;
  border-bottom:1px solid #eef2f7;
  background-image:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(249,250,252,.4) 100%);
}

/* Events stay under sticky gutter */
.availability-event {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  padding:4px 6px;
  border:none;
  border-radius:10px;
  box-shadow:0 1px 4px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  pointer-events:auto;
  cursor:pointer;
  overflow:hidden;
  transition:filter .12s, transform .1s, box-shadow .12s;
  box-sizing:border-box;
  z-index:2;
}
.availability-event:hover {
  filter:brightness(.97);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.availability-event-row {
  display:flex;
  width:100%;
  gap:6px;
  align-items:flex-start;
}
.availability-event-title {
  font-size:11px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width:100%;
}
.availability-event-time {
  font-size:10px;
  margin-top:2px;
  opacity:.8;
  white-space:nowrap;
}
.availability-mail-btn {
  border:none;
  background:rgba(255,255,255,.85);
  color:#1f3fd1;
  border-radius:999px;
  width:20px; height:20px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.availability-mail-btn:hover { background:#fff; }
.availability-event--manual_block { cursor:default; }

#availability-now-line {
  position:absolute;
  display:none;
  height:2px;
  background:#ef4444;
  z-index:6;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(239,68,68,.15);
}
#availability-now-line::before {
  content:'';
  position:absolute;
  left:-6px; top:-4px;
  width:10px; height:10px;
  border-radius:999px;
  background:#ef4444;
}

/* ── Bottom slider ────────────────────────────────────────────────────────── */
.availability-scrollbar-wrap {
  margin-top:12px;
  padding:14px 16px;
  border:1.5px solid #dde3f5;
  border-radius:16px;
  background:linear-gradient(160deg, #f4f7ff 0%, #eef2fb 100%);
  box-shadow:0 2px 8px rgba(66,85,255,.06);
}
.availability-scrollbar-wrap.is-hidden { display:none; }
.availability-scrollbar-label {
  font-size:12px;
  font-weight:800;
  color:#334155;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px;
}
.availability-scrollbar-label::before {
  content:'';
  display:inline-block;
  width:16px; height:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234255ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E") center/contain no-repeat,
               url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234255ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0;
  opacity:.6;
}
.availability-x-slider {
  width:100%;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  height:8px;
  border-radius:999px;
  background:linear-gradient(to right, #4255ff 0%, #4255ff var(--pct, 0%), #dde3f5 var(--pct, 0%), #dde3f5 100%);
  outline:none;
  border:none;
  display:block;
  transition:background .1s;
}
.availability-x-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#4255ff;
  cursor:grab;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(66,85,255,.35);
  transition:transform .1s, box-shadow .1s;
}
.availability-x-slider::-webkit-slider-thumb:active {
  cursor:grabbing;
  transform:scale(1.15);
  box-shadow:0 3px 12px rgba(66,85,255,.5);
}
.availability-x-slider::-moz-range-thumb {
  width:22px;
  height:22px;
  border-radius:999px;
  background:#4255ff;
  cursor:grab;
  border:3px solid #fff;
  box-shadow:0 2px 8px rgba(66,85,255,.35);
}
.availability-x-slider::-moz-range-track {
  height:8px;
  border-radius:999px;
  background:#dde3f5;
}
.availability-scrollbar-meta {
  margin-top:8px;
  font-size:11px;
  font-weight:600;
  color:#6b7394;
  text-align:center;
  letter-spacing:.02em;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.av-loading {
  padding:40px;
  text-align:center;
  color:var(--muted,#6b7394);
  font-size:15px;
  font-weight:500;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .availability-root { grid-template-columns:1fr; }
  .availability-left { flex-direction:row; flex-wrap:wrap; }
  .availability-left .availability-card { flex:1 1 260px; }
  #availability-calendar { max-height:62vh; }
}
@media (max-width: 700px) {
  .availability-head { flex-direction:column; align-items:stretch; }
  .availability-head-actions { justify-content:flex-start; }
  .availability-presets { gap:6px; }
  .availability-preset { font-size:11px; padding:6px 9px; }
  .availability-root { padding:12px; }
}