:root{--bg:#0F0F10;--text:#fff;--muted:#a7a7a7;--line:rgba(255,255,255,.1);--accent:#1A1A1A;--danger:#ff6b6b;--success:#60d394;--warning:#ffd166;--radius:22px}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at top left,rgba(26,26,26,.17),transparent 35%),linear-gradient(180deg,#080809,var(--bg));color:var(--text);font-family:"Segoe UI",Tahoma,Arial,sans-serif}button,input,select,textarea{font:inherit}select option{color:#111}.logo{width:160px;max-height:72px;object-fit:contain}.brand{margin-bottom:20px}.nav{display:grid;gap:8px}.nav button{background:transparent;color:var(--muted);border:1px solid transparent;padding:12px;border-radius:15px;text-align:left;cursor:pointer}.nav button:hover,.nav button.active{background:rgba(255,255,255,.07);color:#fff;border-color:var(--line)}body[dir=rtl] .nav button{text-align:right}.main{padding:24px;max-width:1700px}.h1{font-size:clamp(28px,4vw,46px);margin:0}.muted{color:var(--muted)}.card{background:linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 20px 55px rgba(0,0,0,.32)}.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}label{display:grid;gap:7px;color:var(--muted);font-size:11.5px}input,select,textarea{width:100%;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;border-radius:14px;padding:12px;outline:none}.btn{border:0;border-radius:15px;padding:12px 15px;background:#fff;color:#111;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px}.btn.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line)}.btn.gold{background:var(--accent);color:#111}.btn.small{padding:8px 11px;font-size:11px}.badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;border:1px solid var(--line);background:rgba(255,255,255,.06)}.badge.booked{color:var(--warning);border-color:rgba(255,209,102,.35);background:rgba(255,209,102,.12)}.badge.completed{color:var(--success);border-color:rgba(96,211,148,.35);background:rgba(96,211,148,.12)}.badge.cancelled{color:var(--danger);border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.12)}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}body[dir=rtl] .table th,body[dir=rtl] .table td{text-align:right}.calendar-wrap{border:1px solid var(--line);border-radius:22px;overflow:auto;background:rgba(0,0,0,.22);max-height:74vh;position:relative;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-x pan-y;scroll-behavior:smooth}.cal-grid{display:grid;min-width:1050px;position:relative}.cal-head,.cal-row{display:grid;grid-template-columns:90px repeat(var(--cols),minmax(220px,1fr))}.cal-head{position:sticky;top:0;z-index:4;background:#101011}.cal-head>div,.time-cell,.cal-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px}.staff-head{text-align:center;cursor:pointer}.avatar{width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(26,26,26,.16);border:1px solid var(--accent);font-weight:900}.time-cell{min-height:66px;color:var(--muted);font-size:11px}.cal-cell{min-height:66px;cursor:pointer}.appt,.block{border-radius:12px;padding:8px;margin-bottom:6px;font-size:11px;line-height:1.25;cursor:pointer}.appt{background:rgba(26,26,26,.17);border:1px solid rgba(26,26,26,.45)}.appt.completed{background:rgba(96,211,148,.14);border-color:rgba(96,211,148,.38)}.now-line{position:absolute;left:90px;right:0;height:2px;background:#ff2f2f;z-index:5;box-shadow:0 0 8px #ff2f2f}.now-label{position:absolute;left:8px;background:#ff2f2f;color:#fff;border-radius:8px;padding:2px 6px;font-size:10px;transform:translateY(-8px)}.modal,.drawer{position:fixed;inset:0;display:none;background:rgba(0,0,0,.62);z-index:50;padding:20px}.modal.open,.drawer.open{display:flex;align-items:center;justify-content:center}.modal-card{width:min(980px,96vw);max-height:90vh;overflow:auto;background:#151616;border:1px solid var(--line);border-radius:24px;padding:22px}.drawer{justify-content:flex-start;padding:0}.drawer-panel{width:min(430px,95vw);height:100%;background:#121313;border-right:1px solid var(--line);padding:20px;overflow:auto}.context-menu{position:fixed;z-index:80;width:330px;background:#151616;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:14px;display:none}.context-menu.open{display:block}.tile,.service-option,.perm-item{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:16px;padding:12px;cursor:pointer}.tile:hover,.service-option:hover{border-color:var(--accent)}.date-cell:hover,.date-cell.selected{background:var(--accent);color:#111}.login-page{min-height:100vh;display:grid;place-items:center;padding:24px}.login-box{width:min(980px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.hero-title{font-size:clamp(42px,7vw,82px);line-height:.88;margin:12px 0;font-weight:950}.profile-panel{display:grid;grid-template-columns:340px 1fr;gap:16px}.notice{padding:12px 14px;border:1px solid rgba(26,26,26,.35);background:rgba(26,26,26,.08);border-radius:14px}@media(max-width:980px){.app-shell,.grid-2,.grid-3,.grid-4,.login-box,.profile-panel{grid-template-columns:minmax(0,1fr)}.nav{grid-template-columns:repeat(2,1fr);display:grid}.main{padding:16px}.table{display:block;overflow:auto}}@media print{.sidebar,.topbar,.nav,.btn,.no-print{display:none!important}.card{box-shadow:none;border:1px solid #ddd;color:#000;background:#fff}.table th,.table td{color:#000;border-color:#ddd}}select option{background:#151616;color:#fff}.staff-head strong{display:block}.modal-card select{min-height:44px}.year-day:hover,.year-day.selected{background:var(--accent);color:#111;font-weight:950}@media(max-width:980px){}.team-list-card .grid{max-height:70vh;overflow:auto}.team-member-card:hover,.team-member-card.selected{border-color:var(--accent);background:rgba(26,26,26,.1)}.invoice-card{width:min(1050px,96vw)}.invoice-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.invoice-total-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;font-size:18px}@media(max-width:980px){.team-profile-panel,.invoice-grid{grid-template-columns:minmax(0,1fr)}.invoice-head{display:block}.team-list-card .grid{max-height:none}}@media print{body *{visibility:hidden}.invoice-card,.invoice-card *,#app,#modal,.staff-statement-modal,.staff-statement-modal *{visibility:visible}.invoice-card{position:absolute;left:0;top:0;width:100%;background:#fff;color:#000}.invoice-card .btn{display:none!important}}.enhanced-logo{image-rendering:auto;filter:drop-shadow(0 0 10px rgba(26,26,26,.15));width:210px;max-height:90px;object-fit:contain}.team-branch-card,.team-member-card,.settings-card{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:18px;padding:14px;cursor:pointer}.team-branch-card:hover,.team-branch-card.selected,.team-member-card:hover,.team-member-card.selected,.settings-card:hover{border-color:var(--accent);background:rgba(26,26,26,.1)}.employee-profile{min-height:420px}.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:12px 0}.settings-center{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.invoice-card{width:min(1100px,96vw)}.invoice-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.invoice-total-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;font-size:16px}@media(max-width:1200px){.invoice-grid{grid-template-columns:minmax(0,1fr)}}@media print{.sidebar,.topbar,.nav,.btn,.report-filter-card{display:none!important}.invoice-card,.card{box-shadow:none}}.sticky-actions{position:sticky;bottom:0;background:#121313;padding-top:12px;border-top:1px solid var(--line)}.report-filter-card .grid label{min-width:0}.settings-card h3{margin-top:0}.settings-card p{min-height:34px}.table tr:hover{background:rgba(26,26,26,.06)}.danger.small{padding:8px 11px;font-size:11px}@media(max-width:900px){.grid-4{grid-template-columns:minmax(0,1fr)!important}}.employee-profile .notice{line-height:1.8}#staffTab .card{background:rgba(255,255,255,.035)}#staffTab input[readonly]{opacity:.9;background:rgba(26,26,26,.06);border-color:rgba(26,26,26,.25)}.logo{width:135px;max-height:62px}.nav{gap:6px}.nav button{padding:10px 12px;border-radius:13px;font-size:12.5px}.main{padding:20px;width:100%;max-width:calc(100vw - 260px)}.h1{font-size:clamp(26px,3vw,42px)}.card{padding:16px;border-radius:18px}.grid{gap:12px}.btn{padding:10px 13px;border-radius:13px}.btn.small{padding:7px 10px}.avatar{width:32px;height:32px;font-size:11px}.settings-center-compact{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}.settings-card.selected{border-color:var(--accent);background:rgba(26,26,26,.14)}.roles-matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin-top:14px}.role-editor{cursor:default}.role-editor details{border:1px solid var(--line);border-radius:14px;margin:8px 0;padding:8px;background:rgba(0,0,0,.14)}.role-editor summary{cursor:pointer;color:var(--accent);font-weight:800}.perm-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}.perm-item{padding:9px;border-radius:12px;font-size:11.5px}.smooth-calendar{max-height:72vh}.cal-grid{min-width:900px}.cal-head,.cal-row{grid-template-columns:76px repeat(var(--cols),minmax(170px,1fr))}.time-cell,.cal-cell{min-height:var(--row-h,58px);padding:7px}.staff-head{padding:8px}.staff-head strong{display:block;font-size:11.5px}.staff-head .muted{font-size:10px}.appt{padding:7px;font-size:10.5px;border-radius:10px}.now-line{left:76px}.compact-card{padding:14px}.notification-list{display:grid;gap:10px;margin-top:14px}.notification-tile.high,.notification-tile.security{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.08)}.notification-detail-modal pre{white-space:pre-wrap;max-height:260px;overflow:auto;background:rgba(0,0,0,.25);padding:12px;border-radius:12px}.table{font-size:12.5px}input,select,textarea{padding:10px;border-radius:12px}@media(max-width:980px){.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.logo{width:110px}.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.nav button{font-size:11.5px;padding:9px}.main{max-width:100%;padding:12px}.grid-2,.grid-3,.grid-4,.invoice-grid{grid-template-columns:minmax(0,1fr)!important}.settings-center-compact{grid-template-columns:minmax(0,1fr)}.roles-matrix{grid-template-columns:minmax(0,1fr)}.calendar-toolbar .row{width:100%}.cal-grid{min-width:720px}.cal-head,.cal-row{grid-template-columns:64px repeat(var(--cols),minmax(135px,1fr))}.now-line{left:64px}.time-cell,.cal-cell{padding:6px}.modal{padding:8px}.modal-card{width:98vw;padding:14px;border-radius:18px}.invoice-total-row{font-size:13.5px}}:root{--bg:#08090b;--card:#121419;--dark1:#0e1014;--dark2:#141720;--dark3:#1e222c;--dark4:#272c36;--line:rgba(255,255,255,.095);--text:#f5f7fa;--muted:#9aa1ad;--accent:#cfd3da;--gold:#cfd3da;--gold-light:#f0f2f5;--gold-dark:#8f96a3;--success:#4ade80;--danger:#ef4444;--warning:#f59e0b}body{background:radial-gradient(circle at 12% 0%,rgba(148,163,184,.16),transparent 34%),linear-gradient(180deg,#07080a,#0c0e12)}.brand{display:flex;align-items:center;justify-content:center;margin-bottom:18px}.logo.enhanced-logo,.logo{width:132px!important;max-height:64px!important;object-fit:contain!important;display:block;margin:auto}.nav button{border-radius:14px!important;padding:12px 14px!important}.nav button.active{background:rgba(207,211,218,.12)!important;border-color:rgba(207,211,218,.30)!important;color:#fff!important}.btn.gold{background:linear-gradient(135deg,#f8fafc,#aeb6c2)!important;color:#090a0d!important}.btn.secondary{background:rgba(255,255,255,.055)!important;color:var(--text)!important;border:1px solid var(--line)!important}.card,.modal-card,.drawer-panel,.context-menu{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;border-color:var(--line)!important}.calendar-wrap.fresha-calendar{background:rgba(7,8,10,.86);border-radius:24px;box-shadow:0 20px 80px rgba(0,0,0,.42)}.cal-grid{min-width:1120px}.cal-head,.cal-row{grid-template-columns:84px repeat(var(--cols),minmax(220px,1fr))!important}.cal-head{background:#11141a!important;backdrop-filter:blur(12px)}.cal-head>div{min-height:58px}.staff-head{display:grid;place-items:center;gap:5px}.staff-head .avatar{width:32px!important;height:32px!important;background:rgba(207,211,218,.10)!important;color:#fff;border-color:rgba(207,211,218,.34)!important}.time-cell,.cal-cell{min-height:var(--row-h)!important;padding:4px!important}.major-row .time-cell{color:#d6d9de;font-weight:700}.minor-row .time-cell{opacity:.42}.major-row .cal-cell{border-top:1px solid rgba(255,255,255,.15)}.minor-row .cal-cell{border-bottom:1px solid rgba(255,255,255,.045)}.cal-cell{position:relative;overflow:visible;transition:.16s ease}.cal-cell:hover,.cal-cell.drop-target{background:rgba(207,211,218,.09)!important}.appt.booking-block{position:relative;z-index:2;display:flex;flex-direction:column;gap:2px;overflow:hidden;border-radius:12px!important;padding:7px 9px!important;margin:0!important;background:linear-gradient(135deg,rgba(207,211,218,.24),rgba(207,211,218,.10))!important;border:1px solid rgba(207,211,218,.40)!important;box-shadow:0 12px 30px rgba(0,0,0,.22);cursor:grab}.appt.booking-block:active{cursor:grabbing;transform:scale(.992)}.appt.booking-block.completed{background:linear-gradient(135deg,rgba(74,222,128,.20),rgba(74,222,128,.08))!important;border-color:rgba(74,222,128,.40)!important}.appt.booking-block.cancelled,.appt.booking-block.no_show{background:linear-gradient(135deg,rgba(239,68,68,.20),rgba(239,68,68,.08))!important;border-color:rgba(239,68,68,.38)!important}.appt-customer{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.is-dragging-booking .cal-cell{outline:1px dashed rgba(207,211,218,.16);outline-offset:-5px}.invalid-drop{animation:shakeDrop .28s ease-in-out;background:rgba(239,68,68,.16)!important}@keyframes shakeDrop{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}html.light,body.light{--bg:#f6f7f9;--card:#ffffff;--dark1:#ffffff;--dark2:#f1f3f6;--dark3:#e5e8ee;--dark4:#d8dde6;--text:#111827;--muted:#6b7280;--line:rgba(17,24,39,.11);background:#f6f7f9!important;color:#111827!important}@media(max-width:900px){.main{padding:14px!important}}.fresha-clients-subnav button.active,.fresha-clients-subnav button:hover{background:#f1edff}.client-cell span:not(.client-avatar){color:#71717a;font-size:11.5px}.client-avatar{width:43px;height:43px;border-radius:50%;background:#f1effb;color:#6b3ff3;display:grid;place-items:center;font-weight:900}.modal-card.fresha-client-drawer{width:min(1120px,calc(100vw - 18px))!important;max-width:min(1120px,calc(100vw - 18px))!important;background:#ffffff!important;color:#111114!important;border-radius:0!important;border:0!important;box-shadow:-32px 0 90px rgba(0,0,0,.25)!important;padding:0!important}.client-drawer-menu button.active,.client-drawer-menu button:hover{background:#f0edff}.client-avatar-large{width:116px;height:116px;border-radius:50%;background:#f1efff;color:#6d3df5;display:grid;place-items:center;margin:auto;position:relative;font-size:48.5px}.client-avatar-large button{position:absolute;bottom:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1px solid #e5e5ea;background:#fff;color:#111}@media(max-width:950px){}@keyframes clientTabFade{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.wide-field{grid-column:1 / -1}.settings-list{border:1px solid rgba(255,255,255,.10);background:#15181f;border-radius:16px;overflow:hidden}.setting-row{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;padding:16px 18px;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff!important}.setting-row:last-child{border-bottom:0}.setting-row input{width:20px!important;height:20px!important;accent-color:#cfd3da}.uploadable-avatar{cursor:pointer;overflow:hidden}.uploadable-avatar input[type="file"]{display:none!important}.uploadable-avatar img,.client-avatar.has-image img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.client-avatar.has-image{padding:0!important;overflow:hidden}.client-avatar-large img{position:absolute;inset:0;z-index:1}.client-avatar-large button{z-index:3}.client-avatar-large span{z-index:2}.employee-drawer-modal .service-picker{display:block!important}.service-menu-title{margin-top:26px!important}.employee-service-menu{display:flex;flex-direction:column;gap:14px;margin:14px 0 22px}.electronic-menu-section{background:#101216;border:1px solid rgba(255,255,255,.10);border-radius:18px;overflow:hidden}.electronic-menu-section h4{margin:0;padding:14px 18px;background:#15181f;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}.electronic-menu-item{display:grid!important;grid-template-columns:28px 1fr auto;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07);background:#101216;color:#fff!important;cursor:pointer;transition:.14s ease}.electronic-menu-item:last-child{border-bottom:0}.electronic-menu-item:hover{background:#171a22}.electronic-menu-item input{width:18px!important;height:18px!important;accent-color:#cfd3da}.menu-item-main{display:flex;flex-direction:column;gap:5px}.menu-item-main strong{color:#fff;font-size:13.5px}.menu-item-main em{color:#9aa1ad;font-style:normal;font-size:11.5px}.menu-item-price{color:#d8dde6;font-weight:800}@media(max-width:950px){.wide-field{grid-column:auto}}.fresha-calendar-page{display:grid;gap:12px}.fresha-view-select,.fresha-team-select{min-height:42px!important;width:auto!important;min-width:120px;border-radius:999px!important;padding:0 16px!important;background:#141720!important;color:#f5f7fa!important;border:1px solid rgba(255,255,255,.12)!important}.fresha-icon-btn,.fresha-today-btn,.fresha-date-pill{min-height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:#141720;color:#f5f7fa;padding:0 15px;font-weight:850;cursor:pointer}.fresha-date-pill{min-width:210px}.fresha-icon-btn:hover,.fresha-today-btn:hover,.fresha-date-pill:hover,.fresha-view-select:hover,.fresha-team-select:hover{background:#1b1f29!important}.fresha-calendar-box{min-width:0}.calendar-wrap.fresha-calendar{border-radius:18px!important;border:1px solid rgba(255,255,255,.10)!important;background:#08090b!important;max-height:78vh!important}.cal-head{background:#101216!important;border-bottom:1px solid rgba(255,255,255,.10)!important}.fresha-staff-head{padding:12px 8px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important}
.fresha-staff-head .staff-photo{width:56px;height:56px}.cal-row{min-height:var(--row-h)}.major-row .cal-cell{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005))}.minor-row .cal-cell{background:#08090b}.time-cell{text-align:center;color:#b4bbc7!important;background:#0d0f13}.time-head{background:#0d0f13;color:#b4bbc7;display:grid;place-items:center}.appt.booking-block{border-radius:7px!important;padding:4px 8px!important;box-shadow:none!important;background:#2c3441!important;border:0!important;border-inline-start:4px solid #a78bfa!important;color:#fff!important}.appt.booking-block.completed{background:#20372b!important;border-inline-start-color:#4ade80!important}.appt.booking-block.cancelled,.appt.booking-block.no_show{background:#3a2023!important;border-inline-start-color:#ef4444!important}.range-appt.completed{border-inline-start-color:#4ade80}.range-appt.cancelled,.range-appt.no_show{border-inline-start-color:#ef4444}/* z-index was 90 -- lower than .modal.open's 160 (styles.css), so opening
   this from a field inside any modal (e.g. Reports' filters overlay)
   rendered the picker BEHIND that modal's own backdrop instead of on top
   of it. Reported live with a screenshot. Raised well above every modal
   layer since this is a global helper (appended to document.body) that
   can be triggered from inside any of them. */
.mini-date-popover{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding-top:120px;background:rgba(0,0,0,.36)}.mini-popover-card{width:min(760px,calc(100vw - 32px));background:#101216;color:#f5f7fa;border:1px solid rgba(255,255,255,.12);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.55);padding:18px}.mini-popover-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.mini-popover-head button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:#15181f;color:#fff;cursor:pointer}.mini-date-shortcuts{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.mini-date-shortcuts button{border:1px solid rgba(255,255,255,.12);background:#15181f;color:#f5f7fa;border-radius:999px;padding:10px 15px;cursor:pointer}.drawer.open{align-items:stretch!important;justify-content:flex-start!important}.fresha-filter-drawer{width:min(440px,95vw)!important;background:#101216!important;color:#f5f7fa!important;border-right:1px solid rgba(255,255,255,.10)!important;padding:24px 28px 96px!important}.fresha-filter-section{border-bottom:1px solid rgba(255,255,255,.09);padding:0}.fresha-filter-section summary{list-style:none;display:flex;align-items:center;gap:10px;padding:18px 0;cursor:pointer;color:#fff}.fresha-filter-section summary::-webkit-details-marker{display:none}.fresha-filter-options{display:grid;gap:9px;padding:0 0 16px}.fresha-filter-options label{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;padding:10px 12px;background:#15181f;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#d8dde6!important;cursor:pointer}.fresha-filter-options input{width:18px!important;height:18px!important;accent-color:#cfd3da}.fresha-filter-actions{position:absolute;left:0;right:0;bottom:0;background:#101216;border-top:1px solid rgba(255,255,255,.10);padding:14px 28px;display:flex;gap:10px}.fresha-filter-actions .apply{flex:1;border:0;border-radius:999px;background:#f5f7fa;color:#090a0d;font-weight:900;padding:13px}.fresha-filter-actions .clear,.fresha-filter-actions .more{border:1px solid rgba(255,255,255,.12);background:#15181f;color:#f5f7fa;border-radius:999px;padding:13px 18px}@media(max-width:900px){}.fresha-filter-actions .more{display:none!important}.fresha-filter-actions{grid-template-columns:1fr auto!important}.team-picker-popover{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;padding-top:150px;background:rgba(0,0,0,.36)}.team-picker-card{width:340px;max-height:520px;overflow:auto;background:#101216;color:#f5f7fa;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;box-shadow:0 24px 80px rgba(0,0,0,.55)}.team-picker-search{height:44px;display:flex;align-items:center;gap:8px;background:#15181f;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:0 12px;margin-bottom:10px}.team-picker-search input{width:100%;border:0!important;outline:0;background:transparent!important;color:#f5f7fa!important}.team-picker-section-title{color:#9aa1ad;font-weight:800;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}.team-picker-row{width:100%;border:0;background:transparent;color:#f5f7fa;display:grid;grid-template-columns:34px 1fr 72px 28px;align-items:center;gap:8px;padding:10px 8px;border-radius:10px;cursor:pointer;text-align:right}.team-picker-row:hover,.team-picker-row.active{background:#1b1f29}.team-picker-row .staff-photo{width:29px;height:29px;font-size:10px}.team-picker-row strong{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}.team-picker-row em{color:#9aa1ad;font-style:normal;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}.team-picker-icon{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#15181f}.team-check{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);color:#fff;background:#6d3df5}.resource-range-calendar{overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:#08090b;min-height:650px}.resource-range-head,.resource-date-row{display:grid;grid-template-columns:150px repeat(var(--staff),minmax(230px,1fr))}.resource-range-head{position:sticky;top:0;z-index:5;background:#101216;border-bottom:1px solid rgba(255,255,255,.10)}.date-side-head{display:grid;place-items:center;color:#9aa1ad;font-weight:900;border-inline-end:1px solid rgba(255,255,255,.10)}.resource-staff-head{min-height:92px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-inline-end:1px solid rgba(255,255,255,.10);cursor:pointer}.resource-staff-head:hover{background:#15181f}.resource-staff-head .staff-photo{width:56px;height:56px}.resource-staff-head strong{color:#fff;font-size:11.5px}.resource-staff-head span{color:#9aa1ad;font-size:10px}.resource-date-row{min-height:170px;border-bottom:1px solid rgba(255,255,255,.10)}.resource-date-label{position:sticky;right:0;background:#0d0f13;padding:14px;border-inline-end:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;gap:8px}.resource-date-label strong{color:#fff}.resource-date-label span{color:#d8dde6}.resource-date-label em{color:#8f96a3;font-style:normal;font-size:11px}.resource-staff-day{padding:10px;min-height:170px;border-inline-end:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004));cursor:pointer}.resource-staff-day:hover,.resource-staff-day.drop-target{background:#121720!important}.resource-appt{border-radius:9px;padding:7px 9px;margin-bottom:7px;background:#202633;color:#fff;border-inline-start:4px solid #a78bfa;cursor:grab}.resource-appt.completed{border-inline-start-color:#4ade80;background:#183323}.resource-appt.cancelled,.resource-appt.no_show{border-inline-start-color:#ef4444;background:#351d22}.resource-appt strong{display:block;font-size:11px;color:#d8dde6}.resource-appt b{display:block;margin-top:3px;font-size:11.5px}.resource-appt em{display:block;margin-top:2px;font-size:10px;color:#9aa1ad;font-style:normal}.empty-resource-slot{min-height:44px;border:1px dashed rgba(255,255,255,.12);border-radius:10px;display:grid;place-items:center;color:#8f96a3;font-size:11.5px}.fresha-filter-section[open] .fresha-filter-options{display:grid!important}.filter-sec-icon{width:22px;height:22px;display:inline-grid;place-items:center;opacity:.9}.fresha-filter-options label{grid-template-columns:1fr auto}@media(max-width:900px){.team-picker-popover{padding:16px}.team-picker-card{width:100%}.resource-range-head,.resource-date-row{grid-template-columns:120px repeat(var(--staff),minmax(210px,1fr))}}.fresha-filter-drawer{position:relative!important;width:min(440px,95vw)!important;height:100vh!important;max-height:100vh!important;overflow:auto!important;padding:26px 28px 0!important;display:flex!important;flex-direction:column!important}.filter-sections-list{flex:1 1 auto!important;overflow:auto!important;padding-bottom:18px!important}.fresha-filter-section{border-bottom:1px solid rgba(255,255,255,.10)!important;padding:0!important}.fresha-filter-section summary{min-height:64px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;list-style:none!important;cursor:pointer!important;color:#fff!important}.fresha-filter-section summary::-webkit-details-marker{display:none!important}.fresha-filter-section summary strong{font-size:15.5px!important;font-weight:900!important;color:#fff!important}.filter-sec-icon{order:2!important;width:22px!important;height:22px!important;display:inline-grid!important;place-items:center!important;color:#d7dbe3!important;opacity:.9!important}.fresha-filter-section summary strong{order:1!important;margin-inline-start:auto!important}.fresha-filter-section:not([open]) .fresha-filter-options{display:none!important}.fresha-filter-options{display:grid!important;gap:9px!important;padding:0 0 16px!important}.fresha-filter-options label{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;min-height:44px!important;padding:10px 12px!important;background:#15181f!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px!important;color:#d8dde6!important}.fresha-filter-options input{width:18px!important;height:18px!important;accent-color:#cfd3da!important}.filter-no-options{margin:0 0 20px!important;color:#9aa1ad!important;font-size:14.5px!important;text-align:right!important}.fresha-filter-actions{position:sticky!important;bottom:0!important;left:auto!important;right:auto!important;width:auto!important;margin:0 -28px!important;padding:14px 28px!important;background:#101216!important;border-top:1px solid rgba(255,255,255,.10)!important;display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;z-index:20!important}.fresha-filter-actions .apply{width:100%!important;min-height:50px!important;border:0!important;border-radius:999px!important;background:#f5f7fa!important;color:#090a0d!important;font-weight:900!important;text-align:center!important;padding:0 18px!important}.fresha-filter-actions .clear{min-height:50px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:999px!important;background:#15181f!important;color:#f5f7fa!important;padding:0 20px!important;font-weight:800!important}.fresha-filter-actions .more{display:none!important}.drawer.open .fresha-filter-actions{max-width:none!important}.top-lang-btn{min-width:88px}.brand-logo-hero{width:180px!important;max-height:96px!important;filter:drop-shadow(0 12px 28px rgba(0,0,0,.35))}.drawer{display:none;justify-content:flex-end;align-items:stretch;background:rgba(0,0,0,.66)!important;backdrop-filter:blur(6px)}.drawer.open{display:flex}.drawer-panel{margin-inline-start:auto;border-right:0;border-left:1px solid var(--line);width:min(460px,96vw);box-shadow:-20px 0 60px rgba(0,0,0,.35)}.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;position:sticky;top:0;background:linear-gradient(180deg,rgba(18,20,25,.98),rgba(18,20,25,.94));z-index:3}.drawer-head h2{margin:0;font-size:27px}.drawer-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:20px}.saved-filter-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);margin-bottom:16px}.enhanced-filter-drawer .filter-sections-list{display:grid;gap:12px}.enhanced-filter-drawer .fresha-filter-section{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:8px 12px}.enhanced-filter-drawer .fresha-filter-section summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:6px 0}.enhanced-filter-drawer .fresha-filter-section summary::-webkit-details-marker{display:none}.enhanced-filter-drawer .fresha-filter-options{display:grid;gap:8px;padding:10px 4px 6px}.enhanced-filter-drawer .fresha-filter-options label{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:12.5px;color:#fff}.enhanced-filter-drawer .fresha-filter-actions{display:flex;gap:10px;margin-top:16px}.enhanced-filter-drawer .fresha-filter-actions button{flex:1;border-radius:14px;padding:12px 14px;border:1px solid var(--line);cursor:pointer}.enhanced-filter-drawer .fresha-filter-actions .apply{background:#fff;color:#111;font-weight:800}.enhanced-filter-drawer .fresha-filter-actions .clear{background:rgba(255,255,255,.06);color:#fff}.booking-drawer-panel{width:min(1040px,98vw)!important;padding:18px 18px 22px}.booking-drawer-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);gap:16px;align-items:start}.booking-primary,.booking-secondary{display:grid;gap:16px}.booking-services-list{display:grid;gap:10px;max-height:55vh;overflow:auto;padding-inline-end:4px}.service-list-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);cursor:pointer}.service-list-item input{width:18px;height:18px}.service-list-main{display:grid;gap:4px}.service-list-main strong{font-size:13.5px}.service-list-main small{color:var(--muted)}.service-list-meta{font-size:11px;color:#d4d8de}.customer-side-card{position:sticky;top:78px}.inline-check{display:flex;flex-direction:row;align-items:center;gap:10px;font-size:12.5px;color:#fff}.inline-check input{width:18px;height:18px}.compact-notice{padding:12px 14px;font-size:11.5px}.year-nav-btn,.year-close-btn{width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;cursor:pointer}.mini-date-shortcuts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.date-strip-card{width:min(720px,94vw)!important}.date-strip-head{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:16px}.date-strip-head strong{font-size:14.5px}.date-strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity}.date-strip-chip{scroll-snap-align:start;flex:0 0 68px;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);background:var(--bg-raised);color:var(--text);border-radius:14px;padding:10px 4px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}.date-strip-chip:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.3);border-color:var(--line-strong)}.date-strip-chip.is-today{border-color:var(--accent-deep)}.date-strip-chip.selected{background:linear-gradient(155deg,var(--accent-2),var(--accent));color:#1b1509;border-color:transparent;box-shadow:var(--shadow-gold);transform:translateY(-1px)}.dsc-weekday{font-size:10px;color:var(--muted)}.date-strip-chip.selected .dsc-weekday,.date-strip-chip.selected .dsc-month{color:#1b1509;opacity:.75}.dsc-num{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}.dsc-month{font-size:10px;color:var(--muted)}.mini-date-shortcuts button{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:999px;padding:10px 14px;cursor:pointer}@media(max-width:1100px){.booking-drawer-shell{grid-template-columns:minmax(0,1fr)}.customer-side-card{position:static}}@media(max-width:700px){.drawer-panel,.booking-drawer-panel{width:100vw!important}}.sidebar .brand.brand-standalone,.brand.brand-standalone{background:transparent!important;border:0!important;box-shadow:none!important;min-height:auto!important;padding:10px 0 30px!important;margin:0 0 14px!important;border-radius:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}.sidebar .brand.brand-standalone img.brand-logo-hero,img.logo.enhanced-logo.brand-logo-hero{width:230px!important;max-width:230px!important;max-height:132px!important;object-fit:contain!important;transform:scale(1.12)!important;transform-origin:center!important;filter:invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.3)) drop-shadow(0 4px 6px rgba(0,0,0,.32)) drop-shadow(0 12px 18px rgba(0,0,0,.22))!important;background:transparent!important;border:0!important;box-shadow:none!important}.pro-add-btn,.pro-pill-btn,.pro-date-pill,.pro-team-btn,.pro-view-select,.toolbar-icon-btn{height:41px!important;min-height:41px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;transition:.18s ease!important}.pro-pill-btn,.pro-date-pill,.pro-team-btn,.pro-view-select,.toolbar-icon-btn{background:rgba(255,255,255,.055)!important;color:#f7f8fb!important}.pro-date-pill{min-width:250px!important;padding:0 22px!important;font-weight:900!important}.pro-team-btn .btn-svg{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}.pro-view-select{width:auto!important;min-width:125px!important;padding:0 16px!important;cursor:pointer!important}.toolbar-icon-btn{width:41px!important;padding:0!important;display:inline-grid!important;place-items:center!important}.toolbar-icon-btn svg{width:17px;height:17px;stroke-width:2.25}.pro-add-btn:hover,.pro-pill-btn:hover,.pro-date-pill:hover,.pro-team-btn:hover,.pro-view-select:hover,.toolbar-icon-btn:hover{transform:translateY(-1px)!important;border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.095)!important}.top-lang-btn{border-radius:14px!important;min-width:86px!important;height:42px!important;font-weight:900!important}.team-picker-icon svg{width:16px;height:16px}@media(max-width:1180px){}.booking-drawer-mode{z-index:60}.drawer.open{display:flex!important;justify-content:flex-end!important;align-items:stretch!important}.booking-drawer-linked{width:min(1120px,98vw)!important;padding:18px 18px 0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.booking-drawer-linked .booking-drawer-head{flex:0 0 auto!important;margin:0!important;padding:0 0 16px!important;background:linear-gradient(180deg,rgba(18,20,25,.98),rgba(18,20,25,.88))!important}.linked-booking-shell{flex:1 1 auto!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) 320px!important;gap:16px!important;align-items:stretch!important;padding:16px 0!important;overflow:hidden!important}.booking-flow-card{min-height:0!important;border:1px solid rgba(255,255,255,.105)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.026))!important;box-shadow:0 18px 50px rgba(0,0,0,.25)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.booking-flow-section{padding:18px!important}.booking-flow-section + .booking-flow-section{border-top:1px solid rgba(255,255,255,.10)!important}.services-section{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important}.booking-section-title{display:flex!important;align-items:flex-start!important;gap:12px!important;margin-bottom:14px!important}.booking-section-title span{width:34px!important;height:34px!important;border-radius:999px!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;font-weight:900!important;flex:0 0 auto!important}.booking-section-title h3{margin:0!important;font-size:17px!important}.booking-section-title p{margin:3px 0 0!important;color:var(--muted)!important;font-size:11px!important}.booking-services-summary{display:grid!important;grid-template-columns:auto 1fr auto auto!important;align-items:center!important;gap:10px!important;padding:12px 14px!important;margin-bottom:12px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:16px!important;background:rgba(0,0,0,.18)!important}.booking-services-summary strong{font-size:14.5px!important;color:#fff!important}.booking-services-summary span{font-size:11px!important;color:var(--muted)!important}.connected-services-list{flex:1 1 auto!important;min-height:0!important;overflow:auto!important;display:grid!important;gap:8px!important;padding-inline-end:4px!important}.connected-service-item{display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:12px!important;padding:13px 14px!important;border:1px solid rgba(255,255,255,.095)!important;border-radius:15px!important;background:rgba(255,255,255,.035)!important;cursor:pointer!important;transition:.15s ease!important}.connected-service-item:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.18)!important}.connected-service-item input{width:18px!important;height:18px!important;accent-color:#fff!important}.connected-service-item:has(input:checked){border-color:rgba(255,255,255,.34)!important;background:rgba(207,211,218,.10)!important}.service-list-main{display:grid!important;gap:4px!important}.service-list-main strong{font-size:12.5px!important;color:#fff!important}.service-list-main small,.service-list-meta{font-size:11px!important;color:var(--muted)!important}.linked-customer-card{height:100%!important;border:1px solid rgba(255,255,255,.105)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.026))!important;padding:18px!important;display:flex!important;flex-direction:column!important;gap:14px!important;overflow:auto!important}.compact-notice{font-size:11.5px!important;line-height:1.7!important;padding:12px 14px!important}.booking-linked-footer{flex:0 0 auto!important;display:flex!important;gap:10px!important;justify-content:flex-start!important;align-items:center!important;padding:14px 0 16px!important;margin:0!important;border-top:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,rgba(18,20,25,.76),rgba(18,20,25,.98))!important;backdrop-filter:blur(14px)!important}.booking-linked-footer .btn{min-width:140px!important}@media(max-width:980px){.booking-drawer-linked{width:100vw!important}.linked-booking-shell{grid-template-columns:1fr!important;overflow:auto!important}.booking-flow-card,.linked-customer-card{height:auto!important;min-height:auto!important}.connected-services-list{max-height:46vh!important}}.compact-booking-mode.drawer.open{justify-content:flex-end!important;align-items:stretch!important}.compact-booking-drawer{width:min(860px,92vw)!important;padding:14px 14px 0!important;border-radius:0!important}.compact-booking-head{padding:0 0 12px!important}.compact-booking-head h2{font-size:25px!important;margin:0!important}.compact-booking-head .muted{font-size:11.5px!important}.compact-linked-shell{grid-template-columns:minmax(0,1fr) 270px!important;gap:12px!important;padding:12px 0!important}.compact-flow-card,.compact-customer-card{border-radius:18px!important}.compact-flow-section{padding:13px!important}.compact-section-title{gap:9px!important;margin-bottom:10px!important}.compact-section-title span{width:28px!important;height:28px!important;font-size:11px!important}.compact-section-title h3{font-size:14.5px!important}.compact-section-title p{font-size:10.5px!important}.compact-field-grid label,.compact-customer-fields label{gap:5px!important;font-size:11px!important}.compact-field-grid input,.compact-field-grid select,.compact-field-grid textarea,.compact-customer-fields input{min-height:38px!important;padding:8px 10px!important;border-radius:11px!important;font-size:11.5px!important}.compact-services-section{min-height:0!important}.compact-services-summary{grid-template-columns:auto 1fr auto auto!important;padding:9px 11px!important;margin-bottom:9px!important;border-radius:13px!important}.compact-services-summary strong{font-size:12.5px!important}.compact-services-summary span{font-size:10.5px!important}.compact-services-list{max-height:280px!important;gap:7px!important}.compact-service-item{padding:9px 11px!important;border-radius:12px!important;gap:9px!important}.compact-service-item input{width:16px!important;height:16px!important}.compact-service-item .service-list-main strong{font-size:11.5px!important}.compact-service-item .service-list-main small,.compact-service-item .service-list-meta{font-size:10.5px!important}.compact-booking-secondary{min-width:0!important}.compact-customer-card{padding:13px!important;gap:10px!important}.compact-notice{padding:10px 11px!important;font-size:11px!important;line-height:1.55!important}.compact-booking-footer{padding:10px 0 12px!important}.compact-booking-footer .btn{min-width:112px!important;min-height:38px!important;padding:9px 12px!important;border-radius:12px!important}body[dir="ltr"] .compact-booking-drawer,.compact-booking-drawer[dir="ltr"]{text-align:left!important}body[dir="rtl"] .compact-booking-drawer,.compact-booking-drawer[dir="rtl"]{text-align:right!important}@media(max-width:980px){.compact-booking-drawer{width:100vw!important}.compact-linked-shell{grid-template-columns:1fr!important;overflow:auto!important}.compact-services-list{max-height:240px!important}}.compact-invoice-modal{width:min(760px,90vw)!important;max-height:84vh!important;padding:14px!important;border-radius:22px!important;overflow:auto!important;background:linear-gradient(180deg,rgba(20,23,29,.98),rgba(12,14,18,.98))!important}.compact-invoice-head{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important;padding:0 0 10px!important;margin-bottom:10px!important;border-bottom:1px solid rgba(255,255,255,.10)!important}.compact-invoice-head h2{margin:0!important;font-size:21.5px!important;line-height:1.2!important}.invoice-connected-card{border:1px solid rgba(255,255,255,.10)!important;border-radius:18px!important;background:rgba(255,255,255,.028)!important;overflow:hidden!important}.invoice-section{padding:12px 14px!important;border-bottom:1px solid rgba(255,255,255,.09)!important}.invoice-section:last-child{border-bottom:0!important}.invoice-summary-strip{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;background:rgba(0,0,0,.16)!important}.invoice-summary-strip div,.invoice-mini-totals div{border:1px solid rgba(255,255,255,.085)!important;border-radius:14px!important;padding:10px 11px!important;background:rgba(255,255,255,.035)!important;display:grid!important;gap:4px!important}.invoice-summary-strip span,.invoice-mini-totals span{color:var(--muted)!important;font-size:10px!important}.invoice-summary-strip strong,.invoice-mini-totals strong{color:#fff!important;font-size:11.5px!important;line-height:1.35!important}.invoice-section-title{display:flex!important;align-items:flex-start!important;gap:9px!important;margin-bottom:10px!important}.invoice-section-title>span{width:28px!important;height:28px!important;flex:0 0 28px!important;border-radius:999px!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;font-weight:800!important;font-size:11px!important}.invoice-section-title h3{margin:0!important;font-size:14.5px!important}.invoice-section-title p{margin:2px 0 0!important;color:var(--muted)!important;font-size:10.5px!important}.compact-invoice-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.compact-invoice-fields label,.invoice-notes-label{gap:5px!important;font-size:11px!important}.compact-invoice-fields input,.compact-invoice-fields select,.invoice-notes-label textarea{min-height:36px!important;padding:8px 10px!important;border-radius:11px!important;font-size:11.5px!important}.invoice-notes-label{margin-top:9px!important;display:grid!important}.invoice-notes-label textarea{min-height:54px!important}.invoice-services-list{display:grid!important;gap:7px!important;max-height:145px!important;overflow:auto!important}.invoice-service-row{display:grid!important;grid-template-columns:1fr auto auto!important;align-items:center!important;gap:10px!important;padding:9px 11px!important;border:1px solid rgba(255,255,255,.085)!important;border-radius:13px!important;background:rgba(0,0,0,.14)!important}.invoice-service-row strong{font-size:11.5px!important}.invoice-service-row span{font-size:10.5px!important;color:var(--muted)!important}.invoice-service-row b{font-size:11.5px!important;color:#fff!important}.compact-total{margin-top:9px!important;padding-top:9px!important;font-size:12.5px!important}.invoice-mini-totals{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-top:10px!important}.compact-invoice-actions{display:flex!important;gap:8px!important;justify-content:flex-end!important;align-items:center!important;padding-top:10px!important;margin-top:10px!important;border-top:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,rgba(20,23,29,.74),rgba(20,23,29,.98))!important;position:sticky!important;bottom:0!important}.compact-invoice-actions .btn{min-height:36px!important;padding:8px 12px!important;border-radius:12px!important;font-size:11.5px!important}.compact-invoice-modal[dir="ltr"]{text-align:left!important}.compact-invoice-modal[dir="rtl"]{text-align:right!important}@media(max-width:820px){.compact-invoice-modal{width:96vw!important;max-height:88vh!important}.invoice-summary-strip,.compact-invoice-fields,.invoice-mini-totals{grid-template-columns:minmax(0,1fr)!important}.compact-invoice-actions{flex-wrap:wrap!important;justify-content:stretch!important}.compact-invoice-actions .btn{flex:1 1 140px!important}}.closed-sale-modal{width:min(760px,92vw)!important;max-height:86vh!important;padding:18px!important}.closed-sale-head{margin-bottom:12px!important}.closed-sale-status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.closed-sale-status-strip>div,.closed-readonly-fields>div,.read-only-totals>div{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px;padding:10px 12px}.closed-sale-status-strip span,.closed-readonly-fields span,.read-only-totals span,.closed-duration-row span,.closed-notes span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.closed-sale-status-strip strong,.closed-readonly-fields strong,.read-only-totals strong{color:#fff;font-size:11.5px}.closed-sale-grid{display:grid;gap:12px}.closed-sale-grid .invoice-section{padding:14px!important;border-radius:18px!important}.closed-readonly-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.closed-sold-list{display:grid;gap:8px}.closed-sold-row{display:grid;grid-template-columns:1fr 100px 110px;gap:10px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px;padding:10px 12px}.closed-sold-row span{color:var(--muted);font-size:11px}.closed-sold-row b{text-align:end}.closed-duration-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.read-only-totals{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}.closed-notes{border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:14px;padding:10px 12px;margin-top:10px}.closed-notes p{margin:0}.closed-sale-actions{position:sticky;bottom:0;background:rgba(12,14,18,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-top:12px}@media(max-width:850px){.closed-sale-status-strip,.closed-readonly-fields,.read-only-totals{grid-template-columns:1fr 1fr!important}.closed-sold-row{grid-template-columns:minmax(0,1fr)}}@media(max-width:560px){.closed-sale-status-strip,.closed-readonly-fields,.read-only-totals{grid-template-columns:minmax(0,1fr)!important}}.edit-sale-modal{width:min(760px,94vw)!important;max-height:88vh!important}.edit-sale-summary{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.045);padding:12px 14px;margin:14px 0}.edit-sale-summary strong{font-size:16px;color:#fff}.edit-sale-summary span{color:var(--muted);font-size:11.5px}.edit-sale-list{display:grid;gap:8px;max-height:46vh;overflow:auto;padding-inline-end:4px;margin-bottom:12px}.edit-sale-service-item{grid-template-columns:auto 1fr auto!important;min-height:58px}.edit-sale-permission-note{margin-top:10px;margin-bottom:8px}.closed-sale-actions .btn.gold{background:linear-gradient(135deg,#f8fafc,#aeb6c2)!important;color:#090a0d!important}@media(max-width:700px){.edit-sale-modal{width:96vw!important}.edit-sale-summary{grid-template-columns:1fr 1fr}.edit-sale-service-item{grid-template-columns:auto 1fr!important}.edit-sale-service-item .service-list-meta{grid-column:2}}.subnav-kicker,.section-kicker{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.customers-v2-subnav button.active,.customers-v2-subnav button:hover{background:rgba(255,255,255,.07);color:#fff;border-color:var(--line)}.customer-category-badge.VIP{color:#f5d48a;border-color:rgba(245,212,138,.35);background:rgba(245,212,138,.08)}.empty-state-text{padding:20px}.campaigns-head,.campaign-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.compact-customer-modal{width:min(860px,94vw)!important;padding:18px!important}.customer-modal-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start}.customer-photo-panel{border:1px solid var(--line);border-radius:20px;padding:16px;background:rgba(255,255,255,.035);display:grid;justify-items:center;gap:14px}.customer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.customer-form-grid .wide-field{grid-column:1/-1}.customer-form-grid textarea{min-height:88px}.mini-toggle{display:flex;flex-direction:row!important;justify-content:space-between;align-items:center;width:100%;border:1px solid var(--line);border-radius:14px;padding:10px;color:#fff}.mini-toggle input{width:18px;height:18px}.customer-profile-drawer-card{position:fixed;inset-block:0;inset-inline-end:0;width:min(520px,96vw);z-index:60;background:linear-gradient(180deg,rgba(18,20,25,.98),rgba(10,11,14,.98));border-inline-start:1px solid var(--line);box-shadow:-20px 0 70px rgba(0,0,0,.45);padding:22px;overflow:auto}.profile-close{position:absolute;inset-inline-end:16px;top:16px;width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}.customer-profile-head{display:flex;align-items:center;gap:14px;padding-inline-end:44px;margin-bottom:18px}.customer-profile-head h2{margin:0}.customer-profile-head p{margin:4px 0 0;color:var(--muted)}.customer-profile-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.customer-profile-stats div{border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.035)}.customer-profile-stats span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}@media(max-width:1100px){}@media(max-width:720px){.customer-modal-layout,.customer-form-grid{grid-template-columns:minmax(0,1fr)}.compact-customer-modal{width:98vw!important}}.campaign-status.active{color:var(--success);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}.campaign-status.paused{color:var(--warning);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}.campaign-status.completed{color:#b8c0cc}.campaign-editor-modal{width:min(920px,96vw)!important}.campaign-audience-preview{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:14px;margin-top:14px}.campaign-audience-preview strong{display:block;margin-bottom:10px;color:#fff}.campaign-audience-preview div{display:flex;gap:8px;flex-wrap:wrap}.campaign-audience-preview span{display:inline-flex;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:999px;padding:6px 10px;font-size:11px;color:#fff}.campaign-audience-preview em{color:var(--muted);font-style:normal}.enhanced-customer-profile{width:min(760px,96vw);max-height:calc(100vh - 40px);overflow:auto}.enhanced-profile-head{align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:14px}.enhanced-profile-head .client-avatar{width:58px;height:58px;font-size:21.5px}.customer-profile-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0;border-bottom:1px solid var(--line);padding-bottom:12px}.customer-profile-tabs button{border:1px solid var(--line);background:rgba(255,255,255,.045);color:var(--muted);border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}.customer-profile-tabs button.active,.customer-profile-tabs button:hover{background:rgba(255,255,255,.12);color:#fff}.customer-profile-panel-tab{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);padding:16px;margin-bottom:14px}.profile-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.profile-info-grid>div{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);padding:12px}.profile-info-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.profile-info-grid strong{color:#fff;word-break:break-word}.profile-info-grid .wide-info{grid-column:1/-1}.profile-note-box{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);padding:14px;margin-top:12px}.profile-note-box h3{margin:0 0 8px}.profile-note-box p{margin:0;color:var(--muted);line-height:1.7}.profile-actions-row{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(18,20,25,.82),rgba(18,20,25,.98));border:1px solid var(--line);border-radius:18px;padding:12px;backdrop-filter:blur(14px)}@media(max-width:900px){.profile-info-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:620px){.enhanced-customer-profile{width:100vw;max-height:100vh;border-radius:0}.customer-profile-tabs{overflow:auto;flex-wrap:nowrap}.customer-profile-tabs button{white-space:nowrap}}.customer-bulk-bar,.smart-segment-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:18px;padding:12px 14px;margin:12px 0;backdrop-filter:blur(12px)}.customer-bulk-bar{position:sticky;top:0;z-index:7}.customer-bulk-bar span,.smart-segment-notice span{color:var(--muted)}.customer-bulk-bar strong,.smart-segment-notice strong{color:#fff}.campaign-audience-preview span{display:inline-flex;margin:4px 4px 0 0;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:11px}body[dir=rtl] .campaign-audience-preview span{margin:4px 0 0 4px}@media(max-width:800px){.customer-bulk-bar,.smart-segment-notice{align-items:stretch;flex-direction:column}}.followup-list,.duplicate-list{display:grid;gap:10px;margin-top:12px}.followup-row.done{opacity:.62}.customer-followup-modal{width:min(720px,96vw)!important}@media(max-width:1100px){}.team-panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.team-panel-title h3{margin:0}.team-panel-title p{margin:4px 0 0}.team-branch-card:hover,.team-branch-card.selected{border-color:rgba(207,211,218,.38);background:rgba(207,211,218,.10)}.team-member-card-v2:hover,.team-member-card-v2.selected{border-color:rgba(207,211,218,.38);background:rgba(207,211,218,.10)}.team-avatar{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(207,211,218,.20),rgba(255,255,255,.06));border:1px solid rgba(207,211,218,.22);font-weight:900;color:#fff;letter-spacing:.5px}.team-avatar.xl{width:74px;height:74px;border-radius:24px;font-size:21.5px;flex:0 0 auto}.avatar.xl{width:74px;height:74px;border-radius:24px;font-size:25px;margin:auto}.badge.active{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.10);color:#86efac}.badge.pending{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10);color:#fbbf24}.badge.frozen{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.10);color:#93c5fd}.badge.suspended{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10);color:#fca5a5}.team-profile-v2{padding:0;overflow:hidden}.team-profile-hero{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))}.team-profile-title{flex:1;min-width:0}.team-profile-title h2{margin:4px 0;font-size:25px}.team-profile-title p{margin:0 0 10px;color:var(--muted)}.team-profile-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.team-tabs-v2 button.active{background:rgba(207,211,218,.16);border-color:rgba(207,211,218,.36);color:#fff}.team-tab-card{display:grid;gap:14px;padding:0 18px 18px}.team-info-row{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);padding:12px;display:grid;gap:5px}.team-info-row span{font-size:11px;color:var(--muted)}.team-service-list{display:grid;gap:10px}.team-service-item{display:grid;grid-template-columns:1.2fr .8fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);padding:12px}.team-service-item span,.team-service-item em{color:var(--muted);font-style:normal;font-size:11px}.pending-account-card{border-color:rgba(245,158,11,.38)!important;background:rgba(245,158,11,.08)!important}.team-employee-modal{width:min(980px,96vw)!important}.team-employee-modal .employee-service-menu{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:18px;padding:10px;background:rgba(0,0,0,.12)}.team-employee-modal .electronic-menu-section{margin-bottom:12px}.team-employee-modal .electronic-menu-section h4{margin:6px 4px 8px;color:#fff}.team-employee-modal .electronic-menu-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03);margin-bottom:7px;color:#fff}.team-employee-modal .electronic-menu-item input{width:18px;height:18px}.menu-item-main{display:grid;gap:3px}.menu-item-main em{font-size:11px;color:var(--muted);font-style:normal}.menu-item-price{font-weight:800}@media(max-width:1250px){}@media(max-width:760px){.team-v2-actions .btn{flex:1}.team-profile-hero{display:grid}.team-profile-actions{justify-content:stretch}.team-profile-actions .btn{flex:1}.team-service-item{grid-template-columns:1fr auto}.team-service-item span{grid-column:1/-1}}.team-schedule-grid{display:grid;gap:10px;margin-top:12px}.team-schedule-row{display:grid;grid-template-columns:minmax(180px,1.3fr) 120px 120px auto auto;gap:10px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:16px;padding:12px}.team-schedule-row>div{display:grid;gap:3px}.team-schedule-row>div span{color:var(--muted);font-size:11px}.team-schedule-row label{margin:0}.team-schedule-row .inline-check{display:flex;flex-direction:row;align-items:center;gap:8px;color:#fff;font-size:11.5px}.team-schedule-row .inline-check input{width:18px;height:18px}.team-leave-section{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.team-leave-form{display:grid;grid-template-columns:1fr 1fr 1.2fr auto;gap:10px;align-items:end;border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:18px;padding:12px;margin:12px 0}.team-leave-list{display:grid;gap:10px}.team-leave-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:16px;padding:12px}.team-leave-item div{display:grid;gap:4px}.team-leave-item span:not(.badge){color:var(--muted);font-size:11.5px}.team-leave-item.cancelled{opacity:.65}@media(max-width:1100px){.team-schedule-row,.team-leave-form,.team-leave-item{grid-template-columns:minmax(0,1fr)}.team-schedule-row .inline-check{justify-content:flex-start}}.team-performance-tab .team-period-controls,.team-finance-tab .team-advance-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end;margin:12px 0 14px;padding:12px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035)}.team-performance-kpis .mini-stat span{display:block;margin-top:5px;color:var(--muted);font-size:11px}.team-rank-list{display:grid;gap:8px}.team-rank-list>div{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.team-rank-list span{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-weight:800;font-size:11px}.team-rank-list em{font-style:normal;color:var(--muted)}.team-finance-tab .team-panel-title{align-items:flex-start}@media(max-width:900px){.team-performance-tab .team-period-controls,.team-finance-tab .team-advance-form{grid-template-columns:minmax(0,1fr)}}.team-security-tab .team-permission-chips{display:flex;flex-wrap:wrap;gap:8px;max-height:180px;overflow:auto}.team-security-tab .team-permission-chips span{display:inline-flex;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:999px;padding:7px 10px;font-size:11px;color:#e8ecf3}.team-action-log-list{display:grid;gap:8px;max-height:280px;overflow:auto;padding-inline-end:4px}.team-log-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px;padding:10px 12px;align-items:center}.team-log-row strong{font-size:11.5px;color:#fff}.team-log-row span{font-size:11px;color:var(--muted);white-space:nowrap}.team-log-row em{font-style:normal;color:#cfd4dd;font-size:11px;grid-column:1/-1}.team-log-row small{color:var(--muted);font-size:10px}.team-log-row.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.07)}@media(max-width:900px){.team-log-row{grid-template-columns:minmax(0,1fr)}.team-log-row span{white-space:normal}}.team-development-tab .team-panel-title{align-items:center}.team-development-kpis .mini-stat span{display:block;margin-top:5px;font-size:11px;color:var(--muted)}.team-dev-list,.team-goal-list{display:grid;gap:10px}.team-dev-row,.team-goal-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);padding:12px}.team-dev-row strong,.team-goal-row strong{display:block;color:#fff;margin-bottom:4px}.team-dev-row span,.team-goal-row span{display:block;color:var(--muted);font-size:11.5px;line-height:1.5}.team-dev-row em,.team-goal-row em{display:block;color:#cfd3da;font-size:11px;margin-top:5px;font-style:normal}.team-dev-row.high{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.07)}.team-dev-row.urgent{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}.team-dev-row.low{opacity:.88}.team-dev-side{display:flex;flex-direction:column;gap:7px;align-items:flex-end;min-width:108px}.team-dev-side .btn.small{width:100%}.team-goal-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:10px 0 4px}.team-goal-bar i{display:block;height:100%;background:linear-gradient(90deg,#aeb6c2,#f8fafc);border-radius:999px}.compact-dev-modal{width:min(680px,96vw)!important}.compact-dev-modal textarea{min-height:88px}.badge.open,.badge.in_progress{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fbbf24}.badge.done,.badge.closed{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.35);color:#86efac}.badge.cancelled{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fca5a5}@media(max-width:900px){.team-dev-row,.team-goal-row{grid-template-columns:minmax(0,1fr)}.team-dev-side{align-items:stretch}.team-development-kpis{grid-template-columns:minmax(0,1fr)!important}}.modal.open{display:flex!important;align-items:center!important;justify-content:center!important;padding:22px!important;background:rgba(0,0,0,.78)!important;backdrop-filter:blur(10px);z-index:160!important}.modal .modal-card{background:linear-gradient(180deg,#171a21 0%,#101218 100%)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 30px 100px rgba(0,0,0,.72)!important;color:var(--text)!important}.team-employee-modal{width:min(820px,92vw)!important;max-height:84vh!important;padding:18px!important;overflow:auto!important;isolation:isolate}.team-employee-modal .compact-invoice-head{position:sticky;top:-18px;z-index:5;background:linear-gradient(180deg,#171a21 0%,#141720 100%)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;margin:-18px -18px 14px!important;padding:16px 18px 14px!important}.team-employee-modal .grid.grid-2{gap:10px!important}.team-employee-modal label{gap:6px!important}.team-employee-modal input,.team-employee-modal select,.team-employee-modal textarea{padding:10px 11px!important;min-height:40px!important}.team-employee-modal .service-menu-title{margin:14px 0 4px!important}.team-employee-modal .employee-service-menu{max-height:235px!important;overflow:auto!important;background:rgba(0,0,0,.22)!important}.team-employee-modal .electronic-menu-section h4{position:sticky;top:0;z-index:2;background:#13161d;padding:7px 4px;border-radius:10px}.team-employee-modal .electronic-menu-item{padding:9px 10px!important;margin-bottom:6px!important}.team-employee-modal .sticky-actions{position:sticky!important;bottom:-18px!important;z-index:6;margin:14px -18px -18px!important;padding:12px 18px!important;background:linear-gradient(180deg,rgba(16,18,24,.92),#101218)!important;border-top:1px solid rgba(255,255,255,.10)!important;justify-content:flex-start!important}.compact-dev-modal,.compact-customer-modal,.compact-invoice-modal,.closed-sale-modal,.edit-sale-modal{background:linear-gradient(180deg,#171a21 0%,#101218 100%)!important}@media(max-width:760px){.modal.open{padding:10px!important;align-items:flex-start!important}.team-employee-modal{width:98vw!important;max-height:94vh!important;padding:14px!important}.team-employee-modal .compact-invoice-head{top:-14px;margin:-14px -14px 12px!important;padding:14px!important}.team-employee-modal .grid.grid-2{grid-template-columns:minmax(0,1fr)!important}.team-employee-modal .sticky-actions{bottom:-14px!important;margin:12px -14px -14px!important;padding:12px 14px!important}}.eyebrow{display:inline-flex;font-size:11px;color:#d8dde6;background:rgba(255,255,255,.07);border:1px solid var(--line);padding:6px 10px;border-radius:999px}.reports-hero-actions,.reports-filter-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.reports-section-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.reports-section-head h3{margin:0 0 6px}.reports-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.reports-insights-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.report-list-card h3{margin-top:0}.report-bar-row{display:grid;gap:7px;margin:12px 0}.report-bar-label{display:flex;justify-content:space-between;gap:10px;font-size:11.5px}.report-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid rgba(255,255,255,.06)}.report-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#d8dde6,#8f96a3)}.report-detail-card{margin-top:12px}.table-wrap{width:100%;overflow:auto;border-radius:16px;border:1px solid var(--line)}.reports-table{min-width:860px;background:rgba(0,0,0,.12)}.reports-table th{background:rgba(255,255,255,.04);font-size:11px;color:#d7dce4;white-space:nowrap}.reports-table td{font-size:11.5px}.reports-loading{min-height:120px;display:grid;place-items:center;color:var(--muted)}@media(max-width:1200px){.reports-filter-grid,.reports-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reports-insights-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:700px){.reports-filter-grid,.reports-kpi-grid{grid-template-columns:minmax(0,1fr)}.reports-hero-actions,.reports-filter-actions{width:100%}.reports-hero-actions .btn,.reports-filter-actions .btn{flex:1}}@media print{.reports-filter-card,.reports-presets,.reports-hero-actions,.topbar,.sidebar{display:none!important}.main{max-width:none!important;padding:0!important}.card{box-shadow:none!important}}.reports-finance-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:12px;margin-top:12px}.report-finance-card,.report-aging-card{min-height:260px}.finance-day-list{display:grid;gap:10px;max-height:360px;overflow:auto;padding-inline-end:4px}.finance-day-row{display:grid;grid-template-columns:100px repeat(3,1fr);gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.finance-day-row>strong{font-size:11px;color:#e8edf5;white-space:nowrap}.finance-day-row>div{display:grid;gap:5px;min-width:0}.finance-day-row span{font-size:10px;color:var(--muted);white-space:nowrap}.finance-day-row b{font-size:11px;white-space:nowrap}.finance-day-row i{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.5)}.aging-list{display:grid;gap:12px}.aging-row{display:grid;gap:7px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.aging-row>div:first-child{display:flex;justify-content:space-between;gap:12px;align-items:center}.aging-row span{color:var(--muted);font-size:11px}.report-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.reports-table.compact{min-width:520px}.reports-table.compact th,.reports-table.compact td{font-size:11.5px}@media(max-width:1200px){.reports-finance-grid,.report-split{grid-template-columns:minmax(0,1fr)}.finance-day-row{grid-template-columns:minmax(0,1fr)}}@media print{.reports-finance-grid,.report-split{grid-template-columns:minmax(0,1fr)}.finance-day-list{max-height:none;overflow:visible}}.reports-op-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.reports-op-grid .report-wide-card{grid-column:span 2;padding:16px;overflow:hidden}.report-peak-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.report-mini-bars{display:grid;gap:10px;margin-top:10px}.report-wide-card h3{margin-top:0}@media(max-width:1100px){.reports-op-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reports-op-grid .report-wide-card{grid-column:span 2}.report-peak-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:720px){.reports-op-grid{grid-template-columns:minmax(0,1fr)}.reports-op-grid .report-wide-card{grid-column:span 1}}.reports-saved-modal{width:min(940px,96vw)!important;background:#121419!important}.saved-report-list{display:grid;gap:12px;margin-top:14px;max-height:62vh;overflow:auto;padding-inline-end:4px}.saved-report-card{display:grid;grid-template-columns:1.2fr 1fr auto;gap:14px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:14px}.saved-report-card strong{font-size:14.5px}.saved-report-stats{display:grid;gap:6px;color:var(--muted);font-size:11.5px}.saved-report-stats b{color:#fff}.compact-saved-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin:14px 0}.saved-report-pre{white-space:pre-wrap;max-height:260px;overflow:auto;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:14px;padding:12px;color:#d8dee9}body.printing-report .sidebar,body.printing-report .topbar,body.printing-report .reports-filter-card,body.printing-report .reports-presets,body.printing-report .reports-hero-actions{display:none!important}body.printing-report .main{max-width:none!important;padding:0!important}body.printing-report .reports-page{background:#fff!important;color:#000!important}body.printing-report .card{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #ddd!important}body.printing-report .muted{color:#555!important}body.printing-report .table th,body.printing-report .table td{color:#000!important;border-color:#ddd!important}@media(max-width:900px){.saved-report-card{grid-template-columns:minmax(0,1fr)}.compact-saved-kpis{grid-template-columns:1fr 1fr}}.reports-management-grid{display:grid;grid-template-columns:1.1fr .9fr 1.2fr;gap:14px;margin:16px 0}.report-health-card,.report-forecast-card,.report-alert-card{min-height:180px}.health-meter{height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;margin:12px 0}.health-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e)}.forecast-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:12px 0}.forecast-row:last-child{border-bottom:0}.management-alert{border:1px solid var(--line);border-radius:14px;padding:11px 12px;margin:8px 0;background:rgba(255,255,255,.035);display:grid;gap:4px}.management-alert strong{font-size:12.5px}.management-alert span{color:var(--muted);font-size:11px;line-height:1.45}.management-alert.warning{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.08)}.management-alert.danger{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.08)}.management-alert.info{border-color:rgba(148,163,184,.38);background:rgba(148,163,184,.07)}.reports-management-detail{display:grid;gap:14px}@media(max-width:1100px){.reports-management-grid{grid-template-columns:minmax(0,1fr)}}.comparison-range-card{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important}.comparison-range-card h3{margin:8px 0 4px;font-size:20px}.reports-comparison-detail{display:grid;gap:14px}.compare-delta{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 9px;font-weight:850;font-size:11px;white-space:nowrap}.compare-delta.good{color:#86efac;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.28)}.compare-delta.bad{color:#fca5a5;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.30)}.comparison-mini-bar{display:grid;gap:7px;padding:12px 0;border-bottom:1px solid var(--line)}.comparison-mini-bar:last-child{border-bottom:0}.comparison-mini-bar>div:first-child,.comparison-mini-bar>div:nth-child(3){display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11.5px}.comparison-mini-bar span{color:var(--muted)}.compare-bar-line{height:8px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.055);border-radius:999px;overflow:hidden}.compare-bar-line i{display:block;height:100%;border-radius:999px}.compare-bar-line.current i{background:linear-gradient(90deg,#d8dde6,#8f96a3)}.compare-bar-line.previous i{background:rgba(148,163,184,.55)}.comparison-trend-card{min-height:245px}.comparison-trend-bars{height:150px;display:flex;align-items:end;gap:7px;border:1px solid var(--line);border-radius:18px;padding:14px 12px 28px;background:rgba(0,0,0,.12);position:relative;overflow:hidden}.comparison-trend-bars>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:10px}.comparison-trend-bars i{width:100%;max-width:18px;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg,#f8fafc,#8f96a3);display:block}.comparison-trend-bars small{position:absolute;bottom:7px;font-size:10px;color:var(--muted);transform:rotate(-35deg);transform-origin:center}@media(max-width:900px){.comparison-range-card{grid-template-columns:minmax(0,1fr)}.comparison-trend-bars{gap:4px}.comparison-trend-bars small{display:none}}.executive-pack{display:grid;gap:16px}.executive-cover{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important}.executive-score{min-width:138px;min-height:138px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 8px rgba(255,255,255,.025)}.executive-score b{font-size:38px;line-height:1}.executive-score span{margin-top:-22px;color:var(--muted)}.executive-score small{margin-top:-18px;color:var(--muted);font-size:11px}.executive-decision{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px;margin:8px 0;background:rgba(255,255,255,.035)}.executive-decision.good{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.08)}.executive-decision.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}.executive-decision.bad{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}.executive-summary-pre{white-space:pre-wrap;max-height:280px;overflow:auto;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--line);padding:14px;color:#fff;line-height:1.7}@media(max-width:760px){.executive-cover{display:grid}.executive-score{margin:auto}}.report-archive-panel{display:grid;gap:16px}.reports-schedule-modal{width:min(760px,96vw)!important}.schedule-card{border-inline-start:4px solid rgba(96,211,148,.7)}.schedule-card.paused{border-inline-start-color:rgba(255,209,102,.7);opacity:.88}.saved-report-card .row{margin-top:10px}.saved-report-card .btn.danger{background:rgba(255,107,107,.12)!important;color:#ffb4b4!important;border:1px solid rgba(255,107,107,.35)!important}.reports-hero-actions{align-items:center}.compact-saved-kpis .report-kpi{min-height:unset}@media(max-width:900px){.reports-schedule-modal .grid-2{grid-template-columns:minmax(0,1fr)!important}.reports-hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}}.reports-governance-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:16px;align-items:start}.report-permission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:12px}.report-perm-card{border:1px solid var(--line);border-radius:16px;padding:13px;background:rgba(255,255,255,.035);display:grid;gap:7px;min-height:130px}.report-perm-card strong{color:#fff;font-size:12.5px}.report-perm-card span{font-size:11px;color:var(--muted);direction:ltr;text-align:left}body[dir=rtl] .report-perm-card span{text-align:right}.report-perm-card b{width:max-content;border-radius:999px;padding:5px 9px;font-size:11px;border:1px solid var(--line)}.report-perm-card.allowed{border-color:rgba(74,222,128,.28);background:rgba(74,222,128,.06)}.report-perm-card.allowed b{color:#86efac;background:rgba(74,222,128,.10);border-color:rgba(74,222,128,.32)}.report-perm-card.blocked{border-color:rgba(239,68,68,.26);background:rgba(239,68,68,.045)}.report-perm-card.blocked b{color:#fca5a5;background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30)}.reports-table code{display:block;max-width:460px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d8dce4;background:rgba(0,0,0,.22);border:1px solid var(--line);border-radius:10px;padding:6px 8px;font-size:10px}@media(max-width:1100px){.reports-governance-grid{grid-template-columns:minmax(0,1fr)}}.reports-targets-panel{display:grid;gap:16px}.report-target-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.report-target-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:14px;display:grid;gap:12px}.report-target-card.hit{border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.06)}.report-target-card.watch{border-color:rgba(245,158,11,.32);background:rgba(245,158,11,.045)}.target-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.target-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.target-values div{border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.16);padding:10px}.target-values span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.target-values strong{display:block;font-size:13.5px;color:#fff}.target-progress{height:9px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}.target-progress i{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,rgba(207,211,218,.7),rgba(255,255,255,.95))}@media(max-width:700px){.target-values{grid-template-columns:minmax(0,1fr)}.report-target-list{grid-template-columns:minmax(0,1fr)}}.notifications-page{display:grid;gap:16px}.notifications-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.notifications-hero h2{margin:4px 0 8px;font-size:clamp(26px,3vw,40px)}.section-kicker{display:inline-flex;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.04em}.notification-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.notification-filter-card{display:grid;gap:14px}.notification-tabs button.active{background:rgba(207,211,218,.14);border-color:rgba(207,211,218,.35)}.enhanced-notification-list{display:grid;gap:10px;margin-top:0}.notification-card{width:100%;display:grid;grid-template-columns:48px 1fr;gap:12px;text-align:inherit;color:#fff;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:14px;cursor:pointer;align-items:flex-start}.notification-card:hover{background:rgba(255,255,255,.065);border-color:rgba(207,211,218,.28)}.notification-card.unread{background:rgba(207,211,218,.075);border-color:rgba(207,211,218,.26)}.notification-card.high,.notification-card.danger,.notification-card.warning{border-color:rgba(239,68,68,.38);background:rgba(239,68,68,.08)}.notification-icon{width:38px;height:38px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:18px}.notification-icon.large{width:58px;height:58px;border-radius:19px;font-size:24.5px;flex:0 0 auto}.notification-main{display:grid;gap:7px}.notification-title-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.notification-title-row strong{font-size:13.5px}.notification-title-row em{font-style:normal;color:var(--muted);font-size:11px;white-space:nowrap}.notification-message{color:#d8dde6;line-height:1.5}.notification-meta{display:flex;gap:6px;flex-wrap:wrap}.notification-meta b{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:rgba(0,0,0,.16);color:#cfd3da}.unread-dot{color:#fff!important;background:rgba(207,211,218,.15)!important}.notification-empty{text-align:center;padding:34px}.upgraded-notification-detail{width:min(980px,96vw);background:#12141a!important}.notification-detail-head{display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}.notification-detail-head h2{margin:4px 0 4px}.notification-detail-head .drawer-close{margin-inline-start:auto}.notif-message-box,.notif-related-card{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:14px;margin-top:14px}.notif-message-box h3,.notif-related-card h3{margin-top:0}.notification-detail-modal pre{white-space:pre-wrap;max-height:260px;overflow:auto;background:rgba(0,0,0,.25);padding:12px;border-radius:12px}.notification-detail-actions{margin-top:14px;justify-content:flex-end}.btn.danger{border-color:rgba(239,68,68,.35)!important;color:#fff!important;background:rgba(239,68,68,.12)!important}@media(max-width:1100px){.notification-stat-grid{grid-template-columns:repeat(3,1fr)}.notifications-hero{display:grid}}@media(max-width:680px){.notification-stat-grid{grid-template-columns:repeat(2,1fr)}.notification-card{grid-template-columns:minmax(0,1fr)}.notification-title-row{display:grid}.notification-icon{display:none}}.notifications-v2 .notifications-hero{border-color:rgba(207,211,218,.16)}.notification-card-shell{display:grid;grid-template-columns:38px 1fr;gap:8px;align-items:stretch}.notification-card-shell .notification-card{height:100%}.notification-select{display:grid;place-items:center;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);cursor:pointer}.notification-select input{width:18px;height:18px}.notification-bulk-bar{border:1px dashed rgba(207,211,218,.22);border-radius:16px;padding:10px 12px;background:rgba(255,255,255,.025)}.notification-bulk-bar .bulk-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.muted-notification{opacity:.72;filter:saturate(.75)}.notification-pref-modal{width:min(860px,96vw);background:#12141a!important}.pref-section{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:14px;margin-bottom:14px}.pref-section h3{margin-top:0}.pref-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.pref-check{display:flex;flex-direction:row;align-items:center;gap:10px;border:1px solid var(--line);border-radius:14px;padding:11px 12px;background:rgba(0,0,0,.12);color:#fff}.pref-check input{width:18px;height:18px}@media(max-width:680px){.notification-card-shell{grid-template-columns:minmax(0,1fr)}.notification-select{display:none}.notification-bulk-bar .bulk-inner{display:grid}}.notification-rules-modal{width:min(1080px,96vw)}.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:16px}.notification-rule-card{display:grid;gap:12px;border-radius:20px}.notification-rule-card.disabled{opacity:.62}.rule-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rule-metrics>div{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);padding:10px;color:var(--muted);font-size:11px}.rule-metrics strong{color:#fff;font-size:12.5px}.notification-rule-card .badge.warning{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.12)}.notification-rule-card .badge.high,.notification-rule-card .badge.danger{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.12)}.compact-modal{width:min(760px,94vw)!important}@media(max-width:720px){.rule-metrics{grid-template-columns:minmax(0,1fr)}.rules-grid{grid-template-columns:minmax(0,1fr)}}.notification-templates-modal{width:min(1120px,96vw)}.notification-delivery-modal{width:min(1180px,96vw)}.notification-channel-list,.notification-template-list{display:grid;gap:10px;max-height:58vh;overflow:auto;padding-inline-end:4px}.notification-channel-card,.notification-template-card{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:16px;padding:12px;display:grid;gap:10px}.notification-channel-card{grid-template-columns:1fr auto auto;align-items:center}.notification-channel-card.disabled,.notification-template-card .disabled{opacity:.72}.notification-template-card p{line-height:1.65;margin:4px 0}.notification-delivery-modal .table td,.notification-delivery-modal .table th{font-size:11.5px}@media(max-width:860px){.notification-channel-card{grid-template-columns:minmax(0,1fr)}.notification-templates-modal .grid-2{grid-template-columns:minmax(0,1fr)!important}}.notification-broadcast-modal textarea{min-height:118px;resize:vertical}.notification-broadcast-modal select[multiple]{min-height:150px;background:rgba(0,0,0,.26)}.notification-broadcast-history{width:min(1040px,96vw)}.notification-broadcast-list{display:grid;gap:12px;margin-top:14px;max-height:64vh;overflow:auto;padding-inline-end:4px}.notification-broadcast-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px!important}.notification-broadcast-row h3{margin:10px 0 6px;font-size:18px}.notification-broadcast-row p{margin:0 0 10px;line-height:1.65}.notification-broadcast-row .row{justify-content:flex-end;min-width:190px}.notification-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.notification-meta b{display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:999px;padding:5px 9px;font-size:11px;color:var(--muted)}.badge.success{color:var(--success);border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.10)}.badge.info{color:#93c5fd;border-color:rgba(147,197,253,.35);background:rgba(147,197,253,.10)}.badge.warning,.badge.high{color:var(--warning);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}.badge.danger{color:var(--danger);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}@media(max-width:780px){.notification-broadcast-row{display:grid}.notification-broadcast-row .row{justify-content:flex-start;min-width:0}.notification-broadcast-modal .grid-2{grid-template-columns:minmax(0,1fr)!important}}.notification-maintenance-modal{width:min(980px,96vw);background:#121419!important}.notification-maintenance-modal .mini-stat h2{margin:.35rem 0 0}.settings-v1-page{display:grid;gap:16px}.settings-v1-hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;background:linear-gradient(135deg,rgba(26,26,26,.14),rgba(255,255,255,.035))}.settings-v1-hero h2{font-size:clamp(28px,4vw,48px);margin:.2rem 0}.settings-v1-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.section-kicker{display:inline-flex;font-size:11px;font-weight:900;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}.settings-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.settings-kpi-grid .mini-stat span,.settings-sub-kpis .mini-stat{font-size:11px;color:var(--muted)}.settings-kpi-grid .mini-stat strong{display:block;margin-top:6px;font-size:14.5px}.settings-v1-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}.settings-v1-sidebar{position:sticky;top:18px;display:grid;gap:12px}.settings-group-tabs{display:flex;gap:6px;flex-wrap:wrap}.settings-group-tabs button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:7px 9px;cursor:pointer;font-size:11px}.settings-group-tabs button.active{background:var(--accent);color:#111;border-color:var(--accent);font-weight:900}.settings-cards-list{display:grid;gap:8px;max-height:63vh;overflow:auto;padding-inline-end:3px}.settings-nav-card{width:100%;display:grid;grid-template-columns:38px 1fr;gap:10px;text-align:inherit;align-items:start;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:16px;padding:11px;cursor:pointer}.settings-nav-card:hover,.settings-nav-card.selected{border-color:var(--accent);background:rgba(26,26,26,.12)}.settings-card-icon{width:31px;height:31px;border-radius:12px;background:rgba(26,26,26,.13);display:grid;place-items:center}.settings-nav-card strong{display:block}.settings-nav-card small{display:block;color:var(--muted);line-height:1.45;margin-top:3px}.settings-section-card{min-height:520px}.settings-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}.settings-section-head h2{margin:0 0 6px}.settings-save-row{display:flex;justify-content:flex-end;margin-top:16px}.settings-sub-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.settings-branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.settings-branch-card{cursor:default}.table-wrap{overflow:auto}.error-card{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.08)}@media(max-width:1200px){.settings-kpi-grid{grid-template-columns:repeat(3,1fr)}.settings-v1-layout{grid-template-columns:minmax(0,1fr)}.settings-v1-sidebar{position:static}.settings-cards-list{max-height:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}@media(max-width:780px){.settings-v1-hero,.settings-section-head{display:block}.settings-kpi-grid,.settings-sub-kpis{grid-template-columns:minmax(0,1fr)}.settings-v1-actions{justify-content:flex-start;margin-top:10px}}.settings-maintenance-tile{display:grid;gap:12px;align-content:start}.danger-zone-soft{border-color:rgba(255,107,107,.28);background:rgba(255,107,107,.055)}.mini-head{padding-bottom:8px;margin-bottom:10px}.settings-collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}.settings-collection-pill{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px;padding:10px}.settings-collection-pill span{color:var(--muted);font-size:11px}.settings-collection-pill strong{font-size:14.5px}.data-health-warning{border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;margin-bottom:8px;background:rgba(255,255,255,.04)}.data-health-warning p{margin:.35rem 0 0;color:var(--muted)}.data-health-warning.danger{border-color:rgba(255,107,107,.4);background:rgba(255,107,107,.08)}.data-health-warning.warning{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.07)}.data-health-warning.info{border-color:rgba(96,165,250,.32);background:rgba(96,165,250,.07)}.good-notice{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.08)}.data-health-kpis .mini-stat strong{font-size:20px}.settings-appearance-layout,.settings-print-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}.appearance-live-preview{position:sticky;top:16px;overflow:hidden}.appearance-preview-top{--previewAccent:#1A1A1A;display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:linear-gradient(135deg,var(--previewAccent),rgba(255,255,255,.08));color:#111;margin-bottom:12px}.appearance-preview-logo{width:58px;height:58px;border-radius:18px;background:rgba(0,0,0,.2);display:grid;place-items:center;font-weight:900;color:#fff;overflow:hidden}.appearance-preview-logo img{width:100%;height:100%;object-fit:cover}.appearance-preview-top h3{margin:0;font-size:20px}.appearance-preview-top p{margin:4px 0 0;color:rgba(0,0,0,.7)}.appearance-preview-side{display:grid;gap:8px;margin-bottom:12px}.appearance-preview-side span{display:block;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:14px;padding:9px}.appearance-preview-side span.active{border-color:var(--accent);background:rgba(26,26,26,.13)}.appearance-preview-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.04)}.appearance-preview-card p{color:var(--muted);margin:.35rem 0 0}.appearance-fields,.print-fields{align-content:start}.invoice-template-preview{position:sticky;top:16px;border:1px solid rgba(0,0,0,.15);background:#fff;color:#111;border-radius:12px;padding:18px;box-shadow:0 18px 50px rgba(0,0,0,.25);min-height:420px;overflow:hidden}.invoice-template-preview.thermal-80,.invoice-template-preview.thermal-58{max-width:310px;margin:auto;font-size:11px}.invoice-template-watermark{position:absolute;inset:38% auto auto 50%;transform:translate(-50%,-50%) rotate(-22deg);font-size:43px;font-weight:900;color:rgba(0,0,0,.055);white-space:nowrap}.invoice-template-head{display:flex;gap:12px;align-items:center;border-bottom:1px dashed #bbb;padding-bottom:12px;margin-bottom:12px;position:relative;z-index:1}.invoice-template-logo{width:48px;height:48px;border-radius:14px;background:#111;color:#fff;display:grid;place-items:center;font-weight:900}.invoice-template-head h3{margin:0}.invoice-template-head p{margin:3px 0 0;color:#666}.invoice-template-meta{display:grid;gap:4px;color:#333;font-size:11px;margin-bottom:12px;position:relative;z-index:1}.invoice-template-preview table{width:100%;border-collapse:collapse;margin:12px 0;position:relative;z-index:1}.invoice-template-preview td{border-bottom:1px solid #eee;padding:8px 4px}.invoice-template-preview td:last-child{text-align:end}.invoice-template-total{display:flex;justify-content:space-between;border-top:2px solid #111;padding-top:10px;margin-top:10px;position:relative;z-index:1}.invoice-template-qr{width:54px;height:54px;border:2px solid #111;margin:12px auto;display:grid;place-items:center;font-weight:900}.invoice-template-footer{text-align:center;margin:12px 0 0;position:relative;z-index:1}.invoice-template-signature{margin-top:22px;border-top:1px dashed #aaa;padding-top:10px;position:relative;z-index:1}@media(max-width:1100px){.settings-appearance-layout,.settings-print-layout{grid-template-columns:minmax(0,1fr)}.appearance-live-preview,.invoice-template-preview{position:static}}.settings-integration-layout{display:grid;gap:16px}.integration-status-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.integration-status-card{display:grid;gap:5px;border-color:rgba(255,255,255,.1)}.integration-status-card span{color:var(--muted);font-size:11px}.integration-status-card strong{font-size:14.5px}.integration-status-card.ready{border-color:rgba(46,204,113,.34);background:rgba(46,204,113,.07)}.integration-status-card.off{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.035)}.integration-status-card small{color:var(--muted)}.settings-integration-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:10px}.settings-integration-tabs button{border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:999px;padding:9px 14px;cursor:pointer;font-weight:700}.settings-integration-tabs button.active{background:var(--accent);color:#111;border-color:var(--accent)}.integration-tab-panel{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:18px;padding:16px}.webhook-list{display:grid;gap:8px}.webhook-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.035)}.system-link-preview{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px;margin-bottom:8px;background:rgba(255,255,255,.035)}.system-link-preview code{white-space:nowrap;overflow:auto;color:var(--accent)}@media(max-width:1000px){.integration-status-grid{grid-template-columns:repeat(2,1fr)}.system-link-preview{grid-template-columns:minmax(0,1fr)}}@media(max-width:600px){.integration-status-grid{grid-template-columns:minmax(0,1fr)}}.launch-readiness-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.045);margin-bottom:14px}.launch-readiness-hero h2{font-size:47px;margin:.2rem 0}.launch-readiness-hero.good{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.07)}.launch-readiness-hero.warn{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.07)}.launch-readiness-hero.danger{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)}.launch-score-ring{--score:0;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--score)*1%),rgba(255,255,255,.08) 0);position:relative}.launch-score-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#11151d}.launch-score-ring strong{position:relative;z-index:1;font-size:21.5px}.launch-kpis .mini-stat strong{font-size:20px}.launch-panel{min-height:100%}.launch-checklist{display:grid;gap:10px}.launch-check-item{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.035)}.launch-check-item label{display:flex;align-items:flex-start;gap:10px;margin:0}.launch-check-item small{display:block;color:var(--muted);margin-top:3px}.launch-check-item.done{border-color:rgba(46,204,113,.32);background:rgba(46,204,113,.065)}.launch-check-item.pending.critical{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)}.launch-check-item.pending.normal{border-color:rgba(255,193,7,.28);background:rgba(255,193,7,.055)}@media(max-width:760px){.launch-readiness-hero{display:block}.launch-score-ring{margin-top:14px}}.audit-kpis .mini-stat strong,.cleanup-kpis .mini-stat strong{font-size:20px}.settings-audit-filters{border-color:rgba(26,26,26,.22)}.settings-audit-table .audit-detail-code{white-space:normal;display:block;max-width:520px;color:var(--muted);font-size:11px}.cleanup-suggestions{display:grid;gap:10px}.cleanup-suggestion{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:13px;background:rgba(255,255,255,.035)}.cleanup-suggestion h4{margin:0 0 4px}.cleanup-suggestion.low{border-color:rgba(46,204,113,.24);background:rgba(46,204,113,.055)}.cleanup-suggestion.medium{border-color:rgba(255,193,7,.28);background:rgba(255,193,7,.055)}.cleanup-suggestion .badge{margin-inline-end:5px}@media(max-width:760px){.cleanup-suggestion{display:block}.cleanup-suggestion button{margin-top:10px}}.profiles-kpis .mini-stat strong{font-size:20px}.settings-profile-create,.settings-import-card{min-height:100%}.profiles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}.settings-profile-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:14px;display:grid;gap:12px}.settings-profile-card h4{margin:0}.settings-profile-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:11px}.profile-actions{gap:6px}.settings-import-preview{width:min(980px,96vw)}.settings-import-preview code{white-space:normal;color:var(--muted);font-size:11px}@media(max-width:720px){.profile-actions{display:grid}.profile-actions .btn{width:100%}}.settings-localization-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}.localization-preview{position:sticky;top:16px}.localization-preview-card{display:grid;gap:10px;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.035);margin:12px 0}.localization-preview-card div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:8px}.localization-preview-card div:last-child{border-bottom:0;padding-bottom:0}.localization-preview-card span{color:var(--muted);font-size:11px}.custom-field-kpis .mini-stat strong{font-size:20px}.custom-field-toolbar{border-color:rgba(26,26,26,.22)}.custom-fields-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:16px}.custom-fields-column h3{margin-top:0}.custom-field-list{display:grid;gap:10px}.custom-field-card{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);padding:12px;display:grid;gap:8px}.custom-field-card.inactive{opacity:.6}.custom-field-options{display:flex;gap:6px;flex-wrap:wrap}.custom-field-options span{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:4px 7px;color:var(--muted)}.custom-field-modal{width:min(900px,96vw)}@media(max-width:1000px){.settings-localization-layout{grid-template-columns:minmax(0,1fr)}.localization-preview{position:static}}.settings-privacy-layout,.settings-retention-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}.privacy-preview-card,.retention-preview-panel{position:sticky;top:16px}.privacy-document-preview{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);padding:16px;line-height:1.75}.privacy-document-preview h3,.privacy-document-preview h4{margin:.2rem 0 .6rem}.privacy-document-preview p{color:var(--muted);margin:.4rem 0 1rem}.privacy-consent-line{border:1px dashed rgba(26,26,26,.45);border-radius:12px;padding:10px;margin-top:8px;color:var(--accent)}.privacy-status-list{display:grid;gap:8px;margin-top:12px}.privacy-status-list span{border-radius:999px;padding:8px 10px;font-size:11px;border:1px solid var(--line)}.privacy-status-list .ok{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.08)}.privacy-status-list .warn{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.08)}.privacy-full-preview{width:min(980px,96vw)}.retention-kpis .mini-stat strong{font-size:20px}.retention-preview-list{display:grid;gap:8px;margin-top:12px}.retention-preview-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);padding:10px}.retention-preview-row small{grid-column:1 / -1;color:var(--muted)}.retention-preview-row.warning{border-color:rgba(255,193,7,.28);background:rgba(255,193,7,.055)}.retention-preview-row.info{border-color:rgba(96,165,250,.25);background:rgba(96,165,250,.05)}@media(max-width:1000px){.settings-privacy-layout,.settings-retention-layout{grid-template-columns:minmax(0,1fr)}.privacy-preview-card,.retention-preview-panel{position:static}}.setup-wizard-hero{border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.04);display:grid;gap:14px;margin-bottom:16px}.setup-wizard-hero h2{font-size:43px;margin:.2rem 0}.setup-wizard-hero.good{border-color:rgba(46,204,113,.32);background:rgba(46,204,113,.065)}.setup-wizard-hero.warn{border-color:rgba(255,193,7,.32);background:rgba(255,193,7,.065)}.setup-wizard-hero.danger{border-color:rgba(255,107,107,.32);background:rgba(255,107,107,.065)}.setup-progress-bar{height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.setup-progress-bar span{display:block;height:100%;background:var(--accent);border-radius:999px}.setup-wizard-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px}.setup-steps-list{display:grid;gap:8px;align-content:start}.setup-steps-list button{display:grid;grid-template-columns:34px 1fr;gap:10px;text-align:inherit;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff;border-radius:16px;padding:10px;cursor:pointer}.setup-steps-list button.active{border-color:var(--accent);background:rgba(26,26,26,.12)}.setup-steps-list button.done span{background:rgba(46,204,113,.18);color:#7ee2a8}.setup-steps-list button span{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:900}.setup-steps-list small{display:block;color:var(--muted)}.setup-step-checks{display:grid;gap:10px;margin-bottom:16px}.setup-subcheck{display:grid;grid-template-columns:34px 1fr;gap:10px;border:1px solid var(--line);border-radius:16px;padding:12px;background:rgba(255,255,255,.035)}.setup-subcheck span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900}.setup-subcheck.done{border-color:rgba(46,204,113,.32);background:rgba(46,204,113,.06)}.setup-subcheck.pending{border-color:rgba(255,193,7,.28);background:rgba(255,193,7,.05)}.setup-subcheck.done span{background:rgba(46,204,113,.18);color:#7ee2a8}.setup-subcheck.pending span{background:rgba(255,193,7,.15);color:#ffd36b}.setup-subcheck small{display:block;color:var(--muted);margin-top:3px}.setup-step-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.help-kpis .mini-stat strong{font-size:20px}.help-toolbar{border-color:rgba(26,26,26,.22)}.help-articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin-top:16px}.help-article-card{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);padding:14px;display:grid;gap:10px}.help-article-card.draft{opacity:.7;border-style:dashed}.help-article-card h3{margin:0}.help-tags{display:flex;gap:6px;flex-wrap:wrap}.help-tags span{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:4px 7px;color:var(--muted)}.help-article-view,.help-article-modal{width:min(900px,96vw)}.help-article-body{line-height:1.8;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:16px;padding:16px}@media(max-width:980px){.setup-wizard-layout{grid-template-columns:minmax(0,1fr)}}.automation-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;background:linear-gradient(135deg,rgba(26,26,26,.13),rgba(255,255,255,.035))}.automation-hero h2{font-size:41.5px;margin:.2rem 0}.automation-kpis .mini-stat strong{font-size:20px}.automation-job-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}.automation-job-card{display:grid;gap:12px;border-color:rgba(255,255,255,.1)}.automation-job-card.enabled{border-color:rgba(46,204,113,.28);background:rgba(46,204,113,.055)}.automation-job-card.disabled{opacity:.86}.automation-job-card h3{margin:.2rem 0}.automation-job-meta{display:grid;gap:5px;color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.035)}.automation-actions{gap:7px}.automation-details-modal{width:min(760px,96vw)}@media(max-width:720px){.automation-hero{display:block}.automation-hero .row{margin-top:12px}.automation-job-grid{grid-template-columns:minmax(0,1fr)}}.diagnostics-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.04);margin-bottom:16px}.diagnostics-hero h2{font-size:47px;margin:.2rem 0}.diagnostics-hero.good{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.07)}.diagnostics-hero.warn{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.07)}.diagnostics-hero.danger{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)}.diagnostics-ring{--score:0;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) calc(var(--score)*1%),rgba(255,255,255,.08) 0);position:relative}.diagnostics-ring:after{content:"";position:absolute;inset:10px;border-radius:50%;background:#11151d}.diagnostics-ring strong{position:relative;z-index:1;font-size:21.5px}.diagnostics-kpis .mini-stat strong{font-size:20px}.diagnostics-panel{min-height:100%}.diagnostics-check-list{display:grid;gap:9px}.diagnostics-check{display:grid;grid-template-columns:34px 1fr;gap:10px;border:1px solid var(--line);border-radius:16px;padding:11px;background:rgba(255,255,255,.035)}.diagnostics-check>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900}.diagnostics-check.ok{border-color:rgba(46,204,113,.28);background:rgba(46,204,113,.055)}.diagnostics-check.bad,.diagnostics-check.danger{border-color:rgba(255,107,107,.34);background:rgba(255,107,107,.07)}.diagnostics-check.warn,.diagnostics-check.warning{border-color:rgba(255,193,7,.30);background:rgba(255,193,7,.055)}.diagnostics-check small{display:block;color:var(--muted);margin-top:3px}.diagnostics-info-list,.diagnostics-file-list{display:grid;gap:8px}.diagnostics-info-list div,.diagnostics-file-list div{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.035)}.diagnostics-info-list span,.diagnostics-file-list span{color:var(--muted)}.diagnostics-file-list div.ok{border-color:rgba(46,204,113,.22)}.diagnostics-file-list div.bad{border-color:rgba(255,107,107,.35)}.diagnostics-actions{gap:8px}@media(max-width:760px){.diagnostics-hero{display:block}.diagnostics-ring{margin-top:14px}.diagnostics-info-list div,.diagnostics-file-list div{display:block}}.release-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid var(--line);border-radius:22px;padding:18px;background:rgba(255,255,255,.04);margin-bottom:16px}.release-hero h2{font-size:38px;margin:.2rem 0}.release-hero.draft{border-color:rgba(255,255,255,.14)}.release-hero.testing{border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.06)}.release-hero.approved{border-color:rgba(46,204,113,.35);background:rgba(46,204,113,.07)}.release-hero.frozen{border-color:rgba(96,165,250,.35);background:rgba(96,165,250,.07)}.release-badge{min-width:120px;height:90px;border-radius:20px;display:grid;place-items:center;background:rgba(26,26,26,.14);border:1px solid rgba(26,26,26,.32);font-weight:900;font-size:20px;color:var(--accent)}.release-kpis .mini-stat strong{font-size:20px}.release-config-card,.release-note-create{min-height:100%}.release-filter-row{display:grid;grid-template-columns:1fr 190px 190px;gap:10px;margin-bottom:14px}.release-notes-list{display:grid;gap:10px}.release-note{display:grid;grid-template-columns:1fr auto;gap:12px;border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.035)}.release-note h4{margin:0}.release-note.critical,.release-note.breaking{border-color:rgba(255,107,107,.35);background:rgba(255,107,107,.07)}.release-note.high{border-color:rgba(255,193,7,.28);background:rgba(255,193,7,.055)}.release-actions{gap:8px}.release-note-modal{width:min(800px,96vw)}@media(max-width:760px){.release-hero{display:block}.release-badge{margin-top:12px}.release-filter-row{grid-template-columns:minmax(0,1fr)}.release-note{grid-template-columns:minmax(0,1fr)}}:root{--bg:#0A0A0B;--bg-raised:#141416;--bg-sunken:#000000;--text:#F4F0E8;--muted:#9C948A;--muted-2:#6C655D;--line:rgba(244,240,232,.09);--line-strong:rgba(244,240,232,.16);--accent:#1A1A1A;--accent-2:#3D3D42;--accent-deep:#000000;--accent-soft:rgba(26,26,26,.13);--accent-soft-strong:rgba(26,26,26,.24);--danger:#F87171;--danger-soft:rgba(248,113,113,.14);--success:#4ADE80;--success-soft:rgba(74,222,128,.14);--warning:#FBBF24;--warning-soft:rgba(251,191,36,.14);--radius-sm:10px;--radius:16px;--radius-lg:24px;--shadow-sm:0 2px 10px rgba(0,0,0,.28);--shadow-md:0 14px 34px rgba(0,0,0,.38);--shadow-lg:0 28px 70px rgba(0,0,0,.5);--shadow-gold:0 10px 26px rgba(26,26,26,.22);--font-ui:"Cairo","Segoe UI",Tahoma,Arial,sans-serif;--font-numeric:"Manrope","Cairo","Segoe UI",Tahoma,Arial,sans-serif}html,body{background:radial-gradient(circle at top left,rgba(26,26,26,.14),transparent 38%),radial-gradient(circle at 85% 0%,rgba(26,26,26,.06),transparent 45%),linear-gradient(180deg,var(--bg-sunken),var(--bg) 40%);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}*{scrollbar-width:thin;scrollbar-color:rgba(26,26,26,.35) transparent}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:rgba(26,26,26,.32);border-radius:99px}*::-webkit-scrollbar-thumb:hover{background:rgba(26,26,26,.5)}*::-webkit-scrollbar-track{background:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:8px}@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.h1,.hero-title,h1,h2,h3{font-family:var(--font-ui);letter-spacing:-.01em}.h1,h1{font-weight:800}.hero-title{font-weight:900;letter-spacing:-.02em;position:relative;display:inline-block}h2{font-weight:800;font-size:20px;margin:0 0 4px}h3{font-weight:700;font-size:14.5px}.section-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}.section-kicker::before{content:"";width:16px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));display:inline-block}.btn{font-family:var(--font-ui);border-radius:var(--radius-sm);font-weight:700;letter-spacing:.01em;transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;box-shadow:var(--shadow-sm)}.btn:active{transform:translateY(1px)}.btn.secondary{background:rgba(244,240,232,.06);border-color:var(--line-strong)}.btn.secondary:hover{background:rgba(244,240,232,.11);border-color:var(--accent-soft-strong)}.btn.gold{background:linear-gradient(155deg,var(--accent-2),var(--accent) 55%,var(--accent-deep));color:#161208;font-weight:800;box-shadow:var(--shadow-gold)}.btn.gold:hover{box-shadow:0 14px 34px rgba(26,26,26,.34);filter:brightness(1.04)}.btn.danger,.btn.secondary.danger{color:var(--danger)}.card{background:linear-gradient(165deg,rgba(244,240,232,.055),rgba(244,240,232,.02));border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:var(--radius-lg)}.badge{border-radius:999px;font-weight:700;letter-spacing:.01em}.badge.booked{color:var(--warning);border-color:rgba(217,164,65,.35);background:var(--warning-soft)}.badge.completed{color:var(--success);border-color:rgba(79,179,123,.35);background:var(--success-soft)}.badge.cancelled{color:var(--danger);border-color:rgba(226,85,92,.35);background:var(--danger-soft)}label{font-weight:600;letter-spacing:.01em}input,select,textarea{border-radius:var(--radius-sm);border-color:var(--line-strong);background:rgba(0,0,0,.32);transition:border-color .15s ease,box-shadow .15s ease}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.brand{position:relative;padding-bottom:18px;margin-bottom:24px}.brand::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.nav button{border-radius:12px;font-weight:600;font-size:12.5px;transition:background .15s ease,color .15s ease,border-color .15s ease}.nav button:hover{color:var(--text)}.nav button.active{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-soft-strong);font-weight:700}.table th{color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.table tr:hover td{background:rgba(244,240,232,.02)}.modal-card{background:linear-gradient(165deg,#17181A,#101011);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}.drawer-panel{background:linear-gradient(180deg,#131315,#0d0d0e)}.drawer-close{width:31px;height:31px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(244,240,232,.06);border:1px solid var(--line);transition:background .15s ease}.drawer-close:hover{background:rgba(244,240,232,.12)}.login-page{position:relative}.login-box .card:first-child{position:relative;overflow:hidden}.login-box .card:first-child::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,rgba(26,26,26,.16),transparent 55%);pointer-events:none}.hero-title::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin-top:14px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.notice{border-radius:var(--radius);background:var(--accent-soft);border-color:var(--accent-soft-strong)}.nav button{display:flex;align-items:center;gap:12px}.nav button:hover .nav-icon{color:var(--muted)}.nav button.active .nav-icon{color:var(--accent-2)}.calendar-wrap.fresha-calendar{background:linear-gradient(180deg,rgba(20,17,12,.9),rgba(8,7,6,.92));border:1px solid var(--line)}.cal-head{background:#151210!important;border-bottom:1px solid var(--line-strong)}.staff-head .avatar{background:var(--accent-soft)!important;color:var(--accent-2)!important;border-color:rgba(26,26,26,.4)!important;font-weight:800}.major-row .time-cell{color:var(--text);opacity:.75}.minor-row .time-cell{color:var(--muted)}.major-row .cal-cell{border-top-color:var(--line-strong)}.appt{background:linear-gradient(135deg,rgba(26,26,26,.22),rgba(26,26,26,.08));border:1px solid rgba(26,26,26,.42);color:var(--text);transition:transform .12s ease,box-shadow .12s ease}.appt:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.35)}.appt.completed{background:linear-gradient(135deg,var(--success-soft),rgba(79,179,123,.05));border-color:rgba(79,179,123,.4)}.now-line{background:#FF5A45;box-shadow:0 0 10px rgba(255,90,69,.55)}.now-label{background:#FF5A45}.fresha-today-btn,.fresha-team-btn,.fresha-date-pill,.fresha-icon-btn,.pro-pill-btn,.pro-team-btn,.pro-date-pill,.toolbar-icon-btn{background:rgba(244,240,232,.05);border:1px solid var(--line-strong);color:var(--text);border-radius:var(--radius-sm);transition:background .15s ease,border-color .15s ease}.fresha-today-btn:hover,.fresha-team-btn:hover,.fresha-date-pill:hover,.fresha-icon-btn:hover,.pro-pill-btn:hover,.pro-team-btn:hover,.pro-date-pill:hover,.toolbar-icon-btn:hover{border-color:var(--accent-soft-strong);background:rgba(244,240,232,.09)}.settings-v1-hero{background:linear-gradient(135deg,var(--accent-soft),rgba(244,240,232,.03));border:1px solid var(--line)}.settings-nav-card{border-radius:var(--radius);background:rgba(244,240,232,.03);border:1px solid var(--line);transition:border-color .15s ease,background .15s ease;position:relative}.settings-nav-card:hover{border-color:var(--line-strong);background:rgba(244,240,232,.055)}.settings-nav-card.selected{border-color:var(--accent-soft-strong);background:linear-gradient(135deg,var(--accent-soft),rgba(244,240,232,.02))}.settings-nav-card.selected::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--accent-2),var(--accent))}.settings-card-icon{background:var(--accent-soft);border:1px solid rgba(26,26,26,.22);font-size:14.5px}.settings-nav-card small{color:var(--muted);font-size:11px}.settings-group-tabs button{border-radius:999px;font-weight:600;font-size:11px;transition:background .15s ease,border-color .15s ease,color .15s ease}.settings-group-tabs button:hover{border-color:var(--accent-soft-strong)}.settings-group-tabs button.active{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#171209;border-color:transparent;font-weight:700}.settings-section-head{border-bottom:1px solid var(--line)}#settingsSearch{background:rgba(0,0,0,.3)}.notification-card.unread{background:linear-gradient(135deg,rgba(244,240,232,.06),rgba(244,240,232,.02));border-color:var(--line-strong)}.unread-dot{color:#171209!important;background:linear-gradient(135deg,var(--accent-2),var(--accent))!important;font-weight:800}.notification-card{position:relative;border-inline-start:3px solid transparent;transition:border-color .15s ease,background .15s ease,transform .12s ease}.notification-card:hover{transform:translateY(-1px)}.notification-card.high,.notification-card.danger{border-inline-start-color:var(--danger)}.notification-card.warning{border-inline-start-color:var(--warning);background:var(--warning-soft)}.notification-card.normal,.notification-card.info{border-inline-start-color:var(--line-strong)}.notification-icon{background:rgba(244,240,232,.05);border-color:var(--line)}.notification-card.high .notification-icon,.notification-card.danger .notification-icon{background:var(--danger-soft);border-color:rgba(226,85,92,.35)}.notification-card.warning .notification-icon{background:var(--warning-soft);border-color:rgba(217,164,65,.4)}.notification-bulk-bar{border-color:var(--line-strong);background:rgba(244,240,232,.02)}.notification-pref-modal,.notification-rules-modal,.notification-templates-modal{background:linear-gradient(165deg,#17181A,#101011)!important}.notification-select{background:rgba(244,240,232,.03);border-color:var(--line-strong)}.notification-select input:checked{accent-color:var(--accent)}@media(max-width:720px){.brand{margin-bottom:0;padding-bottom:0}.sidebar .brand.brand-standalone,.brand.brand-standalone{padding:0!important;margin:0!important;justify-content:flex-start!important}.brand::after{display:none}.logo,.enhanced-logo,.brand-logo-hero{width:100px!important;max-height:34px!important}.sidebar .brand.brand-standalone img.brand-logo-hero,img.logo.enhanced-logo.brand-logo-hero{width:100px!important;max-width:100px!important;max-height:34px!important;transform:none!important}.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:row;gap:1px;background:rgba(8,8,9,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 2px calc(6px + env(safe-area-inset-bottom));overflow-x:visible}.nav button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;font-size:10px;border-radius:10px;white-space:nowrap;overflow:hidden}.main{padding:14px 14px 96px!important}.h1{font-size:clamp(22px,7vw,32px)}.modal-card>h2:first-child{position:sticky;top:0;z-index:2;margin:-14px -14px 14px;padding:16px 44px 14px 14px;background:linear-gradient(180deg,#17181A,#101011);border-bottom:1px solid var(--line)}}.modal-close-btn{display:none}@media(max-width:560px){.modal-close-btn{display:grid;place-items:center;position:fixed;top:14px;inset-inline-end:14px;z-index:60;width:32px;height:32px;border-radius:50%;background:rgba(244,240,232,.1);border:1px solid var(--line-strong);color:var(--text);font-size:18px;line-height:1;cursor:pointer}}.notification-icon svg{width:20px;height:20px}.settings-card-icon svg{width:17px;height:17px;color:var(--accent-2)}@media(max-width:400px){.context-menu{width:min(330px,92vw)}}
/* =========================================================================
   Staff profile photo + portfolio gallery
========================================================================= */
.team-avatar-upload-wrap{position:relative;flex:0 0 auto}
.team-avatar-edit-btn{
  position:absolute;bottom:-4px;inset-inline-end:-4px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(155deg,var(--accent-2),var(--accent));
  color:#171209;border:2px solid var(--bg);
  cursor:pointer;
}
.team-avatar-edit-btn svg{width:15px;height:15px}
.portfolio-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.portfolio-photo-item{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:rgba(244,240,232,.03)}
.portfolio-photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.portfolio-photo-delete{
  position:absolute;top:6px;inset-inline-end:6px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:0;
  font-size:14.5px;line-height:1;cursor:pointer;
}
.link-btn{background:none;border:none;color:var(--accent-2);font-weight:700;text-decoration:underline;cursor:pointer;padding:4px;font-family:inherit;font-size:11.5px}.drawer.calendar-visible{background:transparent!important;backdrop-filter:none!important;pointer-events:none!important}
.drawer.calendar-visible .drawer-panel{pointer-events:auto!important}
/* -- 2026-09-04: the Customer section used to always stack below the full
   services list (scroll to the very end to reach it) -- reported live:
   "I want this option beside the service list, not in the same list."
   Widened the drawer from a fixed 460px so there's actually room for a
   real side-by-side layout; the layout switch itself is handled by the
   later flexbox override further down this file (search "part 2"), which
   reacts to the drawer's own width rather than a viewport breakpoint. */
.booking-drawer-panel.calendar-linked-panel{width:min(760px,94vw)!important;box-shadow:-20px 0 60px rgba(0,0,0,.5)!important;border-left:1px solid var(--line-strong)!important;background-color:var(--bg-raised)!important;isolation:isolate}
.booking-service-search{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:0 12px;height:40px;margin:10px 0}
.booking-service-search input{border:0;background:transparent;color:var(--text);height:100%;padding:0;width:100%;outline:none;font:inherit}
.booking-service-search span{color:var(--muted)}
.booking-service-group-head{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;color:var(--muted);font-weight:800;font-size:11.5px}
.booking-service-group-head strong{background:var(--accent-soft);color:var(--accent-2);border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;font-size:10px}
.compact-booking-drawer .compact-section-title span{background:var(--bg-raised)!important;border:1px solid var(--line)!important;box-shadow:0 2px 6px rgba(0,0,0,.3)!important;color:var(--text)!important}
.compact-booking-drawer input:not([type=checkbox]),.compact-booking-drawer select,.compact-booking-drawer textarea{background:var(--bg-raised)!important;border:1px solid var(--line)!important;box-shadow:0 2px 6px rgba(0,0,0,.22);border-radius:12px;transition:border-color .15s ease,box-shadow .15s ease}
.compact-booking-drawer input:not([type=checkbox]):focus,.compact-booking-drawer select:focus,.compact-booking-drawer textarea:focus{outline:none;border-color:var(--accent-deep)!important;box-shadow:var(--shadow-gold)}
.compact-booking-drawer .booking-service-search input{background:transparent!important;border:0!important;box-shadow:none!important}
.compact-booking-drawer .connected-service-item{background:var(--bg-raised)!important;border-color:var(--line)!important;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.compact-booking-drawer .connected-service-item:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.compact-booking-drawer .connected-service-item:has(.bkSvc:checked){background:linear-gradient(155deg,var(--accent-2),var(--accent))!important;box-shadow:var(--shadow-gold);transform:translateY(-1px);border-color:transparent!important}
/* #1b1509 (a dark-brown chosen to sit on the old GOLD accent gradient)
   used to be hardcoded here for both the selected-row text and the
   checked checkbox -- the 2026-08-27 monochrome rebrand (see the :root
   block further down) turned --accent/--accent-2 into near-black without
   updating these, so the selected row's own text (and the checkbox's own
   checkmark, drawn in --accent-2 against a --accent-2-ish square) ended
   up dark-on-near-black: readable only by turning the same near-black
   text invisible against the now near-black background it sits on.
   Reusing --color-ps-accent-ink (white, the token this exact rebrand
   already introduced for "text on the accent color") instead. */
.compact-booking-drawer .connected-service-item:has(.bkSvc:checked) strong,.compact-booking-drawer .connected-service-item:has(.bkSvc:checked) small,.compact-booking-drawer .connected-service-item:has(.bkSvc:checked) .service-list-meta{color:var(--color-ps-accent-ink,#fff)!important}
.compact-booking-drawer .bkSvc{appearance:none!important;-webkit-appearance:none!important;width:18px!important;height:18px!important;margin:0!important;flex:0 0 auto;border-radius:5px!important;border:1.5px solid var(--line-strong)!important;background:var(--bg)!important;cursor:pointer;position:relative;transition:background .15s ease,border-color .15s ease}
.compact-booking-drawer .bkSvc:hover{border-color:var(--accent)!important}
.compact-booking-drawer .bkSvc:checked{background:var(--color-ps-accent-ink,#fff)!important;border-color:var(--color-ps-accent-ink,#fff)!important}
.compact-booking-drawer .bkSvc:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.compact-booking-drawer .compact-services-summary{background:var(--accent-soft)!important;border-color:var(--line-strong)!important}
.calendar-linked-panel{overflow-y:auto!important;overflow-x:hidden!important}
.booking-customer-search-wrap{position:relative}
.booking-customer-results{display:none;position:absolute;top:calc(100% + 4px);right:0;left:0;z-index:20;flex-direction:column;gap:6px;max-height:220px;overflow:auto;background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:12px;padding:8px;box-shadow:var(--shadow-md)}
.booking-customer-row{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:right;border:1px solid var(--line);background:rgba(244,240,232,.03);border-radius:10px;padding:9px 12px;cursor:pointer;font:inherit;color:var(--text);transition:.15s ease}
.booking-customer-row:hover{background:var(--accent-soft);border-color:var(--accent-deep)}
.booking-customer-row strong{font-size:11.5px}
.booking-customer-row span{font-size:10.5px;color:var(--muted)}
.booking-customer-empty{font-size:11px;color:var(--muted);padding:8px 6px}
.customer-add-tile{display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-raised);box-shadow:0 2px 6px rgba(0,0,0,.22);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.customer-add-tile:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.3);border-color:var(--accent-deep)}
.customer-add-tile input{position:absolute;opacity:0;width:0;height:0;margin:0}
.customer-add-icon{width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-2);display:grid;place-items:center;flex:0 0 auto;transition:background .15s ease,color .15s ease}
.customer-add-icon svg{width:18px;height:18px}
.customer-add-text{display:flex;flex-direction:column;gap:2px}
.customer-add-text strong{font-size:12.5px;color:var(--text)}
.customer-add-text small{font-size:10.5px;color:var(--muted)}
.customer-add-tile:has(input:checked){border-color:var(--accent-deep);box-shadow:var(--shadow-gold)}
.customer-add-tile:has(input:checked) .customer-add-icon{background:linear-gradient(155deg,var(--accent-2),var(--accent));color:var(--color-ps-accent-ink,#fff)}
/* ---- Phone icon-size consistency pass ----
   Several icon containers had a fixed desktop size with no phone-width
   override at all, so on a real phone they stayed full-size next to text
   and controls that DID shrink (e.g. .nav-icon already goes 20px->17px
   at max-width:720px) — that mismatch is what reads as "icons all
   different, inconsistent sizes" on a phone. Scaled each down by roughly
   the same proportion .nav-icon already uses, not arbitrary new sizes.
   Placed at the end of the file so it wins the cascade over the
   desktop-only declarations above without needing !important, except
   where the original rule itself used !important (toolbar-icon-btn). */
@media(max-width:480px){
  .team-picker-icon{width:24px;height:24px}
  
  .settings-card-icon{width:26px;height:26px}
  .customer-add-icon{width:31px;height:31px}
  .toolbar-icon-btn{width:36px!important}
}
/* ---- Settings: screen-to-screen navigation on phones ----
   Desktop keeps the two-pane list+detail layout (both panels visible at
   once, side by side) — that's the .settings-v1-layout base rule further
   up. Below max-width:1200px (the breakpoint where that layout already
   collapses to one column) the list and the open section would otherwise
   both render stacked in one long scroll. Instead: show only one "screen"
   at a time — the category list, or the open category full-width with a
   back button — matching normal phone-app navigation instead of a
   desktop layout squeezed into a narrow column. */
.settings-back-btn{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:8px 4px;border:0;background:none;color:var(--accent-2);font-weight:700;font-size:12.5px;cursor:pointer}
/* ---- "Calm identity" pass: same brand colors (gold/black, unchanged —
   see the --accent/--bg tokens above), softer corners, roomier spacing.
   Appended last on purpose so it wins the cascade over the older layered
   :root blocks earlier in this file without having to hunt down and edit
   every historical redefinition. Font sizes and icon-container sizes were
   scaled down ~10% in place (not here) — see the git history for that
   pass; corners/spacing are the two things that read cleanly as an
   appended override, so they live here. ---- */
:root{
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
}
@media(max-width:980px){
  /* Deliberately not widened here — the earlier mobile pass already tuned
     padding for small screens; this calm-identity pass targets the
     roomier desktop/tablet feel without re-litigating that work. */
}

/* ---- Modal -> full-screen slide-up sheet on phones ----
   Every detail view in the app (booking details, customer profile, staff
   profile, confirmations — 49 call sites) goes through the one shared
   modal()/closeModal() pair in app.js, so this single change gives all of
   them a real native-style transition without touching each call site.
   Desktop keeps the existing centered dialog untouched. */
@media(max-width:720px){
  .modal.open{align-items:flex-end!important;justify-content:stretch!important;padding:0!important}
  .modal-card{
    width:100%!important;max-width:100%!important;height:100%!important;max-height:100%!important;
    border-radius:0!important;margin:0!important;
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.32,.72,0,1);
  }
  .modal.open .modal-card{transform:translateY(0)}
  .modal.closing .modal-card{transform:translateY(100%)}
  @media (prefers-reduced-motion: reduce){
    .modal-card{transition:none}
  }
}

/* ---- Settings list<->detail: animate the swap instead of an instant cut ----
   .detail-open already exists (added when the back-button/list navigation
   was introduced) — this just adds motion to what was a hard display:none
   toggle, on the same mobile breakpoint that pattern applies at. */
@media(max-width:1200px){
  /* .settings-section-card is rebuilt fresh (new element) by settingsShell()
     on every section open/switch, so — unlike the persistent
     .settings-v1-content wrapper around it — a CSS animation on it
     correctly replays every time without needing JS to force a retrigger. */
  .settings-section-card{animation:settingsFadeIn .22s ease-out both}
  @keyframes settingsFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @media (prefers-reduced-motion: reduce){
    .settings-section-card{animation:none}
  }
}

/* ---- BOLD PASS v2 ----
   The first calm-identity pass (softer radius +2px, +8px padding, -10% type)
   read as basically invisible in practice — too close to the original to
   register as an actual redesign. This pass is deliberately loud: pill
   buttons everywhere, much larger corners on cards/modals, a real gold
   glow instead of a hairline border, bigger page titles for contrast
   against smaller body text, and noticeably more breathing room. Same
   exact brand colors (--bg/--accent untouched) — only shape, scale, and
   spacing change, per instruction. !important throughout is deliberate:
   this file has ~4 layered historical :root/.card/.btn redefinitions from
   earlier project phases, and the only way to guarantee this reads as the
   final word over every one of them, everywhere, is to out-rank them all
   rather than trying to out-order each individually. */
.btn{
  border-radius:999px!important;
  padding:13px 24px!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
.btn.small{border-radius:999px!important;padding:9px 16px!important}
.card,.mini-stat,.tile,.settings-card,.team-branch-card,.team-member-card,.notification-tile,.report-kpi,.f-stat{
  border-radius:28px!important;
  border-color:rgba(26,26,26,.16)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(26,26,26,.06) inset!important;
}
.modal-card,.drawer-panel{border-radius:20px!important}
.badge{border-radius:999px!important;padding:6px 13px!important}
.avatar,.team-picker-icon,.customer-add-icon,.settings-card-icon,.staff-photo{border-radius:50%!important}
/* staffAvatar() (calendar.js) always wraps a real uploaded photo as a bare
   <img> inside .staff-photo, on the assumption the box clips/fills it --
   but .staff-photo is only ever given an explicit width/height in a FEW
   scoped contexts (.resource-staff-head, .team-picker-row, the mobile
   timeline), and NONE of them (nor this base rule) ever constrained the
   <img> itself or clipped overflow. A barber with no photo just gets a
   couple of initials in an auto-sized box, so this never showed -- but a
   barber WITH a real photo renders it at its full natural pixel size,
   blowing out whatever header it's in (confirmed live on the Fresha-style
   daily calendar's .fresha-staff-head, which had no sizing rule of its own
   at all). Baseline default here so every context is safe even if it
   never sets its own width/height; the more specific per-context rules
   above/below still win on size via normal specificity.  */
.staff-photo{width:40px;height:40px;overflow:hidden;display:inline-grid;place-items:center}
.staff-photo img{width:100%;height:100%;object-fit:cover;display:block}
.h1{font-weight:900!important;letter-spacing:-.01em!important}
.settings-section-card h2,.f-title,.concept-name,.card>h2:first-child,.card>h3:first-child{
  font-weight:900!important;
}
/* ---- density pass: the SIMPLE section above never actually shrank the
   spacing/type scale it describes itself as ("small precise type... compact")
   — .h1 was still rendering at 42px, body/.muted text had no explicit size
   and fell back to the browser's 16px default, and padding was inherited
   unchanged from an earlier, roomier "premium" pass. Tightened everything
   below to match what the section already claimed to be. ---- */
body{font-size:13.5px!important}
.h1{font-size:clamp(19px,1.6vw,23px)!important;font-weight:700!important}
.hero-title{font-size:clamp(26px,3.2vw,40px)!important}
/* The app mixes .h1-class page titles with bare <h1>/<h2>/<h3> tags used
   as in-card section titles (e.g. "قائمة العملاء") — the bare tags had no
   explicit size anywhere and fell back to the browser's UA heading
   defaults, rendering noticeably bigger than the page title above them. */
h1:not(.h1):not(.hero-title){font-size:18px!important;font-weight:800!important}
h2:not(.hero-title){font-size:15.5px!important;font-weight:800!important}
h3{font-size:13.5px!important;font-weight:700!important}
.muted{font-size:12.5px!important}
.main{padding:22px!important}
.card{padding:16px!important}
.grid{gap:12px!important}
.row{gap:8px!important}

.nav{gap:3px!important}
.nav button{padding:9px 12px!important;border-radius:10px!important;font-size:12.5px!important}
.table th,.table td{padding:10px 10px!important;font-size:12.5px!important}

.btn{padding:8px 14px!important;font-size:12.5px!important}
@media(max-width:720px){
  /* This rule appears after (and was winning over) an earlier
     .main{padding:14px 14px 96px!important} meant to keep page content
     clear of the fixed bottom nav bar (.nav{position:fixed;bottom:0;...}
     is ~96px tall including the safe-area inset) — the missing bottom
     value here was silently removing that clearance on every mobile
     page, not just one screen; content that runs long enough to reach
     the bottom (e.g. the calendar grid) renders straight under the nav. */
  .main{padding:14px 14px 96px!important}
  .card{padding:14px!important}
}

/* =========================================================================
   SIMPLE — full rewrite of the visual language, appended last so it wins
   over every layered rule above it (this file has ~10 generations of
   overrides from earlier project phases; rather than editing each one,
   this section is the single, final word on how things look).
   Light, minimal, compact, one restrained accent. Same brand family
   (bronze/gold), just a completely different execution: light surfaces
   instead of dark, small precise type instead of loose dark-mode sizing,
   flat quiet cards instead of glows and gradients.
   ========================================================================= */
:root{
  --bg:#F6F6F3!important;
  --surface:#FFFFFF!important;
  --text:#16171A!important;
  --muted:#6C6C72!important;
  --line:#E6E5E0!important;
  --radius-sm:8px!important;
  --radius:12px!important;
  --radius-lg:18px!important;
  --bg-raised:#F6F6F3!important;
  --bg-sunken:#EDEDF1!important;
}
html,body{
  background:var(--bg)!important;
  color:var(--text)!important;
}
*{scrollbar-color:rgba(0,0,0,.18) transparent!important}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16)!important}

/* ---- layout shell ---- */



.main{background:var(--bg)!important}
.nav button{
  color:var(--muted)!important;
  background:transparent!important;
  border-color:transparent!important;
  font-size:13px!important;
  font-weight:600!important;
}
.nav button:hover{background:rgba(0,0,0,.035)!important;color:var(--text)!important}
.nav button.active{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:var(--accent)!important;
}

.h1,.hero-title{color:var(--text)!important;font-weight:800!important}
.muted{color:var(--muted)!important}
.logo,.enhanced-logo,.brand-logo-hero,.top-logo{filter:none!important}

/* ---- text везде: force dark-on-light instead of the old white-on-dark ---- */
body,.card,.mini-stat,.tile,.settings-card,.team-branch-card,.team-member-card,
.notification-tile,.modal-card,.drawer-panel,.context-menu,label,.table,
.settings-list,.setting-row,.electronic-menu-section,.employee-drawer-modal,
.fresha-toolbar,.fresha-calendar-toolbar-real,.calendar-wrap,.cal-head,.cal-row,
.time-cell,.staff-head,.resource-range-calendar,.resource-range-head,.resource-date-row,
.mini-date-popover,.mini-popover-card,.team-picker-popover,.team-picker-card,
.fresha-filter-drawer,.range-day,.range-day-head,.weekly-calendar,.week-day-card{
  color:var(--text)!important;
}
.muted,.time-cell,.week-row span,.mini-week,.mini-week span,.staff-head .muted,
.range-day-head em,.resource-date-label em,.team-picker-row em,.range-appt-main em{
  color:var(--muted)!important;
}

/* ---- cards / surfaces ---- */
.card,.mini-stat,.tile,.settings-card,.team-branch-card,.team-member-card,
.notification-tile,.report-kpi,.f-stat,.branch-box,.loyalty-card,.month-card,
.week-day-card,.electronic-menu-section,.settings-list,.range-day{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:0 1px 2px rgba(20,18,10,.03),0 6px 18px rgba(20,18,10,.04)!important;
}
.card>h2:first-child,.card>h3:first-child,.settings-section-card h2{font-weight:800!important;color:var(--text)!important}

/* ---- buttons: simple, small, one accent — pill kept (still reads "app",
   not "form"), sized down to match the compact scale ---- */
.btn{
  border-radius:999px!important;
  padding:9px 16px!important;
  font-size:13px!important;
  font-weight:700!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
}
.btn.small{padding:7px 12px!important;font-size:12px!important}
.btn.gold{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:var(--accent)!important;
  box-shadow:0 4px 12px rgba(26,26,26,.28)!important;
}
.btn.secondary{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.btn.danger{background:#fff!important;color:#B23A33!important;border-color:rgba(178,58,51,.3)!important}
.btn:hover{border-color:var(--accent)!important}

/* ---- inputs ----
   Form controls don't inherit font-family from the page by default in any
   browser's UA stylesheet, so every input/select/textarea/button across
   the app was silently rendering in the OS's default UI font (Segoe UI on
   Windows, San Francisco on Mac/iOS) while headings used the branded Cairo
   font — a mismatch on every single filter, search box, and dropdown. */
input,select,textarea,button{
  font-family:var(--font-ui)!important;
}
/* Design spec calls for Manrope on numerals (money, KPI values, counts)
   instead of the Arabic UI face. Rather than hand-tagging every numeric
   span across the app, this piggybacks on the .tabular-nums utility class
   Tailwind already applies at exactly those call sites (kpiCard() values,
   money displays, etc.) -- anywhere digits are meant to align in a
   column is also exactly where this spec wants Manrope. */
.tabular-nums{
  font-family:var(--font-numeric)!important;
}
input,select,textarea{
  background:var(--surface)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  padding:10px 13px!important;
  font-size:13.5px!important;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(26,26,26,.12)!important}
select option{background:#fff!important;color:#111!important}
label{color:var(--muted)!important;font-size:12.5px!important}

/* ---- badges ---- */
.badge{
  border-radius:999px!important;
  padding:4px 11px!important;
  font-size:11px!important;
  border:1px solid var(--line)!important;
  background:#F1F0EC!important;
  color:var(--text)!important;
}
.badge.booked,.appt{color:#8A6412!important;border-color:rgba(180,129,31,.3)!important;background:rgba(180,129,31,.1)!important}
.badge.completed,.appt.completed{color:#2E6644!important;border-color:rgba(53,122,80,.3)!important;background:rgba(53,122,80,.08)!important}
.badge.cancelled{color:#A83932!important;border-color:rgba(198,67,59,.3)!important;background:rgba(198,67,59,.08)!important}
/* Booking status badges only ever covered 3 of the 7 real statuses
   (booked/completed/cancelled) — confirmed/arrived/started/no_show fell
   back to the plain neutral .badge style, which read as inconsistent next
   to the colored ones. Extends the same semantic system: still-upcoming
   stays the same amber as "booked", in-progress gets its own info-blue,
   no_show gets a color distinct from an admin-initiated "cancelled" (same
   family, more muted) since the two mean different things operationally. */
.badge.confirmed{color:#8A6412!important;border-color:rgba(180,129,31,.3)!important;background:rgba(180,129,31,.1)!important}
.badge.arrived,.badge.started{color:#1B5E7A!important;border-color:rgba(27,94,122,.3)!important;background:rgba(27,94,122,.1)!important}
.badge.no_show{color:#8A3B3B!important;border-color:rgba(138,59,59,.3)!important;background:rgba(138,59,59,.1)!important}

/* ---- table ---- */
.table th{color:var(--muted)!important;font-size:11px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.04em}
.table td,.table th{border-color:var(--line)!important}
.table tr:hover td{background:rgba(0,0,0,.015)!important}

/* ---- modal / drawer ---- */
.modal,.drawer{background:rgba(20,18,12,.42)!important;backdrop-filter:blur(6px)!important}
.modal-card,.drawer-panel,.customer-profile-drawer-card{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  box-shadow:0 24px 60px rgba(20,18,10,.18)!important;
}
.modal-close-btn,.drawer-close,.filter-close{
  background:#F1F0EC!important;color:var(--text)!important;border-color:var(--line)!important;
}

/* ---- avatars / icon tiles: quiet accent-tinted circles ---- */
.avatar,.staff-photo,.client-avatar,.team-picker-icon,.customer-add-icon,
.settings-card-icon,.report-kpi-icon,.detail-avatar,.f-avatar{
  background:var(--accent-soft,rgba(26,26,26,.12))!important;
  color:var(--accent)!important;
  border-color:rgba(26,26,26,.25)!important;
}
.notification-icon{background:#F1F0EC!important;color:var(--text)!important;border-color:var(--line)!important}

/* ---- calendar: the one deeply-custom screen worth relighting specifically ---- */
.calendar-wrap,.calendar-wrap.fresha-calendar{background:var(--surface)!important;border-color:var(--line)!important}
.cal-head{background:#FCFCFD!important;border-color:var(--line)!important}
.cal-head>div,.time-cell,.cal-cell{border-color:var(--line)!important}
.time-cell,.time-head{background:#FCFCFD!important;color:var(--muted)!important}
/* Pin the time gutter to the trailing edge (RTL: visual right) so it never
   scrolls out of view horizontally — matches how every real scheduling grid
   (Google Calendar, Fresha) keeps its time axis fixed while resource columns
   scroll beneath it. Without this, the grid's natural scroll-start position
   shows the time column plus one resource column cropped mid-way, which
   reads as broken rather than "scroll for more". */
.time-head,.time-cell{
  position:sticky!important;
  inset-inline-start:0!important;
  z-index:5!important;
}
.time-cell{background:#FCFCFD!important}
.major-row .cal-cell{background:#FCFCFB!important}
.minor-row .cal-cell{background:var(--surface)!important}
.cal-cell:hover,.cal-cell.drop-target{background:rgba(26,26,26,.06)!important}

.fresha-icon-btn,.fresha-today-btn,.fresha-date-pill,.fresha-team-btn,.fresha-view-select,.fresha-team-select{
  background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important;
}
.fresha-icon-btn:hover,.fresha-today-btn:hover,.fresha-date-pill:hover{background:#F6F6F3!important}


.appt.booking-block{
  background:rgba(26,26,26,.12)!important;border-inline-start-color:var(--accent)!important;color:var(--text)!important;
}
.appt.booking-block.completed{background:rgba(53,122,80,.1)!important;border-inline-start-color:#357A50!important}
.appt.booking-block.cancelled,.appt.booking-block.no_show{background:rgba(198,67,59,.1)!important;border-inline-start-color:#C6433B!important}
.appt-customer{color:var(--text)!important}

/* ---- popovers / filter drawer ---- */
.mini-popover-card,.team-picker-card,.fresha-filter-drawer{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.mini-date-popover,.team-picker-popover{background:rgba(20,18,12,.35)!important}
.fresha-filter-section{border-color:var(--line)!important}
.fresha-filter-options label{background:#FCFCFD!important;border-color:var(--line)!important;color:var(--text)!important}
.fresha-filter-actions{background:var(--surface)!important;border-color:var(--line)!important}
.fresha-filter-actions .apply{background:var(--accent)!important;color:#fff!important}
.fresha-filter-actions .clear{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}


@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* =========================================================================
   SIMPLE — round 2: the bespoke component trees below were all built
   assuming a dark ambient page background (translucent white overlays +
   white text read fine on dark, invisible on the new light one). This
   reuses each exact original selector so specificity ties resolve to
   "last wins" against the old rule, instead of trying to out-specificity
   hundreds of unrelated call sites.
   ========================================================================= */

/* customers screen: whole CRM sub-shell was a dark glass panel */






.customers-v2-subnav button.active,.customers-v2-subnav button:hover{background:var(--accent-soft,rgba(26,26,26,.14))!important;color:var(--text)!important}

/* text that assumed a dark backdrop, now sitting on light cards */
.mini-stat strong,.menu-item-main strong,.resource-staff-head strong,
.resource-date-label strong,.invoice-mini-totals strong,.invoice-service-row b,
.read-only-totals strong,.profile-info-grid strong,.smart-segment-notice strong,
.report-perm-card strong,.rule-metrics strong,.booking-services-summary strong,
.service-list-main strong,.edit-sale-summary strong,.customer-stat-card strong,
.customer-segment-card small,.followup-row strong,.team-members-summary strong,
.team-log-row strong,.team-goal-row strong,.saved-report-stats b,
.target-values strong,.campaign-audience-preview strong,.panel-title h1,
.loyalty-card h3,.setting-action-card,.fresha-filter-section summary,.inline-check,
.settings-nav-card strong{
  color:var(--text)!important;
}
.electronic-menu-section h4{
  background:var(--accent-soft,rgba(26,26,26,.1))!important;
  color:var(--text)!important;
  border-bottom:1px solid var(--line)!important;
}

/* pills / chips / small buttons that used translucent-white-on-dark */
.active{background:rgba(26,26,26,.14)!important;border-color:var(--accent)!important;color:var(--text)!important}
.secondary{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--line)!important}


.year-close-btn{background:#F1F0EC!important;color:var(--text)!important;border-color:var(--line)!important}
.mini-popover-head button{background:#F1F0EC!important;color:var(--text)!important;border-color:var(--line)!important}
.mini-date-shortcuts button{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}

.clear{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}



.settings-group-tabs button{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.settings-integration-tabs button{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}

.campaign-audience-preview span{background:var(--surface)!important;color:var(--text)!important;border-color:var(--line)!important}
.team-rank-list span{background:var(--accent-soft,rgba(26,26,26,.14))!important;color:var(--accent)!important}
.unread-dot{background:var(--accent)!important;color:#fff!important}
.danger{color:#B23A33!important}
.appearance-preview-logo{background:rgba(20,18,10,.78)!important;color:#fff!important}
.executive-summary-pre{background:#F4F3F0!important;color:var(--text)!important;border-color:var(--line)!important}
.customer-toggle input,.connected-service-item input{accent-color:var(--accent)!important}
.customer-photo-panel{background:var(--surface)!important}
.setting-row{color:var(--text)!important;border-bottom:1px solid var(--line)!important}
.modal .modal-card,.drawer .drawer-panel,.compact-customer-modal,.compact-invoice-modal,
.closed-sale-modal,.edit-sale-modal,.compact-dev-modal{
  background:var(--surface)!important;
  background-image:none!important;
  color:var(--text)!important;
}

/* sticky modal/drawer footers & headers: same dark-ambient assumption, same fix */
.compact-invoice-actions,.sticky-actions,.sticky-invoice-actions,.closed-sale-actions,
.profile-actions-row,.drawer-head{
  background:var(--surface)!important;
  background-image:none!important;
  color:var(--text)!important;
  border-top:1px solid var(--line)!important;
}
.range-day-head,.resource-range-head,.resource-date-label{
  background:#FCFCFD!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
/* .resource-range-head/.resource-date-label above got repainted for the
   light theme, but the actual per-day appointment cells inside them
   (.resource-range-calendar's own #08090b background, .resource-staff-day's
   white-on-dark gradient, .empty-resource-slot's light-on-dark placeholder)
   were missed — leaving solid black columns in an otherwise light calendar. */
.resource-range-calendar{background:var(--bg)!important;border-color:var(--line)!important}
.resource-staff-day{background:var(--surface)!important;border-inline-end-color:var(--line)!important}
.empty-resource-slot{border-color:var(--line)!important;color:var(--muted)!important}

.team-member-card-v2:hover,.team-member-card-v2.selected{
  background:var(--accent-soft,rgba(26,26,26,.1))!important;
  border-color:var(--accent)!important;
}
/* The calendar grid's min-width was a flat 1120px regardless of how many
   barber columns actually exist, so a single-barber calendar forced a
   horizontal scrollbar it never needed (vertical scroll is all that single
   column requires). Scale the floor with --cols instead: enough for the
   time gutter plus each column's own 220px minimum, no more. */
.cal-grid{min-width:calc(96px + var(--cols,1) * 220px)!important}
.compact-invoice-head,.team-employee-modal .compact-invoice-head,
.team-employee-modal .sticky-actions,.employee-drawer-modal .sticky-actions{
  background:var(--surface)!important;
  background-image:none!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.electronic-menu-item{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.electronic-menu-item:hover{background:#F6F6F3!important}
.menu-item-price{color:var(--text)!important}
.drawer-head,.booking-drawer-linked .booking-drawer-head,.booking-drawer-head{
  background:var(--surface)!important;
  background-image:none!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.service-list-item,.connected-service-item,.compact-booking-drawer .connected-service-item{
  background:var(--surface)!important;
  border-color:var(--line)!important;
}
.service-list-meta{color:var(--muted)!important}
.team-employee-modal .electronic-menu-item{
  background:var(--surface)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.team-employee-modal .employee-service-menu{
  background:#FCFCFD!important;
  border-color:var(--line)!important;
}
.electronic-menu-section{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  overflow:visible!important;
}
.settings-list,.fresha-table-card{
  background:var(--surface)!important;
  border-color:var(--line)!important;
  overflow:visible!important;
}

/* Calendar: collapsed compact header + "more" dropdown replacing the
   always-visible toolbar, so the calendar grid becomes the full page. */
.calendar-compact-header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  position:relative!important;
  padding:14px 18px!important;
  margin-bottom:14px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-lg)!important;
}



.calendar-add-btn{margin-inline-start:auto!important}

/* Report KPI badge icons were plain Unicode glyphs (■ ◆ %) with no
   light-theme repaint — the badge background was a near-invisible
   rgba(255,255,255,.075) leftover from the dark theme. Now real SVG
   icons via uiIcon(), matching every other icon badge in the app. */



/* Settings > Appearance live preview card — same dark-theme leftover
   pattern as the report KPI icons: near-transparent white fills that
   were invisible on the light card, plus dark text (#111) on what is
   now a dark accent gradient (previewAccent defaults to near-black,
   not gold, since the theme moved to black/white) — unreadable. */
.appearance-preview-top{color:#fff!important}
.appearance-preview-side span{
  background:var(--bg)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}
.appearance-preview-side span.active{
  background:var(--accent-soft,rgba(26,26,26,.13))!important;
  border-color:var(--accent)!important;
  color:var(--text)!important;
}
.appearance-preview-card{background:var(--bg)!important;color:var(--text)!important}

/* Always-visible date nav + view switcher strip, sitting right under the
   compact header. .fresha-date-pill/.toolbar-icon-btn still carry their
   original dark-theme colors (white text on a near-transparent fill) —
   fine inside the old dark dropdown, invisible on this light surface — so
   this scopes a light-theme repaint to just this strip. */
.calendar-toolbar-strip{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  padding:10px 14px!important;
  margin-bottom:14px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
}
.calendar-toolbar-nav{display:flex!important;align-items:center!important;gap:6px!important}
.calendar-toolbar-strip .toolbar-icon-btn{
  background:var(--bg)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  box-shadow:none!important;
  height:34px!important;min-height:34px!important;width:34px!important;
  border-radius:10px!important;
}
.calendar-toolbar-strip .toolbar-icon-btn:hover{background:var(--accent-soft,rgba(26,26,26,.08))!important}
.calendar-toolbar-strip .toolbar-icon-btn svg{width:15px!important;height:15px!important}
.calendar-toolbar-strip .fresha-date-pill{
  min-width:150px!important;min-height:34px!important;
  background:var(--bg)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  font-size:12.5px!important;font-weight:700!important;
  padding:0 14px!important;
}
.calendar-toolbar-today{
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  border-radius:10px!important;
  padding:8px 14px!important;
  font-size:12.5px!important;font-weight:700!important;
  cursor:pointer!important;
}
.calendar-toolbar-today:hover{background:var(--accent-soft,rgba(26,26,26,.08))!important}
.calendar-toolbar-view{
  min-width:120px!important;
  margin-inline-start:auto!important;
}
@media(max-width:720px){
  .calendar-add-btn{padding:8px 12px!important;font-size:12px!important}
  .calendar-toolbar-strip{gap:8px!important}
  .calendar-toolbar-nav{flex:1 1 auto!important}
  .calendar-toolbar-nav .fresha-date-pill{flex:1!important;min-width:0!important}
  .calendar-toolbar-today{order:-1!important}
  .calendar-toolbar-view{margin-inline-start:0!important;width:100%!important;order:99!important}
}
.calendar-menu-trigger{
  width:38px!important;height:38px!important;
  display:grid!important;place-items:center!important;
  border-radius:999px!important;
  border:1px solid var(--line)!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  cursor:pointer!important;
  flex:0 0 auto!important;
}
.calendar-menu-trigger svg{width:20px!important;height:20px!important}
.calendar-menu-trigger:hover,.calendar-menu-trigger.active{
  background:var(--accent)!important;
  color:#fff!important;
  border-color:var(--accent)!important;
}
.calendar-menu-dropdown{
  display:none!important;
}
.calendar-menu-dropdown.open{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  inset-inline-end:14px!important;
  z-index:40!important;
  display:grid!important;
  gap:8px!important;
  min-width:260px!important;
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:0 24px 48px rgba(20,18,10,.16)!important;
  padding:12px!important;
}
.calendar-menu-item{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  text-align:start!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  padding:10px 12px!important;
  font-size:13.5px!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.calendar-menu-item:hover{background:#F6F6F3!important}
.calendar-menu-item.btn.gold{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;justify-content:center!important}
.calendar-menu-item.fresha-view-select{appearance:none!important}
@media(max-width:559px){
  #calTlKpiRow{display:flex!important;overflow-x:auto!important;gap:8px!important;-webkit-overflow-scrolling:touch}
  #calTlKpiRow>*{min-width:175px!important;flex:0 0 auto!important}
}
.calendar-menu-item.calendar-menu-select select{
  flex:1!important;
  background:none!important;
  border:none!important;
  color:inherit!important;
  font:inherit!important;
  padding:0!important;
  outline:none!important;
  cursor:pointer!important;
}

.calendar-menu-date-nav .pro-date-pill{flex:1!important;text-align:center!important}
/* Anchor point for the same dropdown pattern reused on other page headers.
   These are pre-existing classes with their own mobile override that
   switches them to display:block/grid (from when they held several
   always-visible buttons); now that each holds just the single (⋮)
   trigger, force them back to a flex row at every width so the button
   stays pinned beside the title instead of stacking below the paragraph
   text as its own full-width block. */
.customers-v2-header,.team-v2-head,.reports-hero,.notifications-hero{
  position:relative!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
}
@media(max-width:720px){
  .customers-v2-header,.team-v2-head,.reports-hero,.notifications-hero{padding:16px!important}
}

/* Settings: shared shell header icon + titled field groups, so a section's
   fields read as named clusters instead of one flat wall of inputs. */
.settings-section-head-title{display:flex!important;align-items:flex-start!important;gap:12px!important}
.settings-section-icon{
  width:38px!important;height:38px!important;
  display:grid!important;place-items:center!important;
  border-radius:12px!important;
  background:var(--accent-soft,rgba(26,26,26,.12))!important;
  color:var(--accent)!important;
  flex:0 0 auto!important;
}
.settings-section-icon svg{width:19px!important;height:19px!important}
.settings-field-group{
  margin-bottom:22px!important;
  padding-top:18px!important;
  border-top:1px solid var(--line)!important;
}
.settings-field-group:first-of-type{padding-top:0!important;border-top:0!important}
.settings-field-group h4{
  margin:0 0 12px!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
}

/* Settings sidebar: group headers so the "All" view reads as labeled
   clusters instead of ~40 cards dumped in one unsorted list. Spans the
   full grid width regardless of which layered .settings-cards-list
   column-count rule currently wins the cascade. */
.settings-group-header{
  grid-column:1/-1!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  color:var(--muted)!important;
  padding:14px 4px 4px!important;
  margin:0!important;
}
.settings-group-header:first-child{padding-top:2px!important}

/* Customer phone field: country dial-code select + local number input,
   side by side, so a number isn't forced into Jordan's local format. */
.phone-with-country-row{display:flex!important;gap:8px!important}
.phone-with-country-row select{flex:0 0 auto!important;width:auto!important;max-width:150px!important}
.phone-with-country-row input{flex:1!important;min-width:0!important}

/* Invoice modal: customer-attendance controls (late minutes / no-show) —
   sits between the summary strip and the numbered sections, so it reads as
   part of "at a glance" info rather than a full numbered step. */
.invoice-attendance-row{
  display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
  flex-wrap:wrap!important;gap:14px!important;
  background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm,12px)!important;
  padding:14px 16px!important;margin-bottom:16px!important;
}
.invoice-late-field{display:flex!important;flex-direction:column!important;gap:6px!important;font-size:12.5px!important;color:var(--muted)!important;font-weight:700!important}
.invoice-late-field input{width:120px!important}
.invoice-attendance-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
.late-arrival-note{font-size:11.5px!important}

/* Customer profile Overview: no-show/late counts stand out a bit once
   they're above zero, without going full alert-red — this is informational
   history, not an error state. */
.attendance-flag{color:#B23B3B!important}

/* Printing an invoice/booking modal (printModal() in app.js) used to print
   a blank page — TWO independent causes stacked:
   1) .modal is position:fixed and .modal-card is a max-height:90vh +
      overflow:auto scroll-clipped box, neither of which a browser's print
      engine "unrolls" into normal page flow, and the dark theme (light
      text on a near-black card) was never adapted for print (white-on-
      white against the printed page).
   2) A SEPARATE, older @media print rule elsewhere in this file
      (`body *{visibility:hidden}` then `.invoice-card,.invoice-card
      *{visibility:visible}`) was written only for openSavedInvoice()'s
      `.invoice-card` modal — it silently swallowed *every other* modal
      (openInvoiceModal/openClosedInvoiceModal use different classes),
      forcing visibility:hidden on them with nothing to undo it. Since
      `visibility:hidden` from `body *` is set explicitly on every
      descendant (not just inherited), overriding it on .modal-card alone
      doesn't reach its children — `.modal-card *` needs the same override.
   Mirrors the existing body.printing-report pattern: toggle a body class
   right before window.print(), scope everything through it, remove it
   after. */
/* The shell itself must be hidden outright: an older print rule sets it
   to display:block (not none), so its #page content (e.g. the full
   calendar grid behind the modal) was still rendering in-flow and
   pushing the actual invoice onto a later page, leaving page 1 blank.
   Was `.app-shell` -- a class that no longer exists anywhere in the
   actual rendered DOM (router.js's shell wrapper only ever carried
   Tailwind utility classes, no semantic hook), so this rule had been a
   silent no-op for a while; #modal/#drawer/#contextMenu are its SIBLINGS
   in router.js's template, not descendants, so hiding it by id doesn't
   touch them. Fixed 2026-09-19 by giving that wrapper a real id
   (#appShell) instead of chasing the print rule to match nothing. */
body.printing-modal #appShell{display:none!important}
body.printing-modal .sidebar,body.printing-modal .topbar,body.printing-modal #drawer,body.printing-modal #contextMenu{display:none!important}
body.printing-modal .modal{position:static!important;inset:auto!important;background:none!important;padding:0!important;display:block!important;visibility:visible!important}
body.printing-modal .modal-card,body.printing-modal .modal-card *{visibility:visible!important}
body.printing-modal .modal-card{position:static!important;max-height:none!important;overflow:visible!important;width:100%!important;max-width:100%!important;box-shadow:none!important;border:none!important;background:#fff!important;color:#000!important}
body.printing-modal .modal-close-btn,body.printing-modal .drawer-close,body.printing-modal .compact-invoice-actions,body.printing-modal .invoice-attendance-row,body.printing-modal .btn,body.printing-modal .row>.btn{display:none!important}
body.printing-modal .muted{color:#555!important}
body.printing-modal .card{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #ddd!important}
body.printing-modal .table th,body.printing-modal .table td{color:#000!important;border-color:#ddd!important}
/* The invoice's "read-only after closing" customer/summary fields render
   as disabled <input>s (styled to look like static text) and the mini-stat
   strips use <strong>/<b>/<span> — none of that has its own print colors,
   so it inherited the app's normal dark-theme input styling (light text on
   a dark input background) and stayed invisible against the forced white
   .modal-card background above, even though the surrounding labels (plain
   text, already caught by the .modal-card color:#000 rule) showed up. */
body.printing-modal .modal-card input,body.printing-modal .modal-card textarea,body.printing-modal .modal-card select{background:#fff!important;color:#000!important;border:1px solid #ddd!important;-webkit-text-fill-color:#000!important}
body.printing-modal .modal-card strong,body.printing-modal .modal-card b,body.printing-modal .modal-card span,body.printing-modal .modal-card label,body.printing-modal .modal-card div{color:#000!important}
body.printing-modal .mini-stat{border:1px solid #ddd!important;background:#fff!important}
body.printing-modal .badge{border:1px solid #999!important;color:#000!important;background:none!important}

/* Staff PDF statement (reports.js's printStaffStatements()) -- one
   .staff-statement-page per employee (plus an optional summary page),
   all inside the same .modal-card the body.printing-modal rules above
   already turn into a clean white sheet. page-break-after:always splits
   each employee onto its own printed/PDF page; the last page in the job
   overrides it to :avoid inline so printing doesn't leave a blank trailing
   page. */
/* Redesigned 2026-09-19 from a Figma export (see git log for the source
   report.html/report.css this was adapted from) -- same monochrome-card
   language as the rest of the light-mode redesign, NOT the export's own
   colors (it was generated against an older/warmer token set). Every
   color below routes through this file's existing --text/--muted/
   --muted-2/--surface/--bg-raised/--bg-sunken/--line/--accent custom
   properties (defined in the :root block above) so a future retune of
   those tokens carries through here automatically, same as everywhere
   else in the app. */
.staff-statement-page{page-break-after:always;padding-bottom:20px;margin-bottom:20px;border-bottom:1px dashed var(--line)}
.staff-statement-page:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.statement-letterhead{display:flex;align-items:center;gap:14px;padding:20px;margin-bottom:18px;border-radius:16px;background:var(--accent)}
.statement-logo{width:44px;height:44px;object-fit:contain;flex:0 0 auto;border-radius:10px;background:rgba(255,255,255,.12)}
.statement-brand{flex:1}
.statement-brand h2{margin:0;font-size:17px;font-weight:900;color:#fff}
.statement-brand p{margin:2px 0 0;font-size:11px;color:rgba(255,255,255,.55)}
.statement-meta{display:flex;flex-direction:column;gap:2px;font-size:11px;color:rgba(255,255,255,.75);text-align:end}
.statement-employee-info{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 14px;border-radius:12px;background:var(--surface)}
.statement-employee-avatar{width:32px;height:32px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:#fff;background:var(--avatar-bg,var(--accent))}
.statement-employee-identity{flex:1;min-width:0}
.statement-employee-identity strong{display:block;font-size:13px;font-weight:800;color:var(--text)}
.statement-employee-identity span{font-size:11px;color:var(--muted)}
.statement-employee-net{padding:6px 12px;border-radius:8px;background:var(--accent);color:#fff;font-size:13px;font-weight:900;white-space:nowrap}
.statement-table{margin-bottom:6px}
.statement-line{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;color:var(--muted)}
.statement-line strong{font-weight:700;color:var(--text)}
.statement-line-strong{margin-top:8px;padding-top:12px;border-top:1px solid var(--line-strong);font-size:14.5px;font-weight:900;color:var(--text)}
.statement-line-strong span{color:var(--text);font-weight:900}
.statement-line-strong strong{font-size:15px}
.statement-subtitle{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-2);margin:16px 0 8px}
.statement-subtable{font-size:11.5px}
.statement-subtable th{color:var(--muted-2);font-weight:800;text-transform:uppercase;font-size:9.5px;letter-spacing:.04em;border-bottom:1px solid var(--bg-sunken)}
.statement-subtable td{color:var(--text);border-bottom:1px solid var(--surface)}
.statement-attendance-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid var(--bg-sunken);font-size:11.5px;color:var(--muted)}
.statement-attendance-row strong{font-weight:800;color:var(--text)}
.statement-signature{display:flex;flex-direction:column;gap:6px;margin-top:28px;width:220px}
.statement-signature span{font-size:11px;color:var(--muted)}
.statement-signature-line{border-bottom:1px solid var(--line-strong);height:28px}
/* Print-time overrides: the generic modal print rules above (line ~924)
   force every strong/b/span/label/div inside .modal-card to plain black
   so ordinary printed modals stay legible with zero per-modal effort --
   but that flattens this statement's deliberate text hierarchy (muted
   labels vs. bold values). Re-assert this statement's own colors at
   matching specificity + !important so they win on print too, without
   touching the generic rule every other printed modal still relies on. */
body.printing-modal .staff-statement-page strong,
body.printing-modal .staff-statement-page b,
body.printing-modal .staff-statement-page span,
body.printing-modal .staff-statement-page label,
body.printing-modal .staff-statement-page div,
body.printing-modal .staff-statement-page p,
body.printing-modal .staff-statement-page h2,
body.printing-modal .staff-statement-page h4,
body.printing-modal .staff-statement-page td,
body.printing-modal .staff-statement-page th{color:#5C5C63!important}
body.printing-modal .staff-statement-page .statement-employee-identity strong,
body.printing-modal .staff-statement-page .statement-line strong,
body.printing-modal .staff-statement-page .statement-line-strong,
body.printing-modal .staff-statement-page .statement-line-strong span,
body.printing-modal .staff-statement-page .statement-subtable td{color:#0A0A0A!important}
/* White text on the black letterhead band / avatar / net-pay badge --
   the whole subtree (via the universal selector), not each tag
   separately, so nothing nested inside them (a <span class="num">, a
   bold total, ...) falls back to the muted/dark defaults above. This is
   3 classes deep, beating the 2-classes-deep blanket rules above it
   regardless of source order, so it doesn't need its own !important
   fight per descendant tag. Literal hex here, not var(--accent) --
   custom properties on content spanning a forced page-break silently
   failed to resolve on any page after the first in testing (Chromium
   print/PDF pagination + CSS custom properties is a known trouble spot),
   so this block intentionally doesn't use the token indirection the rest
   of the app's print CSS otherwise does. */
body.printing-modal .staff-statement-page .statement-letterhead,
body.printing-modal .staff-statement-page .statement-letterhead *,
body.printing-modal .staff-statement-page .statement-employee-net,
body.printing-modal .staff-statement-page .statement-employee-net *,
body.printing-modal .staff-statement-page .statement-employee-avatar{color:#fff!important}
body.printing-modal .staff-statement-page .statement-letterhead,
body.printing-modal .staff-statement-page .statement-employee-net,
body.printing-modal .staff-statement-page .statement-employee-avatar{background:#111111!important}
body.printing-modal .staff-statement-page .statement-employee-info{background:#FAFAFB!important}

/* =========================================================================
   CALENDAR TEAM TIMELINE — built from scratch (cal-tl- prefix only, zero
   overlap with any legacy .cal-, .resource-, .appt, or .fresha-calendar
   selector above). Real time-based absolute positioning for appointment
   blocks (the old renderer relied on a single grid cell's CSS height
   overflowing into the following empty cells, which only ever "worked"
   because nothing exercised two overlapping bookings for the same barber
   at once) with real side-by-side overlap handling, and all 7 booking
   statuses get a distinct color instead of just 3. Daily view only — the
   2/3-day and weekly range view still uses the older .resource-* renderer,
   untouched, on purpose (a time grid isn't practical at 7-day width).
   ========================================================================= */






















.cal-tl-frame{overflow:auto;max-height:74vh;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line)}
.cal-tl-grid{display:grid;grid-template-columns:56px repeat(var(--cal-tl-cols,1),minmax(150px,1fr));width:100%;position:relative}

.cal-tl-corner{position:sticky;top:0;inset-inline-start:0;z-index:6;background:var(--surface);border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line)}
/* Switched from a horizontal row (avatar beside a name+role block) to the
   centered avatar-on-top layout real Fresha uses, per a direct screenshot
   comparison against partners.fresha.com -- this is the resource-calendar
   header the desktop app actually renders by default (the other two
   staff-head variants, .fresha-staff-head/.resource-staff-head, were
   already built this way; this one was the odd one out). */
.cal-tl-headcell{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer}
.cal-tl-headcell:hover{background:var(--bg)}
.cal-tl-headcell .staff-photo{width:56px;height:56px}

.cal-tl-headcell b{display:block;font-size:13px;color:var(--text)}
.cal-tl-headcell span{display:block;font-size:11px;color:var(--muted)}

.cal-tl-gutter{position:sticky;inset-inline-start:0;z-index:4;background:var(--surface)}
.cal-tl-gslot{border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);font-size:10.5px;color:var(--muted);text-align:center;padding-top:3px;font-variant-numeric:tabular-nums;box-sizing:border-box}

.cal-tl-col{position:relative;border-inline-end:1px solid var(--line)}
.cal-tl-slot{border-bottom:1px solid var(--line);box-sizing:border-box;cursor:pointer}
.cal-tl-slot.cal-tl-minor{border-bottom-style:dashed}
.cal-tl-slot:hover{background:rgba(20,20,20,.045)}
.cal-tl-slot.cal-tl-drop-target{background:rgba(20,20,20,.09)}
.cal-tl-slot.cal-tl-invalid-drop{animation:calTlShake .4s}
@keyframes calTlShake{0%,100%{transform:translateX(0)}25%{transform:translateX(4px)}75%{transform:translateX(-4px)}}

.cal-tl-head-menu-btn{border:1px solid var(--line);background:var(--surface);color:var(--muted);width:22px;height:16px;border-radius:6px;font-size:10px;line-height:1;cursor:pointer;padding:0}
.cal-tl-head-menu-btn:hover{background:var(--bg);color:var(--text)}

.cal-tl-now{position:absolute;inset-inline-start:0;height:2px;background:#B23B3B;z-index:3;pointer-events:none}
.cal-tl-now::before{content:"";position:absolute;inset-inline-start:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#B23B3B}
.cal-tl-now-label{position:absolute;inset-inline-start:2px;top:-9px;font-size:10px;font-weight:800;color:#fff;background:#B23B3B;padding:1px 5px;border-radius:4px;z-index:4}

.cal-tl-appt{position:absolute;border-radius:9px;padding:6px 8px;font-size:11.5px;overflow:hidden;border:1px solid transparent;box-shadow:0 1px 3px rgba(20,20,20,.08);cursor:pointer;z-index:2;box-sizing:border-box}
.cal-tl-appt b{display:block;font-size:12px;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-tl-appt span{display:block;font-size:10px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-tl-appt .cal-tl-late{color:#A23B33;font-weight:800;opacity:1}
/* Payment-method badge on a paid appointment block -- small circular icon
   pinned to the corner so it reads at a glance without disturbing the
   existing name/time/service text lines. Specificity beats the generic
   ".cal-tl-appt span" text-line rule above on purpose (needs its own
   display/position/size, not the block-stacked truncating-text styling). */
.cal-tl-appt .cal-tl-pay-badge{position:absolute;top:4px;inset-inline-end:4px;width:15px;height:15px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(10,10,10,.18);opacity:1}
.cal-tl-appt .cal-tl-pay-badge svg{width:9px;height:9px}
.cal-tl-pay-badge--cash,.cal-tl-pay-badge--wallet{color:#16A34A}
.cal-tl-pay-badge--card{color:#2563EB}
.cal-tl-pay-badge--split{color:#7C3AED}
.cal-tl-pay-badge--cliq{color:#D97706}

.cal-tl-appt--booked{background:var(--bg-sunken);border-color:var(--line);color:var(--text)}
.cal-tl-appt--confirmed{background:#E7EEF5;border-color:#2F5D8A;color:#2F5D8A}
.cal-tl-appt--arrived{background:#F6EDDD;border-color:#9A6A1E;color:#9A6A1E}
.cal-tl-appt--started{background:#ECE8F5;border-color:#5B4B8A;color:#5B4B8A}
.cal-tl-appt--completed{background:#E4F0EA;border-color:#2E6B4F;color:#2E6B4F;opacity:.78}
.cal-tl-appt--cancelled{background:#F4F4F6;border-color:#9C998C;color:#78766D;opacity:.65;text-decoration:line-through}
.cal-tl-appt--no_show{background:#F5E4E1;border-color:#A23B33;color:#A23B33;opacity:.75}

/* Premium SaaS reskin (Phase 2 of the Tailwind rollout) — the daily
   timeline grid keeps its existing mechanics (dynamic column count via
   the --cal-tl-cols custom property, JS-computed pixel positioning for
   slots/appointments) since that can't be expressed as static Tailwind
   utility classes Tailwind's build can actually see ahead of time. Only
   the surface colors/radius/shadows change here, to match the approved
   Premium SaaS palette — same selectors, later in the cascade so they win
   without needing !important. */
.cal-tl-corner,.cal-tl-headcell,.cal-tl-gutter{background:#FFFFFF;border-color:#F3F4F6}
.cal-tl-headcell{border-inline-end-color:#F3F4F6}
.cal-tl-headcell:hover{background:#F5F5F5}
.cal-tl-headcell b{color:#0A0A0A}
.cal-tl-headcell span{color:#9CA3AF}
.cal-tl-gslot{border-color:#F3F4F6;color:#9CA3AF}
.cal-tl-col{border-inline-end-color:#F3F4F6}
.cal-tl-slot{border-color:#F3F4F6}
.cal-tl-slot:hover{background:#F5F5F5}
.cal-tl-slot.cal-tl-drop-target{background:#EDEDED}
.cal-tl-now,.cal-tl-now-label{background:#000}
.cal-tl-now::before{background:#000}
.cal-tl-appt{border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.cal-tl-appt--booked{background:#F3F4F6;border-color:#0A0A0A;color:#0A0A0A}
.cal-tl-appt--confirmed{background:#EEF1FF;border-color:#3B4CCA;color:#2E3A9E}
.cal-tl-appt--arrived{background:#FDF3E3;border-color:#B4811F;color:#8A6412}
.cal-tl-appt--started{background:#ECE8F5;border-color:#5B4B8A;color:#5B4B8A}
.cal-tl-appt--completed{background:#F4F4F4;border-color:#9CA3AF;color:#4B5563}
.cal-tl-appt--cancelled{background:#F4F4F6;border-color:#9C998C;color:#78766D}
.cal-tl-appt--no_show{background:#FDEAEA;border-color:#B23B3B;color:#B23B3B}

/* Multi-day/resource view appointment chips were still on the old dark
   theme (navy background, white text) with only a "completed" variant —
   6 of 7 statuses fell back to that dark chip inside an otherwise light
   calendar. Repaints to the same light, 7-state semantic palette as the
   daily timeline's .cal-tl-appt--* above, so both calendar views agree. */
.resource-appt{background:var(--bg-sunken)!important;color:var(--text)!important;border-inline-start-color:var(--line)!important;box-shadow:0 1px 3px rgba(20,20,20,.08)!important}
.resource-appt.confirmed{background:#E7EEF5!important;border-inline-start-color:#2F5D8A!important;color:#2F5D8A!important}
.resource-appt.arrived,.resource-appt.started{background:#F6EDDD!important;border-inline-start-color:#9A6A1E!important;color:#9A6A1E!important}
.resource-appt.completed{background:#E4F0EA!important;border-inline-start-color:#2E6B4F!important;color:#2E6B4F!important;opacity:.78}
.resource-appt.cancelled{background:#F4F4F6!important;border-inline-start-color:#9C998C!important;color:#78766D!important;opacity:.65;text-decoration:line-through}
.resource-appt.no_show{background:#F5E4E1!important;border-inline-start-color:#A23B33!important;color:#A23B33!important;opacity:.75}

@media (max-width:720px){
  
  
  
}

/* Checkout wizard: one question per screen (payment method, then
   discount, then the collected amount) instead of a flat form with
   payment and discount fields sitting empty on the invoice before
   checkout is even pressed. */
.checkout-wizard-modal{max-width:420px}
.star-rating-picker{display:flex;gap:6px;direction:ltr}
.star-rating-btn{background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--line-strong,#3a3a3a);padding:2px;transition:color .12s ease,transform .12s ease}
.star-rating-btn:hover{transform:scale(1.12)}
.star-rating-btn.active{color:#F5F5F5}
.checkout-wizard-options{display:grid;gap:10px;margin-top:16px}
.checkout-wizard-option{padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-size:15px;font-weight:700;cursor:pointer;text-align:center;color:var(--text)}
.checkout-wizard-option:hover{background:var(--bg);border-color:var(--text)}
.checkout-wizard-option-split{border-style:dashed}
/* Services|Products pill toggle inside the booking drawer -- the first tab
   component in the app, so there's no existing pattern to reuse; styled to
   sit visually with the surrounding booking-section-title/booking-services-
   summary blocks (same border-radius scale, var()-based tokens so it reads
   correctly in both themes) rather than introducing a new visual language. */
.booking-flow-tabs{display:flex;gap:8px;margin-bottom:12px}
.booking-flow-tab{flex:1;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:800;cursor:pointer;text-align:center;transition:background .15s,color .15s,border-color .15s}
.booking-flow-tab:hover{border-color:var(--text)}
.booking-flow-tab.active{background:var(--accent);color:var(--color-ps-accent-ink,#fff);border-color:var(--accent)}
.booking-flow-panel{display:none}
.booking-flow-panel.active{display:block}
/* Generic confirm/danger dialog (openConfirmDialog, app.js) -- deliberately
   its own class, NOT .modal-card, so it never picks up .modal-card's
   phone-only full-screen slide-up override (styles.css ~121-134): this is
   meant to stay a small centered dialog on every screen size, same as the
   Figma spec's "مركزية" wording. modal() already injects a plain × close
   button and provides the shared dark backdrop+blur (.modal{background:...}
   rule) -- reused as-is, only the card itself is new. */
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
/* The phone-width modal rules (max-width:720px, above) bottom-anchor and
   depad the WHOLE #modal flex container regardless of which card class is
   inside it (align-items:flex-end/padding:0 on .modal.open itself) --
   override back to centered whenever this specific dialog is the one
   mounted, so it stays a small centered dialog on phones too, not a
   bottom-anchored full-bleed sheet like .modal-card gets. */
@media(max-width:720px){
  .modal:has(.confirm-dialog-card){align-items:center!important;justify-content:center!important;padding:16px!important}
}
.confirm-dialog-card{width:min(360px,92vw);background:var(--surface,#fff);border:1px solid var(--line);border-radius:20px;padding:24px 22px;text-align:center;animation:scaleIn .18s ease-out}
.confirm-dialog-icon{width:52px;height:52px;border-radius:999px;margin:0 auto 14px;display:grid;place-items:center;background:rgba(217,119,6,.12);color:#D97706}
.confirm-dialog-card.danger .confirm-dialog-icon{background:rgba(239,68,68,.12);color:#EF4444}
.confirm-dialog-card h3{margin:0 0 6px;font-size:16px;font-weight:900;color:var(--text)}
.confirm-dialog-card p{margin:0 0 18px;font-size:13px;color:var(--muted)}
.confirm-dialog-actions{display:flex;gap:10px}
.confirm-dialog-actions .btn{flex:1}
.confirm-dialog-card.danger .confirm-dialog-actions .btn.gold{background:#EF4444!important;color:#fff!important}

/* Mobile appointment bottom sheet (mobileAptSheetHtml, mobileAdmin.js) --
   mounted via openDrawer(html,"mobile-apt-sheet-mode") rather than modal()
   specifically to avoid .modal-card's own phone-width full-screen override
   (this needs to stay a PARTIAL-height rounded-top sheet, not full-screen).
   The generic .drawer/.drawer-panel rules default to a full-height side
   panel anchored to one edge (several with !important, see the base rules
   above) -- every dimension/position property here needs !important to
   actually win against those for this one mode. */
@keyframes mobileSheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.drawer.mobile-apt-sheet-mode.open{align-items:flex-end!important;justify-content:center!important}
.drawer.mobile-apt-sheet-mode .drawer-panel{
  width:100%!important;max-width:560px!important;height:auto!important;max-height:85vh!important;
  margin:0!important;border:0!important;border-radius:28px 28px 0 0!important;
  box-shadow:0 -10px 40px rgba(0,0,0,.25)!important;
  padding:12px 24px 32px!important;
  background:var(--surface,#fff)!important;
  animation:mobileSheetSlideUp .3s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion: reduce){ .drawer.mobile-apt-sheet-mode .drawer-panel{animation:none} }
.mobile-apt-sheet-handle{width:40px;height:4px;background:#E7E7EC;border-radius:999px;margin:0 auto 18px}
.mobile-apt-sheet-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mobile-apt-sheet-title h2{margin:0;font-size:18px;font-weight:900;color:var(--text)}
.mobile-apt-sheet-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid;white-space:nowrap;flex:0 0 auto}
.mobile-apt-sheet-service{margin:4px 0 0;font-size:12px;color:#6E6E77}
.mobile-apt-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.mobile-apt-sheet-cell{background:#FAFAFB;border-radius:16px;padding:12px 14px}
.mobile-apt-sheet-cell span{display:block;font-size:10px;color:#6E6E77;margin-bottom:4px}
.mobile-apt-sheet-cell strong{display:block;font-size:13px;color:#111111;font-weight:800}
.mobile-apt-sheet-actions{display:flex;gap:10px}
.mobile-apt-sheet-confirm{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:#111111;color:#fff;border:0;border-radius:14px;padding:14px;font-size:13px;font-weight:800;cursor:pointer}
.mobile-apt-sheet-confirm:disabled{opacity:.5;cursor:default}
/* Only the "already arrived" state renders an icon (uiIcon("checkSquare"))
   before its label -- unlike .mobile-apt-sheet-danger-btn's own icon,
   this one never got a size rule, so the bare <svg viewBox="0 0 24 24">
   (see uiIcon() in app.js -- no width/height attribute) rendered at the
   browser's default intrinsic SVG size, ballooning the whole button into
   a giant icon tile instead of a normal icon+label row like its sibling
   buttons. Reported live with a screenshot. */
.mobile-apt-sheet-confirm svg{width:18px;height:18px;flex:0 0 auto}
.mobile-apt-sheet-outline{flex:0 0 auto;padding:14px 22px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:13px;font-weight:800;cursor:pointer}
.mobile-apt-sheet-danger-btn{flex:0 0 auto;width:48px;height:48px;border-radius:14px;border:1px solid #FCA5A5;background:#FEF2F2;color:#DC2626;display:grid;place-items:center;cursor:pointer}
.mobile-apt-sheet-danger-btn svg{width:20px;height:20px}
.mobile-apt-sheet-cancelled-banner{background:#FAFAFB;border-radius:16px;padding:14px;text-align:center;color:#6E6E77;font-size:13px;font-weight:700}

/* -- 2026-08-29, AptSheet expansion to match the desktop invoice modal's
   content (customer contact, services+products, lateness, no-show) --
   the sheet used to show only a name/badge/comma-joined-service string. -- */
.mobile-apt-sheet-contact{margin:4px 0 0;font-size:12px;color:#6E6E77;direction:ltr;text-align:end}
.mobile-apt-sheet-items{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:14px}
.mobile-apt-sheet-item-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--text)}
.mobile-apt-sheet-item-row:last-child{border-bottom:0}
.mobile-apt-sheet-item-empty{padding:12px;text-align:center;font-size:12px;color:#6E6E77;border-bottom:1px solid var(--line)}
.mobile-apt-sheet-items-divider{padding:7px 12px;font-size:10.5px;font-weight:800;color:#6E6E77;background:#FCFCFD;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.03em}
.mobile-apt-sheet-total-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#F4F4F6;font-size:13px;font-weight:800;color:var(--text)}

.mobile-apt-sheet-late-section{background:#FAFAFB;border-radius:16px;padding:12px 14px;margin-bottom:14px;display:grid;gap:10px}
.mobile-apt-sheet-late-label{font-size:11px;color:#6E6E77}
.mobile-apt-sheet-late-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mobile-apt-sheet-stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface,#fff)}
.mobile-apt-sheet-stepper button{width:36px;height:36px;border:0;background:transparent;font-size:17px;line-height:1;color:var(--text);cursor:pointer}
.mobile-apt-sheet-stepper button:hover{background:#F1F1F4}
.mobile-apt-sheet-stepper input{width:56px;height:36px;border:0;border-inline:1px solid var(--line);text-align:center;background:var(--surface,#fff);color:var(--text);font-size:13px}
.mobile-apt-sheet-noshow-done{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:12px;background:#F0FDF4;color:#16A34A;border:1px solid #86EFAC;font-size:12.5px;font-weight:700;justify-self:start}
.mobile-apt-sheet-noshow-btn{width:100%}
.mobile-apt-sheet-unpaid-banner{background:#FFFBEB;color:#92400E;border:1px solid #FDE68A;border-radius:14px;padding:10px 12px;text-align:center;font-size:12.5px;font-weight:700;margin-bottom:14px}

/* -- mobile Reports screen's new compact filter sheet (branch + employee
   only -- see mobileReportsFilterSheetHtml). Reuses the AptSheet's bottom-
   sheet chrome (.mobile-apt-sheet-panel/-handle/-head/-actions), just adds
   its own plain label/select stack. -- */
.mobile-report-filter-fields{display:grid;gap:12px;margin:16px 0 4px}
.mobile-report-filter-fields label{display:grid;gap:6px;font-size:11px;color:#6E6E77;font-weight:700}
.mobile-report-filter-fields select{border:1px solid var(--line);background:var(--surface,#fff);color:var(--text);border-radius:12px;padding:12px;font-size:13px}
.mobile-report-filter-fields .mrf-date-btn{border:1px solid var(--line);background:var(--surface,#fff);color:var(--text);border-radius:12px;padding:12px;font-size:13px;text-align:start;width:100%;font-weight:700}

/* New-appointment 3-step mobile wizard (openMobileNewApptWizard,
   mobileAdmin.js) -- plain .modal-card (full-screen on phones, which is
   the desired/expected feel for a multi-step flow, unlike the compact
   AptSheet above), just new content classes inside it per step. Each step
   draws its own close/back control (mobileWizardHeaderHtml) -- modal()
   always injects its own generic × button too, so hide that one here to
   avoid two redundant close controls on screen at once. */
#modal:has(.mobile-wizard-card)>.modal-close-btn{display:none}

/* Desktop sidebar drawer overlay (router.js render()/toggleSidebar()) --
   was a plain flex show/hide that pushed <main> aside when open (the
   <aside> was a normal flex sibling taking up its own 240px of row width).
   Once state.sidebarOpen also adds md:fixed (see render()), the aside is
   removed from flow entirely and <main> naturally reflows to full width
   on its own -- no separate "don't resize main" rule needed, this slide-in
   animation is the only genuinely new piece. --sidebar-slide-from is set
   inline per-render (100% for RTL, -100% for LTR) since a transform has no
   logical-property equivalent to inset-inline-start. */
@keyframes sidebarDrawerSlideIn{from{transform:translateX(var(--sidebar-slide-from,100%))}to{transform:translateX(0)}}
.sidebar-drawer-slide{animation:sidebarDrawerSlideIn .22s cubic-bezier(.32,.72,0,1)}
@media (prefers-reduced-motion: reduce){ .sidebar-drawer-slide{animation:none} }

/* Topbar notifications bell + quick panel (notifPanelDropdown, notifications.js)
   -- reuses .calendar-menu-dropdown's open/positioning mechanics (and
   toggleActionMenu's outside-click-close/viewport-edge-nudge) wholesale,
   just widened and restructured (head/list/footer instead of a uniform
   grid of button rows) since this holds richer content than a plain menu. */
.calendar-menu-dropdown.notif-panel-dropdown.open{min-width:340px!important;display:block!important;padding:0!important;overflow:hidden}
.notif-panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.notif-panel-head strong{font-size:14px;color:var(--text)}
.notif-panel-markall{background:none;border:0;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;padding:0}
.notif-panel-list{max-height:360px;overflow:auto}
.notif-panel-row{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border:0;border-bottom:1px solid var(--line);background:var(--surface);text-align:start;cursor:pointer}
.notif-panel-row:last-child{border-bottom:0}
.notif-panel-row:hover{background:#F6F6F3}
.notif-panel-row-icon{width:32px;height:32px;border-radius:999px;background:#F4F4F6;color:var(--text);display:grid;place-items:center;flex:0 0 auto}
.notif-panel-row-icon svg{width:16px;height:16px}
.notif-panel-row-main{flex:1;min-width:0}
.notif-panel-row-main strong{display:block;font-size:12.5px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-panel-row-main span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.notif-panel-row.unread .notif-panel-row-main strong{color:var(--text)}
.notif-panel-row-dot{width:8px;height:8px;border-radius:999px;background:#EF4444;flex:0 0 auto}
.notif-panel-seeall{display:block;width:100%;padding:12px;text-align:center;background:var(--surface);border:0;border-top:1px solid var(--line);color:var(--accent);font-size:12.5px;font-weight:800;cursor:pointer}
.mobile-wizard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.mobile-wizard-back{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--surface,#fff);display:grid;place-items:center;cursor:pointer;color:var(--text)}
.mobile-wizard-back svg{width:16px;height:16px}
.mobile-wizard-steps{display:flex;gap:6px}
.mobile-wizard-dot{width:8px;height:8px;border-radius:999px;background:#E7E7EC}
.mobile-wizard-dot.active{background:#111111;width:20px;border-radius:999px}
.mobile-wizard-dot.done{background:#6E6E77}
.mobile-wizard-title{margin:0 0 16px;font-size:17px;font-weight:900;color:var(--text)}
.mobile-wizard-list{display:flex;flex-direction:column;gap:10px}
.mobile-wizard-barber-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface,#fff);cursor:pointer;text-align:start;width:100%}
.mobile-wizard-barber-row:active{background:#F4F4F6}
.mobile-wizard-barber-name{font-size:14px;font-weight:800;color:var(--text)}
.mobile-wizard-time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mobile-wizard-time-slot{padding:12px 4px;border-radius:14px;border:1px solid var(--line);background:var(--surface,#fff);font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.mobile-wizard-time-slot:active{background:#F4F4F6}
.mobile-wizard-time-slot.disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.mobile-wizard-summary{display:flex;gap:10px;margin-bottom:16px}
.mobile-wizard-summary>div{flex:1;background:#FAFAFB;border-radius:14px;padding:10px 12px}
.mobile-wizard-summary span{display:block;font-size:10px;color:#6E6E77;margin-bottom:2px}
.mobile-wizard-summary strong{display:block;font-size:13px;color:#111111;font-weight:800}
.mobile-wizard-field{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:16px}
.mobile-wizard-field input{margin-top:6px}
.mobile-wizard-services{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto}
.mobile-wizard-total{margin-top:14px;font-size:14px;font-weight:900;color:var(--text);text-align:end}
.mobile-wizard-success{text-align:center;padding:40px 20px}
.mobile-wizard-success-check{width:64px;height:64px;border-radius:999px;background:#DCFCE7;color:#16A34A;display:grid;place-items:center;margin:0 auto 16px;animation:scaleIn .3s ease-out}
.mobile-wizard-success-check svg{width:32px;height:32px}
.mobile-wizard-success h3{margin:0;font-size:16px;font-weight:900;color:var(--text)}
/* Per-product quantity stepper -- a third grid cell alongside the existing
   checkbox/main-content pair .service-list-item was built for (its grid is
   `auto 1fr auto`, so a 3rd auto-width child slots in cleanly), but a bare
   <input type=number> otherwise renders with the browser's own unstyled
   default (thin native border, tiny spinner) which reads as visual noise
   next to the app's own rounded-card design language. */
.bkProdQty,.editSaleProdQty{border:1px solid var(--line)!important;border-radius:10px!important;padding:6px 4px!important;text-align:center;background:var(--surface)!important;color:var(--text)!important;-moz-appearance:textfield}
.bkProdQty::-webkit-outer-spin-button,.bkProdQty::-webkit-inner-spin-button,.editSaleProdQty::-webkit-outer-spin-button,.editSaleProdQty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.checkout-wizard-back-row{margin-top:16px;gap:8px}
.checkout-split-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.checkout-split-row select,.checkout-split-row input{width:100%}

/* =========================================================================
   PREMIUM SAAS TOKEN ALIGNMENT — the Tailwind rollout (see tailwind-input.css)
   hand-converts each screen's shell to explicit ps- utility classes one
   phase at a time, but large content trees deep inside a few screens
   (Reports' results panel, Team's per-tab profile content, the ~40
   Settings sub-panels) are still built on the SIMPLE theme block above via
   its shared .card/.btn/.badge/.table/etc. selectors. Rather than hand
   -rewriting every one of those template call sites (the exact risk
   REFACTOR_PLAN.md warns about for a 7,500-line single file with no
   frontend tests), this retargets the SIMPLE theme's own CSS custom
   properties to the same design-token values the migrated screens use, so
   every remaining screen reads as the same system immediately. Same
   "reuse the exact selector, later in the file wins" technique as the
   SIMPLE block itself and the .cal-tl-* section above.
   ========================================================================= */
:root{
  --bg:#0C0C0C!important;
  --text:#F5F5F5!important;
  --muted:#8A8A8A!important;
  --line:#2A2A2A!important;
}
/* --accent (and --accent-2/--accent-deep/--accent-soft/--accent-soft-strong,
   plus the newer --color-ps-accent* tokens, further down) used to be pinned
   here so the grayscale relaunch couldn't be knocked off-spec by a stale
   seeded gold default -- but that also permanently disabled the real
   per-salon theme-color feature (applyThemeColor() in app.js), which the
   owner explicitly asked to have working again. Left unpinned now that the
   seeded default itself is grayscale (#1A1A1A), so the app still renders
   monochrome out of the box and only recolors if someone actually sets a
   custom theme color from Settings. */
.card,.mini-stat,.tile,.settings-card,.team-branch-card,.team-member-card,
.notification-tile,.report-kpi,.f-stat,.branch-box,.loyalty-card,.month-card,
.week-day-card,.electronic-menu-section,.settings-list,.range-day{
  border-radius:16px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
}
.btn.gold{box-shadow:none!important}


/* Phase 2 of the approved graphics direction -- reusable empty-state badge (see emptyState() in app.js). Grayscale radial gradient + layered inset/drop shadows for an embossed-lite 3D feel, staying within the light theme (no gold/dark showcase treatment -- that stays reserved for the future medallion-badge concept, not shipped app-wide). */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:52px 24px;text-align:center}
.empty-state-badge{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#2e2e2e,#232323 55%,#1a1a1a 100%);display:grid;place-items:center;box-shadow:0 12px 22px -10px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.08),inset 0 -3px 5px rgba(0,0,0,.4);color:#ffffff;flex-shrink:0}
.empty-state-badge svg{width:32px;height:32px}
.empty-state strong{font-size:15px;font-weight:700;color:#0A0A0A}
.empty-state p{font-size:13px;color:#6B7280;margin:0;max-width:300px;line-height:1.5}


/* Phase 3 of the approved graphics direction -- the full medallion badge treatment, reserved for large/prominent contexts only (per an explicit scoping decision: not the small repeated sidebar icons). Applied to the page-title area in the topbar (public/js/router.js render()), shown once per screen next to the H1. Same visual language as .empty-state-badge (grayscale radial gradient + layered shadows) but sized for an inline title context instead of a big centered empty area. */
.page-title-medallion{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#2e2e2e,#232323 55%,#1a1a1a 100%);display:grid;place-items:center;box-shadow:0 8px 16px -8px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.08),inset 0 -2px 3px rgba(0,0,0,.4);color:#ffffff;flex-shrink:0}
.page-title-medallion svg{width:21px;height:21px}

/* Dark-theme precision pass -- the app-wide "نظام الألوان العام" spec
   (see the accompanying commit): .card/.mini-stat/etc.'s actual on-screen
   background was built from translucent white overlays (rgba(255,255,255,
   .02-.06)) layered on top of the page background across many
   "generations" of this file, not a flat token -- approximates but never
   exactly hits the spec's #1c1c1c. Forced here to the exact value instead.

   --accent-2/--accent-deep/--accent-soft/--accent-soft-strong used to be
   pinned to neutral values here too, alongside --accent above -- disabling
   the real per-salon theme-color feature for the same stale-gold-default
   reason. Unpinned now; see the note above --accent for why that's safe. */
.card,.mini-stat,.tile,.settings-card,.team-branch-card,.team-member-card,
.notification-tile,.report-kpi,.f-stat,.branch-box,.loyalty-card,.month-card,
.week-day-card,.electronic-menu-section,.settings-list,.range-day{
  background:#161616!important;
}
:root{
  --surface:#161616!important;
  --line-strong:rgba(255,255,255,.18)!important;
}

/* Dark-theme precision pass, round 2 -- the previous pass above only
   retargeted the --bg/--text/--muted/--line/--accent/--surface custom
   properties. Two whole classes of bug survive that because they're not
   built from those tokens:
   1. Literal light hex values (#FCFCFD, #F1F0EC, #FFFFFF, #F6F6F3...)
      hardcoded directly on specific selectors throughout the old "SIMPLE"
      light-theme block -- var() overrides can't touch these, so the
      calendar grid, sidebar, badges, popovers etc. were still rendering
      their old light backgrounds even though --bg/--surface flipped dark.
      Confirmed live via screenshot: the calendar's staff-header row and
      hourly grid rendered solid white while everything else was dark.
   2. `background:var(--accent)` paired with a hardcoded `color:#fff` --
      every one of these was written when --accent was black (so white
      text made sense); now that --accent is white per the new spec
      ("الأبيض يُستخدم فقط للعناصر التفاعلية والمهمة"), each is a
      white-text-on-white-background bug. `.btn.gold` alone is the primary
      button class on every screen not yet migrated to Tailwind (140
      call sites across every page file, including login and the forced
      password-change screen) -- this is the single highest-impact fix in
      this pass.
   Same technique as every override above: reuse the exact original
   selector, appended last so cascade order (not specificity) wins. */

/* -- accent-background buttons/pills: text flips to dark to match the
   white accent -- */
.btn.gold,.fresha-add-btn,.fresha-filter-actions .apply,.unread-dot,
.calendar-menu-trigger:hover,.calendar-menu-trigger.active,
.calendar-menu-item.btn.gold{
  color:var(--color-ps-accent-ink,#111111)!important;
}

/* -- avatars: white circle, dark-#111 initials, regardless of whether a
   real photo exists (photo case just fills the circle over this base) -- */
.avatar,.staff-photo,.client-avatar,.detail-avatar,.f-avatar,
.team-picker-icon,.customer-add-icon{
  background:#ffffff!important;
  color:#111111!important;
  border-color:#ffffff!important;
}


/* -- icon-tile badges (settings/report/notification icons): dark #2a2a2a
   tile, white icon -- distinct from avatars above, matches the spec's
   card-icon-badge treatment (section 1) rather than the avatar treatment
   (section 2) -- */
.notification-icon,.settings-card-icon,.report-kpi-icon,.settings-section-icon{
  background:#2a2a2a!important;
  color:#ffffff!important;
  border-color:transparent!important;
}

/* -- sidebar / badges / popovers / misc surfaces still on literal light
   hex -- */

.badge{background:#202020!important}
.modal-close-btn,.drawer-close,.filter-close,.year-close-btn,
.mini-popover-head button{background:#202020!important}
.fresha-icon-btn:hover,.fresha-today-btn:hover,.fresha-date-pill:hover,
.electronic-menu-item:hover,.calendar-menu-item:hover{background:#202020!important}
.fresha-filter-options label{background:#161616!important}

.executive-summary-pre{background:#161616!important}
.range-day-head,.resource-range-head,.resource-date-label{background:#0C0C0C!important}
.team-employee-modal .employee-service-menu{background:#161616!important}
:root{--bg-raised:#202020!important;--bg-sunken:#080808!important}

/* -- calendar grid (spec section 3): 0.5px #2a2a2a hairlines between
   staff columns/hours, unified #333 frame, 12px radius -- the confirmed
   white-grid bug -- */
.calendar-wrap,.calendar-wrap.fresha-calendar,
.resource-range-calendar,.fresha-range-schedule{
  border-color:#2A2A2A!important;
  border-radius:12px!important;
}
.cal-tl-frame{border-top-color:#2A2A2A!important}
.cal-head,.cal-head>div,.time-cell,.time-head,.cal-cell,
.major-row .cal-cell,.minor-row .cal-cell{
  background:#161616!important;
  border-color:#2A2A2A!important;
}
.cal-tl-corner,.cal-tl-headcell,.cal-tl-gutter,.cal-tl-col,.cal-tl-slot{
  background:#161616!important;
  border-color:#2A2A2A!important;
}
.cal-tl-headcell b{color:#F5F5F5!important}
.cal-tl-headcell span,.cal-tl-gslot{color:#8A8A8A!important;border-color:#2A2A2A!important}
.cal-tl-headcell:hover,.cal-tl-slot:hover{background:#202020!important}
.cal-tl-slot.cal-tl-drop-target{background:#2A2A2A!important}

/* -- current-time line: white 1px, per spec (was still the original
   red/black leftover from earlier theme generations) -- */
.now-line{background:#ffffff!important;box-shadow:none!important;height:1px!important}
.now-label{background:#ffffff!important;color:var(--color-ps-accent-ink,#111111)!important}
.cal-tl-now,.cal-tl-now-label{background:#ffffff!important}
.cal-tl-now::before{background:#ffffff!important}
.cal-tl-now-label{color:var(--color-ps-accent-ink,#111111)!important}

/* -- appointment status chips (daily timeline + resource/range views):
   same 7-state semantic system as before, recolored for dark surfaces
   (saturated text on a dim tint of the same hue, instead of a pale tint
   with a dark shade -- the light-theme pairing reads as barely-there on
   a black background) -- */
.cal-tl-appt--booked,.resource-appt{background:#1C1C1C!important;border-color:#2A2A2A!important;color:#F5F5F5!important}
.cal-tl-appt--confirmed,.resource-appt.confirmed{background:#0A1A0D!important;border-color:#4ADE80!important;color:#4ADE80!important}
.cal-tl-appt--arrived,.resource-appt.arrived,.cal-tl-appt--started,.resource-appt.started{background:#332b10!important;border-color:#f59e0b!important;color:#fbbf24!important}
.cal-tl-appt--completed,.resource-appt.completed{background:#16301f!important;border-color:#22c55e!important;color:#4ade80!important}
.cal-tl-appt--cancelled,.resource-appt.cancelled{background:#262626!important;border-color:#555555!important;color:#888888!important}
.cal-tl-appt--no_show,.resource-appt.no_show{background:#3a1717!important;border-color:#ef4444!important;color:#f87171!important}
.resource-appt.confirmed,.resource-appt.arrived,.resource-appt.started,
.resource-appt.completed,.resource-appt.cancelled,.resource-appt.no_show{
  border-inline-start-color:inherit!important;
}

/* -- mobile (<768px) calendar card list: same .cal-tl-appt status colors
   as the desktop grid, just laid out in document flow instead of
   absolutely positioned on a grid (see calMobileBookingListHtml() in
   calendar.js) -- */
.cal-tl-mobile-list{display:flex;flex-direction:column;gap:8px;padding:10px}
.cal-tl-appt.cal-tl-mobile-card{position:static;top:auto;inset-inline-start:auto;width:100%;height:auto;padding:10px 12px}
.cal-tl-mobile-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-tl-mobile-card-top b{font-size:13.5px;white-space:normal}
.cal-tl-mobile-card-top span{font-size:11px;white-space:nowrap;flex-shrink:0}
.cal-tl-mobile-card-meta{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap}
.cal-tl-mobile-card-meta span{display:inline-flex!important;align-items:center;gap:5px;font-size:11px;white-space:normal!important}
.cal-tl-mobile-barber .staff-photo{width:18px;height:18px;font-size:9px}

/* -- account/form fields (spec section 4): exact radius/padding + 4px
   label-to-field gap, matching the fixed 4/8/12/16/20/24px spacing scale
   (section 6) instead of the old 7px gap left over from the dark-mode-era
   base rule -- */
label{gap:4px!important}
input,select,textarea{border-radius:8px!important;padding:10px 12px!important}

/* Scrollbar side is always pinned left now (html.dir is hardcoded "rtl"
   in applyLang(), see app.js), regardless of the selected language --
   but that only fixes the page-level viewport scrollbar. Every one of
   these containers is its OWN independent scroll surface (overflow:auto
   with its own max-height) and gets its own dir="${rtl()?...}" attribute
   set inline per render, which otherwise flips its scrollbar to the
   right whenever the language is English. Forcing direction here (not
   touching the dir attribute itself, so text/alignment inside each
   still reads correctly) keeps every real scroll surface in the app on
   the left permanently, matching the page scrollbar. Deliberately NOT
   applied to generic reused classes like .table/.grid that only scroll
   in one narrow (mobile) context -- listing the actual named scroll
   containers instead keeps this from bleeding into unrelated non-
   scrolling elements that happen to share a common utility class. */
.sidebar,.calendar-wrap,.cal-tl-frame,.modal-card,.drawer-panel,
.team-picker-card,.customer-profile-drawer-card,.fresha-filter-drawer,
.compact-invoice-modal,.team-employee-modal,.resource-range-calendar,
.weekly-calendar,.fresha-range-schedule,.enhanced-customer-profile,
.customers-v2-table-card,.table-wrap,.calendar-linked-panel,
.customers-v2-subnav,.employee-service-menu,.team-permission-chips,
.linked-customer-card,.linked-booking-shell,.compact-linked-shell,
.saved-report-pre,.executive-summary-pre,.booking-customer-results,
.booking-services-list,.connected-services-list,.invoice-services-list,
.edit-sale-list,.team-member-list,.team-action-log-list,
.finance-day-list,.saved-report-list,.notification-template-list,
.notification-broadcast-list,.settings-cards-list,.filter-sections-list{
  direction:rtl!important;
}

/* Generic .active{background:rgba(26,26,26,.14)!important} above (the
   "pills/chips that used translucent-white-on-dark" rule) is a bare class
   selector, so it also matches any element toggleActionMenu() marks
   active -- including the new topbar "more options" trigger, which is
   supposed to go solid white/black while its dropdown is open. An ID
   selector is needed to out-specificity that rule despite both being
   !important. */
#topbarMoreBtn.active{background:#ffffff!important;color:var(--color-ps-accent-ink,#111111)!important}

/* 2026-08-27: final light-theme override for the whole legacy stylesheet's
   custom-property scope (distinct from tailwind-input.css's --color-ps-*
   tokens, but the same rename: dark -> light, monochrome black accent).
   Every earlier :root block above is now dead weight this supersedes --
   left in place rather than deleted, matching this file's own established
   pattern of appending a new pass rather than editing history in place.
   Every value here is !important and this is the LAST :root block in the
   file, so it wins the cascade over all eight earlier ones regardless of
   their own specificity/importance (see plan/audit notes). */
:root{
  --bg:#FFFFFF!important;
  --bg-raised:#F4F4F6!important;
  --bg-sunken:#EDEDF1!important;
  --surface:#FAFAFB!important;
  --text:#0A0A0A!important;
  --muted:#5C5C63!important;
  --muted-2:#6E6E77!important;
  --line:#F1F1F4!important;
  --line-strong:#E7E7EC!important;
  --accent:#111111!important;
  --accent-2:#2A2A2A!important;
  --accent-deep:#000000!important;
  --accent-soft:rgba(17,17,17,.08)!important;
  --accent-soft-strong:rgba(17,17,17,.14)!important;
  --danger:#DC2626!important;
  --danger-soft:rgba(220,38,38,.10)!important;
  --success:#16A34A!important;
  --success-soft:rgba(22,163,74,.10)!important;
  --warning:#D97706!important;
  --warning-soft:rgba(217,119,6,.10)!important;
  --radius-sm:12px!important;
  --radius:16px!important;
  --radius-lg:24px!important;
  --shadow-sm:0 1px 2px rgba(17,17,17,.08)!important;
  --shadow-md:0 4px 12px rgba(17,17,17,.12)!important;
  --shadow-lg:0 12px 32px rgba(17,17,17,.16)!important;
  --shadow-gold:0 6px 16px rgba(17,17,17,.18)!important;
}

/* 2026-08-27, part 2 -- the 'Dark-theme precision pass' sections above
   (search for that phrase) hardcode literal hex/rgb colors on dozens of
   selectors, completely bypassing the --bg/--surface/--text/etc. custom
   properties the block above this one retargets. Those selectors need
   their own light-theme literal replacements, not just a variable swap.
   Same technique as every pass before this one: reuse the exact original
   selector, appended last so cascade order wins over the dark literals. */

/* -- avatars: dark-mode had a WHITE circle w/ dark initials (for contrast
   against a dark page); light-mode inverts to the unselected tile from
   the new spec (light-grey circle, dark initials) -- a plain white circle
   would be invisible against the new white page background. -- */
.avatar,.staff-photo,.client-avatar,.detail-avatar,.f-avatar,
.team-picker-icon,.customer-add-icon{
  background:#F4F4F6!important;
  color:#111111!important;
  border-color:#F4F4F6!important;
}

/* -- sidebar stays dark per the new spec's explicit "premium split
   design" (dark sidebar + light content, not a fully white admin) -- so
   this one is intentionally NOT flipped to light, just pinned exact. -- */



.badge{background:#F4F4F6!important}
.modal-close-btn,.drawer-close,.filter-close,.year-close-btn,
.mini-popover-head button{background:#F4F4F6!important}
.fresha-icon-btn:hover,.fresha-today-btn:hover,.fresha-date-pill:hover,
.electronic-menu-item:hover,.calendar-menu-item:hover{background:#F1F1F4!important}
.fresha-filter-options label{background:#FAFAFB!important}
.executive-summary-pre{background:#F4F4F6!important}
.range-day-head,.resource-range-head,.resource-date-label{background:#FAFAFB!important}
.team-employee-modal .employee-service-menu{background:#FAFAFB!important}

/* -- calendar grid: white/near-white hairline grid instead of the dark
   grid, per the new spec's calendar section -- */
.calendar-wrap,.calendar-wrap.fresha-calendar,
.resource-range-calendar,.fresha-range-schedule{
  border-color:#E7E7EC!important;
  border-radius:12px!important;
}
.cal-tl-frame{border-top-color:#E7E7EC!important}
.cal-head,.cal-head>div,.time-cell,.time-head,.cal-cell,
.major-row .cal-cell,.minor-row .cal-cell{
  background:#FFFFFF!important;
  border-color:#F1F1F4!important;
}
.cal-tl-corner,.cal-tl-headcell,.cal-tl-gutter,.cal-tl-col,.cal-tl-slot{
  background:#FFFFFF!important;
  border-color:#F1F1F4!important;
}
.cal-tl-headcell b{color:#111111!important}
.cal-tl-headcell span,.cal-tl-gslot{color:#5C5C63!important;border-color:#F1F1F4!important}
.cal-tl-headcell:hover,.cal-tl-slot:hover{background:#F4F4F6!important}
.cal-tl-slot.cal-tl-drop-target{background:#E7E7EC!important}

/* -- current-time line: was flipped red->white for the dark theme (see
   the comment above this section); white is now invisible on a white
   page, so this flips again to solid black -- still monochrome, no red,
   matching the standing "no other brand color" rule. -- */
.now-line{background:#111111!important;box-shadow:none!important;height:1px!important}
.now-label{background:#111111!important;color:#FFFFFF!important}
.cal-tl-now,.cal-tl-now-label{background:#111111!important}
.cal-tl-now::before{background:#111111!important}

/* -- appointment status chips: same 6-state system, recolored with the
   exact light-tint/border/text triads from the new mobile-admin spec's
   calendar status colors (completed/in_progress/upcoming/cancelled/
   no-show), rather than the dark-mode saturated-on-dim-tint pairing. -- */
.cal-tl-appt--booked,.resource-appt{background:#F4F4F6!important;border-color:#D6D6DD!important;color:#111111!important}
.cal-tl-appt--confirmed,.resource-appt.confirmed{background:#F0FDF4!important;border-color:#86EFAC!important;color:#16A34A!important}
.cal-tl-appt--arrived,.resource-appt.arrived,.cal-tl-appt--started,.resource-appt.started{background:#FFFBEB!important;border-color:#FCD34D!important;color:#D97706!important}
.cal-tl-appt--completed,.resource-appt.completed{background:#F0FDF4!important;border-color:#86EFAC!important;color:#16A34A!important}
.cal-tl-appt--cancelled,.resource-appt.cancelled{background:#FAFAFB!important;border-color:#E7E7EC!important;color:#C4C4CC!important}
.cal-tl-appt--no_show,.resource-appt.no_show{background:#FEF2F2!important;border-color:#FECACA!important;color:#DC2626!important}

/* -- topbar "more options" trigger: was solid white bg + accent-ink text;
   --color-ps-accent-ink flipped to white with the rest of the relaunch,
   which made this white-on-white. Pins its own solid black/white pair
   instead of relying on the accent-ink token, matching .btn.gold. -- */
#topbarMoreBtn.active{background:#111111!important;color:#FFFFFF!important}

.star-rating-btn.active{color:#111111!important}

/* 2026-08-27, part 3 -- the actual highest-impact literal override missed
   in part 2: .card and everything grouped with it (mini-stat, tile,
   settings-card, notification-tile, branch-box, settings-list, etc.) was
   forced to a flat literal #161616 (not var(--surface)) by the
   'precision pass' comment block above -- this is the single most-used
   surface selector in the whole app (settings hero/search card, stat
   tiles, notification tiles, month/week-day cards...), confirmed via
   screenshot still rendering solid dark after every fix above it. -- */
.card,.mini-stat,.tile,.settings-card,.team-branch-card,.team-member-card,
.notification-tile,.report-kpi,.f-stat,.branch-box,.loyalty-card,.month-card,
.week-day-card,.electronic-menu-section,.settings-list,.range-day{
  background:#FAFAFB!important;
}

/* -- 2026-08-29, appointment invoice modal (openInvoiceModal, calendar.js) --
   rebuilt to a Figma spec: light info strip, scoped status-badge colors,
   a real lateness stepper, boxed customer fields, one unified
   services+products list, and a reordered action bar with a dynamic
   checkout amount + unpaid banner. Every class below is brand new and
   used ONLY by this modal -- none of it touches .compact-invoice-head/
   .compact-invoice-actions/.invoice-total-row, which are shared with
   customer/team/evaluation/notification modals elsewhere in the app. -- */
.apt-inv-head{display:flex!important;justify-content:space-between!important;align-items:flex-start!important;gap:12px!important;padding:0 0 10px!important;margin-bottom:10px!important;border-bottom:1px solid var(--line)!important}
.apt-inv-head h2{margin:0!important;font-size:16px!important;color:var(--text)!important}
.apt-inv-booking-no{font-variant-numeric:tabular-nums!important}
.apt-inv-card{border:1px solid var(--line)!important;border-radius:18px!important;background:var(--surface)!important;overflow:hidden!important}

.apt-inv-strip{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;background:#FAFAFB!important;padding:12px 14px!important;border-bottom:1px solid var(--line)!important}
.apt-inv-strip>div{display:grid!important;gap:3px!important;padding:0 12px!important;border-inline-start:1px solid #E7E7EC!important;text-align:center!important}
.apt-inv-strip>div:first-child{border-inline-start:0!important}
.apt-inv-strip span{font-size:10.5px!important;color:var(--muted)!important}
.apt-inv-strip strong{font-size:13px!important;color:var(--text)!important}
/* Time/staff/branch fields directly editable in the invoice strip
   (requested 2026-09-29 -- no more separate "Edit" drawer just to
   reassign a barber or reschedule). Kept visually close to the plain
   <strong> text it replaces -- no visible box until focus/hover -- so the
   strip still reads as a compact summary, not a form, until someone
   actually taps a field. */
.apt-inv-strip-input{width:100%!important;border:1px solid transparent!important;background:transparent!important;padding:2px 4px!important;border-radius:8px!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important;text-align:center!important;text-align-last:center!important}
.apt-inv-strip-input:hover{border-color:var(--line)!important;background:#fff!important}
.apt-inv-strip-input:focus{outline:none!important;border-color:var(--accent)!important;background:#fff!important}

.apt-inv-badge{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:3px 10px!important;border-radius:999px!important;font-size:11px!important;font-weight:700!important;border:1px solid transparent!important}
.apt-inv-badge--booked{background:#FFFBEB!important;color:#92400E!important;border-color:#FDE68A!important}
.apt-inv-badge--completed{background:#F0FDF4!important;color:#14532D!important;border-color:#BBF7D0!important}
.apt-inv-badge--no_show{background:#FFF1F1!important;color:#991B1B!important;border-color:#FECACA!important}
.apt-inv-badge--cancelled{background:#FAFAFB!important;color:#5C5C63!important;border-color:#E7E7EC!important}

.apt-inv-late-section{padding:12px 14px!important;border-bottom:1px solid var(--line)!important}
.apt-inv-late-label{font-size:11px!important;color:var(--muted)!important;margin-bottom:8px!important}
.apt-inv-late-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important}
.apt-inv-stepper{display:inline-flex!important;align-items:center!important;gap:0!important;border:1px solid var(--line)!important;border-radius:11px!important;overflow:hidden!important;background:#FAFAFB!important}
.apt-inv-step-btn{width:32px!important;height:32px!important;border:0!important;background:transparent!important;font-size:16px!important;line-height:1!important;color:var(--text)!important;cursor:pointer!important}
.apt-inv-step-btn:hover{background:#F1F1F4!important}
.apt-inv-stepper input{width:56px!important;height:32px!important;border:0!important;border-inline:1px solid var(--line)!important;text-align:center!important;background:var(--surface)!important;color:var(--text)!important;font-size:13px!important;font-variant-numeric:tabular-nums!important}
.apt-inv-attendance-actions{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:wrap!important}
.apt-inv-noshow-done{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:6px 12px!important;border-radius:10px!important;background:#F0FDF4!important;color:#16A34A!important;border:1px solid #86EFAC!important;font-size:12px!important;font-weight:600!important}

.apt-inv-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
.apt-inv-field-box{background:#FAFAFB!important;border:1px solid #F1F1F4!important;border-radius:12px!important;padding:8px 10px!important}
.apt-inv-field-box label{display:block!important;font-size:10px!important;color:var(--muted)!important;margin-bottom:3px!important}
.apt-inv-field-box input{width:100%!important;border:0!important;background:transparent!important;padding:0!important;font-size:13px!important;color:var(--text)!important}
.apt-inv-field-box input:focus{outline:none!important}

.apt-inv-items-box{border:1px solid var(--line)!important;border-radius:13px!important;overflow:hidden!important;background:var(--surface)!important}
.apt-inv-item-row{display:grid!important;grid-template-columns:1fr auto auto!important;align-items:center!important;gap:10px!important;padding:9px 12px!important;border-bottom:1px solid var(--line)!important;font-size:12.5px!important;color:var(--text)!important}
.apt-inv-item-row:last-child{border-bottom:0!important}
.apt-inv-item-empty{padding:12px!important;text-align:center!important;font-size:12px!important;color:var(--muted)!important;border-bottom:1px solid var(--line)!important}
.apt-inv-items-divider{padding:7px 12px!important;font-size:10.5px!important;font-weight:700!important;color:var(--muted)!important;background:#FCFCFD!important;border-bottom:1px solid var(--line)!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.apt-inv-total-row{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:10px 12px!important;background:#F4F4F6!important;font-size:13px!important;font-weight:700!important;color:var(--text)!important}

.apt-inv-notes-label{display:grid!important;gap:5px!important;font-size:11px!important;margin-top:9px!important;color:var(--text)!important}
.apt-inv-notes-label textarea{min-height:56px!important;padding:8px 10px!important;border-radius:11px!important;font-size:11.5px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--text)!important}
.apt-inv-mini-totals{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin-top:10px!important}
.apt-inv-mini-totals div{border:1px solid var(--line)!important;border-radius:12px!important;padding:8px 10px!important;background:#FAFAFB!important;display:grid!important;gap:3px!important}
.apt-inv-mini-totals span{font-size:10px!important;color:var(--muted)!important}
.apt-inv-mini-totals strong{font-size:12.5px!important;color:var(--text)!important}

.apt-inv-actions{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important;padding-top:12px!important;margin-top:12px!important;border-top:1px solid var(--line)!important}
.apt-inv-actions-left,.apt-inv-actions-right{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.apt-inv-checkout-btn{background:#111111!important;color:#FFFFFF!important;font-weight:700!important;border-color:#111111!important}
.apt-inv-checkout-btn:hover{background:#000000!important}
.apt-inv-unpaid-banner{margin-top:10px!important;padding:9px 12px!important;border-radius:11px!important;background:#FFFBEB!important;color:#92400E!important;border:1px solid #FDE68A!important;font-size:12px!important;font-weight:600!important;text-align:center!important}

@media(max-width:820px){
  .apt-inv-strip,.apt-inv-fields,.apt-inv-mini-totals{grid-template-columns:minmax(0,1fr)!important}
  .apt-inv-strip>div{border-inline-start:0!important;border-top:1px solid #E7E7EC!important;padding-top:8px!important}
  .apt-inv-strip>div:first-child{border-top:0!important;padding-top:0!important}
  .apt-inv-actions{flex-direction:column!important;align-items:stretch!important}
  .apt-inv-actions-left,.apt-inv-actions-right{justify-content:center!important}
}
body.printing-modal .apt-inv-actions,body.printing-modal .apt-inv-late-section,body.printing-modal .apt-inv-unpaid-banner{display:none!important}

/* .invoice-section/.invoice-section-title (still used for the numbered
   "1/2/3" customer/services/checkout sections above) were never migrated
   off the old dark-glass assumption either -- the numbered circle badge
   was near-white-on-white and effectively invisible. */
.invoice-section{border-bottom:1px solid var(--line)!important}
.invoice-section-title>span{background:#111111!important;border-color:#111111!important;color:#FFFFFF!important}
.invoice-section-title h3{color:var(--text)!important}

/* -- 2026-09-02, unifying "services list" across the app (openEmployeeModal
   was its own hand-rolled dark ".electronic-menu-*" board unrelated to
   every other rendering of the same concept -- see calendar.js's
   .booking-service-group/.service-list-item, now reused there directly).
   These two rules are for the one place that stays -- the read-only
   staff-profile Services tab -- now grouped by category like the edit
   view, instead of category squeezed into a 4th inline column. -- */
.team-service-group{margin-bottom:14px}
.team-service-group:last-child{margin-bottom:0}
.team-service-group-head{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.team-service-group .team-service-item{grid-template-columns:1fr auto auto}

/* Settings -> Service management: services grouped by category (was one
   flat unsorted table with category squeezed into a column), plus a real
   category manager (rename/reorder/delete) above it -- see settings.js's
   renderServiceSettings()/serviceCategoryManagerHtml(). */
.service-category-group{margin-bottom:18px}
.service-category-group:last-child{margin-bottom:0}
.service-category-group-head{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.service-category-list{display:flex;flex-direction:column;gap:6px}
.service-category-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line,#eee);border-radius:8px}
.service-category-name{flex:1;font-weight:600}
.service-category-group table.table tbody tr{cursor:grab}
.service-category-group table.table tbody tr:active{cursor:grabbing}
.service-drag-handle{width:24px;text-align:center;color:var(--line-strong,#999);font-size:16px;letter-spacing:-2px;user-select:none}

/* Team page -> team member cards: drag-to-reorder within the current
   branch, same native-DnD pattern as .service-category-group above (see
   team.js's handleTeamDragStart/handleTeamDrop). */
.team-member-card{cursor:grab}
.team-member-card:active{cursor:grabbing}
.team-drag-handle{color:var(--line-strong,#999);font-size:16px;letter-spacing:-2px;user-select:none;flex-shrink:0}

/* -- 2026-09-02, unifying "permissions list" across the app: the base
   details/summary/.perm-item rules were never migrated off the old dark
   theme (details{background:rgba(0,0,0,.14)}) -- harmless-looking on the
   already-dark Roles & permissions page's .role-editor cards, but this
   same .perm-modules pattern is now reused for a single staff member's
   permission grant (team.js), which sits on an otherwise fully light
   .team-tab-card. Scoped to .perm-modules so nothing else using a bare
   <details> (e.g. .fresha-filter-section, which already has its own
   higher-specificity styling) is affected. -- */
.perm-modules details{background:var(--surface)!important;border-color:var(--line)!important}
.perm-modules summary{color:var(--text)!important}
.perm-modules .perm-item{background:#FAFAFB!important;border-color:var(--line)!important;color:var(--text)!important}
.team-permission-chip-more{display:inline-flex!important;border:1px dashed var(--line)!important;background:transparent!important;color:var(--muted)!important;border-radius:999px!important;padding:7px 10px!important;font-size:11px!important}
.team-permission-chips span:not(.team-permission-chip-more){background:#FAFAFB!important;border-color:var(--line)!important;color:var(--text)!important}

/* -- 2026-09-04, calendar off-hours/blocked-time shading (calendar.js's
   calBarberWorkWindow()/calSlotBlockReason()): .cal-tl-slot itself already
   gets a hardcoded !important background from two earlier passes above
   (a dark-theme one, then the light-theme one that supersedes it) --
   a plain non-important rule on --offhours/--blocked would never show
   through either. Same fix as every other post-rebrand override in this
   file: same selector, !important, appended last so cascade order wins.
   Outside the barber's actual working hours is a visual heads-up only,
   still clickable (the backend already rejects the booking with a clear
   message via scheduleErrorMessage()) -- an actively blocked time gets its
   own distinct look since it's a different reason (an explicit block with
   a stated cause, not just "not on shift"). -- */
.cal-tl-slot.cal-tl-slot--offhours{background:repeating-linear-gradient(135deg,rgba(20,20,20,.072),rgba(20,20,20,.072) 6px,transparent 6px,transparent 12px)!important}
.cal-tl-slot.cal-tl-slot--blocked{background:repeating-linear-gradient(135deg,rgba(178,59,59,.192),rgba(178,59,59,.192) 6px,transparent 6px,transparent 12px)!important}

/* -- 2026-09-04, part 2: the earlier @media(min-width:1100px) attempt at
   putting Customer beside Services checked the wrong thing -- the FULL
   BROWSER VIEWPORT width, when the actual constraint is the booking
   drawer's own width (a fixed side panel, max min(760px,94vw) wide, per
   .booking-drawer-panel.calendar-linked-panel above -- never anywhere
   close to 1100px regardless of how wide the browser window is). Reported
   live with a screenshot still showing it stacked. Switching
   .booking-drawer-shell from a viewport-media-query-gated grid to flexbox
   with wrap fixes this properly: it reacts to the drawer's own available
   width, not the outer window, so Customer sits beside Services whenever
   the drawer itself has room for both (~580px+) and only wraps below
   its own two minimum column widths -- no viewport guesswork. Same
   selector, later in the file, !important -- wins over both the original
   grid rule and the @media rule above regardless of screen size (equal
   specificity, last declared wins). */
/* -- 2026-09-04, part 3: on a phone, swiping the services list scrolled
   the wrong thing. Root cause: .linked-booking-shell/.compact-linked-shell
   (two other classes already on this same element) each carry their own
   pre-existing overflow:auto!important + min-height:0!important -- before
   today, .narrow-linked-shell's overflow:visible!important (removed in
   part 2 above, since it's what wrongly forced single-column on every
   screen) happened to also be the thing keeping those neutralized. With
   it gone, .booking-drawer-shell became its OWN independent scroll
   container, nested inside .drawer-panel's real one -- two overlapping
   scrollable regions is exactly the setup that makes a touch swipe grab
   the wrong one. overflow/min-height/flex-basis added below so
   .drawer-panel (the single, correct scroll owner all along) is the only
   thing that actually scrolls again. */
.booking-drawer-shell{display:flex!important;flex-wrap:wrap!important;gap:16px!important;overflow:visible!important;min-height:0!important;flex-basis:auto!important}
.booking-primary{flex:1 1 320px!important;min-width:0!important;display:block!important;height:auto!important;overflow:visible!important}
.booking-secondary{flex:1 1 240px!important;min-width:0!important;height:auto!important;overflow:visible!important}
.customer-side-card{position:static!important}

/* -- 2026-09-04: iOS Safari auto-zooms the whole page on focusing any
   input/select/textarea under 16px. The base rule ("input,select,
   textarea{...font-size:13.5px!important}" near the top of this file) is
   13.5px everywhere, but the customer fields specifically (reported live)
   are actually smaller still -- .compact-customer-fields/.compact-field-grid
   input set 11.5px!important with higher specificity than a bare `input`
   selector, so a plain input{font-size:16px} override loses to it
   regardless of !important (specificity beats source order when both
   sides are !important). Matching those same compound selectors here so
   this wins on specificity too, not just source order. Scoped to
   small/touch screens only -- desktop's denser sizing is intentional and
   unaffected. */
@media(max-width:768px){
input,select,textarea{font-size:16px!important}
.compact-field-grid input,.compact-field-grid select,.compact-field-grid textarea,.compact-customer-fields input,.compact-invoice-fields input,.compact-invoice-fields select,.invoice-notes-label textarea{font-size:16px!important}
}

/* -- 2026-09-04: audited every modal/drawer in the app for the same
   nested-double-scroll-container shape as the booking-drawer bug fixed
   earlier today (search this file for "part 3"). Found one more real
   instance: openEmployeeModal() (team.js)'s .team-employee-modal is tall
   enough on its own to need the outer .modal-card's own scroll (8 form
   fields + a full services checklist), while the services checklist
   itself (.connected-services-list, shared with openWalkInSaleModal()'s
   product list and the booking drawer's own service list) ALSO
   independently scrolls via its own max-height/overflow -- two real,
   simultaneously-active scroll regions nested in one modal, exactly the
   setup that makes a touch swipe grab the wrong one. Scoped narrowly to
   just this modal: openWalkInSaleModal()'s identical list (a genuinely
   short modal where only the list ever scrolls) and the booking drawer's
   own service list (already handled by the earlier fix) are both
   confirmed fine and deliberately left untouched. */
.team-employee-modal .connected-services-list{overflow:visible!important;max-height:none!important;flex:none!important;min-height:0!important}

/* -- 2026-09-08: the mobileAdmin.js safe-area fix (pb-24 -> calc(6rem +
   env(safe-area-inset-bottom)), same date) only covered the PURPOSE-BUILT
   mobile shell (renderMobileAdmin(), used whenever the viewport is <768px
   AND the account has view_dashboard). render() (router.js) has a SECOND,
   older phone-width layout it falls back to otherwise -- same shape, same
   bug: <main class="...pb-16 md:pb-0"> reserves a flat 4rem for the fixed
   #mobileBottomNav, but that nav ALSO adds its own
   padding-bottom:env(safe-area-inset-bottom) on top of its height on any
   iPhone with a home-indicator inset, so it grows taller than the flat
   reserve and the extra height eats into the page's own last bit of
   content -- reported live as "the bottom bar covers the end of some
   pages" persisting after the first fix, which never touched this second
   shell. #mainContent is the <main> element itself (id added at the same
   time as this rule); an ID beats the .pb-16 utility class on specificity
   without needing !important. Scoped to the same <768px cutoff Tailwind's
   own md: prefix uses, so desktop (which shows the sidebar layout instead,
   no fixed bottom nav) is untouched. */
@media(max-width:767px){
  #mainContent{padding-bottom:calc(4rem + env(safe-area-inset-bottom))}
}