* { box-sizing:border-box; }
html { font-family:var(--font-sans); background:var(--color-canvas); color:var(--color-text); }
body { margin:0; background:var(--color-canvas); }
a { color:var(--color-primary); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #f2b533; outline-offset:3px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-160%); padding:10px 14px; border-radius:var(--radius-sm); background:#fff; color:#111827; font-weight:750; }
.skip-link:focus { transform:none; }
.app-shell { min-height:100vh; }
.app-sidebar { position:fixed; inset:0 auto 0 0; z-index:var(--z-sidebar); display:flex; width:var(--sidebar-width); flex-direction:column; overflow:auto; padding:22px 16px; background:var(--color-sidebar); color:#fff; }
.sidebar-logo { display:flex; align-items:center; padding:0 8px 24px; text-decoration:none; }
.sidebar-logo img { display:block; width:170px; max-width:100%; height:auto; }
.nav-group { margin:14px 0; }
.nav-group-title { margin:0 10px 7px; color:#94a3b8; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sidebar-nav { display:grid; gap:3px; }
.sidebar-nav a { display:flex; align-items:center; min-height:40px; gap:10px; padding:9px 11px; border-radius:10px; color:#d8e1ef; font-size:.93rem; font-weight:650; text-decoration:none; }
.sidebar-nav a:hover,.sidebar-nav a[aria-current="page"] { background:var(--color-sidebar-soft); color:#fff; }
.nav-row { display:flex; align-items:center; }
.nav-row > a:first-child { flex:1; }
.sidebar-nav .nav-badge { min-width:22px; min-height:22px; margin-left:4px; padding:2px 6px; justify-content:center; border-radius:999px; background:var(--color-danger); color:#fff; font-size:.72rem; font-weight:800; line-height:18px; text-align:center; }
.sidebar-nav .nav-badge:hover { background:#b42318; color:#fff; }
.sticky-actions { position:sticky; bottom:0; z-index:4; display:flex; gap:10px; margin:20px -4px -4px; padding:12px; border-top:1px solid var(--color-border); background:rgba(255,255,255,.96); backdrop-filter:blur(8px); }
.sidebar-backdrop { display:none; }
.app-workspace { min-height:100vh; margin-left:var(--sidebar-width); }
.app-topbar { position:sticky; top:0; z-index:30; display:flex; min-height:var(--topbar-height); align-items:center; justify-content:flex-end; gap:12px; padding:10px 28px; border-bottom:1px solid var(--color-border); background:rgb(255 255 255 / 94%); backdrop-filter:blur(12px); }
.topbar-company { margin-right:auto; color:var(--color-muted); font-weight:650; }
.topbar-link { padding:8px 10px; border-radius:9px; color:var(--color-text); font-weight:650; text-decoration:none; }
.topbar-link:hover { background:var(--color-primary-soft); }
.nav-toggle { display:none; margin:0; background:var(--color-primary); color:#fff; }
.app-topbar form,.app-topbar button { margin:0; }
.app-main { width:min(100%,var(--content-width)); margin:0 auto; padding:30px 32px 64px; }
.public-main { max-width:760px; margin:72px auto; padding:0 24px; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.page-heading h1 { margin:3px 0 7px; font-size:clamp(1.7rem,3vw,2.35rem); }
.page-heading p { margin:0; color:var(--color-muted); }
.eyebrow { color:var(--color-primary)!important; font-size:.76rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.surface,.card { margin-bottom:18px; padding:24px; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-sm); }
.stack > * + * { margin-top:16px; }
.admin-grid,.catalog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
.admin-card { display:grid; gap:8px; min-height:130px; padding:22px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; color:var(--color-text); text-decoration:none; box-shadow:var(--shadow-sm); }
.admin-card:hover { border-color:#9eb7ef; box-shadow:var(--shadow-md); transform:translateY(-1px); }
.admin-card span,.service-card p { color:var(--color-muted); }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; margin-top:18px; padding:10px 16px; border:0; border-radius:var(--radius-sm); background:var(--color-primary); color:#fff; font:inherit; font-weight:700; text-decoration:none; cursor:pointer; }
.home-actions { display:flex; flex-wrap:wrap; gap:10px; }.home-actions .button { margin-top:18px; }.button.button-secondary { border:1px solid var(--color-border); background:#fff; color:var(--color-primary); }
.catalog-detail-heading { align-items:center; }.catalog-detail { display:grid; grid-template-columns:minmax(220px,38%) 1fr; overflow:hidden; padding:0; }.catalog-detail-image { display:grid; min-height:280px; place-items:center; overflow:hidden; background:linear-gradient(135deg,#edf4ff,#f8fbff); color:var(--color-primary); font-size:5rem; }.catalog-detail-image img { width:100%; height:100%; object-fit:cover; }.catalog-detail-body { padding:28px; }.catalog-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; }.catalog-detail-grid > div { display:grid; gap:6px; min-height:78px; padding:14px 0; border-bottom:1px solid #e5ebf4; }.catalog-detail-grid span { color:var(--color-muted); font-size:.9rem; }.catalog-detail-grid p { margin:0; }.catalog-detail-wide { grid-column:1/-1; }
.booking-validation-alert { margin:0 0 18px; padding:14px 16px; border:1px solid #efb6bf; border-radius:var(--radius-sm); background:#fff0f2; color:#8f1728; }.booking-validation-alert strong { display:block; margin-bottom:4px; }.booking-validation-alert ul { margin:4px 0 0; padding-left:20px; }
.exception-section-heading,.exception-item { display:flex; align-items:center; gap:12px; justify-content:space-between; }.exception-section-heading a,.exception-item a { font-weight:700; text-decoration:none; }.exception-item { margin-top:10px; padding:10px 12px; border-radius:8px; background:#f2f4f8; }.exception-item span { flex:1; color:var(--color-text); }.exception-illness { border-left:4px solid #df4d63; }.exception-absence { border-left:4px solid #8156d8; }.exception-vacation { border-left:4px solid #319fa8; }.exception-training { border-left:4px solid #3974d8; }.exception-maintenance { border-left:4px solid #e79a2b; }.exception-other { border-left:4px solid #7a8799; }.timeline-unavailability,.calendar-unavailability { position:absolute; top:7px; bottom:7px; display:flex; align-items:center; overflow:hidden; padding:0 6px; border-radius:6px; color:#fff; font-size:.75rem; font-weight:750; white-space:nowrap; }.timeline-unavailability.exception-illness,.calendar-unavailability.exception-illness { background:#df4d63; }.timeline-unavailability.exception-absence,.calendar-unavailability.exception-absence { background:#8156d8; }.timeline-unavailability.exception-vacation,.calendar-unavailability.exception-vacation { background:#319fa8; }.timeline-unavailability.exception-training,.calendar-unavailability.exception-training { background:#3974d8; }.timeline-unavailability.exception-maintenance,.calendar-unavailability.exception-maintenance { background:#e79a2b; }.timeline-unavailability.exception-other,.calendar-unavailability.exception-other { background:#7a8799; }.calendar-unavailability { position:static; min-height:28px; margin:3px 0; font-size:.7rem; }
.calendar-heading-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }.calendar-heading-actions p { margin:0; }.calendar-conflict-button { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #efb3be; border-radius:var(--radius-sm); background:var(--color-danger-soft); color:#9f1f33; font-weight:800; text-decoration:none; }.calendar-conflict-button:hover,.calendar-conflict-button.is-active { background:var(--color-danger); color:#fff; }.calendar-conflict-button span { display:grid; min-width:22px; height:22px; place-items:center; border-radius:999px; background:var(--color-danger); color:#fff; font-size:.76rem; }.calendar-conflict-button:hover span,.calendar-conflict-button.is-active span { background:#fff; color:var(--color-danger); }
.secondary { background:#64748b; }.secondary-danger { border:1px solid #e0a2ad; background:#fff; color:var(--color-danger); }
label { display:block; margin:14px 0 6px; font-weight:680; }
input,select,textarea { width:100%; padding:10px 12px; border:1px solid #b8c2d1; border-radius:var(--radius-sm); background:#fff; color:var(--color-text); font:inherit; }
.booking-service-fields select.has-selection { border:2px solid var(--color-success); background:#edfaf6; box-shadow:0 0 0 3px #16805f24; font-weight:700; }
input[type="checkbox"],input[type="radio"] { width:auto; }
.form-grid,.filter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.action-row,.form-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.status-badge { display:inline-flex; align-items:center; width:max-content; padding:4px 9px; border-radius:999px; background:var(--color-primary-soft); color:var(--color-primary); font-size:.78rem; font-weight:800; }.status-badge.success { background:#e7f7f1; color:var(--color-success); }.status-badge.danger { background:var(--color-danger-soft); color:var(--color-danger); }
.message { margin:0 0 16px; padding:12px 14px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#fff; }.message.error { border-color:#efb3be; background:var(--color-danger-soft); color:#9f1f33; }.message.success { border-color:#91d5c0; background:#edfaf6; color:#14634d; }
.empty-state { display:grid; place-items:center; min-height:210px; padding:32px; border:1px dashed #bfc9d8; border-radius:var(--radius-md); background:var(--color-surface-soft); text-align:center; }.empty-state p { color:var(--color-muted); }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0; }.metric { padding:18px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; }.metric strong { display:block; margin-bottom:8px; font-size:1.7rem; }.metric.alert strong { color:var(--color-danger); }
.funnel-grid { display:flex; gap:14px; overflow:auto; padding-bottom:8px; }.funnel-stage { min-width:220px; padding:18px; border:1px solid var(--color-border); border-top:5px solid var(--stage-color); border-radius:var(--radius-md); }.funnel-stage h3 { margin:0; }.funnel-stage dl div { display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--color-border); }.funnel-stage dt { color:var(--color-muted); }.funnel-stage dd { margin:0; font-weight:750; }
.table-wrap { overflow:auto; }.table-wrap table,table { width:100%; border-collapse:collapse; }th,td { padding:11px 12px; border-bottom:1px solid var(--color-border); text-align:left; white-space:nowrap; }th { background:var(--color-surface-soft); color:var(--color-muted); font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; }
.columns { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:20px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.catalog-heading { align-items:center; }.catalog-actions,.view-switch,.catalog-search,.form-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }.catalog-actions .button,.catalog-search .button,.form-actions .button { margin-top:0; }.view-switch { overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:#fff; }.view-switch a { padding:10px 12px; color:var(--color-muted); font-weight:750; text-decoration:none; }.view-switch a.active { background:#e5f7fc; color:#127da9; }.catalog-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; }.catalog-side { align-self:start; padding:22px; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-sm); }.catalog-side strong { display:block; color:var(--color-muted); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }.catalog-content { min-width:0; }.catalog-search { margin:-24px -24px 24px; padding:18px 24px; border-bottom:1px solid var(--color-border); }.catalog-search input { flex:1 1 260px; }.catalog-search .muted { margin-left:auto; }.catalog-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }.catalog-card { overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); background:#fff; }.catalog-image { display:grid; aspect-ratio:16/9; place-items:center; overflow:hidden; background:linear-gradient(135deg,#edf4ff,#f8fbff); color:var(--color-primary); font-size:2.8rem; }.catalog-image img { width:100%; height:100%; object-fit:cover; }.catalog-card-body { display:grid; gap:12px; padding:16px; }.catalog-card-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.catalog-card h2 { margin:0; font-size:1.05rem; }.catalog-card p { min-height:2.8em; margin:0; color:var(--color-muted); }.availability-dot { flex:0 0 auto; width:11px; height:11px; margin-top:5px; border-radius:50%; background:#10a970; }.catalog-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }.catalog-card-footer a,.catalog-table a { font-weight:700; text-decoration:none; }.catalog-table th a { color:inherit; text-decoration:none; }.catalog-table-name { display:flex; align-items:center; gap:10px; }.catalog-table-name img { width:34px; height:34px; border-radius:7px; object-fit:cover; }.danger-link { color:var(--color-danger)!important; }.catalog-form-card { max-width:880px; }.catalog-form-field { margin:0 0 18px; }.catalog-form-field textarea { min-height:110px; }.catalog-form-field input[type=file] { padding:9px; }.image-preview { display:grid; width:min(100%,330px); min-height:150px; margin-top:10px; place-items:center; overflow:hidden; border:1px dashed #b7c5d8; border-radius:var(--radius-sm); background:var(--color-surface-soft); color:var(--color-muted); }.image-preview img { display:block; width:100%; max-height:230px; object-fit:cover; }.required { color:var(--color-danger); }.confirmation-card { max-width:640px; }.pagination { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }.pagination a { font-weight:700; }
@media(max-width:820px){
  .app-sidebar { transform:translateX(-105%); transition:transform .2s ease; box-shadow:var(--shadow-md); }.app-sidebar[data-open="true"] { transform:none; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:45; background:rgb(15 23 42 / 55%); }.sidebar-backdrop[data-open="true"] { display:block; }
  .app-workspace { margin-left:0; }.app-topbar { padding:10px 16px; justify-content:flex-start; gap:8px; }.nav-toggle { display:inline-flex; }.topbar-company { min-width:0; margin-right:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.topbar-user { display:none; }.topbar-link { display:grid; width:36px; height:36px; place-items:center; overflow:hidden; font-size:0; text-decoration:none; }.topbar-link::before { content:"🔔"; font-size:1.05rem; }.topbar-logout button { padding:8px 10px; font-size:.82rem; }.catalog-detail { grid-template-columns:1fr; }.catalog-detail-image { min-height:210px; }.catalog-detail-body { padding:20px; }.catalog-detail-grid { grid-template-columns:1fr; }.catalog-detail-wide { grid-column:auto; }
  .app-main { padding:22px 16px 48px; }.page-heading { flex-direction:column; }.columns,.catalog-layout { grid-template-columns:1fr; }.catalog-side { display:none; }
}