:root { --accent: var(--hospital); }
.hospital-page { background: #f5f7f9; }
.hospital-page .brand-mark { background: var(--hospital); }
.nav-count { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: white; font-size: 10px; text-align: center; }
.warning-count { background: #b54708; }.danger-count { background: #b42318; }
.sidebar-hospital { display: flex; align-items: center; gap: 10px; margin-top: 34px; padding: 14px 10px; border-top: 1px solid #344054; }.hospital-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #d1fadf; color: #027a48; font-weight: 900; }.sidebar-hospital div { display: grid; gap: 3px; }.sidebar-hospital strong { font-size: 11px; }.sidebar-hospital small { color: #98a2b3; font-size: 9px; }
.sync-status { display: flex; align-items: center; gap: 10px; }.sync-status > div { display: grid; gap: 3px; }.sync-status strong { font-size: 12px; }.sync-status small { color: var(--muted); font-size: 10px; }.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 5px #d1fadf; }
.hospital-metrics .metric-card { display: flex; align-items: center; gap: 14px; }.metric-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 18px; font-weight: 900; }.metric-icon.blue { color: #175cd3; background: #eff8ff; }.metric-icon.green { color: #027a48; background: #ecfdf3; }.metric-icon.orange { color: #b54708; background: #fffaeb; }.metric-icon.red { color: #b42318; background: #fef3f2; }.metric-card .value span { margin-left: 3px; color: var(--muted); font-size: 12px; }.metric-card .trend { margin: 4px 0 0; }.metric-card .trend b { color: var(--hospital); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(320px,.85fr); gap: 16px; margin-top: 16px; }.panel-card { padding: 20px; }.panel-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }.panel-title h2 { margin: 0; font-size: 17px; }.panel-title p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.panel-title button { border: 0; background: transparent; color: var(--hospital); font-size: 11px; font-weight: 800; }
.timeline { display: grid; }.timeline-row { display: grid; grid-template-columns: 48px 12px 1fr auto; gap: 10px; align-items: center; min-height: 68px; }.timeline-row + .timeline-row { border-top: 1px solid var(--line); }.timeline-row time { font-size: 12px; font-weight: 900; }.timeline-row > span { width: 8px; height: 8px; border: 2px solid #98a2b3; border-radius: 50%; }.timeline-row.active > span { border-color: var(--hospital); background: var(--hospital); box-shadow: 0 0 0 4px #d1fadf; }.timeline-row strong { font-size: 12px; }.timeline-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }.timeline-row button { border: 0; background: transparent; color: var(--hospital); font-size: 10px; font-weight: 800; }
.inventory-alert { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; margin-bottom: 9px; padding: 12px; border-radius: 13px; }.inventory-alert.warning { background: #fffaeb; color: #93370d; }.inventory-alert.danger { background: #fef3f2; color: #912018; }.alert-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.7); font-weight: 900; }.inventory-alert strong { font-size: 11px; }.inventory-alert p { margin: 4px 0 0; font-size: 9px; }.inventory-alert > span:last-child { font-size: 10px; font-weight: 900; }
.sync-card { display: grid; grid-template-columns: 95px 1fr; gap: 12px; align-items: center; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }.sync-ring { display: grid; place-items: center; align-content: center; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle closest-side, white 72%, transparent 73% 100%), conic-gradient(var(--hospital) 99.8%, #eaecf0 0); }.sync-ring b { font-size: 16px; }.sync-ring span { color: var(--muted); font-size: 8px; }.sync-card > div:last-child strong { font-size: 11px; }.sync-card p { margin: 5px 0; color: var(--muted); font-size: 9px; }.sync-card button { padding: 0; border: 0; background: transparent; color: var(--hospital); font-size: 9px; font-weight: 900; }
.sponsored-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 25px 0 11px; }.sponsored-section-head > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 8px; }.sponsored-section-head .ad-label { grid-row: 1 / 3; align-self: start; padding: 3px 8px; border: 1px solid #98a2b3; border-radius: 999px; background: white; color: #475467; font-size: 8px; font-weight: 900; }.sponsored-section-head h2 { margin: 0; font-size: 15px; }.sponsored-section-head p { grid-column: 2; margin: 0; color: var(--muted); font-size: 9px; }.sponsored-section-head > small { color: var(--muted); font-size: 8px; }
.hospital-ad-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.hospital-ad-card { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 13px; align-items: center; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: var(--shadow-sm); }.hospital-ad-card.featured { border-color: #a6f4c5; background: linear-gradient(135deg,#f0fdf7,#fff); }.hospital-ad-visual { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 17px; font-size: 17px; font-weight: 900; }.hospital-ad-visual.vaccine { color: #027a48; background: #d1fadf; }.hospital-ad-visual.medicine { color: #175cd3; background: #dbeafe; }.hospital-ad-visual.supply { color: #6941c6; background: #ebe9fe; }.hospital-ad-card > div:last-child { min-width: 0; }.ad-category { display: block; color: #667085; font-size: 8px; font-weight: 900; }.hospital-ad-card strong { display: block; margin-top: 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.hospital-ad-card p { margin: 4px 0 8px; color: var(--muted); font-size: 8px; line-height: 1.4; }.hospital-ad-card button { padding: 0; border: 0; background: transparent; color: var(--hospital); font-size: 8px; font-weight: 900; }.product-ad-dialog { max-width: 500px; }.product-ad-hero { display: flex; align-items: center; gap: 13px; margin: 8px 0 16px; padding: 16px; border-radius: 14px; background: #f0fdf7; }.product-ad-hero > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #d1fadf; color: var(--hospital); font-weight: 900; }.product-ad-hero div { display: grid; gap: 4px; }.product-ad-hero b { color: var(--muted); font-size: 9px; }.product-ad-hero strong { font-size: 13px; }.product-ad-description { color: #475467; font-size: 11px; line-height: 1.7; }
.inventory-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #abefc6; border-radius: 13px; background: #ecfdf3; color: #05603a; }.inventory-notice > div { display: flex; align-items: center; gap: 10px; }.inventory-notice > div > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: white; font-weight: 900; }.inventory-notice strong { font-size: 12px; }.inventory-notice p { margin: 3px 0 0; font-size: 9px; }.inventory-notice > span { font-size: 10px; }.readonly-label { color: var(--muted); font-size: 11px; font-weight: 800; }
.inventory-table td:first-child strong, .inventory-table td:first-child small, .table-wrap td strong, .table-wrap td small { display: block; }.inventory-table td:first-child small, .table-wrap td small { margin-top: 4px; color: var(--muted); font-size: 10px; }.quantity { display: inline-block!important; min-width: 28px; font-size: 18px; }.quantity.muted { color: #98a2b3; }.lock-tag { display: block; margin-top: 4px; color: #667085; font-size: 8px; }.warning-text { color: var(--warning); }.table-footnote { color: var(--muted); font-size: 10px; line-height: 1.6; }
.inventory-management-layout { display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 18px; align-items: start; }.inventory-list-panel { min-width: 0; }.inventory-table tbody tr { cursor: pointer; transition: background .18s, box-shadow .18s; }.inventory-table tbody tr:hover { background: #f8fafc; }.inventory-table tbody tr.selected { background: #f0fdf7; box-shadow: inset 4px 0 0 var(--hospital); }.inventory-table tbody tr.selected td:first-child strong { color: var(--hospital); }
.price-settings-panel { position: sticky; top: 88px; padding: 20px; }.price-settings-panel .panel-title { align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }.price-settings-panel .panel-title h2 { font-size: 15px; }.price-settings-panel .panel-title p:last-child { max-width: 220px; line-height: 1.4; }.readonly-summary { display: grid; gap: 4px; margin: 14px 0 2px; padding: 12px; border: 1px solid #abefc6; border-radius: 11px; background: #ecfdf3; }.readonly-summary span { color: #05603a; font-size: 9px; font-weight: 900; }.readonly-summary strong { font-size: 11px; }.readonly-summary small { color: #667085; font-size: 8px; }.settings-divider { height: 1px; margin: 18px 0; background: var(--line); }.price-settings-panel h3 { margin: 0; font-size: 13px; }.price-settings-panel .radio-cards { gap: 7px; }.price-settings-panel .radio-card { display: grid; justify-items: center; gap: 7px; padding: 10px 6px; text-align: center; }.price-settings-panel .radio-card > span:last-child { justify-items: center; }.price-settings-panel .radio-card input:disabled ~ span { opacity: .55; }.compact-preview { margin-top: 18px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #f8fafc; }.compact-preview > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 8px; }.compact-preview > div:first-child b { color: #344054; }.preview-vaccine-row { display: flex; justify-content: space-between; gap: 10px; margin-top: 11px; padding: 11px; border-radius: 10px; background: white; }.preview-vaccine-row > div { display: grid; gap: 4px; }.preview-vaccine-row > div:last-child { justify-items: end; }.preview-vaccine-row strong, .preview-vaccine-row b { font-size: 9px; }.preview-vaccine-row small { color: var(--muted); font-size: 7px; }.preview-vaccine-row .status-badge { min-height: 16px; padding: 2px 5px; font-size: 6px; }.compact-preview > button { width: 100%; margin-top: 10px; padding: 9px; border: 0; border-radius: 9px; background: var(--hospital); color: white; font-size: 8px; font-weight: 900; }.compact-preview > button:disabled { background: #98a2b3; }.price-settings-panel .preview-note { margin-top: 10px; }.save-settings-button { width: 100%; margin-top: 14px; }
.settings-layout { display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 18px; align-items: start; }.settings-stack { display: grid; gap: 16px; }.setting-card { padding: 22px; }.setting-vaccine { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.vaccine-symbol { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #e8f8f2; color: var(--hospital); font-size: 20px; }.setting-vaccine strong { font-size: 14px; }.setting-vaccine p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }.form-grid label > span, .reason-field > span { display: block; margin-bottom: 7px; color: #475467; font-size: 11px; font-weight: 800; }.input-with-unit { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; }.input-with-unit input { width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: 0; }.input-with-unit b { color: var(--muted); font-size: 10px; white-space: nowrap; }.toggle-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0 0; }.toggle-row strong { font-size: 12px; }.toggle-row p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.switch input { display: none; }.switch span { position: relative; display: block; width: 42px; height: 24px; border-radius: 999px; background: #d0d5dd; }.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: .2s; box-shadow: var(--shadow-sm); }.switch input:checked + span { background: var(--hospital); }.switch input:checked + span::after { left: 21px; }
.setting-card h2 { margin: 0; font-size: 16px; }.card-help { margin: 6px 0 16px; color: var(--muted); font-size: 10px; }.radio-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.radio-card { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }.radio-card.active { border: 2px solid var(--hospital); background: #f0fdf7; }.radio-card input { position: absolute; opacity: 0; }.radio-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f2f4f7; color: #475467; font-size: 10px; font-weight: 900; }.radio-card.active .radio-icon { background: #d1fadf; color: var(--hospital); }.radio-card > span:last-child { display: grid; gap: 3px; }.radio-card strong { font-size: 10px; }.radio-card small { color: var(--muted); font-size: 8px; }
.preview-panel { position: sticky; top: 88px; padding: 20px; }.preview-head { display: flex; justify-content: space-between; gap: 12px; }.preview-head h2 { margin: 0; font-size: 16px; }.live-dot { color: var(--success); font-size: 9px; font-weight: 900; }.live-dot::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--success); }
.mini-phone { width: 260px; margin: 20px auto; overflow: hidden; border: 7px solid #182230; border-radius: 28px; background: #f8fafc; box-shadow: 0 20px 30px rgba(16,24,40,.16); }.mini-phone-bar { display: flex; justify-content: space-between; padding: 8px 16px; background: white; font-size: 7px; }.mini-hospital-photo { display: grid; place-items: center; height: 100px; background: linear-gradient(140deg,#d1fadf,#a6f4c5); color: var(--hospital); font-size: 30px; }.mini-phone-body { padding: 14px; }.mini-phone-body > p { margin: 0; color: var(--muted); font-size: 7px; }.mini-phone-body h3 { margin: 4px 0 12px; font-size: 15px; }.mini-vaccine { display: flex; justify-content: space-between; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }.mini-vaccine > div { display: grid; gap: 4px; }.mini-vaccine strong, .mini-vaccine b { font-size: 8px; }.mini-vaccine small { color: var(--muted); font-size: 6px; }.mini-vaccine .status-badge { min-height: 16px; padding: 2px 5px; font-size: 6px; }.mini-phone-body > button { width: 100%; margin: 12px 0 5px; padding: 9px; border: 0; border-radius: 9px; background: var(--hospital); color: white; font-size: 8px; font-weight: 900; }.mini-phone-body > small { display: block; color: var(--muted); font-size: 6px; text-align: center; }.preview-note { display: flex; gap: 8px; padding: 11px; border-radius: 11px; background: #f2f4f7; }.preview-note span { color: var(--hospital); font-weight: 900; }.preview-note p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.appointment-tabs { display: flex; gap: 24px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }.appointment-tabs button { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 800; }.appointment-tabs button.active { color: var(--hospital); border-color: var(--hospital); }.appointment-tabs b { display: inline-grid; place-items: center; min-width: 20px; margin-left: 4px; padding: 2px 5px; border-radius: 999px; background: #eaecf0; font-size: 9px; }.table-action { border: 0; background: transparent; color: var(--hospital); font-size: 11px; font-weight: 900; }
.policy-pill { padding: 8px 12px; border-radius: 999px; background: #e8f8f2; color: #027a48; font-size: 11px; font-weight: 800; }.notice-banner { display: flex; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #b2ddff; border-radius: 13px; background: #eff8ff; color: #1849a9; }.notice-banner > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: white; font-weight: 900; }.notice-banner strong { font-size: 12px; }.notice-banner p { margin: 4px 0 0; font-size: 10px; }.no-show-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.no-show-card { padding: 18px; }.no-show-head { display: flex; justify-content: space-between; align-items: center; }.no-show-head > span:last-child { color: var(--muted); font-size: 10px; }.no-show-card h3 { margin: 18px 0 5px; font-size: 16px; }.no-show-card > p { margin: 0; color: var(--muted); font-size: 10px; }.check-list { display: grid; gap: 7px; margin: 16px 0; padding: 12px; border-radius: 10px; background: #f8fafc; color: #475467; font-size: 9px; }.card-actions { display: flex; justify-content: flex-end; gap: 7px; }
.role-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }.role-card { position: relative; padding: 20px; overflow: hidden; }.role-card::after { content: ""; position: absolute; right: -28px; bottom: -36px; width: 110px; height: 110px; border-radius: 50%; background: var(--role-soft); }.role-card.owner { --role-soft: #f2ebff; }.role-card.inventory-role { --role-soft: #e8f8f2; }.role-card.booking-role { --role-soft: #eaf1ff; }.role-card > span { color: var(--muted); font-size: 10px; font-weight: 800; }.role-card strong { display: block; margin: 7px 0; font-size: 15px; }.role-card p { max-width: 80%; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.role-card b { display: block; margin-top: 18px; color: var(--hospital); font-size: 12px; }
.detail-list { display: grid; }.detail-list div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12px; }.detail-list span { color: var(--muted); }.privacy-box { margin-top: 15px; padding: 12px; border-radius: 10px; background: #f2f4f7; color: #475467; font-size: 10px; line-height: 1.5; }.decision-options { display: grid; gap: 9px; }.decision-option { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; text-align: left; }.decision-option.active { border: 2px solid var(--danger); background: #fff6f5; }.decision-option > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #f2f4f7; font-weight: 900; }.decision-option strong { font-size: 11px; }.decision-option p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.reason-field { display: block; margin-top: 15px; }.reason-field textarea { width: 100%; min-height: 80px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; font-size: 11px; }
@media (max-width: 1100px) { .dashboard-grid, .settings-layout, .inventory-management-layout { grid-template-columns: 1fr; }.hospital-ad-grid { grid-template-columns: 1fr; }.preview-panel, .price-settings-panel { position: static; }.no-show-grid, .role-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .sidebar-hospital div, .nav-count { display: none; }.sidebar-hospital { justify-content: center; padding-inline: 0; }.topbar-actions .btn:not(.btn-icon) { display: none; }.section-heading, .sponsored-section-head { align-items: flex-start; flex-direction: column; }.form-grid, .radio-cards, .no-show-grid, .role-grid { grid-template-columns: 1fr; }.setting-vaccine { grid-template-columns: 42px 1fr; }.setting-vaccine > .status-badge { grid-column: 1 / -1; width: fit-content; }.mini-phone { width: min(260px,100%); } }