*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:#0a0806; --dark:#111009; --dark2:#1a1710; --dark3:#242018; --dark4:#2e2a1f;
  --gold:#c9a84c; --gold-light:#e8c96d; --gold-dim:#8a6e2f; --gold-pale:#f5e8c0;
  --cream:#f0e8d0; --muted:#7a7060; --muted2:#5a5040;
  --text:#ede0c0; --text2:#b0a080; --text3:#7a6e50;
  --red:#c04a3a; --green:#4a8c5c; --green2:#2e8b5a;
  --blue:#4a7fc1; --purple:#7a5ea8; --amber:#8b6914;
  --border:rgba(201,168,76,0.15); --border2:rgba(201,168,76,0.08);
  --sidebar-w:240px;
  --font-display:'Playfair Display',Georgia,serif;
  --font-sans:'Montserrat',sans-serif;
  --radius:6px; --radius-lg:12px;
}
html,body{height:100%;overflow:hidden;}
body{font-family:var(--font-sans);background:var(--black);color:var(--text);font-size:14px;line-height:1.6;}
.screen{position:fixed;inset:0;display:none;}
.screen.active{display:flex;}
.page.active{display:block;}

/* AUTH */
#auth-screen{align-items:center;justify-content:center;background:var(--black);}
.auth-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(201,168,76,0.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 50%,rgba(201,168,76,0.04) 0%,transparent 60%);}
.auth-container{position:relative;display:flex;gap:60px;align-items:center;z-index:1;}
.auth-logo{text-align:center;}
.logo-badge{font-size:10px;letter-spacing:0.3em;color:var(--gold);border:1px solid var(--gold-dim);display:inline-block;padding:4px 14px;margin-bottom:20px;}
.logo-title{font-family:var(--font-display);font-size:52px;font-weight:900;line-height:1;color:var(--cream);letter-spacing:0.02em;}
.logo-title span{font-size:28px;font-weight:400;font-style:italic;color:var(--gold);display:block;letter-spacing:0.15em;}
.logo-line{width:60px;height:1px;background:var(--gold);margin:20px auto;}
.logo-sub{font-size:11px;letter-spacing:0.25em;color:var(--muted);text-transform:uppercase;}
.auth-card{background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;width:400px;}
.auth-tabs{display:flex;margin-bottom:28px;border-bottom:1px solid var(--border);}
.auth-tab{flex:1;padding:10px;background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--font-sans);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s;}
.auth-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.demo-note{font-size:11px;color:var(--muted2);text-align:center;margin-top:16px;font-style:italic;}
.required-badge{font-size:10px;background:rgba(201,168,76,0.15);color:var(--gold);padding:2px 8px;border-radius:20px;margin-left:8px;}

/* FORMS */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--text2);margin-bottom:8px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="date"],input[type="number"],select,textarea{width:100%;background:var(--dark3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-sans);font-size:13px;padding:10px 14px;outline:none;transition:border-color 0.2s;-webkit-appearance:none;}
input:focus,select:focus,textarea:focus{border-color:var(--gold-dim);}
select option{background:var(--dark3);}
textarea{resize:vertical;}
.btn-gold{width:100%;padding:13px;background:var(--gold);color:var(--black);border:none;border-radius:var(--radius);font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;cursor:pointer;transition:background 0.2s,transform 0.1s;margin-top:8px;}
.btn-gold:hover{background:var(--gold-light);}
.btn-gold:active{transform:scale(0.98);}
.btn-gold-sm{padding:8px 18px;background:var(--gold);color:var(--black);border:none;border-radius:var(--radius);font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;transition:background 0.2s;white-space:nowrap;}
.btn-gold-sm:hover{background:var(--gold-light);}
.btn-outline{padding:11px 20px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-sans);font-size:12px;letter-spacing:0.1em;cursor:pointer;transition:all 0.2s;}
.btn-outline:hover{border-color:var(--gold-dim);color:var(--gold);}
.btn-outline-sm{padding:8px 16px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-sans);font-size:11px;cursor:pointer;transition:all 0.2s;}
.btn-outline-sm:hover{border-color:var(--gold-dim);color:var(--gold);}

/* APP LAYOUT */
#app-screen{display:flex;overflow:hidden;}
#sidebar{width:var(--sidebar-w);background:var(--dark);border-right:1px solid var(--border2);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.sidebar-logo{padding:28px 20px 20px;border-bottom:1px solid var(--border2);text-align:center;}
.sl-badge{font-size:8px;letter-spacing:0.3em;color:var(--gold-dim);margin-bottom:4px;}
.sl-title{font-family:var(--font-display);font-size:28px;font-weight:900;color:var(--cream);line-height:1;}
.sl-sub{font-size:9px;letter-spacing:0.25em;color:var(--muted2);margin-top:4px;}
.sidebar-location{padding:12px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:8px;}
.loc-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;box-shadow:0 0 6px var(--gold);}
.sidebar-location select{background:none;border:none;color:var(--text2);font-size:12px;padding:0;cursor:pointer;}
.nav-section{padding:16px 0 4px;}
.nav-label{padding:0 16px 6px;font-size:9px;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted2);}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:var(--muted);cursor:pointer;font-size:12px;letter-spacing:0.05em;transition:all 0.15s;border-left:2px solid transparent;text-decoration:none;user-select:none;}
.nav-item:hover{color:var(--text2);background:var(--dark2);}
.nav-item.active{color:var(--gold);background:rgba(201,168,76,0.06);border-left-color:var(--gold);}
.nav-icon{font-size:14px;opacity:0.7;}
.sidebar-user{margin-top:auto;padding:14px 16px;border-top:1px solid var(--border2);display:flex;align-items:center;gap:10px;}
.su-avatar{width:32px;height:32px;border-radius:50%;background:var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--black);flex-shrink:0;}
.su-info{flex:1;min-width:0;}
.su-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.su-role{font-size:10px;color:var(--muted);}
.su-logout{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:14px;padding:4px;transition:color 0.2s;}
.su-logout:hover{color:var(--gold);}

/* MAIN */
#main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--black);}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid var(--border2);background:var(--dark);flex-shrink:0;}
.tb-left{display:flex;align-items:baseline;gap:16px;}
.page-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--cream);}
.tb-date{font-size:11px;color:var(--muted);}
.tb-right{display:flex;align-items:center;gap:16px;}
.tb-time{font-family:var(--font-display);font-size:16px;color:var(--gold);font-weight:700;letter-spacing:0.05em;}
.page{display:none;padding:24px 28px;overflow-y:auto;flex:1;min-height:0;}
.page.active{display:block;flex:1;height:0;}

/* STATS */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.stat-card{background:var(--dark2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:18px 20px;}
.stat-card.gold{border-color:rgba(201,168,76,0.3);background:linear-gradient(135deg,rgba(201,168,76,0.08),transparent);}
.stat-label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.stat-value{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--cream);line-height:1;margin-bottom:6px;}
.stat-sub{font-size:11px;color:var(--muted);}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dash-card{background:var(--dark2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:20px 22px;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border2);}
.card-header h3{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--cream);}
.card-badge{font-size:10px;letter-spacing:0.1em;background:rgba(201,168,76,0.12);color:var(--gold);padding:3px 10px;border-radius:20px;}

/* DASHBOARD APPTS */
.appointment-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;}
.appt-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--dark3);border-radius:var(--radius);border-left:3px solid var(--gold-dim);cursor:pointer;transition:opacity 0.15s;}
.appt-item:hover{opacity:0.85;}
.appt-item.status-online{border-left-color:var(--blue);}
.appt-item.status-frontdesk{border-left-color:var(--purple);}
.appt-item.status-checked-in{border-left-color:var(--green2);background:rgba(46,139,90,0.08);}
.appt-item.status-in-service{border-left-color:var(--green2);background:rgba(46,139,90,0.12);}
.appt-item.status-completed{border-left-color:var(--green);opacity:0.7;}
.appt-item.status-cancelled{border-left-color:var(--amber);opacity:0.6;}
.appt-item.status-no-show,.appt-item.status-late{border-left-color:var(--red);opacity:0.6;}
.appt-time{font-size:12px;font-weight:600;color:var(--gold);min-width:54px;}
.appt-client{flex:1;font-size:13px;color:var(--text);}
.appt-service{font-size:11px;color:var(--muted);}
.appt-barber{font-size:11px;color:var(--text2);text-align:right;}
.barber-perf{display:flex;flex-direction:column;gap:12px;}
.bp-row{display:flex;align-items:center;gap:12px;}
.bp-name{font-size:13px;color:var(--text);min-width:110px;}
.bp-bar-wrap{flex:1;height:6px;background:var(--dark4);border-radius:3px;overflow:hidden;}
.bp-bar{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:3px;}
.bp-val{font-size:12px;color:var(--gold);min-width:55px;text-align:right;}

/* CALENDAR */
.cal-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.cal-nav{display:flex;align-items:center;gap:8px;}
.cal-nav-btn{background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);cursor:pointer;padding:6px 12px;font-size:18px;line-height:1;transition:all 0.15s;}
.cal-nav-btn:hover{border-color:var(--gold-dim);color:var(--gold);}
.cal-title{font-family:var(--font-display);font-size:18px;color:var(--cream);min-width:180px;text-align:center;}
.cal-today-btn{padding:6px 14px;background:none;border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);font-family:var(--font-sans);font-size:11px;cursor:pointer;letter-spacing:0.1em;transition:all 0.15s;}
.cal-today-btn:hover{border-color:var(--gold-dim);color:var(--gold);}
.cal-view-btns{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.cal-view-btn{padding:7px 16px;background:none;border:none;color:var(--muted);font-family:var(--font-sans);font-size:11px;letter-spacing:0.1em;cursor:pointer;transition:all 0.15s;text-transform:uppercase;}
.cal-view-btn.active{background:var(--gold);color:var(--black);font-weight:600;}
.cal-view-btn:hover:not(.active){color:var(--text2);}
.cal-legend{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto;}
.leg-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);}
.leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* CALENDAR DAY VIEW */
.cal-day-view{display:grid;grid-template-columns:60px 1fr;border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;background:var(--dark2);}
.cal-day-header{grid-column:1/-1;padding:14px 20px;background:var(--dark3);border-bottom:1px solid var(--border2);font-family:var(--font-display);font-size:16px;color:var(--cream);}
.cal-time-col{border-right:1px solid var(--border2);}
.cal-hour-label{height:60px;display:flex;align-items:flex-start;justify-content:flex-end;padding:4px 8px 0 0;font-size:10px;color:var(--muted3,#5a5040);border-bottom:1px solid var(--border2);}
.cal-events-col{position:relative;}
.cal-hour-row{height:60px;border-bottom:1px solid var(--border2);}
.cal-event{position:absolute;left:4px;right:4px;border-radius:4px;padding:4px 8px;font-size:11px;cursor:pointer;overflow:hidden;transition:opacity 0.15s;}
.cal-event:hover{opacity:0.85;z-index:5;}
.cal-event.src-online{background:rgba(74,127,193,0.3);border-left:3px solid var(--blue);}
.cal-event.src-frontdesk{background:rgba(122,94,168,0.3);border-left:3px solid var(--purple);}
.cal-event.src-checked-in{background:rgba(46,139,90,0.35);border-left:3px solid var(--green2);}
.cal-event.src-in-service{background:rgba(46,139,90,0.45);border-left:3px solid var(--green2);}
.cal-event.src-completed{background:rgba(74,140,92,0.2);border-left:3px solid var(--green);opacity:0.7;}
.cal-event.src-cancelled{background:rgba(139,105,20,0.2);border-left:3px solid var(--amber);opacity:0.6;}
.cal-event.src-no-show,.cal-event.src-late{background:rgba(192,74,58,0.25);border-left:3px solid var(--red);opacity:0.7;}
.cal-event-name{font-weight:600;color:var(--cream);}
.cal-event-detail{color:var(--text2);font-size:10px;}

/* CALENDAR WEEK VIEW */
.cal-week-view{border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;background:var(--dark2);}
.cal-week-header{display:grid;grid-template-columns:60px repeat(7,1fr);border-bottom:1px solid var(--border2);}
.cal-week-header-cell{padding:10px 6px;text-align:center;font-size:11px;color:var(--muted);border-right:1px solid var(--border2);}
.cal-week-header-cell.today{color:var(--gold);font-weight:600;}
.cal-week-header-cell:last-child{border-right:none;}
.cal-week-day-name{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;}
.cal-week-day-num{font-family:var(--font-display);font-size:18px;color:var(--cream);}
.cal-week-body{display:grid;grid-template-columns:60px repeat(7,1fr);}
.cal-week-time{font-size:10px;color:var(--muted2);padding:4px 6px 0 6px;border-right:1px solid var(--border2);}
.cal-week-cell{border-right:1px solid var(--border2);border-bottom:1px solid var(--border2);height:54px;position:relative;padding:2px;}
.cal-week-cell:last-child{border-right:none;}
.cal-week-cell.today-col{background:rgba(201,168,76,0.03);}
.cal-mini-event{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--cream);}

/* CALENDAR MONTH VIEW */
.cal-month-view{border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;background:var(--dark2);}
.cal-month-header{display:grid;grid-template-columns:repeat(7,1fr);background:var(--dark3);border-bottom:1px solid var(--border2);}
.cal-month-dow{padding:10px 0;text-align:center;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);}
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cal-month-cell{border-right:1px solid var(--border2);border-bottom:1px solid var(--border2);min-height:90px;padding:6px;}
.cal-month-cell:nth-child(7n){border-right:none;}
.cal-month-day{font-size:12px;color:var(--muted);margin-bottom:4px;}
.cal-month-cell.today .cal-month-day{color:var(--gold);font-weight:700;}
.cal-month-cell.other-month{opacity:0.35;}
.cal-month-cell.today{background:rgba(201,168,76,0.04);}
.cal-month-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin:1px;}

/* BOOKING */
.booking-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start;}
.booking-steps{display:flex;flex-direction:column;gap:14px;}
.step-card{background:var(--dark2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:24px;opacity:0.45;pointer-events:none;transition:opacity 0.3s;}
.step-card.active{opacity:1;pointer-events:all;}
.step-header{display:flex;align-items:center;gap:14px;margin-bottom:20px;}
.step-num{font-family:var(--font-display);font-size:32px;font-weight:900;color:var(--gold-dim);line-height:1;}
.step-header h3{font-family:var(--font-display);font-size:17px;color:var(--cream);}
.step-nav{display:flex;gap:12px;margin-top:8px;}
.step-nav .btn-gold{flex:1;}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.service-btn{padding:12px 14px;background:var(--dark3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:left;transition:all 0.15s;color:var(--text);font-family:var(--font-sans);}
.service-btn:hover,.service-btn.selected{border-color:var(--gold);background:rgba(201,168,76,0.1);}
.svc-name{font-size:13px;font-weight:500;display:block;}
.svc-price{font-size:12px;color:var(--gold);margin-top:2px;}
.svc-dur{font-size:10px;color:var(--muted);}
.barber-grid{display:flex;gap:10px;flex-wrap:wrap;}
.barber-btn{padding:10px 16px;background:var(--dark3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;text-align:center;transition:all 0.15s;min-width:90px;color:var(--text);font-family:var(--font-sans);}
.barber-btn:hover,.barber-btn.selected{border-color:var(--gold);background:rgba(201,168,76,0.1);color:var(--gold);}
.bb-avatar{width:36px;height:36px;border-radius:50%;background:var(--dark4);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--gold);margin:0 auto 6px;border:1px solid var(--border);}
.bb-name{font-size:12px;}
.time-slots{display:flex;flex-wrap:wrap;gap:8px;}
.slot-btn{padding:8px 14px;background:var(--dark3);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:12px;color:var(--text2);transition:all 0.15s;font-family:var(--font-sans);}
.slot-btn:hover,.slot-btn.selected{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.1);}
.slot-btn:disabled{opacity:0.3;cursor:not-allowed;text-decoration:line-through;}
.client-search-bar{position:relative;margin-bottom:16px;}
.client-results{position:absolute;top:100%;left:0;right:0;background:var(--dark3);border:1px solid var(--border);border-radius:var(--radius);z-index:100;max-height:200px;overflow-y:auto;display:none;}
.client-result-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border2);transition:background 0.1s;}
.client-result-item:hover{background:rgba(201,168,76,0.08);}
.cri-name{font-size:13px;color:var(--text);}
.cri-meta{font-size:11px;color:var(--muted);}
.summary-card{background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;position:sticky;top:0;}
.summary-header{font-size:10px;letter-spacing:0.25em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;text-align:center;}
.summary-logo{font-family:var(--font-display);font-size:36px;font-weight:900;color:var(--gold);text-align:center;margin-bottom:20px;opacity:0.4;}
.summary-line{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;border-bottom:1px solid var(--border2);}
.summary-line span{color:var(--muted);}
.summary-line strong{color:var(--text);font-weight:500;}
.summary-line.total{border-bottom:none;padding-top:12px;}
.summary-line.total strong{color:var(--gold);font-size:18px;font-family:var(--font-display);}
.summary-divider{height:1px;background:var(--border);margin:8px 0;}
.no-double-book{margin-top:16px;font-size:11px;color:var(--muted2);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;}
.no-double-book .shield{color:var(--gold);font-size:14px;}

/* APPOINTMENTS PAGE */
.page-controls{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;}
.filter-input{padding:8px 12px;background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-sans);font-size:12px;outline:none;}
.filter-input:focus{border-color:var(--gold-dim);}
.appt-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.table-wrap{background:var(--dark2);border:1px solid var(--border2);border-radius:var(--radius-lg);overflow:hidden;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{padding:12px 16px;text-align:left;font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);background:var(--dark3);border-bottom:1px solid var(--border2);font-weight:500;}
.data-table td{padding:11px 16px;border-bottom:1px solid var(--border2);color:var(--text2);vertical-align:middle;}
.data-table tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:rgba(201,168,76,0.03);}
.status-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;}
.status-confirmed{background:rgba(74,127,193,0.15);color:#7aaae0;}
.status-online{background:rgba(74,127,193,0.15);color:#7aaae0;}
.status-frontdesk{background:rgba(122,94,168,0.15);color:#a98ee0;}
.status-checked-in{background:rgba(46,139,90,0.2);color:#5dbf8a;}
.status-in-service{background:rgba(46,139,90,0.3);color:#4da87a;}
.status-completed{background:rgba(74,140,92,0.2);color:#4a8c5c;}
.status-cancelled{background:rgba(139,105,20,0.15);color:#c9941a;}
.status-no-show{background:rgba(192,74,58,0.15);color:#e06050;}
.status-late{background:rgba(192,74,58,0.2);color:#e06050;}
.status-new{background:rgba(201,168,76,0.15);color:var(--gold);}
.status-returning{background:rgba(100,120,180,0.15);color:#8899cc;}
.table-action{background:none;border:1px solid var(--border2);border-radius:4px;color:var(--muted);padding:4px 10px;cursor:pointer;font-size:11px;font-family:var(--font-sans);transition:all 0.15s;margin-right:4px;}
.table-action:hover{border-color:var(--gold-dim);color:var(--gold);}
.src-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;}

/* REPORTS */
.report-tabs{display:flex;margin-bottom:20px;border-bottom:1px solid var(--border);}
.rtab{padding:10px 20px;background:none;border:none;color:var(--muted);cursor:pointer;font-family:var(--font-sans);font-size:12px;letter-spacing:0.08em;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all 0.2s;text-transform:uppercase;}
.rtab.active{color:var(--gold);border-bottom-color:var(--gold);}
.rtab:hover{color:var(--text2);}
.report-panel{display:none;}
.report-panel.active{display:block;}
.barber-revenue-list{display:flex;flex-direction:column;gap:12px;}
.brl-row{display:flex;align-items:center;gap:14px;padding:12px;background:var(--dark3);border-radius:var(--radius);}
.brl-avatar{width:36px;height:36px;border-radius:50%;background:var(--dark4);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--gold);border:1px solid var(--gold-dim);flex-shrink:0;}
.brl-info{flex:1;}
.brl-name{font-size:13px;color:var(--text);}
.brl-loc{font-size:11px;color:var(--muted);}
.brl-bar-wrap{flex:2;height:6px;background:var(--dark4);border-radius:3px;overflow:hidden;}
.brl-bar{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:3px;}
.brl-rev{font-family:var(--font-display);font-size:16px;color:var(--gold);min-width:70px;text-align:right;}
#referral-chart{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.ref-row{display:flex;align-items:center;gap:12px;}
.ref-label{font-size:12px;color:var(--text2);min-width:200px;}
.ref-bar-wrap{flex:1;height:8px;background:var(--dark3);border-radius:4px;overflow:hidden;}
.ref-bar{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold));border-radius:4px;}
.ref-pct{font-size:12px;color:var(--gold);min-width:40px;text-align:right;}
.ref-count{font-size:12px;color:var(--muted);min-width:30px;text-align:right;}
#acquisition-bars{display:flex;flex-direction:column;gap:14px;margin-top:4px;}
.acq-loc-name{font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px;}
.acq-bars-row{display:flex;gap:6px;height:30px;}
.acq-bar{display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:11px;font-weight:600;}
.acq-bar.new-bar{background:rgba(201,168,76,0.3);color:var(--gold);}
.acq-bar.ret-bar{background:rgba(100,120,180,0.3);color:#8899cc;}

/* TIME CLOCK */
.clock-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;}
.clock-card{background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;text-align:center;}
.clock-time{font-family:var(--font-display);font-size:60px;font-weight:900;color:var(--gold);letter-spacing:0.05em;margin-bottom:4px;}
.clock-date{font-size:13px;color:var(--muted);letter-spacing:0.15em;margin-bottom:20px;}
.geofence-status{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;background:var(--dark3);border-radius:30px;font-size:12px;color:var(--muted);margin-bottom:24px;border:1px solid var(--border2);}
.geo-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);}
.geo-dot.checking{animation:pulse 1.5s infinite;background:var(--muted);}
.geo-dot.in-range{background:var(--green);box-shadow:0 0 8px var(--green);}
.geo-dot.out-range{background:var(--red);}
.geo-dot.out-of-range{background:var(--red);box-shadow:0 0 6px var(--red);}
.geo-dot.unknown{background:var(--gold);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}}
.clock-buttons{display:flex;gap:16px;margin-bottom:16px;}
.btn-clock-in,.btn-clock-out{flex:1;padding:14px;border:none;border-radius:var(--radius);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0.2em;cursor:pointer;transition:all 0.2s;}
.btn-clock-in{background:var(--gold);color:var(--black);}
.btn-clock-in:hover:not(:disabled){background:var(--gold-light);}
.btn-clock-in:disabled{opacity:0.3;cursor:not-allowed;}
.btn-clock-out{background:transparent;border:1px solid var(--red);color:var(--red);}
.btn-clock-out:hover:not(:disabled){background:rgba(192,74,58,0.1);}
.btn-clock-out:disabled{opacity:0.3;cursor:not-allowed;}
.clock-status{font-size:13px;color:var(--muted);}
.ts-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border2);font-size:12px;}
.ts-row:last-child{border-bottom:none;}
.ts-label{color:var(--text2);}
.ts-val{color:var(--gold);font-weight:600;}
.tc-log-entry{padding:8px 10px;border-radius:var(--radius);background:var(--dark3);margin-bottom:6px;font-size:12px;}
.tc-log-name{color:var(--text);font-weight:500;margin-bottom:2px;}
.tc-log-time{color:var(--muted);font-size:11px;}
.tc-log-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;}
.tc-log-dot.in{background:var(--green);}
.tc-log-dot.out{background:var(--muted2);}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;padding-bottom:40px;}
.team-card{background:var(--dark2);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:22px;text-align:center;transition:border-color 0.2s;}
.team-card:hover{border-color:var(--gold-dim);}
.tc-avatar{width:56px;height:56px;border-radius:50%;background:var(--dark4);border:2px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--gold);margin:0 auto 12px;}
.tc-name{font-family:var(--font-display);font-size:16px;color:var(--cream);margin-bottom:3px;}
.tc-role{font-size:10px;letter-spacing:0.1em;color:var(--gold);text-transform:uppercase;margin-bottom:3px;}
.tc-loc{font-size:11px;color:var(--muted);margin-bottom:12px;}
.tc-stats{display:flex;border-top:1px solid var(--border2);padding-top:12px;margin-bottom:10px;}
.tc-stat{flex:1;}
.tc-stat-val{font-size:15px;font-weight:700;color:var(--text);font-family:var(--font-display);}
.tc-stat-label{font-size:10px;color:var(--muted);}
.tc-clock{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:4px 10px;border-radius:20px;margin-bottom:8px;}
.tc-clock.in{background:rgba(74,140,92,0.15);color:#6abf84;}
.tc-clock.out{background:rgba(120,120,120,0.1);color:var(--muted);}
.clock-dot{width:6px;height:6px;border-radius:50%;}
.clock-dot.in{background:var(--green);}
.clock-dot.out{background:var(--muted2);}
.tc-actions{display:flex;gap:6px;justify-content:center;}

/* SERVICES + ROLES */
.toggle-wrap{position:relative;display:inline-block;width:36px;height:20px;}
.toggle-wrap input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;cursor:pointer;background:var(--dark4);border-radius:20px;border:1px solid var(--border);transition:0.2s;}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:2px;bottom:2px;background:var(--muted2);border-radius:50%;transition:0.2s;}
.toggle-wrap input:checked + .toggle-slider{background:rgba(201,168,76,0.2);border-color:var(--gold-dim);}
.toggle-wrap input:checked + .toggle-slider:before{transform:translateX(16px);background:var(--gold);}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);}
.modal-card{background:var(--dark2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px;text-align:center;max-width:420px;width:100%;}
.modal-icon{font-size:40px;color:var(--gold);margin-bottom:16px;}
.modal-card h3{font-family:var(--font-display);font-size:22px;color:var(--cream);margin-bottom:12px;}
.modal-card p{font-size:13px;color:var(--text2);margin-bottom:24px;line-height:1.7;}
.modal-wide{max-width:540px;text-align:left;}
.modal-wide h3{font-family:var(--font-display);font-size:18px;color:var(--cream);margin-bottom:20px;}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px;}

/* MULTI-LOCATION CHECKBOXES */
.location-checks{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px;}
.check-item{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text2);}
.check-item input[type="checkbox"]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer;}

/* STATUS BUTTON GRID */
.status-btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px;}
.status-action-btn{padding:10px 8px;border:none;border-radius:var(--radius);font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:0.08em;cursor:pointer;transition:all 0.15s;text-transform:uppercase;}
.status-action-btn:hover{opacity:0.85;transform:scale(0.98);}
.sab-checkin{background:rgba(46,139,90,0.3);color:#5dbf8a;border:1px solid rgba(46,139,90,0.4);}
.sab-inservice{background:rgba(46,139,90,0.45);color:#4da87a;border:1px solid rgba(46,139,90,0.6);}
.sab-complete{background:rgba(74,140,92,0.25);color:#4a8c5c;border:1px solid rgba(74,140,92,0.4);}
.sab-noshow{background:rgba(192,74,58,0.2);color:#e06050;border:1px solid rgba(192,74,58,0.4);}
.sab-late{background:rgba(192,74,58,0.15);color:#e06050;border:1px solid rgba(192,74,58,0.3);}
.sab-cancel{background:rgba(139,105,20,0.2);color:#c9941a;border:1px solid rgba(139,105,20,0.35);}

/* MISC */
.client-count{font-size:12px;color:var(--muted);}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--dark4);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:var(--muted2);}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr;}.dash-grid,.booking-layout,.clock-layout{grid-template-columns:1fr;}}

/* ── CALENDAR LAYOUT WITH SIDEBAR ── */
.cal-layout { display:grid; grid-template-columns:186px 1fr; gap:0; height:calc(100vh - 170px); overflow:hidden; }
.cal-sidebar-panel { background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg) 0 0 var(--radius-lg); padding:14px 12px; overflow-y:auto; flex-shrink:0; }
.cal-main-area { overflow:auto; border:1px solid var(--border2); border-left:none; border-radius:0 var(--radius-lg) var(--radius-lg) 0; background:var(--dark2); position:relative; }
.cal-sidebar-title { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted2); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.cal-sidebar-divider { height:1px; background:var(--border2); margin:14px 0; }
.cal-toggle-all { background:none; border:1px solid var(--border); border-radius:3px; color:var(--muted); font-size:9px; padding:2px 6px; cursor:pointer; margin-left:3px; transition:all 0.15s; font-family:var(--font-sans); }
.cal-toggle-all:hover { border-color:var(--gold-dim); color:var(--gold); }

/* BARBER TOGGLE CHIPS */
.barber-toggle { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--radius); cursor:pointer; transition:background 0.15s; margin-bottom:3px; user-select:none; }
.barber-toggle:hover { background:var(--dark3); }
.barber-toggle.off { opacity:0.4; }
.bt-swatch { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.bt-name { font-size:11px; color:var(--text2); flex:1; }
.bt-hours { font-size:10px; color:var(--muted); }
.bt-eye { font-size:12px; color:var(--muted2); flex-shrink:0; }
.barber-toggle.off .bt-eye::before { content:'○'; }
.barber-toggle:not(.off) .bt-eye::before { content:'●'; color:var(--gold); }

/* DAY VIEW MULTI-COLUMN */
.cal-day-outer { min-width:600px; }
.cal-day-header-row { display:grid; background:var(--dark3); border-bottom:1px solid var(--border2); position:sticky; top:0; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
.cal-day-time-gutter { width:56px; flex-shrink:0; }
.cal-day-barber-header { padding:10px 8px; text-align:center; border-right:1px solid var(--border2); }
.cal-day-barber-header:last-child { border-right:none; }
.cal-dbh-name { font-size:12px; font-weight:600; color:var(--cream); }
.cal-dbh-role { font-size:10px; color:var(--muted); margin-top:1px; }
.cal-dbh-hours { font-size:10px; color:var(--gold); margin-top:2px; }
.cal-dbh-off { opacity:0.4; }
.cal-day-body { display:flex; }
.cal-day-time-col { width:56px; flex-shrink:0; border-right:1px solid var(--border2); }
.cal-hour-lbl { height:90px; display:flex; align-items:flex-start; justify-content:flex-end; padding:6px 8px 0 0; font-size:10px; color:var(--muted2); border-bottom:1px solid var(--border2); }
.cal-hour-lbl .half-mark { position:absolute; top:45px; right:4px; width:6px; height:1px; background:var(--border2); }
.cal-day-barber-col { flex:1; position:relative; border-right:1px solid var(--border2); min-width:140px; }
.cal-day-barber-col:last-child { border-right:none; }
.cal-hour-cell { height:90px; border-bottom:1px solid var(--border2); position:relative; }
.cal-hour-cell::after { content:''; position:absolute; left:0; right:0; top:45px; border-top:1px dashed rgba(201,168,76,0.08); pointer-events:none; }
.cal-hour-cell.off-hours { background:rgba(0,0,0,0.2); }
.cal-day-off-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted2); letter-spacing:0.1em; text-transform:uppercase; background:repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0,0,0,0.15) 8px, rgba(0,0,0,0.15) 9px); }
.cal-evt { position:absolute; left:3px; right:3px; border-radius:4px; padding:3px 6px; font-size:11px; cursor:pointer; overflow:hidden; z-index:2; transition:filter 0.15s; }
.cal-evt:hover { filter:brightness(1.15); z-index:5; }
.cal-evt-name { font-weight:600; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-evt-svc { color:rgba(255,255,255,0.75); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* SCHEDULE GRID IN MODAL */
.schedule-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.sched-day { background:var(--dark3); border:1px solid var(--border2); border-radius:var(--radius); padding:10px 8px; }
.sched-day-name { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; text-align:center; }
.sched-day.active-day { border-color:var(--gold-dim); }
.sched-working { display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.sched-working label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:11px; color:var(--text2); }
.sched-working input[type="checkbox"] { width:14px; height:14px; accent-color:var(--gold); }
.sched-times { display:flex; flex-direction:column; gap:4px; }
.sched-times select { width:100%; padding:5px 6px; font-size:11px; background:var(--dark4); border:1px solid var(--border2); border-radius:4px; color:var(--text2); }
.sched-times select:disabled { opacity:0.3; }
.sched-off-label { text-align:center; font-size:10px; color:var(--muted2); padding:8px 0; }

/* Schedule chip on team card */
.tc-schedule { margin-top:6px; display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.tc-sched-chip { font-size:9px; padding:2px 6px; border-radius:10px; background:rgba(201,168,76,0.1); color:var(--gold); border:1px solid rgba(201,168,76,0.2); }
.tc-sched-chip.off-chip { background:rgba(90,80,64,0.3); color:var(--muted2); border-color:transparent; }

/* ── NO-SHOW PERIOD FILTER BUTTONS ── */
.rtab-filter { padding:7px 14px; background:var(--dark2); border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); font-family:var(--font-sans); font-size:11px; letter-spacing:0.08em; cursor:pointer; transition:all 0.15s; text-transform:uppercase; }
.rtab-filter.active { background:var(--gold); color:var(--black); border-color:var(--gold); font-weight:600; }
.rtab-filter:hover:not(.active) { border-color:var(--gold-dim); color:var(--text2); }

/* ── CLIENT MODAL STATS ── */
.cm-stat-badge { background:var(--dark3); border:1px solid var(--border2); border-radius:var(--radius); padding:8px 14px; text-align:center; }
.cm-stat-val { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--cream); }
.cm-stat-lbl { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }
.cm-noshow-badge .cm-stat-val { color:var(--red); }

/* ── CLICKABLE TABLE ROWS ── */
.data-table tr.clickable-row { cursor:pointer; }
.data-table tr.clickable-row:hover td { background:rgba(201,168,76,0.06); }

/* ── CAL CLICK-TO-BOOK ── */
.cal-hour-cell:hover { background:rgba(201,168,76,0.05); cursor:pointer; }
.cal-hour-cell.off-hours:hover { background:rgba(0,0,0,0.25); cursor:not-allowed; }
.cal-new-appt-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--gold); opacity:0; transition:opacity 0.15s; pointer-events:none; letter-spacing:0.1em; }
.cal-hour-cell:hover .cal-new-appt-hint { opacity:1; }

/* ── STATUS BUTTON SELECTED ── */
.status-action-btn.selected { outline:2px solid white; outline-offset:2px; }

/* ── SLOT STATES ── */
.slot-btn.past-close { opacity:0.25; cursor:not-allowed; }

/* ── SETTINGS PAGE ── */
.settings-layout { display:flex; flex-direction:column; gap:20px; max-width:900px; }
.settings-card { background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:24px; }
.settings-card-header { margin-bottom:20px; }
.settings-card-title { font-family:var(--font-display); font-size:16px; color:var(--cream); margin-bottom:6px; }
.settings-card-sub { font-size:12px; color:var(--muted); line-height:1.6; }
.settings-note { font-size:12px; color:var(--muted); margin-top:14px; }

/* INTERVAL BUTTONS */
.interval-grid { display:flex; gap:10px; flex-wrap:wrap; }
.interval-btn { padding:10px 22px; background:var(--dark3); border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); font-family:var(--font-sans); font-size:13px; cursor:pointer; transition:all 0.2s; font-weight:500; }
.interval-btn:hover { border-color:var(--gold-dim); color:var(--text2); }
.interval-btn.active { background:var(--gold); color:var(--black); border-color:var(--gold); font-weight:600; }

/* LOCATION THEME CARDS */
.location-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.loc-theme-card { background:var(--dark3); border:1px solid var(--border2); border-radius:var(--radius-lg); overflow:hidden; }
.ltc-preview { height:6px; border-bottom:1px solid; transition:background 0.3s, border-color 0.3s; }
.ltc-body { padding:16px; }
.ltc-name-row { margin-bottom:12px; }
.ltc-name-input { width:100%; background:var(--dark4); border:1px solid var(--border2); border-radius:var(--radius); color:var(--text); font-family:var(--font-sans); font-size:13px; padding:8px 12px; outline:none; }
.ltc-name-input:focus { border-color:var(--gold-dim); }
.ltc-color-label { font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.ltc-color-picker-wrap { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ltc-color-picker-wrap input[type="color"] { width:40px; height:32px; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; background:none; padding:2px; }
.ltc-hex { font-size:12px; color:var(--text2); font-family:monospace; }
.ltc-presets { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.ltc-preset { width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform 0.15s, border-color 0.15s; }
.ltc-preset:hover { transform:scale(1.2); border-color:rgba(255,255,255,0.4); }

/* ── BOOKING — SINGLE FORM (replaces multi-step) ── */
.booking-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.booking-form-col { display:flex; flex-direction:column; gap:16px; }
.book-section { background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg); padding:22px 24px; }
.book-section-title { display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-size:16px; color:var(--cream); margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border2); }
.book-num { width:28px; height:28px; border-radius:50%; background:rgba(201,168,76,0.15); border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:12px; font-weight:600; color:var(--gold); flex-shrink:0; }

/* Hide the old step-card styles from interfering */
.step-card { display:none !important; }

/* ═══════════════════════════════════════
   MEMBERSHIP STYLES
═══════════════════════════════════════ */

/* SUB-NAV TABS */
.mem-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--border); }
.mem-tab { padding:10px 22px; background:none; border:none; color:var(--muted); cursor:pointer; font-family:var(--font-sans); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all 0.2s; }
.mem-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.mem-tab:hover:not(.active) { color:var(--text2); }
.mem-panel { display:none; }
.mem-panel.active { display:block; }

/* PLAN CARDS GRID */
.mem-plans-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:18px; }
.mem-plan-card { background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg); overflow:hidden; transition:border-color 0.2s; }
.mem-plan-card:hover { border-color:var(--gold-dim); }
.mem-plan-card.inactive { opacity:0.5; }

.mpc-header { padding:22px 22px 18px; position:relative; }
.mpc-accent-bar { position:absolute; top:0; left:0; right:0; height:3px; }
.mpc-type-badge { font-size:9px; letter-spacing:0.2em; text-transform:uppercase; padding:3px 10px; border-radius:20px; display:inline-block; margin-bottom:10px; }
.mpc-name { font-family:var(--font-display); font-size:20px; color:var(--cream); margin-bottom:6px; }
.mpc-desc { font-size:12px; color:var(--muted); line-height:1.6; }

.mpc-price-row { padding:14px 22px; border-top:1px solid var(--border2); border-bottom:1px solid var(--border2); display:flex; align-items:baseline; gap:6px; }
.mpc-price { font-family:var(--font-display); font-size:30px; font-weight:700; }
.mpc-price-period { font-size:12px; color:var(--muted); }

.mpc-features { padding:16px 22px; }
.mpc-feature { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--text2); padding:5px 0; }
.mpc-feature-icon { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }

.mpc-footer { padding:14px 22px; border-top:1px solid var(--border2); display:flex; align-items:center; justify-content:space-between; }
.mpc-member-count { font-size:12px; color:var(--muted); }
.mpc-locs { display:flex; gap:4px; }
.mpc-loc-dot { width:7px; height:7px; border-radius:50%; background:var(--gold-dim); }
.mpc-loc-dot.active { background:var(--gold); }

.mpc-actions { padding:12px 22px 16px; display:flex; gap:8px; }
.mpc-actions .table-action { flex:1; text-align:center; }

/* PLAN SERVICES GRID in modal */
.plan-services-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.plan-svc-check { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--dark3); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-size:12px; color:var(--text2); transition:all 0.15s; }
.plan-svc-check:hover { border-color:var(--gold-dim); }
.plan-svc-check input { accent-color:var(--gold); }

/* COLOR SWATCHES */
.plan-color-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform 0.15s, border-color 0.15s; flex-shrink:0; }
.plan-color-swatch:hover { transform:scale(1.15); }
.plan-color-swatch.selected { border-color:white; transform:scale(1.1); }

/* MEMBER STATUS PILLS */
.mem-status-active    { background:rgba(74,140,92,0.2);   color:#6abf84; }
.mem-status-paused    { background:rgba(139,105,20,0.2);  color:#c9941a; }
.mem-status-cancelled { background:rgba(192,74,58,0.2);   color:#e06050; }
.mem-status-expired   { background:rgba(120,120,120,0.15);color:var(--muted); }

/* USES PROGRESS BAR */
.uses-bar-wrap { margin-top:12px; }
.uses-bar-label { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:6px; }
.uses-bar-track { height:6px; background:var(--dark4); border-radius:3px; overflow:hidden; }
.uses-bar-fill  { height:100%; border-radius:3px; transition:width 0.4s ease; }

/* MEMBER MODAL STAT MINI */
.mm-stat { background:var(--dark3); border-radius:var(--radius); padding:10px 12px; text-align:center; }
.mm-stat-val { font-family:var(--font-display); font-size:18px; color:var(--cream); }
.mm-stat-lbl { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }

/* REDEMPTION LOG */
.redeem-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border2); font-size:12px; }
.redeem-row:last-child { border-bottom:none; }
.redeem-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; }
.redeem-info { flex:1; color:var(--text2); }
.redeem-date { color:var(--muted); font-size:11px; }

/* ── PLAN SECTION HEADERS ── */
.plan-section-header { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; padding:16px 20px; background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg); }
.plan-section-icon { font-size:22px; color:var(--gold); flex-shrink:0; margin-top:2px; }
.plan-section-title { font-family:var(--font-display); font-size:16px; color:var(--cream); margin-bottom:4px; }
.plan-section-sub { font-size:12px; color:var(--muted); line-height:1.5; }

/* ── PLAN CARD UPDATES ── */
.mpc-billing-note { font-size:11px; color:var(--muted); margin-top:4px; }
.mpc-member-pill { font-size:11px; background:var(--dark3); border:1px solid var(--border2); border-radius:20px; padding:4px 12px; color:var(--muted); white-space:nowrap; height:fit-content; }
.mpc-price-row { padding:14px 22px; border-top:1px solid var(--border2); border-bottom:1px solid var(--border2); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.mpc-price { font-family:var(--font-display); font-size:28px; font-weight:700; }
.mpc-price .mpc-price-period { font-size:13px; color:var(--muted); font-family:var(--font-sans); font-weight:400; margin-left:2px; }

/* VALUE CALLOUT */
.mpc-value-callout { margin:0 22px 14px; padding:8px 14px; border:1px solid; border-radius:var(--radius); font-size:12px; color:var(--muted); }

/* INCLUDED SERVICES IN CARD */
.mpc-services-section { padding:14px 22px 6px; border-top:1px solid var(--border2); }
.mpc-services-title { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px; }
.mpc-svc-item { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--border2); font-size:12px; }
.mpc-svc-item:last-child { border-bottom:none; }
.mpc-svc-check { flex-shrink:0; font-size:11px; font-weight:700; }
.mpc-svc-name { flex:1; color:var(--text2); }
.mpc-svc-price { color:var(--muted); font-size:11px; }

/* PLAN SERVICES IN MODAL — updated with price */
.plan-svc-check { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--dark3); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-size:12px; color:var(--text2); transition:all 0.15s; width:100%; }
.plan-svc-check:hover { border-color:var(--gold-dim); }
.plan-svc-check input { accent-color:var(--gold); flex-shrink:0; }
.plan-services-grid { display:flex; flex-direction:column; gap:6px; }

/* ── MEMBERSHIP CHECKOUT BANNER ── */
.mem-checkout-banner {
  border:1px solid;
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:16px;
}
.mcb-plan-name { font-size:14px; font-weight:600; margin-bottom:3px; }
.mcb-meta { font-size:11px; color:var(--muted); }
.mcb-apply-btn {
  padding:8px 16px;
  background:var(--dark4);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text2);
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
  white-space:nowrap;
  flex-shrink:0;
}
.mcb-apply-btn:hover:not(:disabled) { border-color:var(--gold-dim); color:var(--gold); }
.mcb-apply-btn:disabled { opacity:0.6; cursor:not-allowed; }

/* ── PAYMENT MODAL ── */
.pay-line { display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px solid var(--border2); color:var(--text2); }
.pay-line:last-child { border-bottom:none; }
.pay-total-line { font-family:var(--font-display); font-size:16px; color:var(--cream); font-weight:600; padding-top:10px; margin-top:4px; border-top:2px solid var(--border); border-bottom:none; }
.pay-method-btn { padding:9px 16px; background:var(--dark3); border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); font-family:var(--font-sans); font-size:12px; cursor:pointer; transition:all 0.15s; }
.pay-method-btn:hover { border-color:var(--gold-dim); color:var(--text2); }
.pay-method-btn.active { background:rgba(201,168,76,0.12); border-color:var(--gold); color:var(--gold); font-weight:600; }
.pay-addon-check { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--dark3); border:1px solid var(--border2); border-radius:var(--radius); cursor:pointer; font-size:12px; color:var(--text2); transition:all 0.15s; }
.pay-addon-check:hover { border-color:var(--gold-dim); }
.pay-addon-check input { accent-color:var(--gold); }

/* ── SLOT-BASED CALENDAR GRID ── */
.cal-slot-lbl {
  display:flex; align-items:flex-start; justify-content:flex-end;
  padding-right:8px; font-size:10px; color:var(--muted2);
  border-bottom:1px solid transparent; box-sizing:border-box;
}
.cal-slot-lbl-hour {
  color:var(--text2); font-size:11px; font-weight:600;
  border-bottom:1px solid var(--border2);
}
.cal-slot-cell {
  border-bottom:1px dashed rgba(201,168,76,0.06);
  box-sizing:border-box; position:relative; cursor:pointer;
}
.cal-slot-cell.off-hours {
  background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(0,0,0,0.12) 6px,rgba(0,0,0,0.12) 7px);
  cursor:default; pointer-events:none;
}
.cal-slot-cell.cal-slot-hour-boundary {
  border-top:1px solid var(--border2);
}
.cal-slot-cell:hover:not(.off-hours) { background:rgba(201,168,76,0.04); }
.cal-slot-cell:hover .cal-new-appt-hint { opacity:1; }

/* ── DRAG & DROP ── */
.draggable-appt { cursor:grab; user-select:none; }
.draggable-appt:active { cursor:grabbing; }
.cal-drag-handle {
  position:absolute; bottom:3px; right:5px;
  font-size:11px; color:rgba(255,255,255,0.25);
  line-height:1; pointer-events:none;
  transition:color 0.15s;
}
.draggable-appt:hover .cal-drag-handle { color:rgba(255,255,255,0.5); }

/* Drop target states */
.cal-slot-cell.drop-hover {
  background:rgba(201,168,76,0.15) !important;
  outline:2px dashed var(--gold);
  outline-offset:-2px;
  z-index:3;
}
.cal-slot-cell.drop-conflict {
  background:rgba(192,74,58,0.12) !important;
  outline:2px dashed var(--red);
  outline-offset:-2px;
  z-index:3;
}
.cal-slot-cell.drop-hover .cal-new-appt-hint,
.cal-slot-cell.drop-conflict .cal-new-appt-hint { opacity:0; }

/* ── OCCUPIED SLOTS (covered by existing appointment) ── */
.cal-slot-cell.cal-slot-occupied {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(201,168,76,0.04) 4px,
    rgba(201,168,76,0.04) 5px
  );
  cursor: not-allowed;
  /* pointer-events must stay active so drag/drop events fire — click is blocked by no onclick */
}
/* Off-hours cells are never valid drag targets */
.cal-slot-cell.off-hours { pointer-events: none; }

/* ═══════════════════════════════════════
   OWNER DASHBOARD
═══════════════════════════════════════ */

/* Mode toggle bar */
.dash-mode-bar { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.dash-mode-btn { padding:8px 18px; background:var(--dark3); border:1px solid var(--border); border-radius:var(--radius); color:var(--muted); font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; }
.dash-mode-btn.active { background:var(--gold); color:var(--black); border-color:var(--gold); }
.dash-mode-btn:hover:not(.active) { border-color:var(--gold-dim); color:var(--text2); }
.dash-mode-loc { align-items:center; gap:8px; }

/* Location cards row */
.owner-loc-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.owner-loc-card { background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:border-color 0.2s, transform 0.15s; }
.owner-loc-card:hover { border-color:rgba(201,168,76,0.3); transform:translateY(-2px); }
.olc-top-bar { height:3px; }
.olc-header { padding:16px 18px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.olc-name { font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:3px; }
.olc-phone { font-size:11px; color:var(--muted); }
.olc-badge-col { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.olc-badge { font-size:10px; font-weight:600; letter-spacing:0.08em; padding:3px 10px; border-radius:20px; white-space:nowrap; }

.olc-stat-row { display:grid; grid-template-columns:repeat(4,1fr); padding:0 18px 12px; gap:4px; border-bottom:1px solid var(--border2); }
.olc-stat { text-align:center; }
.olc-stat-val { font-family:var(--font-display); font-size:20px; color:var(--cream); line-height:1.2; }
.olc-stat-lbl { font-size:9px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase; margin-top:2px; }

.olc-appt-list { padding:10px 18px; min-height:80px; }
.olc-appt-row { display:flex; align-items:flex-start; gap:8px; padding:4px 0; border-bottom:1px solid var(--border2); font-size:11px; }
.olc-appt-row:last-child { border-bottom:none; }
.olc-appt-time { color:var(--gold); font-weight:600; min-width:52px; flex-shrink:0; }
.olc-appt-name { color:var(--text); flex:1; }
.olc-appt-barber { color:var(--muted); font-size:10px; flex-shrink:0; }

.olc-footer { padding:8px 18px; font-size:11px; color:var(--muted); text-align:right; border-top:1px solid var(--border2); letter-spacing:0.05em; }
.owner-loc-card:hover .olc-footer { color:var(--gold); }

/* Clock-in status list */
.clock-status-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border2); }
.clock-status-row:last-child { border-bottom:none; }

/* ═══════════════════════════════════════════════════
   OWNER MULTI-LOCATION DASHBOARD
═══════════════════════════════════════════════════ */

/* MODE TOGGLE BAR */
.dash-mode-bar { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.dash-mode-btn { padding:8px 18px; background:var(--dark3); border:1px solid var(--border2); border-radius:var(--radius); color:var(--muted); font-family:var(--font-sans); font-size:12px; font-weight:500; letter-spacing:0.05em; cursor:pointer; transition:all 0.2s; }
.dash-mode-btn:hover { border-color:var(--gold-dim); color:var(--text2); }
.dash-mode-btn.active { background:var(--gold); color:var(--black); border-color:var(--gold); font-weight:700; }
.dash-mode-loc { display:flex; align-items:center; margin-left:8px; }

/* LOCATION CARDS ROW */
.owner-loc-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.owner-loc-card { background:var(--dark2); border:1px solid var(--border2); border-radius:var(--radius-lg); overflow:hidden; transition:border-color 0.2s; }
.owner-loc-card:hover { border-color:rgba(var(--loc-color), 0.3); }
.olc-bar { height:3px; }
.olc-body { padding:18px 20px; }

.olc-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.olc-name { font-family:var(--font-display); font-size:18px; color:var(--cream); }
.olc-sub  { font-size:11px; color:var(--muted); margin-top:2px; }
.olc-view-btn { font-size:11px; padding:5px 12px; background:none; border:1px solid; border-radius:var(--radius); cursor:pointer; font-family:var(--font-sans); transition:all 0.15s; letter-spacing:0.05em; }
.olc-view-btn:hover { opacity:0.75; }

.olc-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; padding:12px 0; border-top:1px solid var(--border2); border-bottom:1px solid var(--border2); }
.olc-stat { text-align:center; }
.olc-stat-val { font-family:var(--font-display); font-size:20px; color:var(--cream); line-height:1; }
.olc-stat-lbl { font-size:9px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-top:3px; }

.olc-section-label { font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted2); margin-bottom:7px; }

.olc-barber-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.olc-barber-chip  { display:flex; align-items:center; gap:5px; padding:3px 8px; background:var(--dark3); border-radius:20px; }

.olc-appt-list { display:flex; flex-direction:column; gap:4px; }
.olc-appt { display:grid; grid-template-columns:52px 1fr 1fr 60px; gap:6px; align-items:center; font-size:11px; padding:4px 0; border-bottom:1px solid var(--border2); }
.olc-appt:last-child { border-bottom:none; }
.olc-appt-time   { color:var(--gold); font-weight:600; }
.olc-appt-client { color:var(--text); font-weight:500; }
.olc-appt-svc    { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.olc-appt-barber { font-size:10px; font-weight:600; text-align:right; }

/* CLOCK-IN STATUS */
.oci-loc-group  { margin-bottom:16px; }
.oci-loc-label  { font-size:10px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; margin-bottom:8px; }
.oci-row        { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border2); }
.oci-row:last-child { border-bottom:none; }
.oci-dot        { width:10px; height:10px; border-radius:50%; flex-shrink:0; transition:box-shadow 0.3s; }
.oci-info       { flex:1; display:flex; flex-direction:column; gap:2px; }
.oci-name       { font-size:13px; font-weight:500; }
.oci-shift      { font-size:10px; color:var(--muted); }
.oci-stats      { display:flex; gap:10px; }
.oci-status     { font-size:10px; font-weight:700; letter-spacing:0.1em; padding:3px 10px; border-radius:20px; }
.oci-status.clocked-in  { background:rgba(74,140,92,0.2); color:#6abf84; }
.oci-status.not-in      { background:rgba(90,90,90,0.15); color:var(--muted); }

/* RESPONSIVE */
@media(max-width:900px) { .owner-loc-row { grid-template-columns:1fr; } }

/* ── SCHEDULE LOCATION TABS ── */
.sched-loc-tab {
  padding:8px 20px; background:none; border:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  color:var(--muted); font-family:var(--font-sans); font-size:12px;
  font-weight:600; letter-spacing:0.08em; cursor:pointer;
  transition:all 0.15s;
}
.sched-loc-tab:hover { color:var(--text2); }
.sched-loc-tab.active { color:var(--gold); border-bottom-color:var(--gold); }

/* ── CATEGORY MANAGEMENT PANEL ── */
.cat-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--border2); }
.cat-row:last-child { border-bottom:none; }
.cat-icon-sel { font-size:16px; flex-shrink:0; width:24px; text-align:center; }
.cat-name-input:focus { border-color:var(--gold-dim) !important; }

/* ── TEAM CARD SCHEDULE SUMMARY ── */
.tc-sched-summary { font-size:10px; color:var(--muted); text-align:center; margin-top:2px; margin-bottom:8px; }

/* ── DATE RANGE BAR ── */
.date-range-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--dark2); border:1px solid var(--border2);
  border-radius:var(--radius-lg); padding:10px 16px; margin-bottom:16px;
}
.drb-presets { display:flex; gap:4px; flex-wrap:wrap; }
.drb-btn {
  padding:6px 14px; background:var(--dark3); border:1px solid var(--border2);
  border-radius:var(--radius); color:var(--muted); font-family:var(--font-sans);
  font-size:11px; font-weight:500; letter-spacing:0.08em; cursor:pointer;
  transition:all 0.15s;
}
.drb-btn:hover { border-color:var(--gold-dim); color:var(--text2); }
.drb-btn.active { background:var(--gold); color:var(--black); border-color:var(--gold); font-weight:700; }
.drb-custom {
  display:flex; align-items:center; gap:8px;
}
.drb-custom input[type="date"] {
  background:var(--dark3); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:var(--font-sans); font-size:12px; padding:5px 10px; outline:none;
}
.drb-custom input[type="date"]:focus { border-color:var(--gold-dim); }
.drb-label {
  font-size:12px; color:var(--gold); font-weight:600; margin-left:auto;
  white-space:nowrap; letter-spacing:0.05em;
}
.drb-loc-wrap { margin-left:8px; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — Staff Portal
   Breakpoints: 768px (tablet/phone)
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Fix scroll model for mobile */
  html, body { height: 100%; overflow: hidden; }
  
  #app-screen {
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  /* Sidebar becomes fixed top nav — only takes up top bar height by default */
  #sidebar {
    width: 100%;
    height: auto;
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid var(--border2);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    max-height: 56px; /* just the top bar */
  }
  /* When menu is open, expand to show nav */
  #sidebar.mobile-open {
    max-height: 80vh;
    overflow-y: auto;
  }
  /* Mobile logo bar always visible at top */
  .sidebar-logo-mobile {
    flex-shrink: 0;
    min-height: 56px;
    position: sticky;
    top: 0;
    background: var(--dark);
    z-index: 101;
  }

  /* Hide desktop-only sidebar elements */
  .sidebar-logo { display: none !important; }
  .sidebar-location { display: none !important; }
  .sidebar-user { display: none !important; }
  .nav-label { padding: 8px 20px 2px; font-size: 9px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }

  /* Nav hidden by default on mobile */
  #sidebar nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 4px 0 12px;
    border-top: 1px solid var(--border2);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Show nav when menu is open */
  #sidebar.mobile-open nav { display: flex; }

  .nav-item {
    padding: 13px 20px;
    border-left: none;
    border-bottom: none;
    font-size: 13px;
    white-space: normal;
    width: 100%;
  }
  .nav-item.active { background: rgba(201,168,76,0.1); color: var(--gold); }
  .nav-icon { display: inline; margin-right: 10px; }

  /* Main content takes remaining screen height and scrolls */
  #main-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    height: 0; /* forces flex to calculate remaining height */
  }

  /* Pages scroll naturally */
  .page { 
    padding: 16px;
    min-height: 100%;
    overflow: visible;
  }

  /* Topbar */
  .topbar { padding: 12px 16px; }
  .page-title { font-size: 18px; }
  .tb-right { gap: 8px; }

  /* Dashboard */
  .dash-grid { grid-template-columns: 1fr; gap: 12px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }
  .owner-loc-row { grid-template-columns: 1fr !important; }

  /* Calendar — full width, no sidebar */
  #page-calendar { padding: 0 !important; }
  .cal-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .cal-view-btns { order: 3; }
  .cal-layout {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 120px) !important;
  }
  .cal-sidebar-panel { display: none !important; }
  .cal-main-area {
    border-left: 1px solid var(--border2) !important;
    border-radius: var(--radius-lg) !important;
    overflow: auto;
    width: 100%;
  }
  .cal-day-outer { min-width: 0; width: 100%; }
  .cal-day-barber-col { min-width: 90px; flex: 1; }

  /* Tables scroll horizontally */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }

  /* Booking */
  .booking-layout { grid-template-columns: 1fr !important; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .barber-grid { grid-template-columns: 1fr 1fr; }

  /* Team */
  .team-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }

  /* Forms */
  .form-row { flex-direction: column; gap: 12px; }

  /* Modals */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-card {
    max-width: 100% !important;
    width: 100%;
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh;
    overflow-y: auto;
    margin: 0;
  }

  /* Reports */
  .report-tabs { flex-wrap: wrap; gap: 4px; }
  .rtab { font-size: 11px; padding: 7px 10px; }

  /* Page controls */
  .page-controls { flex-wrap: wrap; gap: 8px; }

  /* Notifications */
  .notif-editor-grid { grid-template-columns: 1fr !important; }

  /* Waitlist popup */
  .wl-popup-card { padding: 24px 20px; margin: 16px; max-height: 90vh; overflow-y: auto; }
  .wl-popup-actions { flex-direction: column; }

  /* Settings */
  .settings-card > div[style*="grid-template-columns:1fr 1fr"] { 
    grid-template-columns: 1fr !important; 
  }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr !important; }
  .service-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .page { padding: 12px; }
  .page-title { font-size: 16px; }
  .topbar { padding: 10px 12px; }
}

/* Mobile top bar */
.sidebar-logo-mobile {
  display: none;
}
@media (max-width: 768px) {
  .sidebar-logo-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    min-height: 56px;
    flex-shrink: 0;
  }
  .sidebar-logo-mobile .logo-mark {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--cream);
    font-weight: 700;
  }
  .sidebar-logo-mobile .logo-loc {
    font-size: 11px;
    color: var(--gold);
    margin-top: 1px;
  }
}