/* ===== Servanexo · Account/Profile Page ===== */

/* ---------- Design tokens (default = dark) ---------- */
:root {
    --primary: #2A5C99;
    --primary-600: #214a7a;
    --bg-grad-from: #0b1220;
    --bg-grad-to: #0f172a;
    --surface: #0f172a; /* card */
    --surface-2: #0b1220; /* page background when needed */

    --text: #e5e7eb;
    --muted: #94a3b8;
    --border: rgba(255,255,255,.14);
    --border-2: rgba(255,255,255,.22);
    --fill-weak: rgba(255,255,255,.04);
    --fill-focus: rgba(255,255,255,.06);
    --fill-strong: rgba(255,255,255,.08);
    --ring: rgba(42,92,153,.35);
    --shadow: 0 10px 30px rgba(2,6,23,.25);
    --radius: 20px;
    --radius-sm: 14px;
}

/* ---------- Light theme overrides (if you ever switch) ---------- */
html[data-theme="light"] {
    --bg-grad-from: #f6f7fb;
    --bg-grad-to: #ffffff;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --border: #e5e7eb;
    --border-2: #d1d5db;
    --fill-weak: #fff;
    --fill-focus: #fafafa;
    --fill-strong: #f5f6f8;
    --ring: rgba(42,92,153,.35);
    --shadow: 0 10px 30px rgba(15,23,42,.08);
}

/* ---------- Page background (keeps dark even if OS is light) ---------- */
body {
    background: linear-gradient(180deg, var(--bg-grad-from) 0, var(--bg-grad-to) 100%);
    color: var(--text);
}

/* ---------- Card wrapper (your .acc-card) ---------- */
.acc-card {
    background: var(--surface);
    color: var(--text);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* optional: container panel like the big central block */
.acc-panel {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ---------- Titles & small text ---------- */
.section-title {
    font-weight: 800;
    letter-spacing: .2px;
}

.form-hint,
.small.text-muted,
.text-muted {
    color: var(--muted) !important;
}

/* ---------- Forms ---------- */
.form-label {
    color: var(--muted);
    font-weight: 700;
}

.form-control,
.form-select,
.input-group .form-control {
    background: var(--fill-weak);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 14px;
    height: 44px;
}

textarea.form-control {
    min-height: 110px;
    height: auto;
}

.form-control:focus,
.form-select:focus {
    border-color: transparent;
    background: var(--fill-focus);
    box-shadow: 0 0 0 4px var(--ring);
    color: var(--text);
}

.form-control::placeholder {
    color: color-mix(in srgb, var(--muted) 85%, transparent);
    opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
    opacity: .85;
}

/* file input (consistent in dark) */
input[type="file"].form-control {
    background: var(--fill-weak);
    color: var(--text);
    padding-top: .5rem;
}

/* input group add-ons */
.input-group-text {
    background: var(--fill-weak);
    border: 1px solid var(--border);
    color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 14px;
    font-weight: 700;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

    .btn-primary:hover {
        background: var(--primary-600);
        border-color: var(--primary-600);
    }

.btn-outline-primary,
.btn-outline-secondary {
    color: var(--text);
    border-color: var(--border-2);
}

    .btn-outline-primary:hover,
    .btn-outline-secondary:hover {
        background: var(--fill-focus);
        border-color: var(--border-2);
    }

/* small helper */
.btn-link {
    color: var(--text);
}

/* ---------- Avatars ---------- */
.avatar-preview {
    width: 84px;
    height: 84px;
    border-radius: 18px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.15);
    box-shadow: var(--shadow);
}

/* ---------- Badges ---------- */
.badge {
    border-radius: 999px;
    font-weight: 700;
}

.badge-dot {
    position: relative;
    padding-left: 1.4rem;
}

    .badge-dot::before {
        content: "";
        position: absolute;
        left: .5rem;
        top: 50%;
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        transform: translateY(-50%);
        background: #94a3b8;
    }

.state-pending.badge-dot::before {
    background: #f59e0b;
}

.state-approved.badge-dot::before {
    background: #22c55e;
}

.state-rejected.badge-dot::before {
    background: #ef4444;
}

/* ---------- Alerts & validation ---------- */
.alert {
    border-radius: 16px;
    border: 1px solid var(--border);
}

.text-danger {
    color: #fca5a5 !important;
}

/* ---------- Tables (if any in this page) ---------- */
.table {
    --bs-table-color: var(--text);
    --bs-table-bg: color-mix(in srgb, var(--surface) 92%, transparent);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: color-mix(in srgb, var(--surface) 86%, transparent);
    border-radius: 14px;
    overflow: hidden;
}

    .table th {
        color: var(--muted);
        font-weight: 700;
    }

/* ---------- Utilities ---------- */
.card-shadow {
    box-shadow: var(--shadow);
}

.rounded-xl {
    border-radius: var(--radius);
}

/* spacing for blocks inside the page */
.acc-card + .acc-card,
.acc-card + .acc-panel,
.acc-panel + .acc-card {
    margin-top: 1.25rem;
}

/* keep contrast on links inside dark surfaces */
.acc-card a:not(.btn) {
    color: color-mix(in srgb, #ffffff 92%, var(--primary));
}

    .acc-card a:not(.btn):hover {
        text-decoration: underline;
    }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .form-control, .form-select {
        height: 42px;
    }

    .avatar-preview {
        width: 72px;
        height: 72px;
        border-radius: 16px;
    }
}

/* ---------- Force-dark safeguard (if a browser forces light) ---------- */
html[data-theme="dark"] .acc-card,
html[data-theme="dark"] .acc-panel {
    background: var(--surface) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: var(--fill-weak) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] body {
    background: linear-gradient(180deg, var(--bg-grad-from) 0, var(--bg-grad-to) 100%) !important;
}