/* ============================================================
   GIRIJA SAVANUR — Practice Dashboard
   Same brand tokens as the public site (ink/plum/gold), reworked
   for a data-dense admin shell: dark sidebar for navigation,
   light content area for readability of tables and numbers.
   ============================================================ */

:root{
  --ink:        #16101F;
  --plum:       #241832;
  --plum-2:     #2E1E40;
  --parchment:  #F6F1E7;
  --paper:      #FBF9F4;
  --parchment-dim: #D9CFC0;
  --gold:       #C9A15C;
  --gold-bright:#E4C083;
  --ember:      #B8604B;
  --line:       rgba(22,16,31,.10);
  --line-dark:  rgba(201,161,92,.22);

  --ok:    #3C7A4E;
  --ok-bg: #E7F1EA;
  --warn:  #A8761F;
  --warn-bg:#FAF0DC;
  --info:  #3A5C8C;
  --info-bg:#E7EEF7;
  --off:   #8A8072;
  --off-bg:#EDE9E1;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 14px;
  --sidebar-w: 240px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; margin:0; line-height:1.2;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:var(--font-body); cursor:pointer;}
img{max-width:100%; display:block;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:rgba(22,16,31,.18); border-radius:99px;}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--ember); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ============ SHELL LAYOUT ============ */
.shell{display:flex; min-height:100vh;}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--ink);
  color:var(--parchment-dim);
  display:flex; flex-direction:column;
  position:fixed; top:0; bottom:0; left:0;
  transform:translateX(-100%);
  transition:transform .25s ease;
  z-index:100;
}
.sidebar.open{transform:translateX(0);}
@media(min-width:960px){
  .sidebar{position:sticky; transform:none;}
  .shell{padding-left:0;}
}
.sidebar-head{
  padding:22px 20px 18px;
  border-bottom:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:space-between;
}
.sidebar-logo{height:26px; width:auto;}
.sidebar-close{display:none; background:none; border:none; color:var(--parchment-dim);}
@media(max-width:959px){ .sidebar-close{display:block;} }

.sidebar-nav{padding:14px 12px; flex:1; overflow-y:auto;}
.nav-group-label{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); opacity:.75;
  padding:14px 10px 6px;
}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  font-size:14px; color:var(--parchment-dim);
  margin-bottom:2px; transition:background .15s, color .15s;
}
.nav-item svg{flex-shrink:0; opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.05); color:var(--parchment);}
.nav-item.active{background:rgba(201,161,92,.15); color:var(--gold-bright);}
.nav-item.active svg{opacity:1;}
.nav-badge{
  margin-left:auto; background:var(--ember); color:#fff;
  font-size:10.5px; font-weight:700; border-radius:99px;
  padding:1px 7px; min-width:18px; text-align:center;
}
.sidebar-foot{
  padding:16px 20px; border-top:1px solid var(--line-dark);
  display:flex; align-items:center; gap:10px;
}
.sidebar-avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--gold); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:14px;
}
.sidebar-foot-name{font-size:13px; color:var(--parchment); font-weight:600;}
.sidebar-foot-role{font-size:11.5px; color:var(--parchment-dim);}

.sidebar-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99;
  display:none;
}
.sidebar-overlay.show{display:block;}
@media(min-width:960px){ .sidebar-overlay{display:none !important;} }

/* ---- Main column ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(251,249,244,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:14px 20px; display:flex; align-items:center; gap:14px;
}
@media(min-width:960px){ .topbar{padding:16px 32px;} }
.menu-btn{
  background:none; border:1px solid var(--line); border-radius:9px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
@media(min-width:960px){ .menu-btn{display:none;} }
.topbar-title{font-size:17px;}
.topbar-title span{display:block; font-family:var(--font-body); font-weight:400; font-size:12px; color:var(--off); margin-top:1px;}
.topbar-actions{margin-left:auto; display:flex; gap:10px; align-items:center;}

.content{padding:20px; flex:1;}
@media(min-width:960px){ .content{padding:32px; padding-bottom:80px;} }
.view{display:none;}
.view.active{display:block;}

/* Mobile bottom tab bar */
.mobile-tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:var(--ink); border-top:1px solid var(--line-dark);
  display:flex; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media(min-width:960px){ .mobile-tabbar{display:none;} }
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--parchment-dim);
  padding:7px 2px; border-radius:10px; font-size:10px;
}
.tab-btn.active{color:var(--gold-bright);}
body{padding-bottom:64px;}
@media(min-width:960px){ body{padding-bottom:0;} }

/* ============ SHARED COMPONENTS ============ */
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px;}
@media(min-width:640px){ .stat-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
.stat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 16px;
}
.stat-label{font-size:12px; color:var(--off); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
.stat-value{font-family:var(--font-display); font-size:26px; color:var(--ink);}
.stat-delta{font-size:12px; margin-top:4px; display:flex; align-items:center; gap:4px;}
.stat-delta.up{color:var(--ok);}
.stat-delta.down{color:var(--ember);}

.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:20px; overflow:hidden;
}
.panel-head{
  padding:16px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.panel-head h3{font-size:15.5px;}
.panel-head .sub{font-size:12px; color:var(--off); margin-top:2px;}
.panel-body{padding:6px 0;}
.panel-body.pad{padding:18px;}

.link-btn{font-size:12.5px; color:var(--ember); font-weight:600;}
.link-btn:hover{text-decoration:underline;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600;
  border:1px solid transparent; transition:background .15s, border-color .15s;
}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:#000;}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-bright);}
.btn-ghost{background:#fff; border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-sm{padding:6px 12px; font-size:12px;}
.btn-danger{background:#fff; border-color:rgba(184,96,75,.4); color:var(--ember);}
.btn-danger:hover{background:#FCEEEA;}

/* List rows (bookings / leads) */
.row-list{display:flex; flex-direction:column;}
.row-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.row-item:last-child{border-bottom:none;}
.row-avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--parchment); color:var(--plum-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  border:1px solid var(--line);
}
.row-main{flex:1; min-width:0;}
.row-title{font-size:14px; font-weight:600; color:var(--ink);}
.row-sub{font-size:12.5px; color:var(--off); margin-top:2px;}
.row-meta{text-align:right; flex-shrink:0;}
.row-time{font-size:13px; font-weight:600; color:var(--ink);}
.row-tag{font-size:11.5px; color:var(--off); margin-top:2px;}

.pill{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px; text-transform:uppercase;
}
.pill-ok{background:var(--ok-bg); color:var(--ok);}
.pill-warn{background:var(--warn-bg); color:var(--warn);}
.pill-info{background:var(--info-bg); color:var(--info);}
.pill-off{background:var(--off-bg); color:var(--off);}

/* Tables (desktop) */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
thead th{
  text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--off); padding:10px 18px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(22,16,31,.02);}
.cell-name{font-weight:600; color:var(--ink);}
.cell-sub{font-size:12px; color:var(--off); margin-top:1px;}

/* Filters / tabs */
.seg{display:inline-flex; background:var(--parchment); border-radius:999px; padding:3px; gap:2px;}
.seg button{
  background:none; border:none; padding:7px 14px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--off);
}
.seg button.active{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12);}

/* Forms */
.form-grid{display:grid; gap:14px;}
@media(min-width:640px){ .form-grid.cols-2{grid-template-columns:1fr 1fr;} }
.field label{display:block; font-size:12px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field input, .field textarea, .field select{
  width:100%; padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  font-family:var(--font-body); font-size:14px; color:var(--ink); background:#fff;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--ember);}
.field textarea{resize:vertical; min-height:80px;}
.field-hint{font-size:11.5px; color:var(--off); margin-top:5px;}

/* Service edit cards */
.svc-grid{display:grid; gap:14px;}
@media(min-width:720px){ .svc-grid{grid-template-columns:1fr 1fr;} }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px;
}
.svc-row{display:flex; gap:12px; align-items:flex-start;}
.svc-row .field{flex:1;}
.svc-price-field{max-width:120px;}
.svc-foot{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}

/* Charts */
.chart-wrap{padding:18px;}
.chart-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px; color:var(--off);}
.chart-legend span{display:inline-flex; align-items:center; gap:6px;}
.chart-legend i{width:9px; height:9px; border-radius:2px; display:inline-block;}

.bar-list{display:flex; flex-direction:column; gap:12px;}
.bar-row{display:grid; grid-template-columns:120px 1fr 44px; align-items:center; gap:10px; font-size:12.5px;}
.bar-row .label{color:var(--ink); font-weight:600;}
.bar-track{height:9px; background:var(--parchment); border-radius:99px; overflow:hidden;}
.bar-fill{height:100%; border-radius:99px; background:var(--gold);}
.bar-row .val{text-align:right; color:var(--off);}

/* Empty state */
.empty{
  padding:40px 20px; text-align:center; color:var(--off);
}
.empty svg{opacity:.5; margin-bottom:10px;}
.empty p{font-size:13.5px;}

/* Toast */
.toast{
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:999px;
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:200; white-space:nowrap;
}
@media(min-width:960px){ .toast{bottom:24px;} }
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============ MODAL (fixed: all state lives in CSS classes, no
   inline transform, so nothing can out-specificity the .show state) ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(22,16,31,.55); z-index:150;
  display:none;
}
.modal-overlay.show{display:block;}
.modal{
  position:fixed; inset:0; z-index:160;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none;
}
.modal.show{pointer-events:auto;}
.modal-card{
  pointer-events:none;
  background:#fff; width:100%; max-width:480px;
  border-radius:18px 18px 0 0;
  max-height:88vh; display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .25s ease;
}
.modal-card.wide{max-width:560px;}
.modal.show .modal-card{transform:translateY(0); pointer-events:auto;}
@media(min-width:640px){
  .modal{align-items:center;}
  .modal-card{border-radius:18px; transform:translateY(12px); opacity:0; transition:transform .2s ease, opacity .2s ease;}
  .modal.show .modal-card{transform:translateY(0); opacity:1;}
}

/* ============ VIEW TOGGLE (list / calendar) ============ */
.view-toggle-row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px;}

/* ============ CALENDAR ============ */
.cal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line);}
.cal-nav{display:flex; align-items:center; gap:10px;}
.cal-nav button{
  background:var(--parchment); border:1px solid var(--line); border-radius:8px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.cal-nav button:hover{background:#fff; border-color:var(--ink);}
.cal-month-label{font-family:var(--font-display); font-size:16px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-weekday{
  text-align:center; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--off); padding:10px 4px; border-bottom:1px solid var(--line);
}
.cal-cell{
  min-height:64px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:6px 6px; cursor:pointer; transition:background .15s;
  display:flex; flex-direction:column; gap:4px;
}
@media(min-width:640px){ .cal-cell{min-height:92px; padding:8px;} }
.cal-cell:hover{background:var(--paper);}
.cal-cell.other-month{background:rgba(22,16,31,.02); color:var(--off);}
.cal-cell.today{background:rgba(201,161,92,.08);}
.cal-cell:nth-child(7n){border-right:none;}
.cal-daynum{font-size:12px; font-weight:600; color:var(--ink);}
.cal-cell.other-month .cal-daynum{color:var(--off); font-weight:400;}
.cal-cell.today .cal-daynum{
  color:var(--ink); background:var(--gold); width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.cal-dots{display:flex; flex-wrap:wrap; gap:3px;}
.cal-dot{width:6px; height:6px; border-radius:50%;}
.cal-dot.confirmed{background:var(--ok);}
.cal-dot.pending{background:var(--warn);}
.cal-dot.completed{background:var(--off);}
.cal-dot.cancelled, .cal-dot.no-show{background:var(--ember);}
.cal-count-chip{
  font-size:10px; font-weight:700; color:var(--ink); background:var(--parchment);
  border-radius:99px; padding:0 6px; align-self:flex-start;
}

/* ============ LEAD CAPTURE (styled after the Flinova reference) ============ */
.lc-grid{display:grid; gap:20px;}
@media(min-width:960px){ .lc-grid{grid-template-columns:1.2fr 1fr;} }
.lc-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
}
.switch{position:relative; width:42px; height:24px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.switch-track{
  position:absolute; inset:0; background:var(--off-bg); border-radius:99px; transition:background .2s; cursor:pointer;
}
.switch-track::before{
  content:""; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .switch-track{background:var(--ok);}
.switch input:checked + .switch-track::before{transform:translateX(18px);}

.lc-trigger-row{display:flex; align-items:center; gap:9px; font-size:13px; padding:8px 0;}
.lc-trigger-row input[type=number]{width:64px; padding:6px 8px; border-radius:7px; border:1px solid var(--line); font-size:13px;}

.snippet-box{
  background:var(--ink); color:#DDD6C8; border-radius:10px; padding:14px 16px;
  font-family:monospace; font-size:11.5px; word-break:break-all; line-height:1.6;
  max-height:110px; overflow-y:auto; margin-bottom:12px;
}
.snippet-box .tag{color:var(--gold-bright);}
.snippet-box .str{color:#9FD4A3;}

.lc-preview{
  border:1px solid var(--line); border-radius:14px; padding:22px;
  background:var(--paper);
}
.lc-preview-card{
  background:var(--ink); color:var(--parchment); border-radius:14px; padding:20px;
  border:1px solid var(--line-dark);
}
.lc-preview-card h4{font-family:var(--font-display); font-size:16px; color:var(--parchment); margin-bottom:6px;}
.lc-preview-card p{font-size:12.5px; color:var(--parchment-dim); margin-bottom:14px;}
.lc-preview-card img{width:100%; border-radius:8px; margin-bottom:12px; max-height:110px; object-fit:cover;}
.lc-preview-btn{
  display:inline-block; background:var(--gold); color:var(--ink); font-size:12.5px; font-weight:700;
  padding:9px 16px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em;
}

/* ============ CUSTOMERS ============ */
.customer-total{font-size:12px; color:var(--off);}

/* Ticket thread */
.ticket-item{cursor:pointer;}
.ticket-item.unread .row-title::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ember); margin-right:7px;
}
.thread-msg{padding:14px 18px; border-bottom:1px solid var(--line);}
.thread-msg:last-child{border-bottom:none;}
.thread-msg .who{font-size:12.5px; font-weight:700; color:var(--ink);}
.thread-msg .when{font-size:11px; color:var(--off); margin-left:8px; font-weight:400;}
.thread-msg .body{font-size:13.5px; color:var(--ink); margin-top:5px; line-height:1.5;}
.thread-msg.from-client{background:var(--parchment);}

.reply-box{padding:16px 18px; border-top:1px solid var(--line); background:var(--paper);}

/* Section title inside content */
.view-head{margin-bottom:20px;}
.view-head h2{font-size:22px;}
.view-head p{font-size:13.5px; color:var(--off); margin-top:4px;}

/* Two-column content grid */
.grid-main{display:grid; gap:20px;}
@media(min-width:1100px){ .grid-main{grid-template-columns:1.6fr 1fr;} }

/* Utility */
.hide-mobile{display:none;}
@media(min-width:720px){ .hide-mobile{display:table-cell;} }
.mb-0{margin-bottom:0 !important;}

/* ============================================================
   AUTH / LOGIN SCREEN (added — implementation pass)
   ============================================================ */
.login-screen{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  padding:20px;
}
.login-card{
  width:100%; max-width:360px;
  background:var(--plum);
  border:1px solid var(--line-dark);
  border-radius:var(--radius);
  padding:28px 26px;
  display:flex; flex-direction:column; gap:4px;
}
.login-card h2{
  font-family:var(--font-display); color:var(--parchment);
  font-size:20px; margin:10px 0 2px;
}
.login-sub{ color:var(--parchment-dim); font-size:13px; margin:0 0 18px; }
.login-card .field{ margin-bottom:14px; }
.login-card .field label{ color:var(--parchment-dim); }
.login-card .field input{
  background:var(--ink); border:1px solid var(--line-dark); color:var(--parchment);
}
.login-card .btn-block{ width:100%; margin-top:6px; }
.login-status{
  font-size:12.5px; margin:10px 0 0; min-height:1em; display:none;
}
.login-status.show{ display:block; }
.login-status.ok{ color:var(--ok); }
.login-status.err{ color:var(--ember); }
.login-config-warning{
  margin-top:14px; padding:10px 12px; border-radius:8px;
  background:rgba(184,96,75,.15); color:#E4AFA2; font-size:12px; line-height:1.5;
}

/* Demo-mode badge in topbar */
.demo-mode-badge{
  font-size:11.5px; font-weight:600; color:var(--warn);
  background:var(--warn-bg); padding:5px 10px; border-radius:20px;
  margin-right:8px; white-space:nowrap;
}

/* Generic loading / error inline states (reuses .empty box look) */
.empty.error-state svg{ color:var(--ember); }
.empty.loading-state svg{ animation:spin 1.1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }