@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  --navy: #102544;
  --navy-2: #17365f;
  --navy-3: #0b1d36;
  --gold: #d5a238;
  --gold-light: #f0d48a;
  --gold-soft: #fff6df;
  --ivory: #f4f1eb;
  --card: #fffefb;
  --text: #2b4059;
  --muted: #858e98;
  --line: #e6e0d6;
  --green: #347b5e;
  --red: #c85055;
  --blue: #17648d;
  --shadow: 0 14px 38px rgba(30,47,68,.065), 0 2px 6px rgba(30,47,68,.025);
  --shadow-strong: 0 24px 60px rgba(16,37,68,.18);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; min-height: 100%; overflow-x: hidden; background: var(--ivory); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; margin: 0; min-height: 100vh; overflow-x: hidden; font-family: Cairo, Arial, sans-serif; background: var(--ivory); color: var(--text); text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .btn { cursor: pointer; }

.topbar { position: sticky; top: 0; z-index: 35; height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 28px; border-bottom: 1px solid rgba(219,213,203,.85); background: rgba(250,248,244,.92); box-shadow: 0 5px 24px rgba(31,46,65,.035); backdrop-filter: blur(18px); }
.brand { display: grid; grid-template-columns: 48px auto; align-items: center; column-gap: 9px; color: var(--navy); }
.brand > span:nth-child(2) { font-size: 26px; font-style: italic; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.brand small { grid-column: 2; margin-top: 5px; color: #7f8790; font-size: 7px; font-weight: 900; letter-spacing: 2px; }
.vmark { position: relative; display: block; width: 45px; height: 43px; }
.vmark::before { content: ''; position: absolute; top: 8px; left: 7px; width: 27px; height: 24px; border-left: 8px solid var(--navy); border-bottom: 8px solid var(--navy); border-radius: 4px; transform: skew(-20deg) rotate(-43deg); }
.vmark i { position: absolute; top: 1px; left: 28px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(213,162,56,.09); }
.top-actions { display: flex; align-items: center; gap: 9px; }
.top-actions form,.logout-form { margin: 0; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.branch-context-form select { width: auto; min-width: 128px; max-width: 210px; height: 40px; padding: 0 14px 0 34px; border-color: #d9e1eb; border-radius: 13px; background-color: #fff; color: var(--navy); font-size: 12px; font-weight: 800; cursor: pointer; }
.clinic-pill { position: relative; padding: 9px 14px 9px 31px; border: 1px solid #d9e4dc; border-radius: 22px; background: #f5fbf7; color: #3a745c; font-size: 11px; font-weight: 800; }
.clinic-pill::before { content: ''; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #4aa376; box-shadow: 0 0 0 4px rgba(74,163,118,.12); transform: translateY(-50%); }
.user-chip { padding: 9px 13px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: #526274; font-size: 11px; font-weight: 800; }
.menu-toggle { display: none; width: 41px; height: 41px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font-weight: 900; }
.menu-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.top-icon { min-height: 41px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #536276; font-size: 10px; font-weight: 900; }
.top-icon b { display: grid; place-items: center; min-width: 20px; color: var(--navy); font-size: 16px; }
.top-icon svg,.fullscreen-stand-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fullscreen-icon-button { width: 42px; flex: 0 0 42px; justify-content: center; padding: 7px; }
.fullscreen-icon-button.fullscreen-restore { border-color: #d5a238; background: #fff8e7; color: #9a6a0b; }
.notification-button { position: relative; width: 42px; flex: 0 0 42px; justify-content: center; padding: 7px; color: #b77e0c; border-color: #ead39e; background: #fff9e9; }
.notification-button i { position: absolute; top: -6px; right: -5px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #faf8f4; border-radius: 12px; background: var(--gold); color: var(--navy); font-size: 8px; font-style: normal; font-weight: 900; }

.layout { display: grid; grid-template-columns: minmax(0,1fr) 286px; min-height: calc(100vh - 78px); direction: ltr; }
.sidebar { grid-column: 2; grid-row: 1; position: sticky; top: 78px; height: calc(100vh - 78px); display: flex; flex-direction: column; gap: 5px; padding: 27px 15px; overflow-y: auto; border: 0; background: radial-gradient(circle at 15% 10%,rgba(213,162,56,.12),transparent 28%),linear-gradient(180deg,#122a4c 0%,#0b1d36 100%); box-shadow: -12px 0 40px rgba(16,37,68,.07); direction: rtl; }
.side-title { padding: 0 14px 11px; color: rgba(255,255,255,.34); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.sidebar a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 11px 13px; border-radius: 13px; color: rgba(255,255,255,.55); font-size: 12px; font-weight: 700; transition: .22s ease; }
.sidebar a span { display: grid; place-items: center; width: 22px; color: rgba(255,255,255,.42); }
.sidebar a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar a:hover { background: rgba(255,255,255,.065); color: #fff; transform: translateX(-2px); }
.sidebar a.active { background: rgba(255,255,255,.1); color: #fff; }
.sidebar a.active::before { content: ''; position: absolute; right: -15px; width: 3px; height: 25px; border-radius: 0 5px 5px 0; background: var(--gold); box-shadow: 0 0 18px rgba(213,162,56,.55); }
.sidebar a.active span { color: var(--gold-light); }
.sidebar-brand, .sidebar-user { display: none; }
.nav-backdrop { display: none; }

.main { grid-column: 1; grid-row: 1; position: relative; min-width: 0; width: 100%; max-width: 1450px; margin: 0 auto; padding: 36px 39px 52px; direction: rtl; }
.main::before { content: ''; position: absolute; z-index: -1; top: -160px; left: -180px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle,rgba(218,196,148,.18),rgba(218,196,148,.05) 48%,transparent 72%); pointer-events: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.page-head .eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #ad7d19; font-size: 9px; font-weight: 900; letter-spacing: 2.2px; text-transform: uppercase; }
.page-head .eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); }
.page-head h1 { margin: 0; color: #142e50; font-size: 31px; font-weight: 900; letter-spacing: -.6px; line-height: 1.35; }
.page-head p { margin: 7px 0 0; color: #8e959d; font-size: 12px; font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 16px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 9px 22px rgba(16,37,68,.13); transition: .2s ease; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.gold { min-height: 47px; border-radius: 14px; background: linear-gradient(135deg,#e4b94f,#c99123); color: var(--navy); box-shadow: 0 12px 28px rgba(185,128,22,.22),inset 0 1px 0 rgba(255,255,255,.35); }
.btn.ghost { border: 1px solid var(--line); background: #fff; color: #596575; box-shadow: none; }
.btn.small { min-height: 33px; padding: 6px 11px; border-radius: 9px; font-size: 10px; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
.queue-grid { grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); }
.team-user-card { grid-column: span 2; }
.card, .panel { border: 1px solid rgba(229,223,213,.92); border-radius: 22px; background: rgba(255,254,251,.97); box-shadow: var(--shadow); }
.card { padding: 23px; }
.card h3, .panel h3 { margin: 0 0 16px; color: #213a59; font-size: 16px; font-weight: 900; }
.stat { position: relative; min-height: 156px; overflow: hidden; padding: 24px; transition: transform .22s ease,box-shadow .22s ease; }
.stat:hover { transform: translateY(-3px); box-shadow: 0 19px 42px rgba(30,47,68,.1); }
.stat::after { content: ''; position: absolute; top: 0; right: 0; width: 70%; height: 3px; background: linear-gradient(90deg,transparent,var(--gold-light),var(--gold)); opacity: 0; transition: opacity .2s ease; }
.stat:hover::after { opacity: 1; }
.stat .label { color: #778390; font-size: 11px; font-weight: 800; }
.stat .num { margin: 17px 0; color: var(--navy); font-size: 37px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.stat .hint { display: flex; align-items: center; gap: 5px; color: #9da3aa; font-size: 10px; font-weight: 700; }
.stat .hint::before { content: '↗'; color: #4c9676; font-weight: 900; }
.stat .up { color: var(--green); }

.panel { padding: 23px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.panel-head small, .muted { color: var(--muted); font-size: 10px; font-weight: 600; }
.link { color: #966a11; font-size: 10px; font-weight: 900; }
.two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 17px; margin-top: 17px; }

.queue-list { display: flex; flex-direction: column; }
.queue-row { display: grid; grid-template-columns: 78px minmax(115px,1fr) 105px 100px minmax(180px,auto); align-items: center; gap: 12px; min-width: 780px; padding: 14px 0; border-bottom: 1px solid #eeeae2; transition: background .2s ease; }
.queue-row:hover { background: #fbf9f5; }
.queue-row:last-child { border-bottom: 0; }
.ticket { display: grid; place-items: center; min-width: 72px; height: 42px; padding: 0 10px; border-radius: 12px; background: #f0ede7; color: #3b5169; font-size: 15px; font-weight: 900; direction: ltr; }
.queue-row.current .ticket, .ticket.current { background: var(--navy); color: var(--gold-light); box-shadow: 0 10px 23px rgba(16,37,68,.18); }
.queue-info strong { display: block; color: #344c65; font-size: 12px; font-weight: 900; }
.queue-info small { display: block; margin-top: 4px; color: #9ea4aa; font-size: 9px; }
.status { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; padding: 6px 9px; border: 1px solid transparent; border-radius: 20px; font-size: 9px; font-weight: 900; }
.status.waiting, .status.trial, .status.scheduled { border-color: #ead9aa; background: #fff8e7; color: #89620e; }
.status.serving, .status.arrived { border-color: #cfe0ee; background: #e8f2f8; color: #165f86; }
.status.served, .status.completed, .status.active { border-color: #cde4d9; background: #edf8f2; color: #267253; }
.status.cancelled, .status.no_show, .status.suspended { border-color: #edcfd1; background: #fff0f1; color: #a7474c; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.scroll-x { width: 100%; overflow-x: auto; }

label { display: block; margin-bottom: 7px; color: #405671; font-size: 11px; font-weight: 900; }
input, select, textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #e0dbd1; border-radius: 11px; outline: none; background: #fff; color: var(--text); }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #c99b3d; box-shadow: 0 0 0 3px rgba(201,155,61,.12); }
.form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.form-actions { display: flex; gap: 8px; margin-top: 17px; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 14px 11px; border-bottom: 1px solid #eeeae2; text-align: right; font-size: 11px; }
th { background: #f8f6f1; color: #858e97; font-size: 9px; font-weight: 900; }
td small { color: #979ea5; }
tr:hover td { background: #fcfbf8; }

.alert { margin-bottom: 18px; padding: 13px 16px; border-radius: 13px; font-size: 11px; font-weight: 800; }
.alert.success { border: 1px solid #cce5d8; background: #edf8f2; color: #276e52; }
.alert.error { border: 1px solid #ecced0; background: #fff0f1; color: #a3454a; }
.alert.info { border: 1px solid #d2e2ec; background: #edf5fa; color: #286585; }
.empty { padding: 36px 20px; color: #979ea5; text-align: center; }

.mini-row { display: flex; align-items: center; gap: 13px; padding: 14px 4px; border-top: 1px solid #eeeae2; }
.mini-row:first-child { border-top: 0; }
.mini-row .queue-info { flex: 1; }
.mini-row em { color: #977019; font-size: 9px; font-style: normal; font-weight: 900; }
.bars { height: 190px; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; padding: 10px 8px 27px; border-bottom: 1px solid #e9e4db; }
.bars i { position: relative; width: 27px; min-height: 10px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg,var(--gold-light),#c89123); transition: opacity .2s ease; }
.bars i:hover { opacity: .72; }
.bars label { position: absolute; bottom: -23px; left: 50%; color: var(--muted); font-size: 8px; font-style: normal; transform: translateX(-50%); }

.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 20% 12%,rgba(213,162,56,.18),transparent 30%),linear-gradient(145deg,#17365f,#0b1d36 70%); }
.login { width: min(440px,100%); }
.login .card { padding: 34px; border-color: rgba(255,255,255,.65); box-shadow: 0 32px 90px rgba(3,15,29,.28); }
.login-brand { margin-bottom: 25px; text-align: center; }
.login-brand .brand { width: max-content; margin: 0 auto; }
.login-brand p { color: var(--muted); font-size: 12px; }
.login form label { margin-top: 13px; }
.login-legal { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: #7f8994; text-align: center; }
.login-legal p { margin: 0 0 8px; font-size: 8px; font-weight: 600; line-height: 1.9; }
.login-legal p:first-child { color: var(--navy); font-size: 9px; }
.login-legal nav, .product-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 14px; }
.login-legal a, .product-footer a { color: #76540e; font-size: 9px; font-weight: 900; }
.login-legal a:hover, .product-footer a:hover { text-decoration: underline; }

.privacy-note { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid #d6e8df; border-radius: 16px; background: #eef8f3; color: #3f735e; }
.privacy-note > span { color: var(--gold); font-size: 20px; font-weight: 900; }
.privacy-note > span svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.privacy-note b { display: block; margin-bottom: 5px; }
.privacy-note p { margin: 0; font-size: 11px; line-height: 1.9; }

.admin-actions { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 300px; }
.admin-actions form { margin: 0; }
.renew-form { display: flex; align-items: center; gap: 5px; }
.renew-form select { width: 88px; min-height: 33px; padding: 5px 7px; font-size: 9px; }
.admin-shortcuts { display: grid; gap: 9px; }
.admin-shortcuts a,.admin-shortcuts span { display: block; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #faf8f3; font-size: 11px; font-weight: 900; }
.admin-shortcuts a:hover { border-color: #d7b766; background: #fff9e9; }
.backup-card { display: grid; grid-template-columns: 90px 1fr; gap: 25px; align-items: start; max-width: 900px; }
.backup-icon { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 24px; background: var(--navy); color: var(--gold-light); font-size: 35px; font-weight: 900; box-shadow: var(--shadow-strong); }
.backup-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.backup-card h2 { margin-top: 0; color: var(--navy); }
.backup-card > div > p { color: var(--muted); font-size: 12px; line-height: 2; }
.toggle-row { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #faf8f3; cursor: pointer; }
.toggle-row input { width: 21px; min-height: 21px; accent-color: var(--navy); }
.toggle-row b,.toggle-row small { display: block; }
.toggle-row small { margin-top: 4px; color: var(--muted); }
.about-settings { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 15px; max-width: 900px; margin-top: 16px; }
.about-settings h3 { margin-bottom: 3px; }
.about-settings p { margin: 0; color: var(--muted); font-size: 11px; }
.about-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--navy); color: var(--gold-light); font-size: 20px; font-weight: 900; }

.legal-shell { width: 100%; }
.legal-public { max-width: 1000px; margin: 0 auto; padding: 45px 24px; }
.legal-card { max-width: 980px; margin: 0 auto; }
.legal-card article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 15px; padding: 20px 0; border-bottom: 1px solid #eee8de; }
.legal-card article:last-of-type { border-bottom: 0; }
.legal-card article > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--navy); color: var(--gold-light); font-size: 10px; font-weight: 900; }
.legal-card h2 { margin: 2px 0 7px; color: var(--navy); font-size: 15px; }
.legal-card article p { margin: 0; color: #768391; font-size: 11px; font-weight: 600; line-height: 2; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.legal-links a { padding: 9px 13px; border: 1px solid var(--line); border-radius: 11px; background: #faf8f3; color: var(--navy); font-size: 10px; font-weight: 900; }
.legal-review { margin: 18px 0 0; padding: 14px; border: 1px solid #ead9aa; border-radius: 13px; background: #fff8e7; color: #76540e; font-size: 9px; font-weight: 800; line-height: 1.9; }
.product-footer { max-width: none; margin: 0; padding: 22px 18px; border-top: 1px solid #dfd9cf; background: #f7f4ee; color: #838d97; }
.product-footer p { margin: 0 0 7px; font-size: 9px; font-weight: 800; }

.tour-card { position: fixed; z-index: 90; right: 24px; bottom: 24px; width: min(390px,calc(100vw - 32px)); overflow: hidden; padding: 25px; border: 1px solid #e4d1a1; border-radius: 23px; background: #fffdf7; box-shadow: 0 30px 80px rgba(13,31,54,.3); }
.tour-card[hidden] { display: none; }
.tour-card h3 { margin: 9px 0; color: var(--navy); }
.tour-card p { min-height: 48px; color: #6e7c8b; font-size: 11px; font-weight: 700; line-height: 1.9; }
.tour-progress { position: absolute; top: 0; right: 0; height: 4px; background: linear-gradient(90deg,var(--gold),var(--gold-light)); transition: width .25s ease; }
.tour-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 15px; }
.tour-target { position: relative; z-index: 92 !important; outline: 4px solid rgba(213,162,56,.5) !important; box-shadow: 0 0 0 9px rgba(213,162,56,.13) !important; }
.fullscreen-fab { position: fixed; z-index: 70; left: 18px; top: 18px; width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; background: rgba(16,37,68,.78); color: #fff; font-weight: 900; backdrop-filter: blur(10px); }
.fullscreen-fab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.doctor-display { min-height: 100vh; background: radial-gradient(circle at 10% 8%,rgba(213,162,56,.15),transparent 28%),linear-gradient(145deg,#17365f 0%,#102544 55%,#0b1d36 100%); color: #fff; }
.display-head { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 39px; border-bottom: 1px solid rgba(255,255,255,.08); }
.display-head .brand { color: #fff; }
.display-head .brand small { color: rgba(255,255,255,.4); }
.display-head .vmark::before { border-color: #fff; }
.display-meta { display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,.5); font-size: 11px; }
.display-grid { width: min(1180px,100%); margin: 47px auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 25px; padding: 0 24px; }
.big-ticket { position: relative; min-height: 455px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 27px; background: radial-gradient(circle at 10% 5%,rgba(213,162,56,.16),transparent 28%),linear-gradient(145deg,#17365f,#102544 62%,#0b1d36); text-align: center; box-shadow: 0 32px 85px rgba(0,0,0,.22); }
.big-ticket::after { content: ''; position: absolute; left: -70px; bottom: -90px; width: 230px; height: 230px; border: 38px solid rgba(255,255,255,.03); border-radius: 50%; }
.big-ticket > div { position: relative; z-index: 1; }
.big-ticket small { color: rgba(255,255,255,.5); font-weight: 800; }
.big-ticket .number { margin: 20px 0; color: var(--gold-light); font-size: 122px; font-weight: 900; letter-spacing: -5px; line-height: 1; direction: ltr; }
.big-ticket .room { display: inline-flex; padding: 9px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.62); font-size: 11px; }
.next-panel { padding: 23px; border: 1px solid var(--line); border-radius: 25px; background: #fffefb; color: var(--navy); box-shadow: var(--shadow-strong); }
.next-title { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.next-title span { color: var(--muted); font-size: 9px; }
.next-person { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid #eeeae2; }
.next-person strong { display: grid; place-items: center; min-width: 66px; height: 48px; padding: 0 8px; border-radius: 13px; background: #f0ede7; color: var(--navy); direction: ltr; }
.next-person b { display: block; }
.next-person small { color: var(--muted); font-size: 9px; }
.next-person em { color: #8d6514; font-size: 9px; font-style: normal; }
.consult-alert { margin-bottom: 16px; padding: 16px; border: 1px solid #ead9aa; border-radius: 16px; background: #fff9ec; color: #665026; }
.consult-alert .count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-left: 7px; border-radius: 20px; background: var(--gold); color: var(--navy); font-weight: 900; }

.inline-form { display: flex; gap: 10px; }
.inline-form select { flex: 1; }
.current-patient-card { position: relative; display: grid; place-items: center; min-height: 380px; overflow: hidden; padding: 28px; border-radius: 24px; background: radial-gradient(circle at 8% 5%,rgba(213,162,56,.2),transparent 30%),linear-gradient(145deg,#17365f,#102544 62%,#0b1d36); color: #fff; text-align: center; box-shadow: var(--shadow-strong); }
.current-patient-card > * { position: relative; z-index: 1; }
.current-patient-card > span { color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.current-patient-card .big-code { color: #fff; font-size: 58px; font-weight: 900; direction: ltr; }
.current-patient-card h2 { margin: 0; font-size: 20px; }
.current-patient-card p { margin: 0; color: rgba(255,255,255,.55); font-size: 11px; }
.current-patient-card small { color: rgba(255,255,255,.4); }
.queue-row-v1 { grid-template-columns: 78px minmax(175px,1fr) 100px minmax(170px,auto); min-width: 690px; }

.journey-card ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: journey; }
.journey-card li { counter-increment: journey; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #faf8f3; }
.journey-card li::before { content: counter(journey); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--navy); color: var(--gold-light); font-weight: 900; }
.journey-card li b, .journey-card li small { grid-column: 2; }
.journey-card li small { color: var(--muted); }

.request-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.request-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fffdfa; }
.request-head { display: flex; justify-content: space-between; gap: 12px; }
.request-head h3 { margin: 0; }
.request-card p { color: var(--muted); font-size: 10px; }
.request-actions { flex-wrap: wrap; justify-content: flex-start; }
.reschedule-form { display: flex; gap: 6px; }
.reschedule-form input { min-height: 33px; max-width: 175px; padding: 5px 8px; font-size: 9px; }
.btn.danger { background: #fff0f1; color: #a7474c; box-shadow: none; }
.status.requested { border-color: #ead9aa; background: #fff8e7; color: #89620e; }
.status.confirmed { border-color: #cde4d9; background: #edf8f2; color: #267253; }
.status.rejected { border-color: #edcfd1; background: #fff0f1; color: #a7474c; }

.search-bar { display: flex; gap: 9px; }
.search-bar input { flex: 1; }
.patient-quick-form { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.patient-quick-form select { width: 125px; min-height: 33px; padding: 5px; font-size: 9px; }

.booking-link-box { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.booking-link-box > div { display: flex; gap: 7px; }
.whatsapp-preview { overflow: hidden; border: 1px solid #d8e1da; border-radius: 22px; background: #eef1ec; box-shadow: var(--shadow); }
.whatsapp-preview header { padding: 21px; background: var(--navy); color: #fff; }
.whatsapp-preview header span { display: block; font-weight: 900; }
.whatsapp-preview header small { color: rgba(255,255,255,.45); }
.chat-area { display: flex; flex-direction: column; gap: 12px; padding: 23px; }
.chat { max-width: 83%; padding: 13px 15px; border-radius: 16px; color: #425565; font-size: 11px; line-height: 1.9; box-shadow: 0 3px 9px rgba(20,40,55,.05); }
.chat.incoming { align-self: flex-end; background: #fff; }
.chat.outgoing { align-self: flex-start; background: #d9fdd3; }
.chat b { display: block; color: #176b50; direction: ltr; }
.journey-message { display: grid; grid-template-columns: 38px 1fr 38px 1fr 38px 1fr; align-items: center; gap: 10px; }
.journey-message > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--navy); color: var(--gold-light); font-weight: 900; }
.journey-message p { margin: 0; }
.journey-message small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }

.public-page { min-height: 100vh; padding: 28px; background: radial-gradient(circle at 12% 8%,rgba(213,162,56,.15),transparent 28%),var(--ivory); }
.public-shell { width: min(920px,100%); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 30px; background: var(--card); box-shadow: 0 35px 90px rgba(16,37,68,.15); }
.public-hero { padding: 34px 42px 44px; background: radial-gradient(circle at 10% 5%,rgba(213,162,56,.2),transparent 30%),linear-gradient(145deg,#17365f,#102544 62%,#0b1d36); color: #fff; }
.public-brand { color: #fff; }
.public-brand .vmark::before { border-color: #fff; }
.public-brand small { color: rgba(255,255,255,.4); }
.public-hero .eyebrow { display: block; margin-top: 55px; color: var(--gold-light); font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.public-hero h1 { margin: 10px 0 0; font-size: 34px; }
.public-hero p { color: rgba(255,255,255,.55); font-size: 11px; }
.public-card { padding: 34px 42px; }
.public-form-head h2 { margin: 0; color: var(--navy); }
.public-form-head p { margin-bottom: 25px; color: var(--muted); font-size: 11px; }
.booking-note { margin-top: 24px; padding: 17px; border: 1px dashed #d7c59e; border-radius: 15px; background: #fffaf0; color: #755f31; }
.booking-note p { margin: 5px 0 0; font-size: 10px; line-height: 1.9; }
.success-state { padding: 35px 10px; text-align: center; }
.success-state > span { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 50%; background: #e9f6ef; color: var(--green); font-size: 28px; font-weight: 900; }
.success-state p { max-width: 520px; margin: 12px auto 25px; color: var(--muted); line-height: 2; }
.public-success-actions { justify-content: center; flex-wrap: wrap; }

.notification-list { display: grid; gap: 9px; }
.notification-item { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) 34px; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-align: right; }
.notification-item.unread { border-color: #e3c573; background: #fffbef; box-shadow: inset -3px 0 var(--gold); }
.notification-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-dark); }
.notification-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notification-item strong,.notification-item small,.notification-item time { display: block; }
.notification-item strong { color: var(--navy); font-size: 12px; }
.notification-item small { margin-top: 4px; color: #657385; font-size: 10px; }
.notification-item time { margin-top: 5px; color: #a0a7ae; font-size: 8px; }
.notification-item button { min-height: 34px; border: 0; border-radius: 10px; background: #f4f1ea; color: var(--navy); font-size: 20px; }

.availability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.availability-card { display: flex; flex-direction: column; gap: 13px; border-color: #e8e1d5; }
.availability-card.active { border-color: #d7ad4c; box-shadow: 0 18px 45px rgba(154,109,19,.12); }
.availability-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; font-weight: 900; }
.availability-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.availability-icon.available { background: #eaf7f0; color: #36805f; }
.availability-icon.paused { background: #fff5dd; color: #a97612; }
.availability-icon.leave { background: #edf2f8; color: #375977; }
.availability-card form { margin-top: auto; }
.schedule-settings-grid { align-items: start; }
.weekly-schedule { display: grid; gap: 10px; }
.schedule-day { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fcfaf6; }
.schedule-day-name strong,.schedule-day-name small { display: block; }
.schedule-day-name strong { color: var(--navy); }
.schedule-day-name small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.period-list { display: grid; gap: 8px; }
.period-row { display: grid; grid-template-columns: minmax(95px,1fr) 28px minmax(95px,1fr) minmax(90px,.7fr) 38px; align-items: center; gap: 7px; }
.period-row span { color: var(--muted); font-size: 10px; text-align: center; }
.period-row input { min-width: 0; }
.icon-button { width: 38px; min-height: 38px; border: 1px solid #ead4d5; border-radius: 10px; background: #fff2f2; color: #b44d53; }
.fullscreen-stand-button { width: 45px; padding: 8px; }

.tracking-shell { width: min(410px,100%); margin: 0 auto; overflow: hidden; border: 9px solid var(--navy); border-radius: 42px; background: var(--card); box-shadow: 0 35px 80px rgba(16,37,68,.22); }
.tracking-head { padding: 26px; background: var(--navy); color: #fff; text-align: center; }
.tracking-head .brand { width: max-content; margin: 0 auto; }
.tracking-head h1 { margin: 24px 0 5px; font-size: 15px; }
.tracking-head p { margin: 0; color: var(--gold-light); font-size: 10px; }
.tracking-card { padding: 18px; background: #f7f4ee; }
.now-card { padding: 20px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 8px 24px rgba(20,40,55,.06); }
.now-card span, .turn-grid span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; }
.now-card strong { display: block; margin-top: 8px; color: var(--navy); font-size: 37px; direction: ltr; }
.ticket-search { margin: 14px 0; padding: 15px; border-radius: 16px; background: #fff; }
.ticket-search > div { display: flex; gap: 6px; }
.ticket-search input { direction: ltr; }
.turn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.turn-grid > div { padding: 16px; border-radius: 16px; background: var(--gold-soft); text-align: center; }
.turn-grid > div:last-child { background: #e9f5ef; }
.turn-grid strong { display: block; margin-top: 7px; color: var(--navy); font-size: 25px; direction: ltr; }
.near-alert { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 14px; border-radius: 14px; background: #eff9f4; color: #39745e; font-size: 10px; }
.near-alert i { width: 9px; height: 9px; border-radius: 50%; background: #36a476; animation: pulse 1.4s infinite; }
.auto-update { color: var(--muted); font-size: 8px; text-align: center; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

/* Virelia professional date and time picker */
.v-datetime { position: relative; width: 100%; }
.v-datetime-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(155px,.42fr); gap: 10px; }
.v-date-trigger,.v-time-field { width: 100%; min-height: 58px; display: grid; grid-template-columns: 38px minmax(0,1fr) 20px; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; border: 1px solid #ded8cd; border-radius: 14px; outline: 0; background: #fff; color: var(--text); text-align: right; box-shadow: 0 4px 14px rgba(16,37,68,.025); transition: border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.v-date-trigger:hover,.v-date-trigger:focus-visible,.v-time-field:focus-within { border-color: #cda443; box-shadow: 0 0 0 4px rgba(205,164,67,.12); }
.v-date-trigger:active { transform: translateY(1px); }
.v-field-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--gold-soft); color: #9a6d13; }
.v-field-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v-date-trigger small,.v-time-copy small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 8px; font-weight: 800; }
.v-date-trigger strong { display: block; overflow: hidden; color: #7f8994; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.v-date-trigger.has-value strong { color: var(--navy); }
.v-chevron { display: grid; place-items: center; color: #98a0a8; text-align: center; transition: transform .2s ease; }
.v-chevron svg,.v-month-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-date-trigger[aria-expanded="true"] .v-chevron { transform: rotate(180deg); }
.v-time-field { grid-template-columns: 38px minmax(0,1fr); cursor: pointer; }
.v-time-copy { min-width: 0; }
.v-time-copy .v-time-input { width: 100%; min-width: 0; min-height: 30px; padding: 0 2px; border: 0; border-radius: 0; background-color: transparent; color: var(--navy); font-size: 13px; font-weight: 900; box-shadow: none; text-align: right; }
.v-time-copy .v-time-input:focus { box-shadow: none; }
.v-calendar { position: absolute; z-index: 120; top: calc(100% + 10px); right: 0; width: min(370px,100%); padding: 16px; border: 1px solid #e4d8bd; border-radius: 20px; background: #fffefb; box-shadow: 0 28px 65px rgba(16,37,68,.22),0 6px 16px rgba(16,37,68,.08); animation: vCalendarIn .18s ease-out; }
.v-calendar[hidden] { display: none; }
.v-calendar-nav { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 8px; direction: ltr; }
.v-month-title { color: var(--navy); font-size: 13px; font-weight: 900; text-align: center; direction: rtl; }
.v-month-button { width: 38px; min-height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: #faf8f3; color: var(--navy); line-height: 1; transition: .18s ease; }
.v-month-button:hover:not(:disabled) { border-color: #d7b766; background: var(--gold-soft); }
.v-month-button:disabled { opacity: .3; cursor: not-allowed; }
.v-weekdays,.v-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; direction: rtl; }
.v-weekdays { margin: 15px 0 7px; }
.v-weekdays span { color: #9aa2aa; font-size: 9px; font-weight: 900; text-align: center; }
.v-day,.v-day-spacer { width: 100%; aspect-ratio: 1; min-height: 34px; }
.v-day { position: relative; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #4b5e73; font-size: 10px; font-weight: 800; transition: background .16s ease,color .16s ease,transform .16s ease; }
.v-day:hover:not(:disabled) { background: var(--gold-soft); color: var(--navy); transform: translateY(-1px); }
.v-day.is-today::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.v-day.is-selected { background: linear-gradient(145deg,#e5b94e,#c99123); color: var(--navy); box-shadow: 0 7px 15px rgba(185,128,22,.25); }
.v-day.is-selected::after { background: var(--navy); }
.v-day:disabled { color: #d0d3d6; cursor: not-allowed; text-decoration: line-through; }
.v-calendar-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #eee9df; }
.v-calendar-footer span { color: #a0a6ac; font-size: 7px; font-weight: 700; }
.v-today { min-height: 31px; padding: 4px 11px; border: 1px solid #e2d4b2; border-radius: 9px; background: var(--gold-soft); color: #815d13; font-size: 9px; font-weight: 900; }
.v-datetime-error { margin: 7px 2px 0; color: var(--red); font-size: 9px; font-weight: 800; }
.v-datetime.is-invalid .v-date-trigger,.v-datetime.is-invalid .v-time-field { border-color: #d56a6e; box-shadow: 0 0 0 3px rgba(200,80,85,.1); }
.reschedule-form .v-datetime { width: min(360px,100%); min-width: 290px; }
.reschedule-form .v-datetime-fields { grid-template-columns: minmax(150px,1fr) 120px; gap: 6px; }
.reschedule-form .v-date-trigger,.reschedule-form .v-time-field { min-height: 38px; padding: 4px 7px; border-radius: 9px; }
.reschedule-form .v-field-icon { display: none; }
.reschedule-form .v-date-trigger { grid-template-columns: minmax(0,1fr) 15px; }
.reschedule-form .v-time-field { grid-template-columns: 1fr; }
.reschedule-form .v-date-trigger small,.reschedule-form .v-time-copy small { display: none; }
.reschedule-form .v-calendar { top: calc(100% + 7px); }
@keyframes vCalendarIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.waiting-screen { min-height: 100vh; background: radial-gradient(circle at 12% 8%,rgba(213,162,56,.14),transparent 28%),linear-gradient(145deg,#17365f,#102544 62%,#0b1d36); color: #fff; }
.screen-shell { min-height: 100vh; padding: 35px 55px; }
.screen-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,.08); }
.screen-serving { min-height: calc(100vh - 150px); display: grid; place-items: center; align-content: center; text-align: center; }
.screen-serving span { color: var(--gold-light); font-weight: 900; letter-spacing: 3px; }
.screen-serving strong { margin: 25px 0; color: #fff; font-size: 160px; line-height: 1; direction: ltr; }
.screen-serving p { color: rgba(255,255,255,.5); }

.stand-page { min-height: 100vh; padding: 30px; background: #e9e5dc; }
.stand-actions { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.acrylic-stand { width: min(450px,100%); margin: 0 auto; overflow: hidden; border: 1px solid #d8c9aa; border-radius: 32px; background: #fffdf7; text-align: center; box-shadow: 0 38px 90px rgba(20,45,75,.18); }
.acrylic-stand header { padding: 28px; background: var(--navy); color: #fff; }
.acrylic-stand header .brand { width: max-content; margin: 0 auto; }
.acrylic-stand header p { margin: 22px 0 0; color: var(--gold-light); font-size: 11px; font-weight: 900; }
.acrylic-stand section { padding: 34px; }
.acrylic-stand img { width: min(280px,100%); padding: 10px; border-radius: 24px; background: #fff; box-shadow: 0 16px 38px rgba(16,37,68,.14); }
.acrylic-stand h1 { margin: 25px 0 8px; color: var(--navy); font-size: 30px; }
.acrylic-stand section p { color: var(--muted); font-size: 11px; }
.acrylic-stand section small { display: block; margin-top: 18px; color: #a1a6ab; direction: ltr; word-break: break-all; }

footer { max-width: 1180px; margin: 22px auto; padding: 0 20px; color: #969da4; font-size: 9px; text-align: center; }
.doctor-display footer { color: rgba(255,255,255,.3); }
.hp-field { position: absolute !important; inset: 0 auto auto 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; pointer-events: none; }
#booking-form { position: relative; min-width: 0; }

@media (max-width: 1000px), (max-width: 1100px) and (hover: none) and (pointer: coarse) {
  .clinic-pill,.user-chip { display: none; }
  .layout { display: block; width: 100%; max-width: 100%; direction: rtl; }
  .main { display: block; grid-column: auto; grid-row: auto; width: 100%; max-width: 100%; }
  .nav-open { overflow: hidden; }
  .sidebar { grid-column: auto; grid-row: auto; position: fixed; inset: 0 0 0 auto; z-index: 70; width: 80vw; max-width: 352px; min-width: 0; height: 100vh; height: 100dvh; max-height: 100vh; gap: 2px; padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); transform: translate3d(105%,0,0); visibility: hidden; transition: transform .3s cubic-bezier(.22,.8,.25,1),visibility 0s linear .3s; box-shadow: -30px 0 75px rgba(7,20,38,.36); overscroll-behavior: contain; }
  .nav-open .sidebar { transform: translate3d(0,0,0); visibility: visible; transition-delay: 0s; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 69; border: 0; background: rgba(8,22,39,.46); backdrop-filter: blur(3px); }
  .nav-open .nav-backdrop { display: block; }
  .sidebar > a:not(.sidebar-brand) { min-height: 48px; gap: 11px; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.35; white-space: nowrap; }
  .sidebar > a:not(.sidebar-brand) span { width: 20px; flex: 0 0 20px; }
  .side-title { padding: 8px 12px 5px; font-size: 9px; }
  .sidebar-brand { display: flex; min-height: 64px; margin: 0 2px 7px; padding: 6px 8px 11px; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; color: #fff; }
  .sidebar-brand:hover { background: transparent; transform: none; }
  .sidebar-brand .vmark { width: 42px; flex: 0 0 42px; }
  .sidebar-brand .vmark::before { border-color: #fff; }
  .sidebar-brand strong { display: flex; flex-direction: column; color: #fff; font-size: 23px; font-style: italic; line-height: 1; }
  .sidebar-brand small { margin-top: 7px; color: rgba(255,255,255,.38); font-size: 7px; font-style: normal; letter-spacing: 2px; }
  .sidebar-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.045); }
  .sidebar-user > b { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: var(--gold); color: var(--navy); }
  .sidebar-user > span { min-width: 0; flex: 1; }
  .sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; color: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar-user small { margin-top: 2px; color: rgba(255,255,255,.36); font-size: 8px; }
  .sidebar .sidebar-user > form { margin: 0; }
  .sidebar .sidebar-user > form button { min-height: 30px; padding: 4px; border: 0; background: transparent; color: rgba(255,255,255,.48); font-size: 9px; }
  .sidebar .sidebar-user > form button:hover { color: #fff; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .main { padding: 29px 21px 46px; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .queue-grid, .two, .display-grid { grid-template-columns: 1fr; }
  .display-grid { margin-top: 27px; }
  .request-grid { grid-template-columns: 1fr; }
  .availability-grid { grid-template-columns: 1fr; }
  .schedule-day { grid-template-columns: 90px minmax(0,1fr); }
  .schedule-day > .btn { grid-column: 2; width: max-content; }
  .journey-message { grid-template-columns: 38px 1fr; }
}

@media (max-width: 650px) {
  .topbar { height: 68px; padding: 0 13px; }
  .topbar > .brand, .brand small, .clinic-pill, .user-chip { display: none; }
  .brand { grid-template-columns: 42px auto; }
  .top-actions { width: 100%; justify-content: flex-start; gap: 7px; }
  .branch-context-form { margin-inline-start: auto !important; }
  .branch-context-form select { min-width: 116px; max-width: 38vw; height: 44px; }
  .top-icon { width: 42px; min-height: 42px; padding: 5px; }
  .top-icon span,.top-logout { display: none; }
  .menu-toggle { order: -1; width: 44px; height: 44px; margin-left: auto; font-size: 19px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head .btn { width: 100%; }
  .page-head h1 { font-size: 25px; }
  .stats, .form-grid { grid-template-columns: 1fr; }
  .team-user-card { grid-column: auto; }
  .main { padding: 24px 14px 42px; }
  button,.btn,input,select,textarea { min-height: 46px; }
  .btn.small { min-height: 42px; }
  .card, .panel { padding: 19px; border-radius: 18px; }
  .stat { min-height: 142px; }
  .display-head { padding: 15px 18px; }
  .display-meta { gap: 8px; }
  .big-ticket { min-height: 350px; }
  .big-ticket .number { font-size: 80px; letter-spacing: -3px; }
  .public-page { padding: 0; }
  .public-shell { border-radius: 0; }
  .public-hero, .public-card { padding: 27px 20px; }
  .public-hero .eyebrow { margin-top: 38px; }
  .public-hero h1 { font-size: 27px; }
  .tracking-page { padding: 14px; }
  .tracking-shell { border-width: 7px; }
  .search-bar, .booking-link-box > div, .inline-form { flex-direction: column; }
  .current-patient-card { min-height: 330px; }
  .screen-shell { padding: 22px; }
  .screen-serving strong { font-size: 90px; }
  .admin-actions { min-width: 260px; flex-wrap: wrap; }
  .backup-card { grid-template-columns: 1fr; }
  .backup-icon { width: 64px; height: 64px; border-radius: 19px; }
  .tour-card { right: 16px; bottom: 16px; padding: 21px; }
  .login-wrap { padding: 14px; }
  .login .card { padding: 25px 19px; }
  .login-legal p { font-size: 8px; }
  .about-settings { grid-template-columns: 44px 1fr; }
  .about-settings .btn { grid-column: 1 / -1; width: 100%; }
  .legal-public { padding: 28px 14px; }
  .legal-card article { grid-template-columns: 34px 1fr; gap: 11px; padding: 17px 0; }
  .legal-card article > span { width: 32px; height: 32px; }
  .legal-links a { flex: 1 1 calc(50% - 8px); text-align: center; }
  .display-head { flex-direction: column; align-items: flex-start; }
  .display-meta { width: 100%; justify-content: space-between; font-size: 10px; }
  .v-datetime-fields { grid-template-columns: 1fr; }
  .v-date-trigger,.v-time-field { min-height: 60px; }
  .v-calendar { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; border-radius: 24px; }
  .v-day,.v-day-spacer { min-height: 38px; }
  .v-month-button { min-height: 42px; }
  .reschedule-form { width: 100%; flex-wrap: wrap; }
  .reschedule-form .v-datetime { width: 100%; min-width: 0; }
  .reschedule-form .v-datetime-fields { grid-template-columns: 1fr; }
  .reschedule-form .v-date-trigger,.reschedule-form .v-time-field { min-height: 46px; }
  .reschedule-form .btn { flex: 1; }
  .schedule-day { grid-template-columns: 1fr; }
  .schedule-day > .btn { grid-column: 1; width: 100%; }
  .period-row { grid-template-columns: 1fr 24px 1fr 42px; }
  .period-row input[type="number"] { grid-column: 1 / 4; }
  .period-row .remove-period { grid-column: 4; grid-row: 1 / 3; }
}

.cms-divider { margin: 26px 0; border: 0; border-top: 1px solid var(--line); }
.cms-money-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.cms-inline-upload { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,1fr) auto; align-items: end; gap: 12px; }
.cms-inline-upload div { display: grid; gap: 5px; }
.cms-inline-upload small { color: var(--muted); font-size: 10px; }
.cms-video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.lead-admin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.lead-admin-grid > article { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; }
.lead-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lead-admin-head div { display: grid; gap: 3px; }
.lead-admin-head strong { color: var(--navy); font-size: 16px; }
.lead-admin-head small { color: var(--muted); }
.lead-admin-head > span { padding: 5px 9px; border-radius: 20px; background: var(--gold-soft); color: #8a6415; font-size: 10px; font-weight: 900; }
.lead-admin-grid dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0; }
.lead-admin-grid dl div { min-width: 0; padding: 9px; border-radius: 10px; background: #fff; }
.lead-admin-grid dt { color: var(--muted); font-size: 9px; }
.lead-admin-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--navy); font-size: 11px; font-weight: 800; }
.lead-admin-grid form { display: grid; gap: 9px; }
.lead-admin-grid label { display: grid; gap: 5px; }

@media (max-width: 900px) {
  .lead-admin-grid { grid-template-columns: 1fr; }
  .cms-inline-upload { grid-template-columns: 1fr; align-items: stretch; }
}

@media (max-width: 650px) {
  .cms-money-grid,.cms-video-grid { grid-template-columns: 1fr; }
  .lead-admin-grid dl { grid-template-columns: 1fr; }
}

@media print {
  .stand-actions { display: none; }
  .stand-page { padding: 0; background: #fff; }
  .acrylic-stand { box-shadow: none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; transition-duration: .01ms!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; }
}

/* Virelia V1.3 launch polish */
body { font-size: 14px; line-height: 1.7; }
label { font-size: 13px; }
input,select,textarea { min-height: 48px; font-size: 14px; }
.btn { font-size: 13px; }
.btn.small { min-height: 38px; font-size: 12px; }
.sidebar a { font-size: 13px; }
.page-head p,.stat .label,.stat .hint,.panel-head small,.muted,.request-card p,.queue-info small,td,th { font-size: 12px; }
.queue-info strong,.notification-item strong { font-size: 14px; }
.notification-item small,.notification-item time { font-size: 12px; }
.route-doctor-hidden { display: none!important; }
.route-picker { margin-bottom: 16px; }
.urgent-panel { margin-bottom: 16px; border-color: #e5c66e; background: #fffcf2; }
.priority-badge { display: inline-grid; place-items: center; min-width: 44px; min-height: 30px; padding: 4px 8px; border-radius: 10px; font-weight: 900; direction: ltr; }
.priority-badge.p1 { background: #fff0c3; color: #7d580c; box-shadow: inset 0 0 0 1px #e9c158; }
.priority-badge.p2 { background: #eaf3ff; color: #235d8b; }
.priority-badge.p3 { background: #f0f0ee; color: #66717d; }
.status.pending,.status.approved { border-color: #ead9aa; background: #fff8e7; color: #89620e; }
.status.reserved { border-color: #d9c173; background: #fff8db; color: #75540d; }
.status.center { border-color: #cfe0ee; background: #e8f2f8; color: #165f86; }
.status.clinic { border-color: #cde4d9; background: #edf8f2; color: #267253; }
.compact-shell { width: min(720px,100%); overflow: visible; padding-top: 24px; }
.compact-shell > .public-brand { width: max-content; margin: 0 auto 20px; color: var(--navy); }
.compact-shell > .public-brand .vmark::before { border-color: var(--navy); }
.compact-shell > .public-brand small { color: var(--muted); }
.compact-shell .public-card { border-radius: 24px; }
.booking-summary,.track-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.booking-summary > div,.track-stats > div { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #faf8f3; }
.booking-summary small,.booking-summary strong,.track-stats span,.track-stats b { display: block; }
.booking-summary small,.track-stats span { color: var(--muted); font-size: 11px; }
.booking-summary strong,.track-stats b { margin-top: 5px; color: var(--navy); font-size: 15px; }
.status-hero,.ticket-success { padding: 24px; border-radius: 20px; background: linear-gradient(145deg,#17365f,#102544); color: #fff; text-align: center; }
.status-hero small,.status-hero strong,.status-hero span,.ticket-success small,.ticket-success strong { display: block; }
.status-hero strong { margin: 5px 0; color: var(--gold-light); font-size: 24px; }
.ticket-success strong { color: var(--gold-light); font-size: 50px; direction: ltr; }
.tracking-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 0; background: #f7f4ee; }
.choice-card { display: grid; place-items: center; min-height: 120px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-align: center; }
.choice-card > span { color: var(--gold); font-size: 29px; font-weight: 900; }
.choice-icon { width: 38px; height: 38px; display: grid; place-items: center; }
.choice-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.choice-card strong { color: var(--navy); font-size: 15px; }
.choice-card small { color: var(--muted); font-size: 10px; }
.choice-card.gold-choice { border-color: #e7ca79; background: #fff9e9; }
.turn-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.multi-serving-grid { min-height: calc(100vh - 150px); display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); align-items: stretch; gap: 22px; padding: 28px 0; }
.multi-serving-grid .screen-serving { min-height: 360px; padding: 25px; border: 1px solid rgba(255,255,255,.1); border-radius: 28px; background: rgba(255,255,255,.045); }
.multi-serving-grid .screen-serving strong { font-size: clamp(72px,10vw,145px); }
.display-route-picker { width: min(600px,calc(100% - 48px)); margin: 20px auto 0; }
.display-route-picker select { border-color: rgba(255,255,255,.16); background: #fff; color: var(--navy); }
.notification-item { grid-template-columns: 42px minmax(0,1fr); }
.notification-item > span:nth-child(2) { min-width: 0; }
.notification-actions { display: flex!important; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notification-actions form { margin: 0; }
.card > .queue-list { overflow-x: auto; }
.compact-list { margin-top: 14px; }
.v-date .v-datetime-fields { grid-template-columns: 1fr; }
.v-time-only { min-height: 48px; }
.period-row .v-time-only { min-width: 0; margin: 0; }
.v-time-copy .v-time-input,.v-date-trigger strong { font-size: 13px; }
.v-date-trigger small,.v-time-copy small { font-size: 10px; }
.team-admin-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.booking-type-panel,.payment-panel,.booking-slot-picker { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #faf8f3; }
.payment-panel { border-color: #e7cd88; background: #fffaf0; }
.choice-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.choice-cards > label { margin: 0; cursor: pointer; }
.choice-cards input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.choice-cards > label > span { display: block; min-height: 78px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: .18s ease; }
.choice-cards input:checked + span { border-color: #d7ae49; background: var(--gold-soft); box-shadow: 0 0 0 3px rgba(213,162,56,.12); }
.choice-cards b,.choice-cards small { display: block; }
.choice-cards b { color: var(--navy); }
.choice-cards small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.booking-picker-head,.booking-times-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.booking-picker-head small,.booking-times-head small { color: var(--muted); font-size: 11px; }
.booking-days { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 9px; margin-top: 14px; }
.booking-day,.booking-time { min-height: 58px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--navy); }
.booking-day strong,.booking-day small { display: block; }
.booking-day small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.booking-day.active,.booking-time.active { border-color: #d3a63e; background: var(--gold-soft); box-shadow: inset 0 0 0 1px #dfbd67; }
.booking-times { margin-top: 16px; }
.booking-time-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(92px,1fr)); gap: 8px; margin-top: 10px; }
.booking-time { min-height: 46px; font-weight: 800; }
.booking-slots-state { margin-top: 12px; padding: 12px; border-radius: 12px; background: #edf5fa; color: #286585; text-align: center; }
.booking-slots-state.empty,.booking-slots-state.error { background: #fff0f1; color: #a3454a; }
.patient-instruction { font-size: 14px; }
.package-picker { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.package-choice { min-height: 190px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(155deg,#fff,#faf7ef); transition: .2s ease; }
.package-choice:hover { border-color: var(--gold); box-shadow: 0 18px 42px rgba(16,37,68,.1); transform: translateY(-3px); }
.package-choice span { color: var(--navy); font-size: 21px; font-weight: 900; }
.package-choice p { flex: 1; margin: 13px 0; color: #6f7a87; font-size: 12px; line-height: 1.9; }
.package-choice b { color: #a17010; font-size: 11px; }

.pwa-install-layer { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,20,39,.72); backdrop-filter: blur(10px); }
.pwa-install-card { width: min(680px,100%); max-height: calc(100vh - 40px); overflow: auto; padding: 30px; border: 1px solid rgba(255,255,255,.28); border-radius: 28px; background: #fffefb; box-shadow: 0 32px 90px rgba(4,16,33,.35); text-align: center; }
.pwa-install-brand { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--navy); }
.pwa-install-brand > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--navy); color: var(--gold-light); font-size: 24px; font-style: italic; font-weight: 900; }
.pwa-install-brand b,.pwa-install-brand small { display: block; text-align: right; }
.pwa-install-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.pwa-install-card h2 { margin: 24px 0 7px; color: var(--navy); font-size: clamp(23px,4vw,32px); }
.pwa-install-card > p { margin: 0; color: var(--muted); }
.pwa-install-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 24px; }
.pwa-install-options button { min-height: 150px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--navy); transition: .2s ease; }
.pwa-install-options button:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px); }
.pwa-install-options b,.pwa-install-options small { display: block; }
.pwa-install-options b { margin-top: 9px; font-size: 15px; }
.pwa-install-options small { margin-top: 6px; color: var(--muted); }
.pwa-device-icon { display: grid; place-items: center; color: var(--gold); line-height: 1; }
.pwa-device-icon svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pwa-install-help { display: grid; gap: 5px; margin-top: 15px; padding: 0 15px; color: var(--text); }
.pwa-install-help span { color: var(--muted); font-size: 12px; line-height: 1.8; }
.pwa-browser-choice { margin-top: 18px; padding: 8px 14px; border: 0; background: transparent; color: #6d7784; text-decoration: underline; }
.pwa-update-note,.connection-note,.live-notification-toast,.live-booking-notice { position: fixed; z-index: 130; right: 18px; bottom: 18px; max-width: min(420px,calc(100vw - 36px)); padding: 13px 17px; border-radius: 14px; background: var(--navy); color: #fff; box-shadow: var(--shadow-strong); font-size: 12px; font-weight: 700; }
.connection-note { z-index: 150; inset: 0; max-width: none; display: grid; place-items: center; padding: 24px; border-radius: 0; background: rgba(7,20,39,.94); text-align: center; backdrop-filter: blur(14px); }
.connection-note > div { width: min(480px,100%); padding: 32px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: #fffefb; color: var(--text); box-shadow: var(--shadow-strong); }
.connection-note span { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; background: #fff0f1; color: #a94048; font-size: 25px; font-weight: 900; }
.connection-note h2 { margin: 0; color: var(--navy); font-size: 24px; }
.connection-note p { margin: 9px 0 20px; color: var(--muted); line-height: 1.9; }
.connection-note button { min-height: 45px; padding: 9px 18px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font-weight: 900; }
.live-notification-toast,.live-booking-notice { border-right: 4px solid var(--gold); }

/* Virelia 2.0 hybrid live workspace */
.page-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.workspace-summary { display: grid; grid-template-columns: minmax(300px,1.12fr) minmax(280px,1fr) 235px; gap: 14px; margin-bottom: 16px; }
.live-patient { min-height: 188px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.live-patient-current { border-color: #e9d8ad; background: radial-gradient(circle at 10% 10%,rgba(213,162,56,.16),transparent 36%),linear-gradient(145deg,#fffdf7,#fff9eb); }
.summary-kicker { display: block; margin-bottom: 8px; color: #866214; font-size: 11px; font-weight: 900; }
.live-patient > div > strong { display: block; color: var(--navy); font-size: clamp(36px,4vw,55px); font-weight: 900; line-height: 1; direction: ltr; text-align: right; }
.live-patient h2 { margin: 13px 0 5px; color: var(--navy); font-size: 19px; }
.live-patient p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.workspace-metrics { display: grid; gap: 9px; }
.workspace-metrics article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.workspace-metrics span { color: var(--muted); font-size: 11px; font-weight: 800; }
.workspace-metrics strong { color: var(--navy); font-size: 25px; }
.workspace-metrics .attention { border-color: #e7c366; background: var(--gold-soft); }
.workspace-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: start; gap: 16px; }
.workspace-primary,.workspace-rail { min-width: 0; display: grid; gap: 16px; }
.live-queue-card { min-height: 440px; }
.queue-list-v2 { overflow: visible!important; }
.queue-row-v2 { min-width: 0; grid-template-columns: 76px minmax(160px,1fr) 88px 98px minmax(108px,auto); padding: 13px 3px; }
.wait-cell { text-align: center; }
.wait-cell b,.wait-cell small { display: block; }
.wait-cell b { color: var(--navy); font-size: 18px; }
.wait-cell small { color: var(--muted); font-size: 8px; }
.action-menu { position: relative; }
.action-menu summary { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--navy); cursor: pointer; list-style: none; font-weight: 900; }
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu > div { position: absolute; z-index: 20; top: 44px; left: 0; min-width: 160px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-strong); }
.action-menu form { margin: 0; }
.action-menu button { width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: right; }
.action-menu button:hover { background: #f5f2eb; }
.danger-text { color: var(--red)!important; }
.empty-live { min-height: 285px; display: grid; place-content: center; gap: 6px; text-align: center; }
.empty-live strong { color: var(--navy); font-size: 18px; }
.empty-live span { color: var(--muted); font-size: 12px; }
.needs-action { border-color: #ead9aa; background: linear-gradient(150deg,#fffefb,#fffbef); }
.needs-badge { min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 900; }
.needs-list { display: grid; gap: 9px; }
.needs-list > article { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 12px; border: 1px solid #ece5d6; border-radius: 14px; background: rgba(255,255,255,.86); }
.needs-list > article.is-late { border-color: #efc7ca; background: #fff8f8; }
.need-icon { min-width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--gold-soft); color: #936810; font-size: 9px; font-weight: 900; }
.needs-list strong,.needs-list small { display: block; }
.needs-list strong { color: var(--navy); font-size: 12px; }
.needs-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.need-actions { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 6px; }
.need-actions form { margin: 0; }
.btn.tiny { min-height: 34px; padding: 5px 9px; border-radius: 9px; font-size: 10px; }
.appointment-timeline { display: grid; gap: 3px; }
.appointment-timeline article { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #eee9df; }
.appointment-timeline article:last-child { border-bottom: 0; }
.appointment-timeline time { color: #976c13; font-size: 12px; font-weight: 900; direction: ltr; }
.appointment-timeline strong,.appointment-timeline small { display: block; }
.appointment-timeline strong { color: var(--navy); font-size: 12px; }
.appointment-timeline small { color: var(--muted); font-size: 9px; }
.virelia-dialog { width: min(560px,calc(100vw - 26px)); max-height: calc(100dvh - 26px); padding: 0; overflow: auto; border: 0; border-radius: 24px; background: transparent; box-shadow: var(--shadow-strong); }
.virelia-dialog::backdrop { background: rgba(6,19,37,.62); backdrop-filter: blur(6px); }
.dialog-card { margin: 0; padding: 24px; border: 1px solid rgba(255,255,255,.5); border-radius: 24px; background: #fffefb; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.dialog-head h2 { margin: 3px 0 0; color: var(--navy); }
.dialog-head > button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); font-size: 23px; }
.form-stack { display: grid; gap: 13px; }
.form-stack label { margin: 0; }
.form-stack input,.form-stack select { width: 100%; margin-top: 6px; }
.dialog-actions { display: flex; gap: 9px; margin-top: 20px; }
.dialog-actions .btn { flex: 1; }
.doctor-live-summary { display: grid; grid-template-columns: minmax(280px,1fr) minmax(260px,.9fr) 210px; gap: 14px; margin-bottom: 16px; }
.doctor-current,.doctor-next { min-height: 220px; padding: 25px; border: 1px solid var(--line); border-radius: 23px; background: #fff; box-shadow: var(--shadow); }
.doctor-current { border-color: #e5cd8c; background: radial-gradient(circle at 10% 12%,rgba(213,162,56,.18),transparent 36%),linear-gradient(145deg,#fffdf8,#fff8e6); }
.doctor-current > span,.doctor-next > span { display: block; color: #8b691e; font-size: 11px; font-weight: 900; }
.doctor-current > strong,.doctor-next > strong { display: block; margin-top: 14px; color: var(--navy); font-size: clamp(48px,6vw,72px); font-weight: 900; line-height: 1; direction: ltr; text-align: right; }
.doctor-current h2,.doctor-next h2 { margin: 16px 0 4px; color: var(--navy); font-size: 20px; }
.doctor-current p,.doctor-next p { margin: 0; color: var(--muted); font-size: 12px; }
.doctor-metrics { display: grid; gap: 9px; }
.doctor-metrics article { display: flex; align-items: center; justify-content: space-between; padding: 14px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.doctor-metrics span { color: var(--muted); font-size: 10px; font-weight: 800; }
.doctor-metrics strong { color: var(--navy); font-size: 25px; }
.doctor-workspace-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; align-items: start; gap: 16px; }
.doctor-side-stack { display: grid; gap: 16px; }
.doctor-queue-preview { display: grid; }
.doctor-queue-preview article { display: grid; grid-template-columns: 76px minmax(0,1fr) 82px; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #eee9df; }
.doctor-queue-preview article:last-child { border-bottom: 0; }
.doctor-queue-preview strong,.doctor-queue-preview small { display: block; }
.doctor-queue-preview strong { color: var(--navy); font-size: 13px; }
.doctor-queue-preview small { color: var(--muted); font-size: 9px; }
.doctor-queue-preview time { color: #8b691e; font-size: 10px; font-weight: 800; }
.availability-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(200,80,85,.11); }
.availability-dot.available { background: var(--green); box-shadow: 0 0 0 5px rgba(52,123,94,.12); }
.availability-dot.paused { background: var(--gold); box-shadow: 0 0 0 5px rgba(213,162,56,.15); }
.availability-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.availability-quick form { margin: 0; }
.slug-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: #fff; overflow: hidden; direction: ltr; }
.slug-input span { padding: 0 12px; color: var(--muted); font-weight: 800; }
.slug-input input { min-width: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
.vpage-editor-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 14px; }
.vpage-editor-grid > form { display: grid; gap: 10px; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: #fbfaf7; }
.vpage-editor-grid textarea { min-height: 90px; resize: vertical; }
.impersonation-banner { position: sticky; z-index: 90; top: 0; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 18px; background: #fff0c6; color: #6e4c08; font-size: 11px; font-weight: 900; }
.impersonation-banner form { margin: 0; }
.impersonation-banner button { min-height: 30px; padding: 4px 10px; border: 1px solid #c78e1e; border-radius: 8px; background: #fff; color: #6e4c08; font-weight: 900; }
body:has(.impersonation-banner) .topbar { top: 42px; }
.admin-live-strip { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 17px; }
.admin-live-strip span { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--muted); font-size: 10px; font-weight: 800; }
.admin-live-strip b { color: var(--navy); font-size: 16px; }
.customer-overview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; margin-top: 16px; }
.customer-dl { display: grid; gap: 0; margin: 0; }
.customer-dl div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid #eee9df; }
.customer-dl div:last-child { border-bottom: 0; }
.customer-dl dt { color: var(--muted); font-size: 11px; }
.customer-dl dd { margin: 0; color: var(--navy); font-size: 11px; font-weight: 900; }
.branch-checks { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; }
.branch-checks legend { color: var(--navy); font-size: 11px; font-weight: 900; }
.branch-checks label,.account-branch-access label { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px 9px; border-radius: 9px; background: #f3f0ea; }
.branch-checks input,.account-branch-access input { width: 18px; height: 18px; min-height: 18px; }
.account-branch-access { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }

.cms-tabs { position: sticky; z-index: 12; top: 88px; display: flex; gap: 8px; margin: 0 0 18px; padding: 10px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,254,251,.94); box-shadow: var(--shadow); backdrop-filter: blur(12px); scrollbar-width: thin; }
.cms-tabs a { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 10px; color: #5d6a79; font-size: 11px; font-weight: 900; }
.cms-tabs a:hover { background: var(--gold-soft); color: #8a6313; }
.cms-section { margin-top: 18px; scroll-margin-top: 150px; }
.cms-section textarea { min-height: 105px; resize: vertical; }
.cms-section-list { display: grid; gap: 10px; }
.cms-section-list details,.faq-admin-list details { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fbfaf7; }
.cms-section-list summary,.faq-admin-list summary { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; color: var(--navy); cursor: pointer; list-style: none; }
.cms-section-list summary::-webkit-details-marker,.faq-admin-list summary::-webkit-details-marker { display: none; }
.cms-section-list summary span { padding: 4px 9px; border-radius: 20px; background: var(--gold-soft); color: #8a6415; font-size: 10px; }
.cms-section-list details > .form-grid { padding: 16px; border-top: 1px solid var(--line); }
.cms-package { min-height: 0; gap: 10px; }
.cms-package label,.cms-media-grid label,.faq-admin-list label { display: grid; gap: 5px; }
.cms-package textarea { min-height: 92px; }
.toggle-line { min-height: 42px; display: flex!important; align-items: center; gap: 8px; }
.toggle-line input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--gold); }
.cms-upload { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cms-media-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; margin-top: 18px; }
.cms-media-grid > article { min-width: 0; overflow: hidden; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fbfaf7; }
.cms-media-grid img,.file-preview { width: 100%; height: 170px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 13px; background: #102544; color: var(--gold-light); object-fit: cover; font-size: 30px; font-weight: 900; }
.cms-media-grid form { display: grid; gap: 9px; }
.cms-media-grid form + form { margin-top: 8px; }
.faq-admin-list { display: grid; gap: 10px; margin-top: 18px; }
.faq-admin-list details > form { display: grid; gap: 10px; margin: 0; padding: 15px; border-top: 1px solid var(--line); }
.faq-admin-list details > form + form { padding-top: 0; border-top: 0; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pagination span { color: var(--muted); font-size: 12px; font-weight: 800; }

@media (display-mode: standalone) {
  .fullscreen-icon-button,.fullscreen-fab,.fullscreen-stand-button { display: none!important; }
  .topbar { padding-top: env(safe-area-inset-top); height: calc(78px + env(safe-area-inset-top)); }
}

@media (max-width: 1180px) {
  .workspace-layout,.doctor-workspace-grid { grid-template-columns: 1fr; }
  .workspace-rail,.doctor-side-stack { grid-row: 1; }
}

@media (max-width: 1000px) {
  .team-admin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-user-card { grid-column: 1/-1; }
  .package-picker { grid-template-columns: 1fr; }
  .workspace-summary { grid-template-columns: 1fr 1fr; }
  .workspace-metrics { grid-column: 1/-1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .workspace-layout { grid-template-columns: 1fr; }
  .queue-row-v2 { grid-template-columns: 70px minmax(130px,1fr) 78px 90px minmax(100px,auto); }
  .doctor-live-summary { grid-template-columns: 1fr 1fr; }
  .doctor-metrics { grid-column: 1/-1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .doctor-workspace-grid { grid-template-columns: 1fr; }
  .customer-overview { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  body { font-size: 15px; }
  input,select,textarea { font-size: 16px; }
  .btn { font-size: 14px; }
  .btn.small { font-size: 13px; }
  .sidebar { width: 80vw; max-width: 360px; }
  .sidebar > a:not(.sidebar-brand) { min-height: 50px; font-size: 14px; }
  .top-actions { direction: rtl; }
  .card,.panel { padding: 17px; }
  .page-head h1 { font-size: 27px; }
  .team-admin-grid,.booking-summary,.track-stats { grid-template-columns: 1fr; }
  .choice-cards { grid-template-columns: 1fr; }
  .booking-days { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .booking-time-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .booking-day small,.booking-picker-head small,.booking-times-head small { font-size: 11px; }
  .tracking-choice { grid-template-columns: 1fr 1fr; }
  .choice-card { min-height: 112px; padding: 12px 8px; }
  .turn-grid { grid-template-columns: 1fr; }
  .queue-row,.queue-row-v1 { min-width: 0; grid-template-columns: 70px minmax(0,1fr) auto; gap: 9px; padding: 13px 0; }
  .queue-row .muted { display: none; }
  .queue-row .priority-badge,.queue-row .status { grid-column: 3; }
  .queue-row .row-actions { grid-column: 1/-1; justify-content: stretch; }
  .queue-row .row-actions form,.queue-row .row-actions .btn { flex: 1; width: 100%; }
  .ticket { min-width: 64px; }
  .request-head { align-items: flex-start; flex-direction: column; }
  .row-actions { flex-wrap: wrap; justify-content: stretch; }
  .row-actions form,.row-actions .btn { flex: 1; }
  .period-row { grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 42px; }
  .period-row > input[type="number"] { grid-column: 1/4; }
  .period-row > .remove-period { grid-column: 4; grid-row: 1/3; }
  .multi-serving-grid { grid-template-columns: 1fr; }
  .multi-serving-grid .screen-serving { min-height: 280px; }
  .screen-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .compact-shell { padding-top: 16px; }
  .compact-shell .public-card { border-radius: 0; }
  .product-footer p,.product-footer a,.public-footer { font-size: 11px; }
  .pwa-install-card { padding: 23px 17px; border-radius: 22px; }
  .pwa-install-options { grid-template-columns: 1fr; }
  .pwa-install-options button { min-height: 112px; }
  .v2-page-head .page-actions { width: 100%; }
  .v2-page-head .page-actions .btn { flex: 1 1 145px; width: auto; }
  .workspace-summary { grid-template-columns: 1fr; }
  .live-patient { min-height: 168px; align-items: stretch; flex-direction: column; }
  .live-patient .btn { width: 100%; }
  .workspace-metrics { grid-column: auto; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .workspace-metrics article { min-width: 0; align-items: flex-start; flex-direction: column; padding: 11px; }
  .workspace-metrics span { min-height: 34px; font-size: 10px; }
  .workspace-layout { grid-template-columns: 1fr; }
  .workspace-rail { grid-row: 1; }
  .queue-row-v2 { grid-template-columns: 64px minmax(0,1fr) auto; align-items: center; }
  .queue-row-v2 .wait-cell { grid-column: 1; grid-row: 2; }
  .queue-row-v2 > .status { grid-column: 2; grid-row: 2; justify-self: start; }
  .queue-row-v2 > .row-actions { grid-column: 3; grid-row: 1/3; align-items: center; }
  .queue-row-v2 .row-actions form { flex: 1 1 100%; }
  .queue-row-v2 .row-actions .btn { white-space: nowrap; }
  .action-menu > div { position: fixed; inset: auto 14px calc(14px + env(safe-area-inset-bottom)) 14px; min-width: 0; }
  .dialog-card { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .doctor-live-summary,.doctor-workspace-grid { grid-template-columns: 1fr; }
  .doctor-current,.doctor-next { min-height: 180px; }
  .doctor-metrics { grid-column: auto; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .doctor-metrics article { align-items: flex-start; flex-direction: column; padding: 11px; }
  .doctor-metrics span { min-height: 34px; }
  .doctor-queue-preview article { grid-template-columns: 66px minmax(0,1fr) 67px; }
  .patient-table-wrap { overflow: visible; }
  .patient-table,.patient-table tbody,.patient-table tr,.patient-table td { display: block; width: 100%; }
  .patient-table thead { display: none; }
  .patient-table tbody { display: grid; gap: 12px; }
  .patient-table tr { padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(16,37,68,.05); }
  .patient-table td { min-height: 38px; display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee9df; }
  .patient-table td:last-child { border-bottom: 0; }
  .patient-table td::before { content: attr(data-label); color: var(--muted); font-size: 10px; font-weight: 800; }
  .patient-table .patient-quick-form { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; }
  .patient-table .patient-quick-form select { grid-column: 1/-1; }
}

/* Legacy workspace release: overlay navigation at every viewport. */
.layout { display:block; direction:rtl; }
.main { max-width:none; }
.main::before { display:none; }
.menu-toggle { display:inline-grid; place-items:center; min-width:44px; min-height:44px; }
.sidebar { position:fixed; inset:0 0 0 auto; z-index:110; width:min(360px,88vw); height:100dvh; max-height:100dvh; padding:16px 12px; transform:translateX(105%); visibility:hidden; transition:transform .2s,visibility .2s; }
.nav-open .sidebar { transform:none; visibility:visible; }
.nav-open { overflow:hidden; }
.nav-backdrop { position:fixed; inset:0; z-index:109; border:0; background:rgba(8,22,39,.46); }
.nav-open .nav-backdrop { display:block; }
.nav-close { align-self:flex-end; min-height:44px; padding:8px 16px; border:1px solid #ffffff66; border-radius:10px; color:white; background:transparent; cursor:pointer; }
.doctor-services summary { padding:14px; color:white; cursor:pointer; min-height:44px; }
.doctor-services a { margin-inline-start:10px; }
:focus-visible { outline:3px solid #d5a238; outline-offset:3px; }
.public-shell,.public-card,.form-grid>* { min-width:0; }
.public-card input,.public-card select { max-width:100%; }
.profile-items { border:1px solid var(--line); border-radius:12px; padding:12px; margin:14px 0; }
.profile-item { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.profile-item input { flex:1 1 100%; }
.profile-item button { min-height:44px; }
@media(max-width:650px) {
 body[data-virelia-role="secretary"] { font-size:14px; }
 .main { padding:18px 12px 32px; }
 .page-head h1 { font-size:21px; }
 .panel-head h3,.card h3 { font-size:18px; }
 .card,.panel { padding:12px; border-radius:14px; }
 .workspace-summary,.workspace-layout { gap:12px; }
 .live-patient { min-height:0; padding:14px; gap:10px; }
 .top-actions { flex-wrap:wrap; }
 .branch-context-form { max-width:100%; }
 .queue-row-v2 { gap:8px; }
 .public-card { padding:18px 14px; }
 .public-hero h1 { font-size:24px; }
 .public-form-head h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .sidebar { transition:none; } }