@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400..600&family=Alex+Brush&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#0c0b0d; --surface:#1a181d; --text:#ede7d8; --text-dim:#a89f8c;
  --accent:#c9a227; --accent-light:#f0d488; --line:rgba(201,162,39,.3);
  --radius:16px; --font:'Georgia', serif;
  --font-signature:'Alex Brush', cursive; --font-ui:'Inter', -apple-system, sans-serif;
  --badge-review-bg:rgba(201,162,39,.18);
}
/* Day theme — same palette as the marketing site (index.html), default there and now here too */
html[data-theme="day"]{
  --ink:#f5efe4; --surface:#e9e0d0; --text:#332a20; --text-dim:#6b5d4a;
  --accent:#8a6a1f; --accent-light:#6a5019; --line:rgba(138,106,31,.3);
  --badge-review-bg:rgba(138,106,31,.14);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--ink); color:var(--text); font-family:Arial, Helvetica, sans-serif; line-height:1.6; transition:background .3s ease, color .3s ease;}

/* ---------- SITE HEADER (shared across booking-system pages) ---------- */
.site-header{border-bottom:1px solid var(--line); margin-bottom:24px;}
.site-header-inner{max-width:1200px; margin:0 auto; padding:20px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.site-logo{display:flex; flex-direction:column; align-items:flex-start; text-decoration:none; line-height:1.5;}
.site-logo-word{font-family:var(--font-signature); font-size:36px; font-weight:400; letter-spacing:.01em; color:var(--accent);}
.site-logo-sub{font-family:var(--font-signature); font-size:18px; font-weight:400; letter-spacing:.01em; color:var(--text); margin-top:-4px;}
.site-nav{display:flex; gap:20px; flex-wrap:wrap;}
.site-nav a{font-family:var(--font-ui); font-size:13px; font-weight:500; color:var(--text-dim); text-decoration:none;}
.site-nav a:hover{color:var(--accent);}
.site-header-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.site-payment-badge{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:11px 14px; font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap;}
.payment-badge-icon{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
@media(max-width:820px){ .site-payment-badge span{display:none;} .site-payment-badge{padding:12px; gap:2px;} }
.site-theme-toggle{position:relative; display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:4px; font-family:var(--font-ui); font-size:11px; font-weight:600;}
.site-theme-toggle::before{
  content:""; position:absolute; top:4px; left:4px; width:40px; height:calc(100% - 8px); border-radius:999px;
  background:var(--accent); transition:transform .3s ease; z-index:0;
}
.site-theme-toggle.is-night::before{ transform:translateX(40px); }
.site-theme-toggle span{position:relative; z-index:1; width:40px; text-align:center; padding:8px 0; border-radius:999px; cursor:pointer; color:var(--text-dim); transition:color .25s ease;}
.site-theme-toggle span.active{color:var(--ink);}
.site-back-btn{font-family:var(--font-ui); font-size:12px; font-weight:600; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:11px 16px; text-decoration:none; white-space:nowrap;}
.site-back-btn:hover{background:var(--accent); color:var(--ink);}
@media(max-width:700px){ .site-nav{display:none;} }
h1{font-family:var(--font); font-weight:normal; font-size:1.8rem; margin:0 0 .3em;}
h3{font-family:var(--font); font-weight:normal; margin:1.2em 0 .5em;}
p{color:var(--text-dim);}
a{color:var(--accent);}
.muted{color:var(--text-dim); font-size:14px;}

.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.page-wrap{max-width:900px; margin:0 auto; padding:24px;}
.page-wrap.wide{max-width:1200px;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; max-width:440px; margin:0 auto;}
.page-wrap .card{max-width:none;}

.topnav{display:flex; justify-content:space-between; align-items:center; padding:10px 0 20px; font-size:14px; gap:16px;}
.topnav a{color:var(--accent);}
.topnav > *:first-child{margin-right:auto;}
.topnav a + a{margin-left:16px;}
@media(max-width:700px){
  /* Admin nav was a single nowrap flex row — on a phone it just ran off the
     right edge (unreachable, since the page itself doesn't scroll sideways).
     Let it wrap onto multiple lines instead. */
  .topnav{flex-wrap:wrap; justify-content:flex-start; row-gap:8px;}
  .topnav > *:first-child{margin-right:0; width:100%;}
  .topnav a + a{margin-left:0;}
}

.field{margin-bottom:16px;}
label{display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
input, select, textarea{width:100%; background:var(--ink); border:1px solid var(--line); border-radius:8px; color:var(--text); padding:10px 12px; font-size:15px;}
textarea{min-height:80px;}
input:focus, select:focus, textarea:focus{border-color:var(--accent); outline:none;}

.btn{display:inline-block; background:var(--accent); color:var(--ink); border:none; border-radius:999px; padding:12px 24px; font-weight:bold; cursor:pointer; text-decoration:none; font-size:14px; font-family:inherit; line-height:normal;}
.btn:hover{background:var(--accent-light);}
.btn.small{padding:8px 16px; font-size:13px;}
.btn:disabled{opacity:.7; cursor:not-allowed;}
.btn.is-loading{display:inline-flex; align-items:center; justify-content:center; gap:9px;}
.btn.is-loading::before{content:''; width:15px; height:15px; border-radius:50%; border:2px solid rgba(0,0,0,.25); border-top-color:var(--ink); animation:btn-spin .7s linear infinite; flex-shrink:0;}
@keyframes btn-spin{to{transform:rotate(360deg);}}

.link-btn{background:none; border:none; color:var(--accent); cursor:pointer; font-size:14px; padding:0; text-decoration:underline;}

.icon-btn{background:none; border:1px solid var(--line); color:var(--accent); cursor:pointer; border-radius:6px; padding:6px; display:inline-flex; align-items:center; justify-content:center; line-height:0;}
.icon-btn:hover{background:var(--accent); color:var(--ink); border-color:var(--accent);}
.icon{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.icon.sm{width:15px; height:15px;}

.alert{background:rgba(201,162,39,.12); border:1px solid var(--accent); color:var(--accent-light); padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px;}
.alert.success{background:rgba(120,200,120,.12); border-color:#7bc47b; color:#bfe8bf;}
html[data-theme="day"] .alert.success{background:rgba(40,140,75,.10); border-color:#2f7d4f; color:#1e6b3a;}
.alert.error{background:rgba(220,90,90,.12); border-color:#dc5a5a; color:#f0b8b8;}
html[data-theme="day"] .alert.error{background:rgba(180,40,40,.10); border-color:#b42828; color:#8a1f1f;}

.row-between{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}

/*
 * Wrap any .appt-table (Appointments, Services, Locations, ...) in
 * <div class="table-scroll"> to make it usable on narrow screens. Below
 * ~768px there simply isn't room for 6-8 columns of real inputs side by
 * side — squeezing them via percentages (as table-layout:fixed does)
 * shrinks every input down to 1-2 visible characters instead. Giving the
 * table a real min-width and letting the wrapper scroll horizontally
 * keeps every column legible; the user swipes sideways instead of reading
 * garbled text. Desktop is unaffected (tables already fit there).
 */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
@media(max-width:768px){ .table-scroll table{min-width:680px;} }

.appt-table{width:100%; border-collapse:collapse; margin-top:12px; font-size:14px;}
.appt-table th, .appt-table td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
.appt-table th{color:var(--accent); font-weight:normal; text-transform:uppercase; font-size:11px; letter-spacing:.05em;}

.badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:bold;}
.badge-pending{background:rgba(230,180,50,.18); color:#e6c060;}
.badge-confirmed{background:rgba(100,200,120,.18); color:#8fe0a0;}
.badge-completed{background:rgba(150,150,200,.18); color:#b8b8e0;}
.badge-cancelled{background:rgba(220,90,90,.18); color:#e8a0a0;}
/* Review "badge" is a real link, not a status — gold rather than any of
   the status colors above, and a pointer cursor + hover state since it's
   clickable (the status badges above never are). Pulses on a slow loop
   (same auto-hover cycle as the marketing site's "Bookings" nav pill,
   index.html's .nav-cta/navCtaAutoHover) to draw the eye to it, pausing
   on hover; --badge-review-bg carries its resting color per-theme so the
   animation doesn't need its own light/dark keyframe overrides. */
a.badge-review{background:var(--badge-review-bg); color:var(--accent); cursor:pointer; text-decoration:none; animation:reviewBadgePulse 2.4s ease-in-out infinite;}
a.badge-review:hover{background:rgba(201,162,39,.3); animation-play-state:paused;}
html[data-theme="day"] a.badge-review:hover{background:rgba(138,106,31,.24);}
@keyframes reviewBadgePulse{
  0%, 20%{background:var(--badge-review-bg); color:var(--accent); box-shadow:0 0 0 0 transparent;}
  50%{background:var(--accent); color:var(--ink); box-shadow:0 0 14px color-mix(in oklch, var(--accent) 45%, transparent);}
  80%, 100%{background:var(--badge-review-bg); color:var(--accent); box-shadow:0 0 0 0 transparent;}
}
/* Day theme: the pale badge text above is tuned for the dark --ink
   background and goes near-invisible on the light one — darker, more
   saturated colors instead. */
html[data-theme="day"] .badge-pending{background:rgba(180,130,20,.16); color:#7a5710;}
html[data-theme="day"] .badge-confirmed{background:rgba(40,140,75,.16); color:#1e6b3a;}
html[data-theme="day"] .badge-completed{background:rgba(90,90,170,.16); color:#48478c;}
html[data-theme="day"] .badge-cancelled{background:rgba(190,60,60,.16); color:#a3333a;}
html[data-theme="day"] a.badge-review:hover{background:rgba(138,106,31,.24);}

.slot-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
.slot-btn{background:var(--ink); border:1px solid var(--line); color:var(--text); padding:8px 14px; border-radius:8px; cursor:pointer; font-size:14px;}
.slot-btn:hover, .slot-btn.selected{background:var(--accent); color:var(--ink); border-color:var(--accent);}

.filter-tabs{display:flex; gap:16px; flex-wrap:wrap; margin:16px 0 8px; border-bottom:1px solid var(--line); padding-bottom:10px;}
.filter-tabs a{color:var(--text-dim); font-size:14px; text-decoration:none;}
.filter-tabs a.active{color:var(--accent); font-weight:bold;}

.actions-cell{white-space:nowrap; font-size:13px;}
.edit-panel{display:none; margin-top:8px;}
.edit-panel.open{display:block;}
.inline-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.stacked{max-width:420px;}

.modal-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:100; align-items:center; justify-content:center; padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; max-width:480px; width:100%;}
.modal-box h3{margin-top:0;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px;}