:root{--navy:#15365c;--navy2:#102b49;--blue:#2f79b9;--teal:#11a9a8;--bg:#f4f7fb;--card:#fff;--text:#172334;--muted:#718096;--line:#e3eaf2;--danger:#d94b4b;--ok:#1e9b63;--warn:#c58a16;--shadow:0 8px 24px rgba(25,54,92,.07)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.app{display:flex;min-height:100vh}.sidebar{width:238px;background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:20px 14px;position:fixed;inset:0 auto 0 0;z-index:10}.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 22px}.brand-logo{width:46px;height:54px;border-radius:11px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:0 0 46px}.brand-logo img{width:36px;height:48px;object-fit:contain}.brand b{display:block;font-size:14px;line-height:1.2}.brand span{display:block;font-size:11px;opacity:.7;margin-top:3px}.sidebar nav{display:grid;gap:4px}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#88a8c5;padding:14px 12px 6px;font-weight:800}.sidebar nav button{border:0;background:transparent;color:#dce8f5;text-align:left;padding:11px 12px;border-radius:10px;cursor:pointer;font-weight:650;display:flex;align-items:center;gap:10px}.sidebar nav button:hover,.sidebar nav button.active{background:rgba(255,255,255,.13);color:#fff}.nav-ico{width:20px;text-align:center;opacity:.9}.side-note{position:absolute;bottom:22px;left:22px;right:22px;font-size:11px;line-height:1.65;color:#acc4d9}.main{margin-left:238px;width:calc(100% - 238px);padding:0 26px 42px}.topbar{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:18px}.topbar h1{margin:0;font-size:24px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.top-actions #clock{font-size:11px;color:var(--muted);margin-right:4px}.user-dot{opacity:.35}.btn{border:0;border-radius:9px;background:var(--navy);color:#fff;padding:9px 14px;cursor:pointer;font-weight:700}.btn:hover{opacity:.92}.btn.ghost{background:#eaf1f8;color:var(--navy)}.btn.danger{background:var(--danger)}.btn.ok{background:var(--ok)}.btn.compact{padding:6px 9px;font-size:11px}.primary-large{padding:11px 18px}.grid{display:grid;gap:16px}.cards{grid-template-columns:repeat(4,1fr)}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}.metric .label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.35px}.metric .value{font-size:27px;font-weight:800;margin-top:6px}.metric .small{font-size:11px;color:var(--muted);margin-top:4px}.compact-metric .value{font-size:24px}.section{margin-top:17px}.section-title,.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.section-title h2,.panel-heading h2,.panel-heading h3{font-size:16px;margin:0}.section-title h3,.card h3{margin:0;font-size:15px}.section-help,.panel-heading p{margin:4px 0 0;color:var(--muted);font-size:12px}.filters{display:flex;flex-wrap:wrap;gap:7px}.filters button{border:1px solid var(--line);background:#fff;padding:7px 11px;border-radius:8px;cursor:pointer}.filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}.form-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.field label{display:block;font-size:10px;color:var(--muted);font-weight:800;margin-bottom:5px;text-transform:uppercase;letter-spacing:.35px}.field input,.field select,.search input,.search select{width:100%;border:1px solid #ccd7e4;border-radius:8px;padding:9px 10px;background:#fff}.field small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.field input:focus,.field select:focus,.search input:focus,.search select:focus{outline:2px solid #cce6ff;border-color:var(--blue)}.full{grid-column:1/-1}.span2{grid-column:span 2}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.left-actions{justify-content:flex-start}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:760px}.table th{background:#edf4fa;color:#24415f;font-size:10px;text-transform:uppercase;text-align:left;padding:10px;letter-spacing:.25px}.table td{padding:10px;border-top:1px solid var(--line);font-size:12px;vertical-align:middle}.cell-sub{display:block;color:var(--muted);font-size:10px;margin-top:3px;font-weight:400}.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#edf4fa;color:#2d577c;font-size:10px;font-weight:800}.pill.ok{background:#e5f6ee;color:#18784e}.pill.warn{background:#fff5dc;color:#94690b}.pill.danger{background:#fde9e9;color:#a83737}.two{grid-template-columns:1.3fr .7fr}.two-equal{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}.chart{height:220px;display:flex;align-items:flex-end;gap:12px;padding:15px 8px 5px}.bar{flex:1;background:linear-gradient(180deg,var(--teal),#5ecbc9);border-radius:8px 8px 2px 2px;min-width:20px;position:relative}.bar span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted)}.notice{padding:12px;border-radius:10px;background:#eef7ff;border:1px solid #d6e9fb;color:#315777;font-size:12px}.empty{padding:26px;text-align:center;color:var(--muted)}.compact-empty{padding:16px}.search{display:flex;gap:8px;align-items:center}.search input{max-width:390px}.right{text-align:right}.danger-text{color:var(--danger)}
.reception-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ops-stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:14px 16px;box-shadow:var(--shadow)}.ops-stat span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800}.ops-stat b{display:block;font-size:25px;margin-top:4px}.ops-stat small{color:var(--muted);font-size:10px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:16px}.booking-panel{min-width:0}.side-stack{display:grid;gap:16px;align-content:start}.quick-card{padding:16px}.quick-list{display:grid}.quick-row,.rental-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line)}.quick-row:first-child,.rental-card:first-child{border-top:0}.quick-row b,.rental-card b{font-size:12px}.quick-row small,.rental-card span{display:block;color:var(--muted);font-size:10px;margin-top:3px}.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.action-tile{border:1px solid var(--line);background:#f8fbfd;border-radius:10px;padding:11px;text-align:left;cursor:pointer;color:var(--text)}.action-tile:hover{border-color:#b9cee0;background:#f1f7fb}.action-tile b{display:block;font-size:11px}.action-tile span{display:block;color:var(--muted);font-size:9px;margin-top:4px}.step-badge,.status-count{background:#e8f1f8;color:var(--navy);font-size:10px;font-weight:800;padding:6px 9px;border-radius:999px}.module-chip{display:inline-grid;place-items:center;min-width:42px;padding:5px 7px;background:#e8f5f0;color:#176b45;border-radius:8px;font-weight:800}.row-actions{display:flex;gap:5px;flex-wrap:wrap}.active-table{box-shadow:var(--shadow)}.details-card{padding:0;overflow:hidden}.details-card summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:800;font-size:13px;display:flex;justify-content:space-between;align-items:center}.details-card summary::-webkit-details-marker{display:none}.details-card[open] summary{border-bottom:1px solid var(--line)}.details-body{padding:14px 16px}.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.plan-card{background:#fff;border:1px solid var(--line);border-top:4px solid #a8b8c7;border-radius:14px;padding:16px;box-shadow:var(--shadow)}.plan-gold{border-top-color:#d1a93a}.plan-diamond{border-top-color:#7ca7c4}.plan-titanium{border-top-color:#35465b}.plan-name{font-weight:800;font-size:13px}.plan-hours{font-size:30px;font-weight:850;margin-top:7px}.plan-hours span{font-size:12px;color:var(--muted);margin-left:2px}.plan-meta{font-size:10px;color:var(--muted);margin-top:4px}.plan-prices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.plan-prices div{background:#f5f8fb;border-radius:9px;padding:8px}.plan-prices span,.plan-hidden-price{display:block;font-size:9px;color:var(--muted)}.plan-prices b{display:block;font-size:11px;margin-top:3px}.plan-hidden-price{margin-top:15px;background:#f5f8fb;padding:9px;border-radius:9px}.accounts-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.accounts-actions{display:flex;align-items:center;gap:8px}.account-total{display:grid;grid-template-columns:1.3fr 1fr 1fr;background:linear-gradient(135deg,#15365c,#214d78);border-radius:16px;color:#fff;overflow:hidden}.account-total>div{padding:19px 20px;border-left:1px solid rgba(255,255,255,.12)}.account-total>div:first-child{border-left:0}.account-total span{display:block;font-size:10px;text-transform:uppercase;color:#bdd0e1}.account-total strong{display:block;font-size:24px;margin-top:5px}.account-total small{display:block;font-size:10px;color:#bdd0e1;margin-top:4px}.account-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.account-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px;box-shadow:var(--shadow)}.account-card.accent{border-color:#b9d7d2}.account-card span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800}.account-card b{display:block;font-size:20px;margin-top:6px}.account-card small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.method-grid>div{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:11px}.method-grid span{display:block;color:var(--muted);font-size:10px}.method-grid b{display:block;font-size:13px;margin-top:4px}.module-grid{display:grid;grid-template-columns:repeat(6,minmax(96px,1fr));gap:10px}.module-status{border:2px solid transparent;border-radius:12px;padding:12px 9px;cursor:pointer;text-align:center;background:#fff;display:flex;flex-direction:column;gap:4px;transition:transform .12s ease}.module-status:hover{transform:translateY(-2px)}.module-status.available{background:#e7f7ee;border-color:#7dcc9e;color:#176b45}.module-status.busy{background:#fde9e9;border-color:#e59a9a;color:#a83737}.module-status.selected{box-shadow:0 0 0 3px rgba(47,121,185,.22)}.module-status b{font-size:15px}.module-status span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:5px}.module-status span::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}.module-occupant{display:block;font-size:9px;color:inherit;opacity:.75;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.booking-step{display:flex;gap:13px;padding:16px 0;border-top:1px solid var(--line)}.booking-step:first-of-type{border-top:0;padding-top:6px}.booking-step-num{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;margin-top:2px}.booking-step-body{flex:1;min-width:0}.booking-step-body>label{display:block;font-size:11px;color:var(--muted);font-weight:800;margin-bottom:7px;text-transform:uppercase;letter-spacing:.35px}.booking-step-body select,.booking-step-body input{width:100%;border:1px solid #ccd7e4;border-radius:8px;padding:9px 10px;background:#fff;margin-bottom:8px}.booking-step-body select:last-child,.booking-step-body input:last-child{margin-bottom:0}.field-sublabel{display:block;font-size:9px;color:var(--muted);font-weight:700;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1e9b63;margin-right:5px;animation:livePulse 1.6s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(30,155,99,.5)}70%{box-shadow:0 0 0 6px rgba(30,155,99,0)}100%{box-shadow:0 0 0 0 rgba(30,155,99,0)}}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#f4f8fb,#e8f2f7)}.login-card{width:min(430px,92vw);background:#fff;border:1px solid #dce7ef;border-radius:20px;padding:32px;box-shadow:0 18px 50px rgba(20,45,70,.12)}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}.login-brand img{width:48px;height:48px;object-fit:contain}.login-brand b,.login-brand span{display:block}.login-brand span{color:#668095;font-size:13px;margin-top:2px}.login-card h1{margin:0 0 6px}.login-card .actions{justify-content:flex-end;margin-top:18px}.login-card .btn{min-width:120px}.notice.danger{color:#9d2b2b;background:#fff1f1;border-color:#f2caca}#userBadge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#526b7e}#ownerTools{display:inline-flex;gap:5px}
#toast{position:fixed;right:22px;bottom:22px;background:#102b49;color:#fff;padding:11px 14px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.15);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;z-index:100}#toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.cards,.plan-grid,.account-grid,.reception-overview{grid-template-columns:repeat(2,1fr)}.workspace-grid{grid-template-columns:1fr}.module-grid{grid-template-columns:repeat(4,minmax(75px,1fr))}}@media(max-width:900px){.sidebar{width:205px}.main{margin-left:205px;width:calc(100% - 205px);padding:0 16px}.form-grid{grid-template-columns:repeat(2,1fr)}.account-total{grid-template-columns:1fr}.account-total>div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}.account-total>div:first-child{border-top:0}}
.nav-open-btn,.nav-close-btn{display:none;border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer;padding:6px 8px;border-radius:8px;line-height:1}
.nav-open-btn{color:var(--navy);background:#eaf1f8;margin-right:4px}
.nav-close-btn{color:#fff;margin-left:auto;font-size:16px}
.nav-backdrop{display:none}
@media(max-width:650px){
  .app{display:block}
  .main{margin:0;width:100%;padding:0 14px 32px}
  .topbar{padding:14px 0;align-items:flex-start;flex-direction:column;gap:6px}
  .title-wrap{display:flex;align-items:center;gap:8px}
  .top-actions{justify-content:flex-start;width:100%}
  .cards,.plan-grid,.account-grid,.reception-overview,.form-grid,.two,.two-equal,.three,.method-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .quick-actions{grid-template-columns:1fr}
  .module-grid{grid-template-columns:repeat(3,minmax(70px,1fr))}
  .nav-open-btn{display:inline-flex;align-items:center;justify-content:center}
  .nav-close-btn{display:inline-flex;align-items:center;justify-content:center}
  /* Off-canvas drawer: the sidebar no longer pushes the page content down (the old behavior
     buried the whole app below a tall stacked menu on a phone) — it slides in as an overlay
     instead, closed by default, so the reception screen itself is what a phone sees first. */
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(78vw,300px);height:100vh;transform:translateX(-100%);transition:transform .22s ease;z-index:40;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
  .sidebar.open{transform:translateX(0)}
  [dir="rtl"] .sidebar{inset:0 0 0 auto;transform:translateX(100%)}
  [dir="rtl"] .sidebar.open{transform:translateX(0)}
  .sidebar nav{grid-template-columns:1fr;overflow-y:auto}
  .nav-label{grid-column:auto}
  .side-note{display:none}
  .nav-backdrop{display:none;position:fixed;inset:0;background:rgba(10,28,48,.45);z-index:35}
  .nav-backdrop.open{display:block}
  body.nav-open{overflow:hidden}
}
[dir="rtl"] .sidebar{inset:0 0 0 auto;left:auto;right:0}
[dir="rtl"] .main{margin-left:0;margin-right:238px}
[dir="rtl"] .side-note{left:22px;right:22px}
[dir="rtl"] .sidebar nav button{text-align:right}
[dir="rtl"] .search input{text-align:right}
[dir="rtl"] .table th,[dir="rtl"] .table td{text-align:right}
[dir="rtl"] .field label{text-align:right}
[dir="rtl"] .login-card .actions{justify-content:flex-start}
[dir="rtl"] .actions{justify-content:flex-start}
[dir="rtl"] .left-actions{justify-content:flex-end}
[dir="rtl"] #toast{right:auto;left:22px}
@media(max-width:900px){[dir="rtl"] .main{margin-left:0;margin-right:205px}}
@media(max-width:650px){[dir="rtl"] .main{margin-right:0}}
.student-pick-list{display:grid;gap:8px;margin-top:8px;max-height:260px;overflow:auto}
.student-pick{width:100%;text-align:left;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid #dbe4ee;border-radius:10px;background:#fff;cursor:pointer}
.student-pick:hover{background:#f5f8fb}
.student-pick b{font-size:14px;color:#172334}
.student-pick span{font-size:12px;color:#6c7d90}
.selected-student{margin-top:8px}