/* =========================================
   BASE TYPOGRAPHY
========================================= */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

:root {
    --app-bg: #f4f7fb;
    --app-bg2: #eef3ff;
    --card-bg: #ffffff;
    --text: #0f172a;
    /* Navbar colors */
    --nav-a: #0b2d6d;
    --nav-b: #1d4ed8;
    --nav-c: #06b6d4;
    --nav-text: rgba(255,255,255,.92);
}

body {
    background: radial-gradient(1200px 600px at 20% 0%, var(--app-bg2), transparent 60%), linear-gradient(180deg, var(--app-bg), #ffffff 85%);
    color: var(--text);
    margin-bottom: 60px;
}

/* Focus ring */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Cards */
.card,
.wo-card,
.auth-card {
    background: var(--card-bg);
}


/* =========================================
   PREMIUM NAVBAR
========================================= */

.navbar {
    background: radial-gradient(900px 240px at 20% -40%, rgba(255,255,255,.22), transparent 60%), radial-gradient(700px 240px at 90% -50%, rgba(34,211,238,.22), transparent 55%), linear-gradient(90deg, var(--nav-a), var(--nav-b) 45%, var(--nav-c)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .22), 0 2px 0 rgba(255,255,255,.06) inset;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1030;
}

    /* Accent Glow Line */
    .navbar::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 3px;
        background: linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.85), rgba(59,130,246,.85), rgba(34,211,238,0));
    }

/* Brand */
.navbar-brand {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 1.25rem;
}

.navbar-logo {
    height: 44px;
    width: auto;
    filter: drop-shadow(0 6px 14px rgba(2,6,23,.25));
}

/* Nav Links */
.navbar .nav-left .nav-link {
    color: var(--nav-text) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    text-align: center;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .navbar .nav-left .nav-link:hover {
        color: #fff !important;
        background: rgba(255,255,255,.16);
        border-color: rgba(255,255,255,.22);
        transform: translateY(-1px);
    }

    .navbar .nav-left .nav-link.active {
        color: #071a3a !important;
        background: rgba(255,255,255,.92);
        border-color: rgba(255,255,255,.65);
        font-weight: 700;
        box-shadow: 0 10px 22px rgba(2,6,23,.20);
    }

/* Hamburger */
.navbar-toggler {
    border-color: rgba(255,255,255,.45);
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(255,255,255,.20);
    }

/* Account block */
.nav-account {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.nav-account-name {
    color: #fff;
    font-weight: 800;
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
}

.nav-account-logout-btn {
    color: rgba(255,255,255,.85) !important;
    font-size: 0.8rem;
}

    .nav-account-logout-btn:hover {
        color: #fff !important;
        text-decoration: underline;
    }

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar .nav-left .nav-link {
        font-size: 0.92rem;
        padding: 0.48rem 0.75rem;
        min-width: 120px;
    }


    .navbar-logo {
        height: 40px;
    }
}


/* =========================================
   AUTH PAGE
========================================= */

.auth-wrap {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    padding: 28px;
}

.auth-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    margin-bottom: 18px;
}

.auth-btn {
    font-weight: 600;
    padding: 10px 14px;
}


/* =========================================
   HOME TILES
========================================= */

.home-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 22px;
    min-height: 200px;
    background-color: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    color: inherit;
}

    .home-tile:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 28px rgba(0,0,0,0.12);
    }

    .home-tile img,
    .home-tile-icon {
        width: 175px;
        height: 175px;
        max-width: 100%;
        object-fit: contain;
        margin-bottom: 14px;
    }

@media (max-width: 576px) {
    .home-tile img,
    .home-tile-icon {
        width: 140px;
        height: 140px;
    }
}

.home-tile-title {
    font-weight: 600;
    font-size: 1.05rem;
}

/* =========================================
   HOME TILES — match table row hover gradient
========================================= */

.home-tile {
    position: relative;
    overflow: hidden; /* so gradient stays inside rounded corners */
}

    /* Smooth transition for text/images */
    .home-tile,
    .home-tile * {
        transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, filter 0.15s ease;
    }

        /* Hover uses SAME gradient as table row hover */
        .home-tile:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(0,0,0,0.12);
            background: linear-gradient(90deg, var(--nav-b), var(--nav-c)) !important;
            border-color: rgba(29,78,216,.25) !important;
        }

            /* Make text readable on gradient */
            .home-tile:hover .home-tile-title,
            .home-tile:hover * {
                color: #fff !important;
            }

            /* If tiles use <img>, brighten on hover */
            .home-tile:hover img,
            .home-tile:hover .home-tile-icon {
                filter: brightness(1.12) contrast(1.05);
            }

        /* Optional: a subtle "shine" like nav glow */
        .home-tile::after {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            background: radial-gradient(600px 240px at 30% -10%, rgba(255,255,255,.25), transparent 55%);
            transition: opacity .15s ease;
        }

        .home-tile:hover::after {
            opacity: 1;
        }


/* =========================================
   AUDIT UI (unchanged)
========================================= */

.audits-page .audit-output {
    max-height: 70vh;
    overflow: auto;
    padding: 10px;
    background: #0f172a;
    border-radius: 10px;
}

/* Keep the rest of your audit styles here as-is */

.audit-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    color: #e5e7eb;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

    .audit-card.sev-error {
        border-left: 5px solid #ef4444;
    }

    .audit-card.sev-warn {
        border-left: 5px solid #f59e0b;
    }

    .audit-card.sev-info {
        border-left: 5px solid #60a5fa;
    }

.audit-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

    .audit-head .ts {
        color: #93c5fd;
    }

    .audit-head .cat {
        color: #fff;
        padding: 2px 8px;
        border-radius: 999px;
        font-weight: 800;
    }

    .audit-head .ent {
        color: #cbd5e1;
        font-weight: 700;
    }

    .audit-head .act {
        color: #e5e7eb;
        font-weight: 800;
    }

    .audit-head .user {
        color: #a78bfa;
        font-weight: 800;
    }
    /* all usernames same color */
    .audit-head .path {
        color: #9ca3af;
    }

.audit-summary {
    color: #d1d5db;
    margin: 2px 0 8px 0;
}

.audit-error {
    color: #fecaca;
    background: rgba(239,68,68,0.14);
    border: 1px solid rgba(239,68,68,0.35);
    padding: 8px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
}

    .audit-error .err-label {
        color: #ef4444;
        font-weight: 900;
    }

.chg-block {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

.chg-title {
    font-weight: 900;
    color: #fde68a;
    margin-bottom: 6px;
}

.chg-sub {
    font-weight: 900;
    color: #a7f3d0;
    margin-top: 8px;
    margin-bottom: 4px;
}

.chg-list {
    margin: 0;
    padding-left: 18px;
}

.chg-item {
    margin: 4px 0;
}

.chg-field {
    color: #60a5fa;
    font-weight: 900;
}

.diff-wrap {
    display: inline;
}

.arrow {
    color: #9ca3af;
    padding: 0 6px;
}

.diff-del {
    color: #fecaca;
    background: rgba(239,68,68,0.18);
    padding: 0 2px;
    border-radius: 4px;
    text-decoration: line-through;
}

.diff-add {
    color: #bbf7d0;
    background: rgba(34,197,94,0.18);
    padding: 0 2px;
    border-radius: 4px;
}

.changes-raw {
    white-space: pre-wrap;
    color: #e5e7eb;
}
/* =========================================
   NAV USER / LOGIN BUBBLE
========================================= */

/* Targets both Login and User dropdown */
.navbar .navbar-nav.ms-auto > .nav-item > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    /* Darker glass */
    background: rgba(0, 20, 60, 0.35) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #fff !important;
    font-weight: 700 !important;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

    /* Hover effect */
    .navbar .navbar-nav.ms-auto > .nav-item > .nav-link:hover {
        background: rgba(0, 20, 60, 0.55) !important;
        border-color: rgba(255,255,255,.45) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 10px 22px rgba(2,6,23,.35) !important;
    }

/* Avatar polish */
.navbar .navbar-nav.ms-auto img.rounded-circle {
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
}

/* Dropdown menu polish */
.navbar .navbar-nav.ms-auto .dropdown-menu {
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.15);
    box-shadow: 0 20px 45px rgba(2,6,23,.35);
    overflow: hidden;
}

/* MOBILE */
@media (max-width: 575.98px) {

    .navbar .navbar-nav.ms-auto {
        width: 100%;
        margin-top: 10px;
    }

        .navbar .navbar-nav.ms-auto > .nav-item {
            width: 100%;
        }

            .navbar .navbar-nav.ms-auto > .nav-item > .nav-link {
                width: 100% !important;
                justify-content: space-between !important;
                padding: 14px 16px !important;
                border-radius: 18px !important;
            }

        .navbar .navbar-nav.ms-auto .dropdown-menu {
            width: 100%;
            margin-top: 8px;
        }
}

/* =========================
   NAV LOGO — CONTINUOUS 3D FLIP
========================= */

.navbar-brand {
    perspective: 1000px; /* enables 3D depth */
}

.navbar-logo {
    transform-style: preserve-3d;
    animation: logoFlip 5s linear infinite;
    transform-origin: center;
}

@keyframes logoFlip {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

/* =========================================
   AUDITS — SAX THEME (toolbar + headers only)
   DO NOT change .audit-output colors
========================================= */

/* Make the top title row feel like the app */
.audits-page > .d-flex.align-items-center.justify-content-between.mb-3 {
    padding: 12px 14px;
    border-radius: 18px;
    background: radial-gradient(900px 240px at 20% -40%, rgba(255,255,255,.18), transparent 60%), radial-gradient(700px 240px at 90% -50%, rgba(34,211,238,.15), transparent 55%), linear-gradient(90deg, var(--nav-a), var(--nav-b) 45%, var(--nav-c));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 16px 40px rgba(2,6,23,.18);
}

    /* Title + subtitle readable on gradient */
    .audits-page > .d-flex.align-items-center.justify-content-between.mb-3 h2,
    .audits-page > .d-flex.align-items-center.justify-content-between.mb-3 .text-muted {
        color: rgba(255,255,255,.95) !important;
    }

    .audits-page > .d-flex.align-items-center.justify-content-between.mb-3 .text-muted {
        opacity: .85;
    }

/* Button group polish in header */
.audits-page .btn-group .btn {
    border-radius: 999px !important;
    font-weight: 900 !important;
    padding: 8px 14px !important;
    margin-left: 6px;
    border: 1px solid rgba(255,255,255,.30) !important;
}

    /* Active tab (white pill) */
    .audits-page .btn-group .btn.btn-primary {
        background: rgba(255,255,255,.95) !important;
        color: #0b2d6d !important;
        border-color: rgba(255,255,255,.95) !important;
        box-shadow: 0 10px 22px rgba(2,6,23,.20);
    }

    /* Inactive tab (glass pill) */
    .audits-page .btn-group .btn.btn-outline-primary {
        background: rgba(255,255,255,.14) !important;
        color: rgba(255,255,255,.95) !important;
    }

    .audits-page .btn-group .btn:hover {
        transform: translateY(-1px);
    }

/* =========================================
   Filters card — match sax cards (keep content intact)
========================================= */

.audits-page form.card {
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 16px 40px rgba(2,6,23,.10);
    overflow: hidden;
}

    /* Make labels match app style */
    .audits-page form.card .form-label {
        font-weight: 900;
        color: rgba(15,23,42,.85);
        font-size: .85rem;
        letter-spacing: .01em;
    }

    /* Inputs flatter */
    .audits-page form.card .form-control {
        border-radius: 12px;
        border: 1px solid rgba(15,23,42,.14);
        box-shadow: none;
    }

        .audits-page form.card .form-control:focus {
            border-color: rgba(29,78,216,.55);
            box-shadow: 0 0 0 .2rem rgba(29,78,216,.12);
        }

    /* Checkbox panels: nicer border & radius (doesn't affect text box) */
    .audits-page form.card .border.rounded.p-2 {
        border-radius: 14px !important;
        border-color: rgba(15,23,42,.12) !important;
        background: rgba(15,23,42,.02);
    }

    /* Buttons inside filter sidebar: match your white bg + blue text preference */
    .audits-page form.card .btn {
        border-radius: 999px;
        font-weight: 900;
        padding: 8px 14px;
        background: #fff;
        color: #1d4ed8;
        border: 1px solid rgba(29,78,216,.35);
        box-shadow: 0 10px 22px rgba(2,6,23,.10);
    }

        .audits-page form.card .btn:hover {
            background: rgba(29,78,216,.06);
            border-color: rgba(29,78,216,.55);
            transform: translateY(-1px);
        }

        /* Let "Clear filters" look a bit muted but still themed */
        .audits-page form.card .btn.btn-outline-secondary {
            color: #1d4ed8 !important;
            border-color: rgba(29,78,216,.25) !important;
        }

.navbar .nav-left {
    flex-wrap: nowrap !important;
}

    .navbar .nav-left .nav-item {
        flex: 0 0 auto;
    }
/* =========================================
   Audit Output card header — match NAV
   (DO NOT touch .audit-output itself)
========================================= */

.audits-page .card {
    border-radius: 18px;
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 16px 40px rgba(2,6,23,.10);
    overflow: hidden;
}

    /* Header gradient like nav */
    .audits-page .card > .card-header {
        position: relative;
        background: radial-gradient(900px 240px at 20% -40%, rgba(255,255,255,.18), transparent 60%), radial-gradient(700px 240px at 90% -50%, rgba(34,211,238,.15), transparent 55%), linear-gradient(90deg, var(--nav-a), var(--nav-b) 45%, var(--nav-c));
        color: rgba(255,255,255,.95);
        font-weight: 900;
        letter-spacing: .02em;
        border-bottom: 1px solid rgba(255,255,255,.22);
    }

        /* Glow line */
        .audits-page .card > .card-header::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -1px;
            height: 2px;
            background: linear-gradient(90deg, rgba(34,211,238,0), rgba(34,211,238,.85), rgba(59,130,246,.85), rgba(34,211,238,0) );
        }


.navbar .nav-left {
    transition: opacity .08s ease;
}

    .navbar .nav-left.nav-pending {
        opacity: 0;
        visibility: hidden;
    }

    .navbar .nav-left.nav-ready {
        opacity: 1;
        visibility: visible;
    }