/* Card header gradient — used on dashboard / schedules / archive detail.
   In DARK mode this is the signature deep-navy hero header; in LIGHT mode
   it intentionally collapses to the same neutral surface as the standard
   .card-header so the page palette stays cohesive — no jarring dark
   block sitting in an otherwise light layout. */
.card-head-gradient {
    background-color: #f1f3f5;
    color: var(--bs-body-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.card-head-gradient i { color: var(--bs-primary); }
[data-bs-theme="dark"] .card-head-gradient {
    /* Flat — same #202b3f used by .card-header in dark mode so every
       header on every page is visually identical. */
    background: #202b3f;
    color: #fff;
    border-bottom: 1px solid rgb(24 24 25);
}
[data-bs-theme="dark"] .card-head-gradient .text-muted { color: rgba(255, 255, 255, 0.7) !important; }
[data-bs-theme="dark"] .card-head-gradient i { color: #9ec5fe; }

/* The previous .metric-tile / .v2 .metric-tile rule set was retired in
   2.53.x — all stat blocks now use the icon-on-left card pattern (see
   .metric-card-* and .stat-icon below). */

/* Global dropdown + tooltip escape fix. Issue #161 and several predecessors:
   Bootstrap cards and other containers use overflow:hidden (for rounded
   corners), which clips dropdown menus that pop out of them. The
   companion JS in layouts/app.php sets data-bs-strategy="fixed" on every
   dropdown so Popper uses position:fixed and the menu renders in the
   top-level stacking context. This rule guarantees the menu sits above
   everything else once it's shown. */
.dropdown-menu.show,
.tooltip.show,
.popover.show {
    z-index: 2147483647 !important;
}

/* Font & nav color variables */
:root {
    --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.375);
    --bbs-nav-bg: #2c3e50;
    --bbs-nav-color: rgba(255, 255, 255, 0.7);
    --bbs-nav-hover-bg: rgba(255, 255, 255, 0.1);
    --bbs-nav-hover-color: #fff;
    --bbs-nav-active-bg: #e67e22;
    --bbs-nav-active-color: #fff;
    --bbs-topbar-bg: #2c3e50;
}

/* Muted Bootstrap color overrides — buttons and badges only */
.btn-primary {
    --bs-btn-bg: #4a6fa5;
    --bs-btn-border-color: #4a6fa5;
    --bs-btn-hover-bg: #3d5f8f;
    --bs-btn-hover-border-color: #3d5f8f;
    --bs-btn-active-bg: #345280;
    --bs-btn-active-border-color: #345280;
    --bs-btn-disabled-bg: #4a6fa5;
    --bs-btn-disabled-border-color: #4a6fa5;
}

.btn-outline-primary {
    --bs-btn-color: #4a6fa5;
    --bs-btn-border-color: #4a6fa5;
    --bs-btn-hover-bg: #4a6fa5;
    --bs-btn-hover-border-color: #4a6fa5;
    --bs-btn-active-bg: #3d5f8f;
    --bs-btn-active-border-color: #3d5f8f;
}

.btn-success {
    --bs-btn-bg: #4a9e6e;
    --bs-btn-border-color: #4a9e6e;
    --bs-btn-hover-bg: #3d8a5e;
    --bs-btn-hover-border-color: #3d8a5e;
    --bs-btn-active-bg: #347a52;
    --bs-btn-active-border-color: #347a52;
    --bs-btn-disabled-bg: #4a9e6e;
    --bs-btn-disabled-border-color: #4a9e6e;
}

.btn-outline-success {
    --bs-btn-color: #4a9e6e;
    --bs-btn-border-color: #4a9e6e;
    --bs-btn-hover-bg: #4a9e6e;
    --bs-btn-hover-border-color: #4a9e6e;
    --bs-btn-active-bg: #3d8a5e;
    --bs-btn-active-border-color: #3d8a5e;
}

.btn-danger {
    --bs-btn-bg: #c25b5b;
    --bs-btn-border-color: #c25b5b;
    --bs-btn-hover-bg: #aa4e4e;
    --bs-btn-hover-border-color: #aa4e4e;
    --bs-btn-active-bg: #964444;
    --bs-btn-active-border-color: #964444;
    --bs-btn-disabled-bg: #c25b5b;
    --bs-btn-disabled-border-color: #c25b5b;
}

.btn-outline-danger {
    --bs-btn-color: #c25b5b;
    --bs-btn-border-color: #c25b5b;
    --bs-btn-hover-bg: #c25b5b;
    --bs-btn-hover-border-color: #c25b5b;
    --bs-btn-active-bg: #aa4e4e;
    --bs-btn-active-border-color: #aa4e4e;
}

.btn-warning {
    --bs-btn-bg: #d4a843;
    --bs-btn-border-color: #d4a843;
    --bs-btn-hover-bg: #be9638;
    --bs-btn-hover-border-color: #be9638;
    --bs-btn-active-bg: #a8852f;
    --bs-btn-active-border-color: #a8852f;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-warning {
    --bs-btn-color: #d4a843;
    --bs-btn-border-color: #d4a843;
    --bs-btn-hover-bg: #d4a843;
    --bs-btn-hover-border-color: #d4a843;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #be9638;
    --bs-btn-active-border-color: #be9638;
}

.btn-info {
    --bs-btn-bg: #4a9fb5;
    --bs-btn-border-color: #4a9fb5;
    --bs-btn-hover-bg: #3d8da1;
    --bs-btn-hover-border-color: #3d8da1;
    --bs-btn-active-bg: #347d8f;
    --bs-btn-active-border-color: #347d8f;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Confirm modal backdrop blur */
.modal-backdrop.show {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Placeholder text - lighter so it's clearly not entered data */
::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
    opacity: 1 !important;
}
::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
::-moz-placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}
:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] ::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
[data-bs-theme="dark"] ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
[data-bs-theme="dark"] ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
[data-bs-theme="dark"] :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Sidebar */
.sidebar {
    width: 98px;
    height: calc(100vh - 64px);
    background-color: var(--bbs-nav-bg);
    position: fixed;
    top: 64px;
    left: 0;
    overflow-y: auto;
    z-index: 1020;
}

/* Version pill at the bottom of the sidebar. The sidebar background is
   always dark navy regardless of theme (--bbs-nav-bg = #2c3e50 light /
   #16191d dark), so the pill uses light-on-dark colors hardcoded. The
   previous Bootstrap text-body-secondary token resolved to a midtone
   gray in light mode, which read as illegible against the dark navy. */
.sidebar-version-pill {
    color: rgba(255, 255, 255, 0.78);
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    font-size: 0.65rem;
    padding: 3px 9px;
    letter-spacing: 0.02em;
}

.sidebar-link {
    color: var(--bbs-nav-color) !important;
    padding: 10px 8px 6px !important;
    margin-bottom: 12px;
    border-radius: 0 !important;
    transition: all 0.2s;
    line-height: 1;
}

.sidebar-link i.d-block {
    margin-bottom: 2px !important;
    font-size: 1.2rem !important;
}

.sidebar-link .small {
    font-size: 0.75rem !important;
}

.sidebar-link:hover {
    color: var(--bbs-nav-hover-color) !important;
    background-color: var(--bbs-nav-hover-bg) !important;
}

.sidebar-link.active {
    color: var(--bbs-nav-active-color) !important;
    background-color: var(--bbs-nav-active-bg) !important;
}

/* Topbar */
.topbar {
    height: 64px;
    background-color: var(--bbs-topbar-bg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-left: 0 !important;
    /* Allow the mascot logo to hang below the topbar so the robot's
       hands appear to grab the edge of the page header. */
    overflow: visible;
}

.main-content {
    margin-top: 64px;
    /* Without min-width:0 a flex child default-sizes to its content's
       intrinsic width, so a single long unbreakable string (a borg file
       path, a sidebar progress message) anywhere on the page can blow
       the column past the viewport and trigger horizontal scroll
       (#108, #209, #233). min-width:0 lets the column shrink and lets
       descendants like .text-truncate / overflow-wrap actually do their
       jobs. */
    min-width: 0;
}

.topbar .navbar-text {
    color: #fff !important;
}

.topbar .btn-link,
.topbar .dropdown-toggle {
    color: rgba(255, 255, 255, 0.85) !important;
}

.topbar .btn-link:hover,
.topbar .dropdown-toggle:hover {
    color: #fff !important;
}

.topbar .navbar-brand {
    background-color: transparent;
    height: 64px;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}

.topbar-logo {
    width: 98px;
    overflow: visible;
}

/* Mascot logo. Width-anchored at ~97px so it sits close to the 90px
   sidebar column with just a few pixels of overflow on the right.
   At the artwork's 3:2 aspect this gives ~65px tall — barely past
   the 64px topbar, so the robot's hands appear to brush the edge
   between the topbar and the page content without dominating.
   pointer-events: none keeps the navbar-brand link clickable. */
.topbar-mascot {
    position: absolute;
    top: 0;
    left: 0;
    width: 115px;
    height: auto;
    z-index: 1031;
    pointer-events: none;
}

/* Custom brand logos uploaded via Settings → Branding don't share the
   default mascot's "peek over the edge of the topbar" geometry. They get
   constrained to the navbar height and contained without distortion (#261). */
.topbar-brand-logo {
    max-height: 58px;
    max-width: 92px;
    height: auto;
    width: auto;
    padding: 3px;
    object-fit: contain;
    z-index: 1031;
    pointer-events: none;
}

/* Mobile bottom navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--bbs-nav-bg);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1040;
    padding: 4px 0;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    /* Thin lighter top border for definition against the page, plus a
       stronger upward shadow so the bar clearly separates from content. */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.35), 0 -1px 0 rgba(255, 255, 255, 0.04);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--bbs-nav-color);
    padding: 4px 8px;
    font-size: 0.65rem;
    line-height: 1;
    transition: color 0.2s;
    flex: 1;
    text-align: center;
    /* Reset <button> defaults so the More trigger looks identical to the <a> items */
    background: transparent;
    border: 0;
    font-family: inherit;
}

.mobile-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.mobile-nav-item.active {
    color: var(--bbs-nav-active-bg);
}

.mobile-nav-item:hover {
    color: var(--bbs-nav-hover-color);
}

/* Mobile "More" bottom sheet — auto-size to content so it doesn't grab the
   whole screen for just a handful of items. Extra padding at the bottom
   keeps the last row above the phone's home indicator. */
.offcanvas-bottom.mobile-more-sheet {
    height: auto;
    max-height: 70vh;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.offcanvas-bottom.mobile-more-sheet .offcanvas-body {
    padding-bottom: env(safe-area-inset-bottom);
}
.offcanvas-bottom.mobile-more-sheet .list-group-item {
    padding: 0.85rem 1rem;
    border-left: 0;
    border-right: 0;
}

/* Offset main content for fixed sidebar on desktop */
@media (min-width: 768px) {
    .main-content {
        margin-left: 98px;
    }
}

/* Add padding at bottom for mobile nav */
@media (max-width: 767.98px) {
    .main-content {
        padding-bottom: 64px;
        min-width: 0;
        overflow-x: hidden;
    }
    /* Hide the logo entirely on mobile — bottom-nav handles navigation
       and the page-title gets the full topbar width. */
    .topbar .navbar-brand,
    .topbar-logo {
        display: none !important;
    }
    .topbar .navbar-text {
        margin-left: 0.75rem !important;
    }
}

/* Stat cards. Hover effect uses box-shadow only — NOT transform.
   A `transform` on a parent creates a new stacking context, which traps
   `position: fixed` dropdown menus inside the card and defeats the
   global dropdown escape fix (issue #161). */
.stat-card {
    transition: box-shadow 0.15s;
}

.stat-card:hover {
    box-shadow: 0 .35rem 1rem rgba(0,0,0,.18) !important;
}

a .stat-card {
    cursor: pointer;
}

/* Tables. Headers AND body cells both use 0.775rem site-wide; cell padding
   tightened from Bootstrap's default 0.5rem to 0.3rem so rows pack denser
   without changing the row layout. Headers are mixed case (not ALL CAPS). */
.table {
    font-size: 0.775rem;
}
.table > :not(caption) > * > * {
    padding: 0.3rem 0.3rem;
}
.table th {
    font-weight: 600;
    font-size: 0.775rem;
    text-transform: none;
    letter-spacing: 0;
    color: #6c757d;
}

/* Dashboard bottom tables */
.dash-table .table {
    font-size: 0.85rem;
}
.dash-table .table th {
    font-size: 0.8rem;
}
.dash-table .table .badge {
    font-size: 0.7rem;
}

/* Badge / pill overrides — site-wide consistency.
   - font-weight 500 (not bold) so badges read as labels, not emphasis.
   - text-transform: capitalize gives every pill Title Case without having
     to touch each rendering site (CSS leaves acronyms and already-cap
     characters alone, so "API" stays "API" and "S3 sync" becomes "S3 Sync").
   Per-page .text-uppercase overrides still win if a view needs the caps
   look (e.g. the dashboard section labels). */
.badge {
    font-weight: 500;
    text-transform: capitalize;
}

/* Login page */
body.bg-body-secondary {
    background-color: #ecf0f1 !important;
}

/* Cards */
.card {
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 12px rgba(0, 0, 0, 0.03);
}

/* Standard card-header — subtle neutral surface in both themes so every
   card on every page has the same visual treatment unless it's an
   explicit "hero" card (.card-head-gradient) or a status alert
   (.bg-warning / .bg-danger). Was previously inconsistent: settings used
   bg-primary bg-opacity-10 (light blue), clients used bg-body
   (transparent), dashboard used card-head-gradient (dark navy). */
.card-header {
    background-color: #f1f3f5;
    color: var(--bs-body-color);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* Shrunk from Bootstrap's default 1rem to ~14px (0.875rem) site-wide
       per UX feedback — the previous size felt too heavy for headers
       that mostly carry a title + an icon. Applies to all pages
       (dashboard, schedules, settings, etc.); wins over Bootstrap's
       default without per-card overrides. */
    font-size: 0.875rem;
}

.card.card-no-outline {
    border: none !important;
}

/* Client detail tabs */
.client-tabs {
    gap: 4px;
    flex-wrap: wrap;
}

.client-tabs .nav-link {
    color: var(--bs-secondary-color);
    background-color: transparent;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 0.9rem;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
    white-space: nowrap;
    text-align: center;
}

.client-tabs .nav-link:hover {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    border-bottom-color: transparent;
}

.client-tabs .nav-link.active {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    border-bottom-color: var(--bs-tertiary-bg);
    position: relative;
    z-index: 1;
}

.client-tabs .nav-link.text-danger {
    color: #dc3545 !important;
}

.client-tabs .nav-link.text-danger.active {
    color: #dc3545 !important;
    background-color: var(--bs-tertiary-bg);
}

.client-tab-content {
    border-radius: 0 0 8px 8px;
    overflow: visible;
    background-color: var(--bs-tertiary-bg) !important;
}

/* Mobile: icon-focused tabs */
@media (max-width: 767.98px) {
    .client-tabs {
        gap: 2px;
    }
    .client-tabs .nav-link {
        padding: 6px 6px;
        font-size: 0.8rem;
        min-width: 46px;
    }
    .client-tabs .nav-link i {
        display: block;
        font-size: 1.1rem;
        margin-bottom: 2px;
        margin-right: 0 !important;
    }
    .client-tabs .tab-label {
        display: block;
        font-size: 0.6rem;
    }
    .client-tab-content {
        padding: 0.75rem !important;
    }
}

/* Storage sub-navigation */
.storage-subnav {
    gap: 2px;
    border-bottom: 2px solid var(--bs-border-color);
    padding-bottom: 0;
    flex-wrap: nowrap;
    overflow-x: hidden;
}
.storage-subnav .nav-link {
    color: var(--bs-secondary-color);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 4px 4px 0 0;
    border: none;
    margin-bottom: -2px;
    background: transparent;
    white-space: nowrap;
}
.storage-subnav .nav-link:hover {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.storage-subnav .nav-link.active {
    color: var(--bs-primary);
    background: transparent;
    border-bottom: 2px solid var(--bs-primary);
    font-weight: 600;
}
@media (max-width: 767.98px) {
    .storage-subnav .nav-link {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    .storage-subnav .nav-link i {
        display: none;
    }
}

/* Header stat icon cards */
.stat-icon-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Repo cards - dark header style. Hover uses box-shadow only — NOT
   transform. A `transform` creates a stacking context that traps
   `position: fixed` dropdown menus inside the card, defeating the
   global dropdown escape fix (issue #161). */
.repo-card {
    transition: box-shadow 0.15s;
    overflow: visible !important;
}

.repo-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.14) !important;
}

.repo-card .dropdown-menu {
    z-index: 2147483647 !important;
    font-size: 0.8rem;
    min-width: 140px;
    padding: 0.25rem 0;
}

.repo-card-header {
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    border-radius: 8px 8px 0 0;
}

.repo-icon-wrap {
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: #fff;
}

.repo-icon-remote {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
    color: #fff;
}

.repo-status-bar {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    color: #fff;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(135deg, #4a6a8a 0%, #3a5570 100%);
}

/* Schedule cards. Hover uses box-shadow only (see repo-card note). */
.schedule-card {
    overflow: visible !important;
    transition: box-shadow 0.15s;
}

.schedule-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.14) !important;
}

.schedule-card .dropdown-menu {
    z-index: 2147483647 !important;
    font-size: 0.8rem;
    min-width: 140px;
    padding: 0.25rem 0;
}

.schedule-card .dropdown-item {
    padding: 0.3rem 0.75rem;
}

.schedule-card .dropdown-divider {
    margin: 0.2rem 0;
}

.schedule-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.schedule-icon-wrap i {
    font-size: 1.4rem;
}

.schedule-icon-wrap .schedule-id {
    font-size: 0.55rem;
    font-weight: 700;
    margin-top: 1px;
}

.schedule-active {
    background: linear-gradient(135deg, #86c540 0%, #5da832 100%);
    color: #fff;
}

.schedule-manual {
    background: linear-gradient(135deg, #4a90d9 0%, #357abd 100%);
    color: #fff;
}

.schedule-paused {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #fff;
}

.schedule-status-bar {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 12px;
    color: #fff;
    border-radius: 0 0 8px 8px;
}

/* Delete warning box */
.delete-warning-box {
    background-color: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 8px;
    padding: 1.25rem;
}

/* Topbar mobile improvements */
@media (max-width: 767.98px) {
    .topbar {
        height: 48px;
    }
    .main-content {
        margin-top: 48px;
    }
    .topbar .navbar-brand {
        height: 48px;
    }
}

/* Hour picker - wrap on mobile */
.hour-picker-row .btn-group {
    flex-wrap: wrap;
    gap: 2px;
}
@media (max-width: 767.98px) {
    .hour-picker-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .hour-picker-row .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
    }
    .hour-picker-row .btn-group .btn {
        flex: 0 0 auto;
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* Mobile table improvements */
@media (max-width: 767.98px) {
    /* Hide less important table columns on mobile */
    .d-table-cell-md {
        display: none !important;
    }
    .d-th-md {
        display: none !important;
    }
    /* Compact tables on mobile */
    .table td, .table th {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
    .table .text-nowrap {
        white-space: normal !important;
    }
    /* Smaller stat cards on mobile */
    .stat-icon {
        padding: 0.5rem !important;
    }
    .stat-icon i {
        font-size: 1.25rem !important;
    }
    /* Stack client header info vertically */
    .client-header-info {
        flex-direction: column;
        gap: 0.25rem;
    }
    /* Dashboard stat cards smaller text */
    .stat-card .fs-2 {
        font-size: 1.5rem !important;
    }
    /* Truncate long text in tables */
    .table .text-truncate-mobile {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .d-table-cell-md {
        display: table-cell !important;
    }
    .d-th-md {
        display: table-cell !important;
    }
}

/* Restore panels */
.restore-panel-header {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: #fff;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px 8px 0 0;
}

.restore-panel-body {
    height: 450px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,0.08);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.restore-control-bar {
    padding: 0;
}

.tree-item {
    padding: 4px 8px;
    cursor: pointer;
    white-space: nowrap;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
    display: flex;
    align-items: center;
}
.tree-item:nth-child(even) {
    background: #f8f9fa;
}
.tree-item:hover {
    background: #f0fdf4;
    border-left-color: #48bb78;
}
.tree-dir > .tree-label { font-weight: 600; }
.tree-children { display: none; }
.tree-children.open { display: block; }
.tree-toggle { display: inline-block; width: 16px; text-align: center; color: #6c757d; flex-shrink: 0; }
.tree-cb { margin-right: 4px; flex-shrink: 0; }
.tree-icon { margin-right: 4px; flex-shrink: 0; }
.tree-label { overflow: hidden; text-overflow: ellipsis; }
.tree-meta { margin-left: auto; display: flex; align-items: center; gap: 12px; padding-left: 12px; flex-shrink: 0; }
.tree-size { color: #6c757d; white-space: nowrap; min-width: 60px; text-align: right; font-size: 0.85em; }
.tree-mtime { color: #6c757d; font-size: 0.8em; white-space: nowrap; min-width: 130px; text-align: right; }
.tree-count { color: #6c757d; font-size: 0.8em; margin-left: 6px; }

.restore-selection-item {
    padding: 6px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.restore-selection-item:last-child { border-bottom: none; }
.restore-selection-item .btn-remove {
    opacity: 0.3;
    transition: opacity 0.15s;
}
.restore-selection-item:hover .btn-remove { opacity: 1; }

.restore-actions {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.version-group {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.version-group-header {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    padding: 6px 12px;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    z-index: 1;
}
.version-row {
    padding: 4px 12px 4px 28px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.version-row:hover { background: #f0fdf4; }

.restore-back-btn {
    border: none;
    background: none;
    color: #48bb78;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}
.restore-back-btn:hover { color: #2f855a; }

/* Mobile: stack restore panels */
@media (max-width: 991.98px) {
    .restore-panel-body {
        height: 300px;
    }
}

/* Responsive border utilities */
@media (max-width: 767.98px) {
    .border-md-start { border-left: none !important; }
    .border-top-0-md { border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
}
@media (min-width: 768px) {
    .border-md-start { border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; }
    .border-top-0-md { border-top: none !important; }
}
@media (max-width: 991.98px) {
    .border-lg-0 { border: none !important; }
}
@media (min-width: 992px) {
    .border-top.border-lg-0 { border-top: none !important; }
}

/* Dark mode — low-contrast palette */
[data-bs-theme="dark"] {
    --bs-body-bg: #1a1d21;
    --bs-body-color: #b0b8c1;
    --bs-secondary-color: #8b929a;
    --bs-secondary-bg: #23272b;
    --bs-tertiary-bg: #23272b;
    --bs-border-color: rgba(255, 255, 255, 0.08);
    --bbs-nav-bg: #16191d;
    --bbs-nav-color: rgba(255, 255, 255, 0.5);
    --bbs-nav-hover-bg: rgba(255, 255, 255, 0.06);
    --bbs-nav-hover-color: rgba(255, 255, 255, 0.9);
    --bbs-topbar-bg: #111315;
}

[data-bs-theme="dark"] .card {
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    background-color: #111214;
}

[data-bs-theme="dark"] .card-header {
    /* Universal dark-mode header color — also applied to
       .card-head-gradient below, plus .table th, so every header on
       every page is visually identical. */
    background-color: #202b3f;
    color: #fff;
    border-bottom: 1px solid rgb(24 24 25);
}

[data-bs-theme="dark"] .table th {
    /* Match the card header color so a table on a page reads as a
       continuation of the header above it. */
    background-color: #202b3f;
    color: #d6dbe1;
    border-bottom-color: rgb(24 24 25);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #23272b;
    --bs-table-border-color: rgba(255, 255, 255, 0.06);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .tree-item:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

[data-bs-theme="dark"] .tree-item:hover {
    background: rgba(72, 187, 120, 0.08);
}

[data-bs-theme="dark"] .version-group-header {
    background: #23272b;
}

[data-bs-theme="dark"] .version-row:hover {
    background: rgba(72, 187, 120, 0.08);
}

[data-bs-theme="dark"] .restore-actions {
    background: #23272b;
}

[data-bs-theme="dark"] .restore-panel-body {
    border-color: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .delete-warning-box {
    background-color: #2a1515;
    border-color: #4a2020;
}

[data-bs-theme="dark"] .stat-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3) !important;
}

/* Dashboard: SVG gauge styles */
.gauge-track { stroke: #e9ecef; }
.gauge-pct { fill: #212529; }
.gauge-detail { fill: #6c757d; }

[data-bs-theme="dark"] .gauge-track { stroke: #343a40; }
[data-bs-theme="dark"] .gauge-pct { fill: #b0b8c1; }
[data-bs-theme="dark"] .gauge-detail { fill: #8b929a; }

/* Dashboard: Storage pool donut */
.donut-track { stroke: #e9ecef; }
.donut-free-dot { background: #e9ecef; }

[data-bs-theme="dark"] .donut-track { stroke: #343a40; }
[data-bs-theme="dark"] .donut-free-dot { background: #343a40; }

/* Dashboard: MySQL partition bar */
.mysql-partition-bar { background: #e9ecef; }
.mysql-bar-db { background: #0d6efd; color: #fff; }
.mysql-bar-other { background: #6c757d; color: #fff; }
.mysql-bar-free { background: #e9ecef; color: #6c757d; }

[data-bs-theme="dark"] .mysql-partition-bar { background: #343a40; }
[data-bs-theme="dark"] .mysql-bar-free { background: #343a40; color: #8b929a; }

/* Dashboard: Progress bar track (partitions) */
[data-bs-theme="dark"] .progress { --bs-progress-bg: #343a40; }

/* Client detail: metric card tint backgrounds */
.metric-card-blue { background-color: rgba(13,110,253,0.05); }
.metric-card-cyan { background-color: rgba(13,202,240,0.05); }
.metric-card-success { background-color: rgba(25,135,84,0.05); }
.metric-card-warning { background-color: rgba(255,193,7,0.05); }
.metric-card-danger { background-color: rgba(220,53,69,0.05); }

[data-bs-theme="dark"] .metric-card-blue { background-color: rgba(13,110,253,0.08); }
[data-bs-theme="dark"] .metric-card-cyan { background-color: rgba(13,202,240,0.08); }
[data-bs-theme="dark"] .metric-card-success { background-color: rgba(25,135,84,0.08); }
[data-bs-theme="dark"] .metric-card-warning { background-color: rgba(255,193,7,0.08); }
[data-bs-theme="dark"] .metric-card-danger { background-color: rgba(220,53,69,0.08); }

/* Anchor wrapper for clickable metric cards (e.g. dashboard hero tiles).
   Lifts the inner card on hover so it still feels interactive even though
   the card markup is the same as the non-clickable /clients tiles. */
.metric-card-link .card { transition: transform 0.15s ease, filter 0.15s ease; }
.metric-card-link:hover .card { transform: translateY(-1px); filter: brightness(1.05); }

/* Dashed placeholder / "add" cards */
.card-dashed {
    border: 2px dashed var(--bs-border-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    cursor: pointer;
}

/* Release notes markdown */
.release-notes-md h1, .release-notes-md h2, .release-notes-md h3 { font-size: 0.95rem; font-weight: 600; margin-top: 1rem; margin-bottom: 0.5rem; }
.release-notes-md h1:first-child, .release-notes-md h2:first-child, .release-notes-md h3:first-child { margin-top: 0; }
.release-notes-md p { margin-bottom: 0.5rem; }
.release-notes-md ul, .release-notes-md ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.release-notes-md li { margin-bottom: 0.15rem; }
.release-notes-md code { font-size: 0.85em; padding: 1px 4px; background: rgba(0,0,0,0.05); border-radius: 3px; }
.release-notes-md pre { background: var(--bs-tertiary-bg); padding: 0.75rem; border-radius: 6px; font-size: 0.8rem; overflow-x: auto; }
.release-notes-md pre code { background: none; padding: 0; }
.release-notes-md *:last-child { margin-bottom: 0; }

[data-bs-theme="dark"] .release-notes-md code { background: rgba(255,255,255,0.08); }

[data-bs-theme="dark"] body.bg-body-secondary {
    background-color: #1a1d21 !important;
}