/* ============================================================================
   GOOGLE MATERIAL DESIGN 3 — Banna Chameleon Theme
   Matches Gmail / Google Drive / Admin Console aesthetic.
   All layout rules scoped to body:not(.tv-mode).
   TV mode: stays completely dark and untouched.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');

/* ── MD3 Design Tokens ──────────────────────────────────────────────────── */
:root {
    /* Brand */
    --md-blue:           #1A73E8;
    --md-blue-hover:     #1557B0;
    --md-blue-light:     #E8F0FE;
    --md-green:          #1E8E3E;
    --md-green-light:    #E6F4EA;
    --md-amber:          #F9AB00;
    --md-amber-light:    #FEF7E0;
    --md-red:            #D93025;
    --md-red-light:      #FCE8E6;

    /* Text */
    --md-text-1:         #202124;
    --md-text-2:         #5F6368;
    --md-text-3:         #80868B;

    /* Surfaces */
    --md-white:          #FFFFFF;
    --md-surface:        #F8F9FA;
    --md-bg:             #F1F3F4;
    --md-border:         #DADCE0;

    /* Elevation */
    --md-elev-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
    --md-elev-2: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);

    /* Shape */
    --md-r-xs:    4px;
    --md-r-sm:    8px;
    --md-r-pill:  20px;
    --md-r-chip:  16px;
    --md-r-full:  50%;

    /* Nav rail */
    --md-rail:    72px;
    --md-rail-xl: 256px;
}

/* ── Base: body typography, page color, rail offset ─────────────────────── */
body:not(.tv-mode) {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px;
    color: var(--md-text-1);
    background-color: var(--md-bg) !important;
    padding-left: var(--md-rail) !important;
    transition: padding-left 0.2s ease;
}
body.g-rail-expanded:not(.tv-mode) { padding-left: var(--md-rail-xl) !important; }
body.tv-mode { padding-left: 0 !important; }

/* Sentence case everywhere — override all-caps labels */
body:not(.tv-mode) .hm-label,
body:not(.tv-mode) .table-header th,
body:not(.tv-mode) .status-label,
body:not(.tv-mode) .tv-toggle-label-text {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ── Navigation Rail ────────────────────────────────────────────────────── */
.g-nav-rail {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: var(--md-rail);
    background: var(--md-white);
    border-right: 1px solid var(--md-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 600;
    overflow: hidden;
    transition: width 0.2s ease;
    padding: 8px 0 16px;
    box-sizing: border-box;
}
.g-nav-rail.expanded {
    width: var(--md-rail-xl);
    align-items: flex-start;
}
body.tv-mode .g-nav-rail { display: none !important; }

/* Menu / hamburger button */
.g-rail-menu-btn {
    width: 48px; height: 48px;
    border: none; background: transparent;
    border-radius: var(--md-r-full);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--md-text-2);
    margin-bottom: 4px; flex-shrink: 0;
    transition: background 0.15s;
    align-self: center;
}
.g-rail-menu-btn:hover { background: var(--md-bg); }
.g-nav-rail.expanded .g-rail-menu-btn {
    align-self: flex-start;
    margin-left: 12px;
}
.g-rail-menu-btn .material-symbols-outlined { font-size: 22px; }

/* Rail items list */
.g-rail-items {
    list-style: none; margin: 0; padding: 0; width: 100%;
    display: flex; flex-direction: column; gap: 2px;
}
.g-rail-item-wrapper {
    width: 100%; padding: 0 8px; box-sizing: border-box;
    display: flex; justify-content: center;
}
.g-nav-rail.expanded .g-rail-item-wrapper { justify-content: flex-start; }

/* Individual item */
.g-rail-item {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 28px;
    text-decoration: none;
    color: var(--md-text-2);
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
}
.g-nav-rail.expanded .g-rail-item {
    flex-direction: row;
    width: 100%; height: 48px;
    border-radius: 24px;
    justify-content: flex-start;
    padding: 0 16px; gap: 16px;
}
.g-rail-item:hover { background: var(--md-bg); color: var(--md-text-1); text-decoration: none; }
.g-rail-item.active { background: var(--md-blue-light); color: var(--md-blue); }
.g-rail-item.active .g-rail-icon { color: var(--md-blue); font-variation-settings: 'FILL' 1, 'wght' 600; }

.g-rail-icon {
    font-size: 22px;
    font-family: 'Material Symbols Outlined';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0; line-height: 1;
}
.g-rail-label {
    font-family: 'Google Sans', sans-serif;
    font-size: 13px; font-weight: 500;
    white-space: nowrap; overflow: hidden;
    max-width: 0; opacity: 0;
    transition: max-width 0.2s ease, opacity 0.15s ease;
}
.g-nav-rail.expanded .g-rail-label { max-width: 160px; opacity: 1; }

/* ── Typography ──────────────────────────────────────────────────────────── */
body:not(.tv-mode) h1, body:not(.tv-mode) h2,
body:not(.tv-mode) h3, body:not(.tv-mode) h4,
body:not(.tv-mode) h5, body:not(.tv-mode) h6,
body:not(.tv-mode) .dashboard-title,
body:not(.tv-mode) .card-title,
body:not(.tv-mode) .card-header,
body:not(.tv-mode) .g-section-title {
    font-family: 'Google Sans', 'Helvetica Neue', sans-serif !important;
    font-weight: 500 !important;
}

/* ── Top app bar ─────────────────────────────────────────────────────────── */
body:not(.tv-mode) .main-container {
    background: var(--md-white) !important;
    border: none !important;
    border-bottom: 1px solid var(--md-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 24px !important;
    margin: 0 !important;
}
body:not(.tv-mode) .dashboard-title {
    color: var(--md-text-1) !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}
body:not(.tv-mode) .header-icon { color: var(--md-blue) !important; font-size: 1.5rem !important; }

/* Server status → soft green chip */
body:not(.tv-mode) .server-status-compact {
    background: transparent !important; box-shadow: none !important; padding: 0 !important;
}
body:not(.tv-mode) .status-pill.bg-success,
body:not(.tv-mode) .badge.bg-success {
    background-color: var(--md-green-light) !important;
    color: var(--md-green) !important;
    border: 1px solid #A8D5B5 !important;
    font-size: 12px !important; font-weight: 500 !important;
    border-radius: var(--md-r-chip) !important;
    padding: 4px 10px !important;
    font-family: 'Google Sans', sans-serif !important;
}

/* Nav buttons → Material text buttons */
body:not(.tv-mode) .header-wrapper .btn,
body:not(.tv-mode) .header-wrapper a.btn {
    border-color: var(--md-border) !important;
    color: var(--md-text-2) !important;
    background: transparent !important;
    border-radius: var(--md-r-xs) !important;
    font-family: 'Google Sans', sans-serif !important;
    font-size: 13px !important; font-weight: 500 !important;
    box-shadow: none !important; letter-spacing: 0.1px;
    padding: 6px 14px !important;
    transition: background 0.15s, color 0.15s !important;
}
body:not(.tv-mode) .header-wrapper .btn:hover,
body:not(.tv-mode) .header-wrapper a.btn:hover {
    background: var(--md-surface) !important; color: var(--md-text-1) !important;
}

/* Cards / List segmented toggle */
body:not(.tv-mode) .btn-group[role="group"] .btn {
    border-color: var(--md-border) !important; background: transparent !important;
    color: var(--md-text-2) !important;
    font-family: 'Google Sans', sans-serif !important; font-size: 13px !important;
    box-shadow: none !important;
}
body:not(.tv-mode) .btn-group[role="group"] .btn:first-child { border-radius: var(--md-r-xs) 0 0 var(--md-r-xs) !important; }
body:not(.tv-mode) .btn-group[role="group"] .btn:last-child  { border-radius: 0 var(--md-r-xs) var(--md-r-xs) 0 !important; }
body:not(.tv-mode) #cardViewBtn.active,
body:not(.tv-mode) #listViewBtn.active {
    background: var(--md-blue-light) !important;
    color: var(--md-blue) !important; border-color: var(--md-blue) !important;
}

/* ── Gmail-style search bar ──────────────────────────────────────────────── */
body:not(.tv-mode) .smart-search-container {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 10px 0 !important;
}
body:not(.tv-mode) .smart-search-input {
    background-color: var(--md-bg) !important;
    border: none !important; border-radius: 24px !important;
    font-style: normal !important; font-size: 14px !important;
    color: var(--md-text-1) !important;
    font-family: 'Roboto', sans-serif !important;
    height: 44px !important; padding: 0 16px 0 44px !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
body:not(.tv-mode) .smart-search-input:focus {
    background-color: var(--md-white) !important;
    box-shadow: var(--md-elev-1) !important; outline: none !important;
}
body:not(.tv-mode) .smart-search-input::placeholder {
    font-style: normal !important; color: var(--md-text-2) !important;
}
body:not(.tv-mode) .search-icon { color: var(--md-text-2); font-size: 1.1rem; }
body:not(.tv-mode) .search-tip {
    background: var(--md-surface); color: var(--md-blue);
    border-radius: 12px; border: none; font-size: 12px;
}

/* ── Filter row → Material chip strip ───────────────────────────────────── */
body:not(.tv-mode) .event-area-filters label {
    font-family: 'Roboto', sans-serif; font-size: 14px;
    color: var(--md-text-2); font-weight: 400;
}
body:not(.tv-mode) #eventFilterSelect {
    background: var(--md-white) !important; border: 1px solid var(--md-border) !important;
    border-radius: var(--md-r-chip) !important; font-size: 14px !important;
    color: var(--md-text-1) !important; height: 32px !important; padding: 0 12px !important;
    font-family: 'Roboto', sans-serif !important; box-shadow: none !important;
}
body:not(.tv-mode) #eventFilterSelect:focus {
    border-color: var(--md-blue) !important; outline: none !important;
}
body:not(.tv-mode) .hm-label {
    font-size: 14px !important; font-weight: 400 !important;
    font-family: 'Roboto', sans-serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
    color: var(--md-text-2) !important;
}
body:not(.tv-mode) #hm-group-main .hm-label-humans { color: var(--md-green) !important; }
body:not(.tv-mode) #hm-group-main .hm-label-machines { color: var(--md-text-2) !important; }
body:not(.tv-mode) #hm-group-main.machines-active .hm-label-humans { color: var(--md-text-2) !important; }
body:not(.tv-mode) #hm-group-main.machines-active .hm-label-machines { color: var(--md-blue) !important; }

/* ── Material Toggle Switch ──────────────────────────────────────────────── */
body:not(.tv-mode) .hm-switch {
    position: relative !important; width: 52px !important; height: 32px !important; flex-shrink: 0 !important;
}
body:not(.tv-mode) .hm-switch-slider {
    position: absolute !important; inset: 0 !important;
    background: #DADCE0 !important; border-radius: 16px !important; border: none !important;
    transition: background 0.2s !important;
}
body:not(.tv-mode) .hm-switch-slider::before {
    content: '' !important; position: absolute !important;
    width: 16px !important; height: 16px !important;
    left: 8px !important; top: 8px !important;
    background: #fff !important; border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.3) !important;
    transition: transform 0.2s, width 0.1s, height 0.1s, left 0.1s, top 0.1s !important;
}
body:not(.tv-mode) .hm-switch input:checked + .hm-switch-slider {
    background: var(--md-blue) !important;
}
body:not(.tv-mode) .hm-switch input:checked + .hm-switch-slider::before {
    transform: translateX(20px) !important;
    width: 24px !important; height: 24px !important;
    left: 4px !important; top: 4px !important;
}

/* ── "Cameras" section header ────────────────────────────────────────────── */
body:not(.tv-mode) .g-section-header {
    display: flex; align-items: center;
    padding: 20px 4px 10px;
    border-bottom: 1px solid var(--md-border); margin-bottom: 12px;
}
body:not(.tv-mode) .g-section-title {
    font-size: 14px; font-weight: 500; color: var(--md-text-2);
}
body.tv-mode .g-section-header { display: none !important; }

/* ── MD3 device tiles (card view) ───────────────────────────────────────── */
body:not(.tv-mode) .devices-grid { gap: 16px; }

body:not(.tv-mode) .device-card .card {
    border: none !important;
    border-radius: var(--md-r-sm) !important;
    box-shadow: var(--md-elev-1) !important;
    transition: box-shadow 0.2s ease !important;
    overflow: hidden !important; background: var(--md-white) !important;
    animation: none !important;
}
body:not(.tv-mode) .device-card:hover { transform: none !important; }
body:not(.tv-mode) .device-card:hover .card { box-shadow: var(--md-elev-2) !important; }
body:not(.tv-mode) .device-card.online .card,
body:not(.tv-mode) .device-card.offline .card,
body:not(.tv-mode) .device-card.recording .card {
    border: none !important; box-shadow: var(--md-elev-1) !important; animation: none !important; opacity: 1 !important;
}
body:not(.tv-mode) .device-card.offline .card-preview-top { opacity: 0.4; }

/* Preview — the "slide thumbnail" */
body:not(.tv-mode) .card-preview-top {
    background: var(--md-bg) !important; border-bottom: 1px solid var(--md-border) !important;
}

/* Caption row */
body:not(.tv-mode) .device-card .primary-header {
    background: var(--md-white) !important; border-bottom: none !important; padding: 12px 16px !important;
}
body:not(.tv-mode) .device-card .card-title i { display: none !important; }
body:not(.tv-mode) .device-card .card-title {
    font-size: 14px !important; font-weight: 500 !important; color: var(--md-text-1) !important;
}
body:not(.tv-mode) .device-card .camera-name-input {
    font-family: 'Google Sans', sans-serif !important;
    color: var(--md-text-1) !important; font-weight: 500 !important; font-size: 14px !important;
}
body:not(.tv-mode) .device-card .device-meta-row {
    color: var(--md-text-2) !important; font-size: 12px !important;
}
body:not(.tv-mode) .device-card .person-assign-row {
    color: var(--md-text-2) !important; font-size: 12px !important; margin-top: 2px !important;
}
body:not(.tv-mode) .device-card .person-assign-select {
    font-size: 12px !important; color: var(--md-text-2) !important;
}

/* Status chips */
body:not(.tv-mode) .status-badge {
    border-radius: var(--md-r-chip) !important; font-size: 12px !important;
    font-weight: 500 !important; padding: 4px 10px !important;
    display: inline-flex !important; align-items: center !important;
    gap: 5px !important; font-family: 'Roboto', sans-serif !important; border: none !important;
}
body:not(.tv-mode) .status-badge i { font-size: 7px !important; }
body:not(.tv-mode) .status-badge.online { background-color: var(--md-green-light) !important; color: var(--md-green) !important; }
body:not(.tv-mode) .status-badge.online i { color: var(--md-green) !important; }
body:not(.tv-mode) .status-badge.offline { background-color: var(--md-bg) !important; color: var(--md-text-2) !important; }
body:not(.tv-mode) .status-badge.offline i { color: var(--md-text-3) !important; }
body:not(.tv-mode) .network-badge {
    background: var(--md-surface) !important; color: var(--md-text-2) !important;
    border: none !important; border-radius: var(--md-r-chip) !important; font-size: 12px !important;
}

/* Three-dot expand */
body:not(.tv-mode) .device-card .card-expand-toggle {
    border: none !important; background: transparent !important;
    color: var(--md-text-2) !important; border-radius: var(--md-r-full) !important;
    width: 36px !important; height: 36px !important;
    opacity: 0; transition: opacity 0.15s, background 0.15s !important;
}
body:not(.tv-mode) .device-card:hover .card-expand-toggle { opacity: 1; }
body:not(.tv-mode) .device-card .card-expand-toggle:hover { background: var(--md-surface) !important; opacity: 1; }

/* Expanded controls */
body:not(.tv-mode) .device-card .card-controls-section { border-top: 1px solid var(--md-border); }
body:not(.tv-mode) .device-card .card-secondary-header {
    background: var(--md-surface) !important; border-bottom: 1px solid var(--md-border) !important;
}
body:not(.tv-mode) .camera-card {
    border: 1px solid var(--md-border) !important; border-radius: var(--md-r-sm) !important; box-shadow: none !important;
}

/* Card action buttons */
body:not(.tv-mode) .device-card .display-off-btn {
    background-color: #3c4043 !important; border-color: #3c4043 !important; color: #fff !important;
    border-radius: var(--md-r-xs) !important;
}
body:not(.tv-mode) .device-card .logs-btn {
    background-color: var(--md-blue) !important; border-color: var(--md-blue) !important;
    color: #fff !important; border-radius: var(--md-r-xs) !important;
}

/* ── MD3 filled / outlined buttons (global) ──────────────────────────────── */
body:not(.tv-mode) .btn-primary {
    background-color: var(--md-blue) !important; border-color: var(--md-blue) !important;
    color: #fff !important; border-radius: var(--md-r-pill) !important;
    font-family: 'Google Sans', sans-serif !important; font-weight: 500 !important;
    font-size: 14px !important; border: none !important; box-shadow: none !important;
    padding: 0 24px !important; height: 36px !important; letter-spacing: 0.25px;
}
body:not(.tv-mode) .btn-primary:hover {
    background-color: var(--md-blue-hover) !important;
    box-shadow: var(--md-elev-1) !important;
}

/* ── MD3 table (list view) ──────────────────────────────────────────────── */
body:not(.tv-mode) .devices-table-container {
    border: none !important; border-radius: var(--md-r-sm) !important;
    box-shadow: var(--md-elev-1) !important; background: var(--md-white) !important; overflow: hidden;
}
body:not(.tv-mode) .table-header {
    background: var(--md-white) !important; border-bottom: 1px solid var(--md-border) !important;
}
body:not(.tv-mode) .table-header th {
    color: var(--md-text-2) !important; font-family: 'Roboto', sans-serif !important;
    text-transform: none !important; letter-spacing: 0 !important;
    font-size: 13px !important; font-weight: 500 !important;
    background: transparent !important; border: none !important;
    height: 48px; padding: 0 12px !important;
}
body:not(.tv-mode) .table-header th:hover { background: var(--md-surface) !important; }
body:not(.tv-mode) .devices-table tbody tr {
    border-bottom: 1px solid var(--md-border) !important; border-left: none !important;
    animation: none !important; height: 48px; transition: background 0.1s;
}
body:not(.tv-mode) .devices-table tbody tr:hover {
    background: var(--md-surface) !important; transform: none !important; box-shadow: none !important;
}
body:not(.tv-mode) .devices-table tbody td {
    vertical-align: middle !important; color: var(--md-text-1) !important;
    font-size: 14px !important; font-family: 'Roboto', sans-serif !important;
    border: none !important; padding: 0 12px !important;
}
body:not(.tv-mode) .device-list-item .camera-name-input {
    font-family: 'Google Sans', sans-serif !important;
    color: var(--md-text-1) !important; font-weight: 500 !important; font-size: 14px !important;
}
body:not(.tv-mode) .device-meta { font-size: 12px !important; color: var(--md-text-2) !important; }
body:not(.tv-mode) .device-list-item .status-badge.online {
    background-color: var(--md-green-light) !important; color: var(--md-green) !important; border: none !important;
}
body:not(.tv-mode) .device-list-item .status-badge.offline {
    background-color: var(--md-bg) !important; color: var(--md-text-2) !important; border: none !important;
}

/* ── List view action buttons → MD3 outlined / filled ───────────────────── */
body:not(.tv-mode) .actions-cell .btn {
    box-shadow: none !important; font-family: 'Google Sans', sans-serif !important;
    border-radius: var(--md-r-xs) !important; font-size: 13px !important;
    transition: background 0.15s !important;
}
body:not(.tv-mode) .actions-cell .display-off-btn {
    background-color: transparent !important; border: 1px solid var(--md-border) !important;
    color: var(--md-text-2) !important;
}
body:not(.tv-mode) .actions-cell .display-off-btn:hover {
    background-color: var(--md-surface) !important; color: var(--md-text-1) !important;
}
body:not(.tv-mode) .actions-cell .btn-outline-secondary {
    background-color: transparent !important; border: 1px solid var(--md-border) !important;
    color: var(--md-text-2) !important;
}
body:not(.tv-mode) .actions-cell .btn-outline-secondary:hover {
    background-color: var(--md-surface) !important; color: var(--md-text-1) !important;
}
body:not(.tv-mode) .actions-cell .logs-btn {
    background-color: var(--md-blue) !important; border: none !important;
    color: #fff !important; border-radius: var(--md-r-pill) !important;
}
body:not(.tv-mode) .actions-cell .logs-btn:hover { background-color: var(--md-blue-hover) !important; }

/* ── Ripple ──────────────────────────────────────────────────────────────── */
.g-ripple-host { position: relative !important; overflow: hidden !important; }
.g-ripple-circle {
    position: absolute; border-radius: 50%;
    background: rgba(32,33,36,.1);
    transform: scale(0); pointer-events: none; z-index: 9;
    animation: g-ripple 0.55s linear;
}
.btn-primary .g-ripple-circle,
.logs-btn .g-ripple-circle { background: rgba(255,255,255,.25); }
@keyframes g-ripple { to { transform: scale(4); opacity: 0; } }

/* ── Focus rings ─────────────────────────────────────────────────────────── */
body:not(.tv-mode) .form-control:focus,
body:not(.tv-mode) .form-select:focus,
body:not(.tv-mode) input:focus,
body:not(.tv-mode) select:focus {
    border-color: var(--md-blue) !important;
    box-shadow: 0 0 0 2px rgba(26,115,232,.2) !important;
    outline: none !important;
}

/* ── Activity log ────────────────────────────────────────────────────────── */
body:not(.tv-mode) .activity-log .card {
    border: none !important; border-radius: var(--md-r-sm) !important;
    box-shadow: var(--md-elev-1) !important; margin-top: 16px;
}
body:not(.tv-mode) .activity-log .card-header {
    background: var(--md-white) !important; border-bottom: 1px solid var(--md-border) !important;
}

/* ── Summary page ────────────────────────────────────────────────────────── */
body:not(.tv-mode) .timeline-card {
    border: none !important; border-radius: var(--md-r-sm) !important;
    box-shadow: var(--md-elev-1) !important;
}
body:not(.tv-mode) .person-btn { font-family: 'Google Sans', sans-serif; border-radius: var(--md-r-xs); }
body:not(.tv-mode) .person-btn.active { background: var(--md-blue-light) !important; color: var(--md-blue) !important; }
body:not(.tv-mode) .person-btn.active .person-avatar { background: var(--md-blue) !important; color: #fff !important; }
body:not(.tv-mode) .date-picker-row input[type="date"] {
    border: 1px solid var(--md-border) !important; border-radius: var(--md-r-xs) !important;
    font-family: 'Roboto', sans-serif; font-size: 14px; height: 36px; padding: 4px 12px;
}

/* ── Videos page ─────────────────────────────────────────────────────────── */
body:not(.tv-mode) .video-item {
    border: none !important; border-radius: var(--md-r-sm) !important;
    box-shadow: var(--md-elev-1) !important; transition: box-shadow 0.2s !important;
    background: var(--md-white) !important;
}
body:not(.tv-mode) .video-item:hover { box-shadow: var(--md-elev-2) !important; }

/* ── Generic card + button overrides ────────────────────────────────────── */
body:not(.tv-mode) .card { font-family: 'Google Sans', sans-serif; }
body:not(.tv-mode) .card-header { background: var(--md-white) !important; border-bottom: 1px solid var(--md-border) !important; }
body:not(.tv-mode) .btn-outline-primary { color: var(--md-blue) !important; border-color: var(--md-blue) !important; }
body:not(.tv-mode) .btn-outline-primary:hover { background: var(--md-blue) !important; }
body:not(.tv-mode) small, body:not(.tv-mode) .small { font-family: 'Roboto', sans-serif; font-size: 12px; }
body:not(.tv-mode) .badge { font-family: 'Roboto', sans-serif; font-weight: 500; }

/* ── App logo ────────────────────────────────────────────────────────────── */
.g-logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    flex-shrink: 0;
    border-radius: 4px;
    transition: opacity 0.15s;
}
.g-logo-link:hover { opacity: 0.82; }
.g-app-logo {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
}
/* Smaller variant for hours topbar */
.g-app-logo-sm { height: 38px; }

/* Topbar logo wrapper — vertically centred in the topbar grid left cell */
.g-logo-link-topbar {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Never show logo in TV mode */
body.tv-mode .g-logo-link { display: none !important; }

/* ── Hours page: topbar full-width fix ───────────────────────────────────── */
/* The hours topbar follows body flex-flow so it only covers the right portion.
   Make it fixed + full-width (above the nav rail), then push content down. */
body:not(.tv-mode):has(.topbar) .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 700 !important;       /* above nav rail (z:600) */
    box-sizing: border-box !important;
    /* Indent left content so it starts after the nav rail */
    padding-left: calc(var(--md-rail) + 28px) !important;
}
body:not(.tv-mode).g-rail-expanded:has(.topbar) .topbar {
    padding-left: calc(var(--md-rail-xl) + 28px) !important;
}
/* Compensate for topbar leaving the flex flow — push main content down */
body:not(.tv-mode):has(.topbar) main {
    padding-top: 62px;
}
/* Stagger nav rail items below the topbar height */
body:not(.tv-mode):has(.topbar) .g-nav-rail {
    padding-top: 56px;
}

/* ── Hours drawer/backdrop: start after the nav rail ─────────────────────── */
/* Without this, the fixed backdrop and drawer slide behind the nav rail. */
body:not(.tv-mode) #drawer-backdrop {
    left: var(--md-rail) !important;
}
body:not(.tv-mode).g-rail-expanded #drawer-backdrop {
    left: var(--md-rail-xl) !important;
}
body:not(.tv-mode) #day-drawer {
    left: calc(var(--md-rail) + 8px) !important;
}
body:not(.tv-mode).g-rail-expanded #day-drawer {
    left: calc(var(--md-rail-xl) + 8px) !important;
}