/* Barber Flow standalone app: charcoal and warm gold. */
html:has(#dashboard:not(.hidden)){color-scheme:dark}
body:has(#dashboard:not(.hidden)){background:#111314!important;color:#f6f0e5!important;font-family:Arial,sans-serif}
body:has(#dashboard:not(.hidden)) .wrap{max-width:700px;padding:0 22px}
body:has(#dashboard:not(.hidden)) .top{background:#111314!important;color:#f6f0e5!important;border-color:#333638;padding:24px 0;flex-direction:row;align-items:center}
body:has(#dashboard:not(.hidden)) .brand{color:#ead7b2!important;font-family:Georgia,serif;font-size:26px}
body:has(#dashboard:not(.hidden)) .brand-note{color:#bfb8ac}
body:has(#dashboard:not(.hidden)) .top select{background:#252729!important;color:#eee7dc!important;border-color:#434441;border-radius:12px}
body:has(#dashboard:not(.hidden)) .top nav{display:none}
#dashboard:not(.hidden){--muted:#b8b7b2;--line:#424442;--card:#2a2c2c;--ink:#f6f0e5;--accent:#e4cda3;background:#111314!important;color:#f6f0e5!important;color-scheme:dark;padding:0!important;margin:28px auto 36px;border-radius:0}
#dashboard #loginCard,#dashboard .appt,#dashboard .dashboard-setting,#dashboard .empty{background:linear-gradient(135deg,#303231,#242626)!important;color:#f6f0e5!important;border:1px solid #424440;border-radius:22px}
#dashboard .card{padding:26px}
#dashboard .dashboard-top h2,#dashboard .dashboard-day h2,#dashboardSettingsPane>h2{color:#f6f0e5!important;font-family:Arial,sans-serif;font-weight:500}
#dashboard .dashboard-top h2{font-size:28px;line-height:1.25}
#dashboard label,#dashboard .muted{color:#b8b7b2!important}
#dashboard input,#dashboard select{background:#222524!important;color:#f6f0e5!important;border:1px solid #50514d;border-radius:12px;color-scheme:dark;min-height:48px;font-size:16px}
#dashboard input[type=checkbox]{min-height:auto;accent-color:#e4cda3}
#dashboard button{border-radius:12px!important;min-height:46px;background:#393c3a!important;color:#f3ede2!important;border:1px solid #53554f;font-size:14px;padding:11px 16px}
#dashboard button.primary,#dashboard button.ok{background:linear-gradient(110deg,#f5e7ce,#d5b989)!important;color:#24211a!important;border-color:transparent;font-weight:600}
#dashboard button.bad{background:#482d2a!important;color:#ffd9cf!important;border-color:#715048}
#dashboard .dashboard-nav{gap:10px;padding:7px;background:#242625;border-radius:18px;border:1px solid #3b3d39;margin-bottom:26px}
#dashboard .dashboard-nav button{flex:1;border:0;border-radius:12px!important;background:transparent!important;color:#c3bfb5!important;padding:13px 18px!important}
#dashboard .dashboard-nav button.primary{background:linear-gradient(110deg,#f5e7ce,#d5b989)!important;color:#24211a!important}
#dashboard .dashboard-day{background:#1c1f1e;border:1px solid #3b3e39;padding:20px;border-radius:20px;gap:16px}
#dashboard .dashboard-day h2{font-size:22px}
#dashboard .dashboard-date-actions{flex-wrap:wrap}
#dashboard .appointment-main{padding:22px;grid-template-columns:82px 1fr;gap:16px}
#dashboard .appointment-main-actions{grid-column:2;display:flex;gap:10px}
#dashboard .appointment-time{font-size:25px;color:#ead7b2}
#dashboard .appointment-name{font-size:18px;line-height:1.4;font-weight:500}
#dashboard .customer-call{color:#efd9b3!important;font-size:16px;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:5px}
#dashboard .appointment-status{background:#4a4438!important;color:#f3dfbb!important;border-radius:8px;padding:5px 8px;line-height:1.3;font-size:13px}
#dashboard .appointment-detail,#dashboard .edit-box{background:#202321!important;border-color:#45473f;color:#f6f0e5}
#dashboard .dashboard-setting>summary{padding:22px;font-size:17px}
#dashboard .completed-group>summary{color:#c0bbae}
#dashboard .notice{background:#273a2f;color:#d6eddd}
#dashboard .error{background:#482d2a;color:#ffd9cf}
#dashboard .service-admin-row,#dashboard .hours-row{border-color:#44473f}
#dashboard :focus-visible,body:has(#dashboard:not(.hidden)) .top :focus-visible{outline:2px solid #efd9b3;outline-offset:3px}
@media(max-width:640px){body:has(#dashboard:not(.hidden)) .wrap{padding:0 18px}#dashboard .dashboard-top{gap:12px}#dashboard .dashboard-top .actions{flex-wrap:wrap}#dashboard .appointment-main{grid-template-columns:64px 1fr;gap:13px;padding:20px 16px}#dashboard .appointment-time{font-size:22px}#dashboard .appointment-main-actions{grid-column:1/-1}#dashboard .appointment-main-actions button{flex:1}#dashboard .appointment-status{display:table;margin:6px 0 0}#dashboard .dashboard-day{padding:18px}#dashboard .dashboard-date-actions{width:100%}#dashboard .dashboard-date-actions label{flex:1;min-width:0}#dashboard .dashboard-date-actions input{width:100%}#dashboard .dashboard-top h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Reference proportions: compact profile header, charcoal sheet and pill controls. */
body:has(#dashboard:not(.hidden)) .wrap{max-width:480px;background:#303030;min-height:100svh;padding:0 20px}
body:has(#dashboard:not(.hidden)) .top{background:#303030!important;border:0;padding:25px 0 14px}
body:has(#dashboard:not(.hidden)) .brand{display:flex;align-items:center;gap:10px;font-family:Arial,sans-serif!important;font-size:19px!important;color:#f0e9d9!important}
.staff-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 18%;border:1px solid #d5b989}
body:has(#dashboard:not(.hidden)) .brand-note{margin-left:52px;font-size:12px;letter-spacing:.08em}
#dashboard:not(.hidden){background:#303030!important;margin:18px auto}
#dashboard #loginCard,#dashboard .appt,#dashboard .dashboard-setting,#dashboard .empty{background:linear-gradient(125deg,#3c3c3c,#323232)!important;border-color:#4c4c4c;border-radius:22px}
#dashboard .dashboard-top h2{font-size:26px;font-weight:400}#dashboard .dashboard-top{align-items:start}#dashboard .dashboard-top .actions{gap:5px}#dashboard .dashboard-top .actions button{font-size:14px;padding:8px 10px;min-height:40px}
#dashboard .dashboard-nav{background:#373737;border-color:#484848;border-radius:22px;padding:5px;gap:5px}#dashboard .dashboard-nav button{border-radius:18px!important}
#dashboard .dashboard-day{background:transparent;border:0;border-radius:0;padding:0;margin:22px 0 16px;display:block}#dashboard .dashboard-date-actions{margin-top:16px}#dashboard .dashboard-date-actions label{flex:1}#dashboard .dashboard-date-actions input{width:100%;background:linear-gradient(#484848,#353535)!important;border-radius:22px}
#dashboard .appointment-main{padding:18px;grid-template-columns:65px 1fr;gap:12px}#dashboard .appointment-main-actions{grid-column:1/-1}#dashboard .appointment-main-actions button{flex:1;border-radius:20px!important}#dashboard .appointment-time{font-size:23px}#dashboard .appointment-name{font-size:17px}
.app-tools{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;font-size:14px;color:#bcb7ac}.app-tools button{background:#414141!important;color:#eee5d5!important;border:1px solid #555;border-radius:22px;font-size:14px}.customer-preview{color:#ead7b2;text-decoration:none;font-size:14px}.app-help{background:#383838;color:#eee5d5;border-color:#555}
@media(min-width:600px){body:has(#dashboard:not(.hidden)){padding:26px 0!important}body:has(#dashboard:not(.hidden)) .wrap{border:1px solid #494949;border-radius:30px;overflow:hidden}}