/* css/base.css */

/* ---------- Theme variables (works with data-bs-theme="dark") ---------- */
:root{
    --app-radius: 16px;
    --app-radius-sm: 12px;
    --app-shadow: 0 10px 30px rgba(0,0,0,.08);
    --app-shadow-sm: 0 6px 16px rgba(0,0,0,.08);

    --app-bg-1: #f6f7fb;
    --app-bg-2: #eef2ff;
    --app-card: #ffffff;

    --app-border: rgba(0,0,0,.08);
    --app-muted: rgba(0,0,0,.6);
}

[data-bs-theme="dark"]{
    --app-bg-1: #0b1020;
    --app-bg-2: #0a1a14;
    --app-card: rgba(255,255,255,.04);

    --app-border: rgba(255,255,255,.10);
    --app-muted: rgba(255,255,255,.65);

    --app-shadow: 0 16px 40px rgba(0,0,0,.45);
    --app-shadow-sm: 0 10px 22px rgba(0,0,0,.35);
}

/* ---------- Background + layout ---------- */
body{
    min-height: 100vh;
    background:
            radial-gradient(1200px 500px at 20% 0%, var(--app-bg-2), transparent 60%),
            radial-gradient(900px 500px at 100% 10%, rgba(99,102,241,.18), transparent 55%),
            radial-gradient(900px 500px at 0% 90%, rgba(16,185,129,.14), transparent 55%),
            linear-gradient(180deg, var(--app-bg-1), transparent 70%);
}

.container{
    max-width: 1100px;
}

/* ---------- Typography polish ---------- */
h1,h2,h3{
    letter-spacing: -0.02em;
}

.text-muted{
    color: var(--app-muted) !important;
}

/* ---------- Cards ---------- */
.card{
    border-radius: var(--app-radius) !important;
    border: 1px solid var(--app-border) !important;
    background: var(--app-card) !important;
    box-shadow: var(--app-shadow-sm);
}

.card .card-header{
    border-top-left-radius: var(--app-radius) !important;
    border-top-right-radius: var(--app-radius) !important;
    background: transparent;
    border-bottom: 1px solid var(--app-border);
}

.card.hover-lift{
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card.hover-lift:hover{
    transform: translateY(-2px);
    box-shadow: var(--app-shadow);
    border-color: rgba(99,102,241,.25) !important;
}

/* ---------- Buttons ---------- */
.btn{
    border-radius: 999px;
    padding-left: 1rem;
    padding-right: 1rem;
}
.btn-outline-secondary{
    border-color: var(--app-border);
}
.btn-primary{
    box-shadow: 0 10px 18px rgba(13,110,253,.18);
}

/* ---------- Forms ---------- */
.form-control, .form-select{
    border-radius: 12px;
    border-color: var(--app-border);
}
.form-control:focus, .form-select:focus{
    box-shadow: 0 0 0 .25rem rgba(99,102,241,.20);
    border-color: rgba(99,102,241,.45);
}

/* ---------- Tables ---------- */
.table{
    overflow: hidden;
    border-radius: var(--app-radius-sm);
}
.table thead th{
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-weight: 600;
    text-transform: none;
}
.table tbody tr{
    transition: background .12s ease;
}
.table tbody tr:hover{
    background: rgba(99,102,241,.06);
}

/* ---------- Alerts ---------- */
.alert{
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
}

/* ---------- Small utility ---------- */
.badge{
    border-radius: 999px;
    padding: .45em .7em;
}

/* Make bootstrap nav pills look nicer if you use them */
.nav-pills .nav-link{
    border-radius: 999px;
}