/* Sidestreet 2026 visual system */
:root {
    --ss-ink: #07131c; --ss-navy: #0c2d42; --ss-blue: #20618a; --ss-blue-secondary: #2d7ca8;
    --ss-cream: #f7f5f0; --ss-paper: #f7f5f0; --ss-ice: #eef3f6; --ss-sky: #a9cfe3;
    --ss-rule: rgba(7,19,28,.18); --ss-muted: #53616a;
    --ss-success: #287a62; --ss-warning: #bf7b24; --ss-danger: #b83b3b;
    --bs-primary: #20618a; --bs-primary-rgb: 32,97,138;
    --bs-success: #287a62; --bs-success-rgb: 40,122,98;
    --bs-warning: #bf7b24; --bs-warning-rgb: 191,123,36;
    --bs-danger: #b83b3b; --bs-danger-rgb: 184,59,59;
    --bs-body-color: #07131c; --bs-body-bg: #f7f5f0; --bs-border-color: #dfe3e5;
}
html { background: var(--ss-cream); }
body { min-height: 100vh; margin: 0; background: var(--ss-cream); color: var(--ss-ink); font-family: "Geist",Arial,sans-serif; font-size: .9rem; line-height: 1.62; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6,.stat-number { color: var(--ss-ink); font-family: "Outfit","Geist",Arial,sans-serif; font-weight: 720; letter-spacing: -.035em; }
a { color: var(--ss-blue); }
.text-muted,.text-body-secondary { color: var(--ss-muted) !important; }
.bi { vertical-align: -.1em; }
.btn { --bs-btn-border-radius: 999px; padding: .62rem 1.08rem; font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; transition: background-color .16s ease,color .16s ease; }
.btn-primary { --bs-btn-bg: var(--ss-blue); --bs-btn-border-color: var(--ss-blue); --bs-btn-hover-bg: #184f72; --bs-btn-hover-border-color: #184f72; }
.btn-outline-primary { --bs-btn-color: var(--ss-blue); --bs-btn-border-color: #8ba9ba; --bs-btn-hover-bg: var(--ss-blue); --bs-btn-hover-border-color: var(--ss-blue); }
.btn-sm { padding: .4rem .78rem; font-size: .68rem; }
.btn-lg { padding: .78rem 1.4rem; font-size: .78rem; }
.form-control,.form-select,.input-group-text { min-height: 45px; border-color: rgba(7,19,28,.24); border-radius: 2px; background-color: var(--ss-cream); color: var(--ss-ink); }
.form-control:focus,.form-select:focus { border-color: var(--ss-blue); box-shadow: 0 0 0 3px rgba(32,97,138,.12); }
.form-label { margin-bottom: .35rem; color: #40515b; font-size: .76rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.form-text { color: var(--ss-muted); }
.form-check-input:checked { background-color: var(--ss-blue); border-color: var(--ss-blue); }
header.navbar { min-height: 68px; background: var(--ss-ink) !important; border-bottom: 1px solid rgba(255,255,255,.18); box-shadow: none !important; }
.navbar-brand { align-self: stretch; padding-top: 0; padding-bottom: 0; background: transparent; box-shadow: none; }
.navbar-brand .brand-logo { width: auto; height: 31px; display: block; }
header.navbar .nav-link { color: rgba(255,255,255,.74) !important; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
header.navbar .nav-link:hover { color: #fff !important; }
.sidebar { background: #f0eee8 !important; border-color: #dddeda !important; }
@media (min-width: 768px) { .sidebar { position: sticky; top: 68px; z-index: 600; height: calc(100vh - 68px); } }
.sidebar .offcanvas-md,.sidebar .offcanvas-body { background: #f0eee8 !important; }
.sidebar .nav-link { margin: .2rem .65rem; padding: .68rem .85rem; border-radius: 0; color: #344751; font-size: .78rem; font-weight: 580; }
.sidebar .nav-link:hover { background: rgba(32,97,138,.07); color: var(--ss-ink); }
.sidebar .nav-link.active { background: var(--ss-ink); color: #fff; }
.sidebar-heading { color: #809099 !important; font-size: .64rem; letter-spacing: .14em; }
main { max-width: 1480px; }
.dashboard-header { border-bottom: 1px solid #ccd3d6; }
.dashboard-header h1 { margin: 0; font-size: clamp(2rem,3.4vw,3rem); font-weight: 760; letter-spacing: -.055em; }
.card,.form-section { border: 0 !important; border-top: 1px solid var(--ss-rule) !important; border-bottom: 1px solid var(--ss-rule) !important; border-radius: 0; background: transparent; box-shadow: none !important; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--ss-rule) !important; }
.form-section { padding: clamp(1.15rem,3vw,1.7rem) 0; margin-bottom: 2rem; }
.form-section h5 { margin: 0 0 1.25rem; padding-bottom: .8rem; border-bottom: 1px solid var(--ss-rule); }
.integration-card { overflow: hidden; }
.stat-card { transition: color .18s ease; }
.stat-card:hover { box-shadow: none !important; }
.stat-card .stat-icon { display: none; }
.stat-card .stat-number { font-size: 2.15rem; font-weight: 760; line-height: 1; }
.appt-item { border-left: 3px solid var(--ss-blue); transition: background .15s; }
.appt-item:hover { background: #f8f8f4; }
.appt-item.status-cancelled { border-left-color: var(--ss-danger); opacity: .65; }
.appt-item.status-rescheduled { border-left-color: var(--ss-warning); }
.appt-item.status-pending { border-left-color: var(--ss-sky); }
.badge { font-weight: 600; letter-spacing: .025em; }
.badge-scheduled { background: var(--ss-blue); color: #fff; }
.badge-rescheduled { background: var(--ss-warning); color: #fff; }
.badge-cancelled { background: var(--ss-danger); color: #fff; }
.badge-pending { background: var(--ss-navy); color: #fff; }
.time-slots-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; }
.time-slot,.slot-btn { padding: .65rem .4rem; border: 1px solid rgba(7,19,28,.22); border-radius: 0; background: var(--ss-paper); color: var(--ss-ink); cursor: pointer; font-size: .82rem; text-align: center; user-select: none; transition: all .15s; }
.time-slot:hover:not(.unavailable),.slot-btn:hover { border-color: var(--ss-blue); color: var(--ss-blue); }
.time-slot.selected,.slot-btn.selected { border-color: var(--ss-blue); background: var(--ss-blue); color: #fff; }
.time-slot.unavailable { background: #ebece9; color: #96a1a6; cursor: not-allowed; text-decoration: line-through; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: .55rem; }
.location-option { height: 100%; border: 0 !important; border-top: 1px solid var(--ss-rule) !important; border-radius: 0 !important; background: transparent; transition: background-color .15s; }
.location-options > div:last-child .location-option { border-bottom: 1px solid var(--ss-rule) !important; }
.location-option:has(.form-check-input:checked) { background: var(--ss-ice); box-shadow: none; }
.contact-result { padding: .7rem 1rem; border-bottom: 1px solid #e7e8e5; cursor: pointer; }
.contact-result:hover { background: #f5f5f0; }
.loading-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(247,245,240,.82); backdrop-filter: blur(4px); }
.loading-overlay.active { display: flex; }
.empty-state { padding: 3rem 1.5rem; border-top: 1px solid var(--ss-rule); border-bottom: 1px solid var(--ss-rule); border-radius: 0; text-align: center; color: var(--ss-muted); }
.empty-state > .bi { display: block; margin-bottom: .6rem; color: var(--ss-blue); font-size: 2rem; }
.login-container { max-width: 430px; margin: 8vh auto; }
.login-card { overflow: hidden; }
.login-logo-wrap { display: flex; justify-content: center; margin: -1.5rem -1.5rem 1.5rem; padding: 2.3rem 1.5rem; background: var(--ss-ink); }
.login-logo { width: auto; height: 38px; }
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 10000; }
@media (min-width: 992px) { .time-slots-grid { grid-template-columns: repeat(6,1fr); } }
@media (max-width: 767.98px) { header.navbar { min-height: 60px; } .navbar-brand .brand-logo { height: 26px; } .dashboard-header h1 { font-size: 2rem; } .time-slots-grid { grid-template-columns: repeat(3,1fr); } main { padding-left: 1rem !important; padding-right: 1rem !important; } }