/* Frizero MVP UI skeleton */
:root{
  --bg:#0b0f19;
  --card:#121a2a;
  --text:#e7eefc;
  --muted:#a7b6d8;
  --accent:#4da3ff;
  --danger:#ff4d6d;
  --ok:#35d07f;
  --border:rgba(255,255,255,.10);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --max-auth:560px;
  --max-app:1100px;
  --max:var(--max-auth);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:linear-gradient(160deg, #070a12 0%, #0b1222 60%, #0a1020 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
.wrap{min-height:100%; display:flex; align-items:center; justify-content:center; padding:18px}
body.shell .wrap{align-items:flex-start; padding:16px}
body.shell .card{max-width:var(--max-app); padding:20px}
@media (min-width: 768px){
  body.shell .wrap{padding:22px}
  body.shell .card{padding:26px}
}

.card{
  width:100%;
  max-width:var(--max);
  background:rgba(18,26,42,.92);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  backdrop-filter: blur(8px);
}
h1{font-size:20px; margin:0 0 10px}
p{margin:8px 0; color:var(--muted); line-height:1.45}
.row{display:flex; gap:10px}
.row > *{flex:1}
label{display:block; font-size:13px; margin:10px 0 6px; color:var(--muted)}
input,textarea,select,button{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(10,16,32,.75);
  color:var(--text);
  padding:12px 12px;
  font-size:15px;
  outline:none;
}
textarea{min-height:88px; resize:vertical}
button{
  cursor:pointer;
  background:linear-gradient(180deg, rgba(77,163,255,.95), rgba(48,122,255,.95));
  border:none;
  font-weight:600;
  margin-top:14px;
}
button:disabled{opacity:.6; cursor:not-allowed}
.pill{display:inline-block; font-size:12px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.error{color:var(--danger)}
.ok{color:var(--ok)}
.footer{margin-top:12px; font-size:12px; color:var(--muted)}
.hr{height:1px; background:var(--border); margin:12px 0}

.alert{
  border:1px solid var(--border);
  background:rgba(10,16,32,.55);
  border-radius:12px;
  padding:10px 12px;
  margin:10px 0;
  color:var(--text);
}
.muted{color:var(--muted)}

.table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td{padding:8px; border-bottom:1px solid var(--border); vertical-align:top}
.table th{text-align:left; color:var(--muted); font-weight:600}
.table td form button{margin-top:0; padding:8px 10px; font-size:13px}
.table td a{font-size:13px}

/* Simple nav for dashboards */
.nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.nav a{font-size:13px}
.nav .spacer{flex:1}
.inline{display:inline}
.linkbtn{
  width:auto;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
  margin-top:0;
}
.smallbtn{
  width:auto;
  padding:8px 10px;
  border-radius:999px;
  font-size:13px;
  margin-top:0;
}
.badge{display:inline-block; font-size:11px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}


/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;}
.tab{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text);text-decoration:none;opacity:.75;}
.tab.active{opacity:1;border-color:rgba(77,163,255,.6);box-shadow:0 0 0 2px rgba(77,163,255,.15) inset;}


/* Client shell helpers */
.page-title{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.page-title h1{margin:0}
.page-actions{display:flex; gap:8px; flex-wrap:wrap}
.grid{display:grid; gap:12px}
@media (min-width: 900px){.grid.cols-2{grid-template-columns: 1fr 1fr}.grid.cols-3{grid-template-columns: 1fr 1fr 1fr}}
.kpi{border:1px solid var(--border); background:rgba(10,16,32,.55); border-radius:14px; padding:12px}
.kpi .label{font-size:12px; color:var(--muted)}
.kpi .value{font-size:18px; font-weight:700; margin-top:4px}
.nav{position:sticky; top:0; background:rgba(18,26,42,.92); padding:10px; border-radius:14px; border:1px solid var(--border); z-index:5}
body.shell .nav{backdrop-filter: blur(8px)}
@media (max-width: 520px){.nav a{padding:6px 8px; border:1px solid var(--border); border-radius:999px; background:rgba(10,16,32,.35)}}
.section{margin-top:14px}
.section h2{font-size:16px; margin:0 0 8px}
.hint{font-size:12px; color:var(--muted)}

/* Additional UI utilities used by client pages */
.card-h{margin-bottom:10px}
.card-h h2{font-size:16px; margin:0 0 4px}
.card-h p{margin:0}

.form .field{margin-bottom:10px}
.form .actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px}

.btn{display:inline-block; width:auto; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:rgba(10,16,32,.35); color:var(--text); font-weight:600; font-size:14px}
.btn.primary{background:linear-gradient(180deg, rgba(77,163,255,.95), rgba(48,122,255,.95)); border:none}
.btn:hover{opacity:.95}

.grid.two{grid-template-columns:1fr}
@media (min-width: 900px){.grid.two{grid-template-columns:1fr 1fr}}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (min-width: 900px){.stats{grid-template-columns:1fr 1fr}}
.stat{border:1px solid var(--border); background:rgba(10,16,32,.35); border-radius:14px; padding:10px}
.stat .k{font-size:12px; color:var(--muted)}
.stat .v{font-size:18px; font-weight:800; margin-top:4px}

.alert.success{border-color:rgba(53,208,127,.35)}

.table-wrap{overflow:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--border)}
.table-wrap .table{min-width:680px; background:rgba(10,16,32,.25)}

.switch{display:flex; align-items:center; gap:10px; margin-top:6px}
.switch input{width:auto}

.list{padding-left:18px; color:var(--muted)}
.list li{margin:8px 0}

.faq details{border:1px solid var(--border); border-radius:12px; padding:10px 12px; background:rgba(10,16,32,.35); margin:10px 0}
.faq summary{cursor:pointer; font-weight:600}



/* Additional UI utilities used by client pages (profile/settings/reports/help) */
.card-h{margin-bottom:10px}
.card-h h2{font-size:16px;margin:0 0 4px}
.card-h p{margin:0}

.form .field{margin-bottom:10px}
.form .actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

.btn{display:inline-block;width:auto;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(10,16,32,.35);color:var(--text);font-weight:600}
.btn.primary{background:linear-gradient(180deg, rgba(77,163,255,.95), rgba(48,122,255,.95));border:none}
.btn:hover{filter:brightness(1.05)}

.grid.two{display:grid;gap:12px}
@media (min-width: 900px){.grid.two{grid-template-columns:1fr 1fr}}

.stats{display:grid;gap:10px}
@media (min-width: 520px){.stats{grid-template-columns:1fr 1fr}}
.stat{border:1px solid var(--border);background:rgba(10,16,32,.35);border-radius:14px;padding:12px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:18px;font-weight:800;margin-top:4px}

.alert.success{border-color:rgba(53,208,127,.35);background:rgba(53,208,127,.08)}
.switch{display:flex;gap:10px;align-items:center;margin-top:6px}
.switch input{width:auto}

.list{margin:0;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}

.faq details{border:1px solid var(--border);border-radius:12px;background:rgba(10,16,32,.35);padding:10px 12px;margin:8px 0}
.faq summary{cursor:pointer;color:var(--text);font-weight:600}
.faq details > div{margin-top:8px}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
.table-wrap .table{min-width:620px}
@media (max-width: 520px){.table-wrap .table{min-width:720px}}


/* Accessibility helpers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Public booking: service buttons */
.service-pills{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.service-pills .pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.06);cursor:pointer;user-select:none;color:var(--text);text-align:center;min-height:44px}
.service-pills .pill{position:relative}
.service-pills .pill input{position:absolute;opacity:0;pointer-events:none;}
.service-pills .pill span{display:block;width:100%;text-align:center;}
.service-pills .pill:has(input:checked){border-color:rgba(77,163,255,.85);background:rgba(77,163,255,.18);box-shadow:0 0 0 2px rgba(77,163,255,.10) inset}
@media (max-width:520px){.service-pills{flex-direction:column}.service-pills .pill{width:100%}}

/* Public booking: fullwidth calendar */
.calendar{border:1px solid var(--border);border-radius:14px;background:rgba(10,16,32,.35);padding:12px;margin:8px 0 6px}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cal-title{flex:1;text-align:center;font-weight:800;font-size:14px}
.cal-nav{width:auto;min-width:42px;padding:10px 0;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text);font-weight:900;margin:0}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;color:var(--muted);font-size:12px}
.cal-week div{text-align:center;padding:4px 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-empty{height:42px}
.cal-day{margin:0;padding:10px 0;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);font-weight:700;cursor:pointer}
.cal-day.is-disabled{opacity:.35;cursor:not-allowed}
.cal-day.is-closed{color:var(--danger);opacity:.55}
.cal-day.is-closed:hover{background:rgba(255,77,109,.08)}
.cal-day.is-today{border-color:rgba(53,208,127,.55)}
.cal-day.is-selected{border-color:rgba(77,163,255,.75);background:rgba(77,163,255,.14);box-shadow:0 0 0 2px rgba(77,163,255,.12) inset}

/* Public booking: time slots as radio grid */
.slot-grid{margin-top:6px}
.slot-grid-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width: 900px){.slot-grid-inner{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 520px){.slot-grid-inner{grid-template-columns:repeat(2,1fr)}}
.slot-pill{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 8px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.03);cursor:pointer;user-select:none;font-weight:800}
.slot-pill input{position:absolute;opacity:0;pointer-events:none}
.slot-pill:has(input:checked){border-color:rgba(77,163,255,.75);background:rgba(77,163,255,.14);box-shadow:0 0 0 2px rgba(77,163,255,.12) inset}
.slot-pill.is-disabled{border-color:rgba(255,85,85,.65);background:rgba(255,85,85,.08);color:rgba(255,130,130,.95);cursor:not-allowed;opacity:.95}
.slot-pill.is-disabled span{opacity:1}



/* Bookings grouped list (client dashboard + bookings) */
.day-card{padding:12px; margin:12px 0}
.day-head{display:flex; align-items:center; gap:10px; padding:6px 2px 10px; border-bottom:1px solid var(--border); margin-bottom:8px}
.day-title{font-weight:700; letter-spacing:.2px}
.booking-row{display:grid; grid-template-columns: 160px 1fr 120px auto; gap:10px; padding:10px 8px; border-bottom:1px dashed rgba(255,255,255,.10)}
.booking-row.alt{background: rgba(255,255,255,.04); border-radius:10px}
.booking-row:last-child{border-bottom:0}
.bk-hour{font-weight:700}
.bk-service{font-size:12px; margin-top:2px}
.bk-name{font-weight:650}
.bk-phone{font-size:12px; margin-top:2px}
.status-pill{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:rgba(255,255,255,.04)}
.status-pending{color:var(--text)}
.status-confirmed{color:var(--ok); border-color:rgba(53,208,127,.35); background:rgba(53,208,127,.10)}
.status-cancelled{color:var(--danger); border-color:rgba(255,77,109,.35); background:rgba(255,77,109,.10)}
.status-completed{color:var(--accent); border-color:rgba(77,163,255,.35); background:rgba(77,163,255,.10)}
.status-no_show{color:#ffcc66; border-color:rgba(255,204,102,.35); background:rgba(255,204,102,.10)}
.bk-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; align-items:flex-start}
.btn.small{padding:8px 10px; font-size:12px; line-height:1}
.btn.ok{border-color:rgba(53,208,127,.35); background:rgba(53,208,127,.12)}
.btn.danger{border-color:rgba(255,77,109,.35); background:rgba(255,77,109,.12)}

@media (max-width: 820px){
  .booking-row{grid-template-columns: 1fr; gap:8px}
  .bk-status{order:3}
  .bk-actions{justify-content:flex-start}
  .status-pill{width:fit-content}
}


/* Admin dashboard shell */
.admin-shell{
  display:flex;
  gap:16px;
  min-height:520px;
}
.admin-sidebar{
  width:240px;
  flex:0 0 240px;
  border-right:1px solid var(--border);
  padding-right:14px;
  display:flex;
  flex-direction:column;
}
.admin-main{
  flex:1;
  min-width:0;
}
.admin-brand{padding:6px 0 14px}
.admin-brand__title{font-weight:800; letter-spacing:.2px}
.admin-brand__sub{font-size:12px; color:var(--muted); margin-top:2px}
.admin-nav{display:flex; flex-direction:column; gap:6px}
.admin-nav__item{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--text);
  background:transparent;
}
.admin-nav__item:hover{border-color:var(--border); background:rgba(10,16,32,.35)}
.admin-nav__item.is-active{
  border-color:rgba(77,163,255,.45);
  background:rgba(77,163,255,.10);
}
.admin-sidebar__footer{margin-top:auto; padding-top:12px}
.admin-user__label{font-size:12px; color:var(--muted)}
.admin-user__value{font-size:13px; margin-top:2px; word-break:break-all}
.admin-logout{margin-top:10px}
.btn-secondary{
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
}
.btn-secondary:hover{background:rgba(255,255,255,.09)}

.admin-header{margin-bottom:14px}
.admin-header h1{font-size:20px; margin:0 0 6px}
.admin-header p{margin:0; color:var(--muted)}
.section-title{font-size:15px; margin:14px 0 10px}
.help{font-size:12px; color:var(--muted); margin:6px 0 0}
.grid-2{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width: 880px){
  .grid-2{grid-template-columns:1fr 1fr}
}
.notice{
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  margin:10px 0 14px;
  background:rgba(10,16,32,.35);
}
.notice-ok{border-color:rgba(53,208,127,.35); background:rgba(53,208,127,.08)}
.notice-danger{border-color:rgba(255,77,109,.35); background:rgba(255,77,109,.08)}
.cards{display:grid; grid-template-columns:1fr; gap:12px; margin-top:12px}
@media (min-width: 760px){
  .cards{grid-template-columns:1fr 1fr}
}
.card-link{
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:rgba(10,16,32,.35);
}
.card-link:hover{border-color:rgba(77,163,255,.45)}
.card-link__title{font-weight:700; color:var(--text); margin-bottom:4px}
.card-link__sub{font-size:13px; color:var(--muted)}

.log-box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(10,16,32,.35);
  overflow:auto;
  max-height:520px;
}
.log-box pre{margin:0; font-size:12px; line-height:1.45; white-space:pre-wrap; word-break:break-word}
.log-meta{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 12px}
.muted{color:var(--muted)}
@media (max-width: 860px){
  .admin-shell{flex-direction:column}
  .admin-sidebar{width:100%; flex:0 0 auto; border-right:none; border-bottom:1px solid var(--border); padding-right:0; padding-bottom:12px}
  .admin-nav{flex-direction:row; flex-wrap:wrap}
  .admin-nav__item{flex:1 1 auto; text-align:center}
}