/* ============================================================
   DB Backup — premium dashboard theme
   Dark sidebar shell · tinted gradient canvas · elevated cards
   ============================================================ */

:root {
    --content: #15161c;
    --muted: #6b6f76;
    --border: #e9e9ee;
    --surface: #ffffff;
    --surface-2: #f7f7fb;

    --primary: #6366f1;
    --primary-600: #4f46e5;
    --primary-soft: rgba(99,102,241,.12);

    --success: #0f9b53;  --success-soft: rgba(18,161,80,.13);
    --danger:  #e11d6b;  --danger-soft:  rgba(225,29,107,.12);
    --warning: #b5781a;  --warning-soft: rgba(245,165,36,.18);
    --secondary-soft: #f0f0f4;

    --radius-lg: 18px;
    --radius: 14px;
    --shadow-card: 0 1px 2px rgba(16,17,40,.04), 0 16px 40px -22px rgba(16,17,40,.28);
    --shadow-pop: 0 12px 28px -10px rgba(16,17,40,.28);

    --sidebar-w: 252px;
    --sidebar-bg: #0e1016;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body.app {
    margin: 0;
    min-height: 100vh;
    color: var(--content);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* tinted gradient canvas — not flat white */
    background:
        radial-gradient(1000px 560px at 112% -8%, rgba(99,102,241,.14), transparent 58%),
        radial-gradient(760px 460px at -12% 108%, rgba(16,185,129,.10), transparent 58%),
        linear-gradient(180deg, #eef0f7 0%, #e9ebf3 100%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.015em; color: var(--content); }
a { color: var(--primary-600); text-decoration: none; }
a:hover { color: var(--primary); }
.text-muted { color: var(--muted) !important; }
code { color: var(--primary-600); background: var(--primary-soft); padding: .12em .42em; border-radius: 6px; font-size: .85em; }

/* ---------------- Sidebar shell ---------------- */
.sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, #141722 0%, var(--sidebar-bg) 100%);
    border-right: 1px solid rgba(255,255,255,.06);
    display: flex; flex-direction: column;
    padding: 1.05rem .8rem 1rem;
    z-index: 50;
}
.sidebar .brand {
    display: flex; align-items: center; gap: .6rem;
    color: #fff; font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em;
    padding: .35rem .6rem 1.15rem;
}
.brand-badge {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: 1rem;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    box-shadow: 0 8px 18px -8px rgba(99,102,241,.8);
}
.sb-nav { display: flex; flex-direction: column; gap: .15rem; }
.sb-link {
    display: flex; align-items: center; gap: .75rem;
    color: #a8adba; font-weight: 600; font-size: .92rem;
    padding: .62rem .75rem; border-radius: 11px; width: 100%;
    background: transparent; border: 0; text-align: left;
    transition: background .15s ease, color .15s ease;
}
.sb-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .9; }
.sb-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-link.active {
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff; box-shadow: 0 10px 22px -10px rgba(99,102,241,.85);
}
.sb-spacer { flex: 1 1 auto; }
.sb-user { border-top: 1px solid rgba(255,255,255,.08); padding-top: .55rem; }
.sb-logout { color: #8a8f9c; }
.sb-logout:hover { color: #fff; background: rgba(225,29,107,.18); }

/* ---------------- Main canvas ---------------- */
.app-main { min-height: 100vh; }
.has-sidebar .app-main { margin-left: var(--sidebar-w); }
.app-content { padding: 2rem 2.4rem; max-width: 1500px; margin: 0 auto; }

@media (max-width: 860px) {
    .sidebar { position: static; width: auto; flex-direction: row; align-items: center; gap: .4rem; padding: .55rem .8rem; }
    .sidebar .brand { padding: 0 .6rem 0 0; }
    .sb-nav { flex-direction: row; }
    .sb-link span { display: none; }
    .sb-spacer { flex: 1; }
    .sb-user { border: 0; padding: 0; display: flex; gap: .3rem; }
    .has-sidebar .app-main { margin-left: 0; }
    .app-content { padding: 1.25rem; }
}

/* ---------------- Cards ---------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.card-body { padding: 1.6rem; }

/* ---------------- Buttons ---------------- */
.btn { border-radius: 11px; font-weight: 600; padding: .5rem 1.05rem; border: 1px solid transparent; transition: transform .04s ease, filter .15s, background .15s, box-shadow .15s; }
.btn:active { transform: translateY(1px); }
.btn-sm { border-radius: 9px; padding: .32rem .7rem; font-size: .82rem; }
.btn-primary { background: linear-gradient(135deg, var(--primary), #7c3aed); border: 0; color: #fff; box-shadow: 0 10px 22px -10px rgba(99,102,241,.8); }
.btn-primary:hover { filter: brightness(1.05); color: #fff; }
.btn-secondary { background: var(--secondary-soft); color: var(--content); }
.btn-secondary:hover { background: #e6e6ec; color: var(--content); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { filter: brightness(.95); }
.btn-outline-primary { color: var(--primary-600); border-color: var(--border); background: var(--surface); }
.btn-outline-primary:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-600); }
.btn-outline-secondary { color: var(--content); border-color: var(--border); background: var(--surface); }
.btn-outline-secondary:hover { background: var(--surface-2); color: var(--content); border-color: var(--border); }
.btn-outline-danger { color: var(--danger); border-color: var(--border); background: var(--surface); }
.btn-outline-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.btn-link { color: var(--muted); }
.btn-link:hover { color: var(--content); }

/* ---------------- Badges → soft chips ---------------- */
.badge { border-radius: 999px; font-weight: 600; padding: .42em .8em; font-size: .72rem; }
.badge.bg-success { background: var(--success-soft) !important; color: var(--success); }
.badge.bg-danger  { background: var(--danger-soft)  !important; color: var(--danger); }
.badge.bg-warning { background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.bg-secondary { background: var(--secondary-soft) !important; color: var(--muted); }

/* ---------------- Tables (float on a card) ---------------- */
.table { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0; margin: 0; }
.table > thead th { border: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding: .8rem 1.1rem; }
.table > tbody td { border: 0; border-top: 1px solid var(--border); padding: .9rem 1.1rem; vertical-align: middle; }
.table.table-hover > tbody > tr { transition: background .12s; }
.table.table-hover > tbody > tr:hover { background: var(--surface-2); }
main .table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }

/* ---------------- Forms ---------------- */
.form-label { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.form-control, .form-select { border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); padding: .58rem .85rem; color: var(--content); transition: border-color .15s, box-shadow .15s, background .15s; }
.form-control:hover, .form-select:hover { background: #f2f2f7; }
.form-control:focus, .form-select:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-control-sm, .form-select-sm { border-radius: 9px; }
.form-check-input { border-radius: 6px; border-color: #c7c7cf; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.form-text { color: var(--muted); }
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------------- Alerts ---------------- */
.alert { border: 1px solid transparent; border-radius: var(--radius); font-weight: 500; }
.alert-info { background: var(--primary-soft); color: var(--primary-600); }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-danger { background: var(--danger-soft); color: var(--danger); }
.alert-secondary { background: var(--secondary-soft); color: var(--muted); }
.alert-warning { background: var(--warning-soft); color: var(--warning); }

.bg-light { background: var(--surface-2) !important; border-color: var(--border) !important; }

/* page heading helpers */
.app-content > .container-fluid > h1,
.app-content > .container-fluid .h3 { letter-spacing: -.02em; }

/* stat cards */
.stat { display: flex; align-items: center; gap: 1rem; }
.stat-ico {
    width: 46px; height: 46px; border-radius: 13px; flex: none;
    display: grid; place-items: center; font-size: 1.25rem;
    background: var(--primary-soft); color: var(--primary-600);
}
.stat-val { font-size: 1.55rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.stat-lbl { color: var(--muted); font-size: .82rem; font-weight: 600; margin-top: .15rem; }
.stat .card-body { padding: 1.15rem 1.25rem; }