/* ============================================================================
   Backup Manager - application design system.

   Loaded after bootstrap.min.css, so the custom properties below re-point
   Bootstrap's own dark-theme variables at this palette. That is what makes the
   stock components - cards, tables, forms, alerts - follow the design without
   every view having to opt in.

   The panel runs dark throughout. There is no light variant: the views set no
   theme-specific colours of their own, so this file is the only place colour
   is decided.
   ============================================================================ */

:root,
[data-bs-theme="dark"] {
    /* --- palette ------------------------------------------------------- */
    --bm-bg:            #0B0F1A;
    --bm-bg-elev:       #0F172A;
    --bm-surface:       #1E293B;
    --bm-surface-glass: rgba(30, 41, 59, 0.72);
    --bm-surface-hover: rgba(51, 65, 85, 0.55);
    --bm-border:        #334155;
    --bm-border-soft:   rgba(51, 65, 85, 0.55);

    --bm-text:          #F1F5F9;
    --bm-text-2:        #94A3B8;
    --bm-text-3:        #64748B;

    --bm-accent-a:      #3B82F6;
    --bm-accent-b:      #8B5CF6;
    --bm-gradient:      linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);

    --bm-success:       #10B981;
    --bm-warning:       #F59E0B;
    --bm-danger:        #EF4444;
    --bm-info:          #06B6D4;

    --bm-shadow:        0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -8px rgba(0, 0, 0, .55);
    --bm-shadow-lift:   0 12px 32px -10px rgba(0, 0, 0, .65), 0 0 0 1px rgba(59, 130, 246, .25);

    /* --- Bootstrap, re-pointed ----------------------------------------- */
    --bs-body-bg:            var(--bm-bg);
    --bs-body-color:         var(--bm-text);
    --bs-emphasis-color:     #FFFFFF;
    --bs-secondary-color:    var(--bm-text-2);
    --bs-secondary-bg:       var(--bm-surface);
    --bs-tertiary-bg:        var(--bm-bg-elev);
    --bs-tertiary-color:     var(--bm-text-3);
    --bs-border-color:       var(--bm-border);
    --bs-border-color-translucent: var(--bm-border-soft);
    --bs-link-color:         var(--bm-accent-a);
    --bs-link-hover-color:   var(--bm-accent-b);
    --bs-code-color:         #C4B5FD;
    --bs-heading-color:      var(--bm-text);

    --bs-primary:     #3B82F6;
    --bs-primary-rgb: 59, 130, 246;
    --bs-success-rgb: 16, 185, 129;
    --bs-danger-rgb:  239, 68, 68;
    --bs-warning-rgb: 245, 158, 11;
    --bs-info-rgb:    6, 182, 212;

    --bs-border-radius:    .625rem;
    --bs-border-radius-sm: .45rem;
    --bs-border-radius-lg: .875rem;
}

/* ============================================================================
   BASE
   ============================================================================ */
html { font-size: 14px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    background: var(--bm-bg);
    color: var(--bm-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Poppins", "Inter", system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--bm-text);
}

/* Digits that sit in columns should line up. */
.table td, .table th, .num { font-variant-numeric: tabular-nums; }

code {
    font-size: .84em;
    padding: .1rem .35rem;
    border-radius: .3rem;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .22);
}

hr { border-color: var(--bm-border); opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--bm-border);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--bm-text-3); background-clip: content-box; }

:focus-visible { outline: 2px solid var(--bm-accent-a); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible { box-shadow: 0 0 0 3px rgba(59, 130, 246, .35); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ============================================================================
   APP SHELL

   A fixed sidebar at lg and above, an off-canvas drawer below it. Bootstrap's
   responsive offcanvas does the switching; at lg and up it forces the element's
   own background transparent, which is why the gradient sits one level down on
   .app-sidebar-inner rather than on .app-sidebar itself.
   ============================================================================ */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    --bs-offcanvas-width: 272px;
    width: 260px;
    flex-shrink: 0;
}

.app-sidebar-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1F2937 0%, #111827 55%, #0B1220 100%);
    border-right: 1px solid var(--bm-border);
    color: var(--bm-text-2);
}

@media (min-width: 992px) {
    .app-sidebar-inner { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}

.app-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid var(--bm-border-soft);
}
.app-sidebar-brand .navbar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    padding: 0;
    color: #fff;
}
.app-sidebar-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--bm-gradient);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 6px 18px -6px rgba(99, 102, 241, .7);
}
.app-brand-text {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: var(--bm-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.app-brand-sub {
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bm-text-3);
}

.app-sidebar-nav { flex-grow: 1; padding: .6rem .7rem; }

.app-sidebar-section {
    padding: .9rem .75rem .3rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--bm-text-3);
}

.app-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .75rem;
    border-radius: 10px;
    color: var(--bm-text-2);
    border-left: 3px solid transparent;
    position: relative;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}
.app-sidebar-nav .nav-link i { font-size: 1rem; width: 1.15rem; text-align: center; flex-shrink: 0; }
.app-sidebar-nav .nav-link:hover { background: var(--bm-surface-hover); color: var(--bm-text); }

.app-sidebar-nav .nav-link.active {
    color: #fff;
    font-weight: 500;
    background:
        linear-gradient(90deg, rgba(59, 130, 246, .20), rgba(139, 92, 246, .05) 55%, transparent),
        var(--bm-surface-hover);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .18);
}
.app-sidebar-nav .nav-link.active::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--bm-gradient);
}
.app-sidebar-nav .nav-link.disabled { color: rgba(255, 255, 255, .3); }

.app-sidebar-footer {
    border-top: 1px solid var(--bm-border-soft);
    padding: .7rem;
}
.app-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bm-gradient);
    color: #fff;
    font-weight: 600;
    font-size: .74rem;
    flex-shrink: 0;
}
.app-sidebar-account {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border-radius: 10px;
    color: var(--bm-text-2);
    text-decoration: none;
    transition: background-color .2s ease-in-out;
}
.app-sidebar-account:hover { background: var(--bm-surface-hover); color: var(--bm-text); }

.app-main { min-width: 0; flex-grow: 1; display: flex; flex-direction: column; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    background: var(--bm-surface-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bm-border);
}
.app-crumb { font-size: .72rem; color: var(--bm-text-3); }
.app-page-title { font-size: 1rem; font-weight: 600; margin: 0; line-height: 1.25; }

.app-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--bm-border);
    color: var(--bm-text-2);
    transition: all .2s ease-in-out;
}
.app-icon-btn:hover {
    color: var(--bm-text);
    background: var(--bm-surface-hover);
    border-color: var(--bm-accent-a);
}

/* ============================================================================
   PAGE HEADER - the title/description/action row every list view opens with
   ============================================================================ */
.page-header { padding-bottom: 1rem; border-bottom: 1px solid var(--bm-border); }
.page-header h1 { letter-spacing: -0.02em; }

/* ============================================================================
   SURFACES
   ============================================================================ */
.card {
    background: var(--bm-surface-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    box-shadow: var(--bm-shadow);
}
.card.shadow-sm { box-shadow: var(--bm-shadow) !important; }
.card-header, .card-footer { background: transparent; border-color: var(--bm-border-soft); }

/* Only the dashboard tiles lift. A card wrapping a table should not move. */
.card-lift { transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, border-color .2s ease-in-out; }
.card-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--bm-shadow-lift);
    border-color: rgba(59, 130, 246, .45);
}

.stat-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.stat-icon-primary   { background: var(--bm-gradient); box-shadow: 0 6px 18px -8px rgba(99, 102, 241, .8); }
.stat-icon-info      { background: linear-gradient(135deg, #06B6D4, #0891B2); box-shadow: 0 6px 18px -8px rgba(6, 182, 212, .7); }
.stat-icon-success   { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 6px 18px -8px rgba(16, 185, 129, .7); }
.stat-icon-secondary { background: linear-gradient(135deg, #1F2937, #0B1220); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); }

/* ============================================================================
   TABLES
   ============================================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bm-text-2);
    --bs-table-border-color: var(--bm-border-soft);
    --bs-table-hover-bg: var(--bm-surface-hover);
    --bs-table-hover-color: var(--bm-text);
    margin-bottom: 0;
    font-size: .86rem;
}
.table > :not(caption) > * > * { background-color: transparent; }

/* The views mark their header row .table-light. On this palette that has to
   become the elevated surface, or it renders as a white band. */
.table > thead.table-light > tr > th,
.table .table-light > * {
    background-color: var(--bm-bg-elev) !important;
    color: var(--bm-text-3) !important;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--bm-border);
    white-space: nowrap;
}
.table > tbody > tr { transition: background-color .2s ease-in-out; }
.table > tbody > tr > td { border-color: var(--bm-border-soft); vertical-align: middle; }
.table .fw-semibold { color: var(--bm-text); }

.table-responsive { border-radius: 0 0 14px 14px; }

/* ============================================================================
   STATUS

   Run results are bare coloured text in the views. Inside a table they become
   pills here, so state reads at a glance without every view being rewritten.
   Outside a table the same classes stay plain text, which is what the
   dashboard's large figures want.
   ============================================================================ */
.table td > .text-success,
.table td > .text-danger,
.table td > .text-warning-emphasis {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .55rem;
    border-radius: 99px;
    font-size: .74rem;
    font-weight: 500;
    border: 1px solid transparent;
    white-space: nowrap;
}
.table td > .text-success {
    background: rgba(16, 185, 129, .12);
    border-color: rgba(16, 185, 129, .28);
    color: #6EE7B7 !important;
}
.table td > .text-danger {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .28);
    color: #FCA5A5 !important;
}
.table td > .text-warning-emphasis {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .28);
    color: #FCD34D !important;
}

/* ============================================================================
   BADGES
   ============================================================================ */
.badge {
    border-radius: 99px;
    font-weight: 500;
    font-size: .7rem;
    padding: .22rem .55rem;
    border: 1px solid transparent;
}
.badge.text-bg-success   { background: rgba(16, 185, 129, .14) !important; color: #6EE7B7 !important; border-color: rgba(16, 185, 129, .3); }
.badge.text-bg-primary   { background: rgba(59, 130, 246, .14) !important; color: #93C5FD !important; border-color: rgba(59, 130, 246, .3); }
.badge.text-bg-danger    { background: rgba(239, 68, 68, .14)  !important; color: #FCA5A5 !important; border-color: rgba(239, 68, 68, .3); }
.badge.text-bg-warning   { background: rgba(245, 158, 11, .14) !important; color: #FCD34D !important; border-color: rgba(245, 158, 11, .3); }
.badge.text-bg-info      { background: rgba(6, 182, 212, .14)  !important; color: #67E8F9 !important; border-color: rgba(6, 182, 212, .3); }
.badge.text-bg-secondary { background: rgba(148, 163, 184, .12) !important; color: var(--bm-text-2) !important; border-color: var(--bm-border); }

/* .text-bg-light carries .text-dark alongside it in the views, so both the
   background and that hard-coded dark text have to be overridden. */
.badge.text-bg-light {
    background: rgba(139, 92, 246, .14) !important;
    border-color: rgba(139, 92, 246, .3);
}
.badge.text-bg-light.text-dark { color: #C4B5FD !important; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 500;
    transition: all .2s ease-in-out;
}
.btn-primary {
    background: var(--bm-gradient);
    border: 0;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 18px -8px rgba(99, 102, 241, .85);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--bm-gradient);
    color: #fff;
    filter: brightness(1.08);
}
.btn-outline-primary        { color: #93C5FD; border-color: rgba(59, 130, 246, .45); }
.btn-outline-primary:hover  { background: rgba(59, 130, 246, .16); color: #fff; border-color: var(--bm-accent-a); }
.btn-outline-secondary      { color: var(--bm-text-2); border-color: var(--bm-border); }
.btn-outline-secondary:hover { background: var(--bm-surface-hover); color: var(--bm-text); border-color: var(--bm-text-3); }
.btn-outline-danger         { color: #FCA5A5; border-color: rgba(239, 68, 68, .4); }
.btn-outline-danger:hover   { background: rgba(239, 68, 68, .18); color: #fff; border-color: var(--bm-danger); }
.btn-outline-warning        { color: #FCD34D; border-color: rgba(245, 158, 11, .4); }
.btn-outline-warning:hover  { background: rgba(245, 158, 11, .18); color: #fff; border-color: var(--bm-warning); }
.btn-outline-success        { color: #6EE7B7; border-color: rgba(16, 185, 129, .4); }
.btn-outline-success:hover  { background: rgba(16, 185, 129, .18); color: #fff; border-color: var(--bm-success); }

/* ============================================================================
   FORMS
   ============================================================================ */
.form-label { font-size: .78rem; font-weight: 500; color: var(--bm-text-2); margin-bottom: .3rem; }
.form-control, .form-select {
    background-color: rgba(148, 163, 184, .07);
    border: 1px solid var(--bm-border);
    color: var(--bm-text);
    border-radius: 10px;
    font-size: .86rem;
}
.form-control:focus, .form-select:focus {
    background-color: rgba(59, 130, 246, .07);
    border-color: var(--bm-accent-a);
    color: var(--bm-text);
    box-shadow: none;
}
.form-control::placeholder { color: var(--bm-text-3); }
.form-control:disabled, .form-select:disabled { background-color: rgba(148, 163, 184, .04); color: var(--bm-text-3); }
.form-text { font-size: .74rem; color: var(--bm-text-3); }
.input-group-text { background: rgba(148, 163, 184, .1); border-color: var(--bm-border); color: var(--bm-text-2); }

.form-check-input { background-color: rgba(148, 163, 184, .15); border-color: var(--bm-border); }
.form-check-input:checked { background-color: var(--bm-accent-a); border-color: var(--bm-accent-a); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, .3); border-color: var(--bm-accent-a); }
.form-switch .form-check-input:checked { background-color: var(--bm-success); border-color: var(--bm-success); }

.invalid-feedback { color: #FCA5A5; }
.validation-summary-errors ul { list-style: none; padding-left: 0; margin-bottom: 0; }

/* ASP.NET renders the summary element even when the form is valid, which shows
   as an empty red bar. It stays hidden until it actually has something to say. */
.validation-summary-valid { display: none; }

/* ============================================================================
   ALERTS, PROGRESS, DROPDOWNS, MODALS
   ============================================================================ */
.alert { border-radius: 12px; border-width: 1px; font-size: .86rem; }
.alert-success { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); color: #6EE7B7; }
.alert-danger  { background: rgba(239, 68, 68, .1);  border-color: rgba(239, 68, 68, .3);  color: #FCA5A5; }
.alert-warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .3); color: #FCD34D; }
.alert-info    { background: rgba(6, 182, 212, .1);  border-color: rgba(6, 182, 212, .3);  color: #67E8F9; }

.progress { background: rgba(148, 163, 184, .14); border-radius: 99px; }
.progress-bar { background: var(--bm-gradient); }
.progress-bar.bg-success { background: linear-gradient(90deg, #10B981, #34D399) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #EF4444, #F87171) !important; }

.dropdown-menu {
    background: var(--bm-bg-elev);
    border: 1px solid var(--bm-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .75);
    font-size: .86rem;
    padding: .35rem;
}
.dropdown-item { color: var(--bm-text-2); border-radius: 8px; padding: .45rem .65rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bm-surface-hover); color: var(--bm-text); }
.dropdown-divider { border-color: var(--bm-border); }

.modal-content {
    background: var(--bm-bg-elev);
    border: 1px solid var(--bm-border);
    border-radius: 16px;
}
.modal-header, .modal-footer { border-color: var(--bm-border); }
.modal-backdrop.show { backdrop-filter: blur(4px); background: rgba(0, 0, 0, .6); opacity: 1; }

.offcanvas { background: var(--bm-bg-elev); color: var(--bm-text); }

/* bg-light appears on a couple of inline panels; it must not be a white slab. */
.bg-light { background-color: var(--bm-bg-elev) !important; color: var(--bm-text-2); }

/* ============================================================================
   PRE-AUTHENTICATION PAGES

   Sign-in, two-factor, access denied and the first-run setup wizard. These sit
   outside the app shell - there is no session to render navigation for - so
   they carry their own centred-card treatment on the same palette.
   ============================================================================ */
.auth-page { background: linear-gradient(160deg, #1F2937 0%, #111827 45%, #0B1220 100%); }

.auth-shell { max-width: 25rem; }
.auth-shell-wide { max-width: 42rem; }

.auth-card {
    border-radius: 16px;
    background: var(--bm-surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--bm-border);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}

/* A circle rather than a square, so it does not read as a missing image. */
.auth-mark {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--bm-gradient);
    box-shadow: 0 8px 24px -8px rgba(99, 102, 241, .8);
}
/* Amber for access-denied: the same shape language, but not a success state. */
.auth-mark-warning { background: linear-gradient(135deg, #D97706 0%, #B45309 100%); }

.auth-footer { color: rgba(255, 255, 255, .55); }

.auth-card .form-floating > .form-control,
.auth-card .form-floating > .form-control:focus {
    background-color: rgba(148, 163, 184, .08);
    color: var(--bm-text);
}
.auth-card .form-floating > label { color: var(--bm-text-3); }
.auth-card .form-control:focus {
    border-color: var(--bm-accent-a);
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .2);
}

/* The validation summary renders a <ul>; inside the alert it should read as
   plain lines rather than a bulleted list. */
.auth-card .alert ul { list-style: none; padding-left: 0; margin-bottom: 0; }