@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    --bg-1:       #07071a;
    --bg-2:       #0d0b2e;
    --glass:      rgba(255,255,255,0.04);
    --glass-hover:rgba(255,255,255,0.07);
    --border:     rgba(255,255,255,0.08);
    --border-hi:  rgba(167,139,250,0.4);
    --accent:     #a78bfa;
    --accent2:    #818cf8;
    --glow:       rgba(167,139,250,0.25);
    --text:       #ffffff;
    --muted:      #9090b0;
    --success:    #34d399;
    --warn:       #fbbf24;
    --danger:     #f87171;
    --sidebar:    230px;
    --radius:     14px;
    --font:       'Inter', system-ui, sans-serif;
    /* themeable derived tokens (overridden per-theme in themes.css) */
    --acc-soft:   rgba(167,139,250,.14);
    --acc-soft2:  rgba(129,140,248,.08);
    --acc-border: rgba(167,139,250,.28);
    --panel-solid:rgba(13,11,40,.95);
    --input-solid:#1c1c26;
    --sidebar-bg: rgba(10,8,30,0.7);
    --bg:         transparent;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: var(--font); font-size: 14px;
             background: var(--bg-1); color: var(--text); }
body { background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
       background-attachment: fixed; }
a { color: var(--accent); text-decoration: none; }

/* ── App shell ─────────────────────────────────────────────── */
.app-shell    { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.main-content { padding: 2rem; overflow-y: auto; }

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar { background: var(--sidebar-bg); backdrop-filter: blur(20px);
           border-right: 1px solid var(--border); display: flex; flex-direction: column;
           padding: 1.75rem 0; position: sticky; top: 0; height: 100vh; }
.sidebar-logo { font-size: 1.1rem; font-weight: 800; padding: 0 1.25rem 2rem;
                letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.sidebar-logo span { background: linear-gradient(90deg, var(--accent), var(--accent2));
                     -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-links { list-style: none; flex: 1; padding: 0 .75rem; display: flex; flex-direction: column; gap: 4px; }
.nav-links li a { display: flex; align-items: center; gap: .65rem; padding: .65rem 1rem;
                  color: var(--muted); border-radius: 10px; font-size: .875rem; font-weight: 500;
                  transition: all .18s; }
.nav-links li a:hover { color: var(--text); background: var(--glass-hover); }
.nav-links li.active a { color: var(--text); background: linear-gradient(135deg,var(--acc-soft),var(--acc-soft2));
                          border: 1px solid var(--border-hi); font-weight: 600; }
.sidebar-footer { padding: 1.25rem 1.25rem; border-top: 1px solid var(--border);
                  display: flex; flex-direction: column; gap: .35rem; }
.user-name  { font-weight: 600; font-size: .875rem; color: var(--text); }
.badge      { font-size: .68rem; background: var(--acc-soft); color: var(--accent);
              padding: .2rem .55rem; border-radius: 20px; width: fit-content;
              text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--acc-border); }
.btn-logout { font-size: .8rem; color: var(--muted); margin-top: .35rem; transition: color .15s; }
.btn-logout:hover { color: var(--danger); }

/* ── Auth shell ────────────────────────────────────────────── */
.auth-shell { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card  { background: rgba(255,255,255,0.04); backdrop-filter: blur(30px);
              border: 1px solid var(--border); border-radius: 20px;
              padding: 2.75rem; width: 100%; max-width: 420px;
              box-shadow: 0 0 60px rgba(167,139,250,.08), 0 24px 60px rgba(0,0,0,.4); }
.auth-header        { text-align: center; margin-bottom: 2.25rem; }
.auth-logo          { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem;
                      background: linear-gradient(135deg, var(--accent), var(--accent2));
                      -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-header h1     { font-size: 1.15rem; font-weight: 600; margin-bottom: .3rem; }
.auth-header p      { color: var(--muted); font-size: .875rem; }

/* ── Forms ─────────────────────────────────────────────────── */
.form-group         { margin-bottom: 1.25rem; }
.form-group label   { display: block; margin-bottom: .45rem; font-size: .75rem; font-weight: 600;
                      color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.form-group input,
select              { width: 100%; padding: .7rem 1rem; background: var(--bg);
                      border: 1px solid var(--border); border-radius: 10px; color: var(--text);
                      font-size: .925rem; font-family: var(--font); transition: border-color .15s, box-shadow .15s; }
.form-group input:focus,
select:focus        { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
select option       { background: var(--input-solid); color: var(--text); }
.form-group input::placeholder { color: var(--muted); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent2));
               color: #fff; border: none; border-radius: 10px; padding: .75rem 1.5rem;
               font-size: .925rem; font-weight: 700; font-family: var(--font);
               cursor: pointer; transition: opacity .15s, box-shadow .15s;
               box-shadow: 0 4px 20px var(--glow); }
.btn-primary:hover { opacity: .88; box-shadow: 0 6px 28px var(--glow); }
.btn-full    { width: 100%; }
.btn-secondary { background: var(--glass); color: var(--text); border: 1px solid var(--border);
                 border-radius: 10px; padding: .65rem 1.2rem; font-size: .875rem; font-weight: 500;
                 font-family: var(--font); cursor: pointer; transition: background .15s; }
.btn-secondary:hover { background: var(--glass-hover); }
.btn-danger  { background: rgba(248,113,113,.1); color: var(--danger);
               border: 1px solid rgba(248,113,113,.3); border-radius: 10px;
               padding: .65rem 1.2rem; font-size: .875rem; font-family: var(--font);
               cursor: pointer; transition: background .15s; margin-right: auto; }
.btn-danger:hover { background: rgba(248,113,113,.2); }
.btn-sm      { padding: .38rem .8rem; font-size: .8rem; border-radius: 8px; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert-error { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3);
               color: var(--danger); border-radius: 10px; padding: .75rem 1rem;
               margin-bottom: 1.25rem; font-size: .875rem; }

/* ── Page header ───────────────────────────────────────────── */
.page-header         { display: flex; align-items: center; justify-content: space-between;
                        margin-bottom: 1.75rem; }
.page-header h2      { font-size: 1.5rem; font-weight: 700; }
.page-subtitle       { color: var(--muted); font-size: .875rem; margin-top: .2rem; }

/* ── Cards ─────────────────────────────────────────────────── */
.card       { background: var(--glass); backdrop-filter: blur(12px);
              border: 1px solid var(--border); border-radius: var(--radius);
              padding: 1.35rem; transition: border-color .2s; }
.card:hover { border-color: var(--acc-border); }
.card-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.stat-card  { display: flex; flex-direction: column; gap: .4rem; }
.stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.stat-value { font-size: 2.25rem; font-weight: 800;
              background: linear-gradient(135deg, var(--accent), var(--accent2));
              -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Two-panel layout ──────────────────────────────────────── */
.two-panel      { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: start; }
.panel-search   { margin-bottom: .75rem; }
.panel-search input { width: 100%; padding: .55rem .9rem; background: var(--glass);
                      border: 1px solid var(--border); border-radius: 10px; color: var(--text);
                      font-family: var(--font); }
.panel-search input:focus { outline: none; border-color: var(--accent); }
.item-list      { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.list-item      { padding: .7rem 1rem; border-radius: 10px; cursor: pointer;
                  transition: all .15s; border: 1px solid transparent; }
.list-item:hover { background: var(--glass-hover); }
.list-item.active { background: linear-gradient(135deg,var(--acc-soft),var(--acc-soft2));
                    border-color: var(--border-hi); }
.list-name      { font-weight: 600; font-size: .875rem; }
.list-sub       { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.list-empty        { color: var(--muted); font-size: .875rem; padding: 1rem; text-align: center; }
.list-item-child   { padding-left: 1.75rem !important; border-left: 2px solid var(--border); margin-left: .5rem; }
.list-group-header { font-size: .68rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .08em; color: var(--muted); padding: .75rem .85rem .35rem;
                     list-style: none; }

/* ── Detail panel ──────────────────────────────────────────── */
.detail-header  { display: flex; justify-content: space-between; align-items: flex-start;
                  margin-bottom: 1.25rem; }
.detail-header h3 { font-size: 1.15rem; font-weight: 700; }
.detail-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.detail-section { margin-bottom: 1.5rem; }
.detail-section h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
                     color: var(--muted); margin-bottom: .75rem; font-weight: 600; }
.info-row       { display: flex; justify-content: space-between; padding: .5rem 0;
                  border-bottom: 1px solid var(--border); font-size: .875rem; }
.info-row span:first-child { color: var(--muted); }
.muted-text     { color: var(--muted); font-size: .8rem; }
.divider        { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── Availability grid ─────────────────────────────────────── */
.avail-grid     { display: flex; flex-direction: column; gap: .6rem; }
.avail-row      { display: flex; align-items: center; gap: .75rem; }
.avail-day      { width: 34px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.avail-time     { padding: .35rem .6rem; background: var(--glass); border: 1px solid var(--border);
                  border-radius: 8px; color: var(--text); font-size: .8rem; width: 100px;
                  font-family: var(--font); }
.avail-sep      { color: var(--muted); font-size: .8rem; }
.toggle         { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input   { opacity: 0; width: 0; height: 0; }
.toggle-slider  { position: absolute; cursor: pointer; inset: 0; background: var(--border);
                  border-radius: 22px; transition: .2s; }
.toggle-slider:before { content: ''; position: absolute; height: 16px; width: 16px;
                         left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; }
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider:before { transform: translateX(16px); }

/* ── Badges ────────────────────────────────────────────────── */
.badge-success  { background: rgba(52,211,153,.12); color: var(--success);
                  padding: .2rem .6rem; border-radius: 20px; font-size: .75rem;
                  border: 1px solid rgba(52,211,153,.25); }
.badge-warn     { background: rgba(251,191,36,.12); color: var(--warn);
                  padding: .2rem .6rem; border-radius: 20px; font-size: .75rem;
                  border: 1px solid rgba(251,191,36,.25); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal          { position: fixed; inset: 0; display: flex; align-items: center;
                  justify-content: center; z-index: 100; pointer-events: none; opacity: 0;
                  transition: opacity .2s; }
.modal.open     { pointer-events: all; opacity: 1; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.65);
                  backdrop-filter: blur(4px); z-index: 99; display: none; }
.modal-backdrop.open { display: block; }
.modal-card     { background: var(--panel-solid); backdrop-filter: blur(30px);
                  border: 1px solid var(--border-hi); border-radius: 18px;
                  width: 100%; max-width: 500px; z-index: 101;
                  box-shadow: 0 0 0 1px rgba(167,139,250,.1), 0 24px 80px rgba(0,0,0,.6); }
.modal-header   { display: flex; align-items: center; justify-content: space-between;
                  padding: 1.35rem 1.75rem; border-bottom: 1px solid var(--border);
                  font-weight: 700; font-size: 1rem; }
.modal-close    { background: none; border: none; color: var(--muted); font-size: 1.1rem;
                  cursor: pointer; padding: .25rem; line-height: 1; transition: color .15s; }
.modal-close:hover { color: var(--text); }
.modal-body     { padding: 1.75rem; }
.modal-footer   { display: flex; justify-content: flex-end; gap: .75rem;
                  padding: 1.25rem 1.75rem; border-top: 1px solid var(--border); }
.form-row       { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Calendar CTA ──────────────────────────────────────────── */
.btn-cal-cta    { display: flex; align-items: center; justify-content: center; gap: .6rem;
                  width: 100%; padding: 1rem; margin-bottom: 1.5rem;
                  background: linear-gradient(135deg, var(--accent), var(--accent2));
                  color: #fff; font-size: 1rem; font-weight: 700; border-radius: var(--radius);
                  letter-spacing: .02em; transition: opacity .2s, transform .15s, box-shadow .2s;
                  box-shadow: 0 4px 24px var(--glow); font-family: var(--font); }
.btn-cal-cta:hover { opacity: .88; transform: translateY(-2px); color: #fff;
                     box-shadow: 0 8px 32px var(--glow); }

/* ── Back button ───────────────────────────────────────────── */
.btn-back       { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .75rem;
                  padding: .5rem 1rem; background: var(--glass); border: 1px solid var(--border);
                  border-radius: 10px; color: var(--text); font-size: .875rem; font-weight: 500;
                  transition: all .15s; font-family: var(--font); }
.btn-back:hover { background: var(--glass-hover); border-color: var(--border-hi); color: var(--accent); }

/* ── Calendar wrap ─────────────────────────────────────────── */
.calendar-wrap { padding: 1rem; }

/* FullCalendar dark theme */
.fc { --fc-border-color: var(--border); --fc-page-bg-color: transparent;
      --fc-neutral-bg-color: var(--glass); --fc-today-bg-color: rgba(167,139,250,.06);
      --fc-list-event-hover-bg-color: var(--glass-hover); color: var(--text); }
.fc .fc-button { background: var(--glass); border-color: var(--border); color: var(--text);
                 font-size: .8rem; font-family: var(--font); border-radius: 8px !important; }
.fc .fc-button:hover { background: var(--glass-hover); }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: var(--accent); border-color: var(--accent); }
.fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number { color: var(--muted); }
.fc .fc-timegrid-slot-label { color: var(--muted); font-size: .72rem; }
.fc-event { border-radius: 6px !important; font-size: .78rem !important; }

/* ── Flatpickr overrides ───────────────────────────────────── */
.flatpickr-calendar          { background: var(--panel-solid); backdrop-filter: blur(30px);
                                border: 1px solid var(--border-hi); border-radius: var(--radius);
                                box-shadow: 0 0 0 1px rgba(167,139,250,.1), 0 24px 60px rgba(0,0,0,.7);
                                font-family: var(--font); }
.flatpickr-months            { background: transparent; padding: .5rem 0; }
.flatpickr-month             { background: transparent; color: var(--text); }
.flatpickr-current-month     { font-size: .95rem; font-weight: 700; color: var(--text); }
.flatpickr-current-month select,
.numInputWrapper input        { color: var(--text) !important; background: transparent !important; }
.flatpickr-prev-month svg,
.flatpickr-next-month svg     { fill: var(--muted); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--accent); }
.flatpickr-weekdays           { background: transparent; }
span.flatpickr-weekday        { color: var(--muted); font-size: .72rem; font-weight: 700;
                                 text-transform: uppercase; letter-spacing: .06em; }
.flatpickr-day                { color: var(--text); border-radius: 8px; font-size: .875rem; }
.flatpickr-day:hover          { background: var(--acc-soft); border-color: transparent; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: linear-gradient(135deg,var(--accent),var(--accent2));
                                 border-color: transparent; color: #fff;
                                 box-shadow: 0 2px 12px var(--glow); }
.flatpickr-day.today          { border-color: var(--accent); }
.flatpickr-day.flatpickr-disabled { color: rgba(255,255,255,.15); }
.flatpickr-time               { border-top: 1px solid var(--border); background: transparent; }
.flatpickr-time input         { color: var(--text); background: transparent;
                                 font-size: 1.1rem; font-weight: 700; font-family: var(--font); }
.flatpickr-time input:hover,
.flatpickr-time input:focus   { background: var(--acc-soft); }
.flatpickr-time .flatpickr-time-separator { color: var(--muted); }
.flatpickr-time .flatpickr-am-pm { color: var(--accent); font-weight: 700; }
.numInputWrapper:hover        { background: var(--acc-soft2); }
.flatpickr-confirm            { background: linear-gradient(135deg,var(--accent),var(--accent2));
                                 color: #fff; border-radius: 0 0 var(--radius) var(--radius);
                                 font-weight: 700; letter-spacing: .04em; font-family: var(--font);
                                 border-top: 1px solid var(--border); height: 42px;
                                 transition: opacity .15s; font-size: .9rem; }
.flatpickr-confirm:hover      { opacity: .88; }

/* ── Loading modal ─────────────────────────────────────────── */
.spinner-modal   { background: var(--panel-solid); backdrop-filter: blur(30px);
                   border: 1px solid var(--border-hi); border-radius: 18px;
                   padding: 2.5rem 3.5rem; display: flex; flex-direction: column;
                   align-items: center; gap: 1.5rem;
                   box-shadow: 0 0 0 1px rgba(167,139,250,.1), 0 24px 80px rgba(0,0,0,.7); }
.spinner-modal p { color: var(--muted); font-size: .9rem; }
.spinner         { width: 44px; height: 44px; border: 3px solid rgba(167,139,250,.15);
                   border-top-color: var(--accent); border-radius: 50%;
                   animation: spin .7s linear infinite; }
@keyframes spin  { to { transform: rotate(360deg); } }

/* ── Calendar tooltip ──────────────────────────────────────── */
.cal-tooltip    { position: fixed; z-index: 9999; background: var(--panel-solid);
                  border: 1px solid var(--border-hi); border-radius: 10px;
                  padding: .75rem 1rem; min-width: 180px; max-width: 260px;
                  box-shadow: 0 8px 32px rgba(0,0,0,.5); pointer-events: none;
                  backdrop-filter: blur(20px); }
.tip-name       { font-weight: 700; font-size: .9rem; margin-bottom: .4rem; color: var(--text); }
.tip-row        { font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
.tip-status     { display: inline-block; margin-top: .4rem; font-size: .7rem; font-weight: 700;
                  text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 20px; }
.tip-status-confirmed { background: rgba(52,211,153,.15); color: var(--success); border: 1px solid rgba(52,211,153,.3); }
.tip-status-cancelled { background: rgba(248,113,113,.15); color: var(--danger); border: 1px solid rgba(248,113,113,.3); }
.tip-status-no-show   { background: rgba(251,191,36,.15); color: var(--warn); border: 1px solid rgba(251,191,36,.3); }

/* ── Toast notifications ────────────────────────────────────── */
.toast          { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999;
                  padding: .9rem 1.4rem; border-radius: var(--radius); font-size: .875rem;
                  font-weight: 500; backdrop-filter: blur(20px);
                  box-shadow: 0 8px 32px rgba(0,0,0,.4);
                  opacity: 0; transform: translateY(10px) scale(.97);
                  transition: opacity .25s, transform .25s; }
.toast-show     { opacity: 1; transform: translateY(0) scale(1); }
.toast-error    { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3); color: #fca5a5; }
.toast-success  { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.3); color: #6ee7b7; }
.toast-info     { background: rgba(167,139,250,.1); border: 1px solid var(--border-hi); color: var(--accent); }