/* ==========================================================================
   Theme colors — edit this file directly, save, refresh the browser.
   No build step, no npm command. This file is loaded after the compiled
   app.css, so anything set here wins.

   (resources/sass/_variables.scss still exists for people who DO want to
   run the full Sass build — but for day-to-day color tweaks, this file
   is all you need.)
   ========================================================================== */

:root {
    --brand-primary: #214198;      /* main brand/accent color: buttons, links, badges, active states */
    --brand-primary-dark: #182f72; /* darker shade of the above, used for gradients/hover */
    --brand-success: #248445;      /* "success" color: PDF-ready / reset buttons (logo ring green, readable with white text) */
    --brand-green: #3ab65e;        /* bright logo green: accents, bars, borders (too light for white text) */

    --sidebar-bg: #0f1f4d;                 /* sidebar background */
    --sidebar-text: rgba(255, 255, 255, .85); /* sidebar link text color */

    --body-bg: #f3f5fb; /* page background behind the content cards (dashboard pages) */

    --auth-bg-first: #e9edf8;
    --auth-bg-second: #e3f4e8;
}

/* Buttons, links, "EN PROCESO" badges, focus rings — all follow --brand-primary */
:root {
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 33, 65, 152; /* keep this the RGB of --brand-primary above (used for translucent backgrounds) */
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 33, 65, 152;
    --bs-body-bg: var(--body-bg);
    --bs-body-bg-rgb: 243, 245, 251; /* keep this the RGB of --body-bg above */
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-bg: var(--brand-success);
    --bs-btn-border-color: var(--brand-success);
    --bs-btn-hover-bg: var(--brand-success);
    --bs-btn-hover-border-color: var(--brand-success);
    --bs-btn-active-bg: var(--brand-success);
    --bs-btn-active-border-color: var(--brand-success);
    --bs-btn-disabled-bg: var(--brand-success);
    --bs-btn-disabled-border-color: var(--brand-success);
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .25rem rgba(33, 65, 152, .25); /* keep the rgba() in sync with --brand-primary too */
}

/* App shell: header brand text, sidebar, login/verify page background */
.app-brand {
    color: var(--brand-primary) !important;
}

.app-sidebar {
    background: var(--sidebar-bg) !important; /* beats Bootstrap's .offcanvas-lg transparent !important at >= lg */
    color: var(--sidebar-text);
}

.app-nav .nav-link {
    color: var(--sidebar-text);
}

.app-nav .nav-link.active {
    background: var(--brand-success);
    box-shadow: inset 4px 0 0 var(--brand-green);
}

.auth-page {
    background: linear-gradient(160deg, var(--auth-bg-first) 0%, var(--auth-bg-second) 100%);
}

/* List rows: mouse-hover highlight (overrides DataTables' faint grey, which looks like the stripe) */
:root {
    --table-hover-bg: rgba(58, 182, 94, .18); /* --brand-green at 18%; raise the last number for a stronger highlight */
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--table-hover-bg);
}

/* ==========================================================================
   Blue + green mix, echoing the logo
   ========================================================================== */

/* The logo's green | blue | green bar, reused as an accent stripe */
:root {
    --brand-stripe: linear-gradient(90deg,
        var(--brand-green) 0 25%, var(--brand-primary) 25% 75%, var(--brand-green) 75% 100%);
}

/* Header: stripe along the bottom edge */
.app-header {
    border-bottom: 0;
    background-image: var(--brand-stripe);
    background-size: 100% 4px;
    background-position: bottom;
    background-repeat: no-repeat;
}

/* Sidebar: navy fading into deep green toward the bottom */
.app-sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg) 45%, #0f4a2c 100%) !important;
}

.app-nav .nav-link:hover {
    background: rgba(58, 182, 94, .18);
}

/* List cards: blue title, green line under the column headers */
.app-table-card .card-header {
    color: var(--brand-primary);
}

.app-table thead th {
    color: var(--brand-primary);
    border-bottom: 2px solid var(--brand-green);
}

/* Pagination: active page green, links blue */
.page-link {
    color: var(--brand-primary);
}

.active > .page-link,
.page-link.active {
    background-color: var(--brand-success);
    border-color: var(--brand-success);
}

/* ==========================================================================
   Login / QR-verify page
   ========================================================================== */

/* Deep blue -> green gradient with soft green glows */
.auth-page {
    padding: 2rem 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(58, 182, 94, .35), transparent 42%),
        radial-gradient(circle at 88% 85%, rgba(58, 182, 94, .30), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(255, 255, 255, .08), transparent 30%),
        linear-gradient(135deg, var(--sidebar-bg) 0%, var(--brand-primary) 55%, #1d6b3f 100%);
}

/* White card with the logo's green|blue|green stripe on top */
.auth-card {
    border: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--brand-stripe) top / 100% 5px no-repeat, #fff;
    padding-top: 5px;
    box-shadow:
        0 0 14px 2px rgba(255, 255, 255, .25),  /* soft white glow; raise 18px/.35 for a stronger one */
        0 1.5rem 4rem rgba(5, 15, 40, .45);
}

.auth-card .card-body {
    padding: 2rem 2rem 2.25rem;
}

.auth-logo {
    width: 240px;
    max-width: 100%;
    height: auto;
}

/* Text from the logo artwork: services in blue, slogan in green */
.auth-services {
    margin-top: .75rem;
    color: var(--brand-primary);
    font-weight: 700;
    font-size: .95rem;
}

.auth-slogan {
    color: var(--brand-success);
    font-weight: 600;
    font-size: .9rem;
}

/* "RESULTADOS WEB" above the inputs, with a short green|blue|green rule on each side */
.auth-tagline {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    color: var(--brand-primary);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .8rem;
}

.auth-tagline::before,
.auth-tagline::after {
    content: "";
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-stripe);
}

/* Inputs with an icon on the left; the whole group lights up green on focus */
.auth-input .input-group-text {
    background: #f3f5fb;
    color: var(--brand-primary);
    border-right: 0;
}

.auth-input .form-control {
    border-left: 0;
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.auth-input .form-control:focus {
    box-shadow: none;
    border-color: var(--brand-green);
}

.auth-input:focus-within .input-group-text {
    border-color: var(--brand-green);
    color: var(--brand-success);
}

.auth-input:focus-within {
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 0 .2rem rgba(58, 182, 94, .25);
}

/* Blue -> green button */
.auth-submit {
    padding: .7rem 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    border: 0;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-success) 100%);
    transition: filter .15s ease, transform .15s ease;
}

.auth-submit:hover,
.auth-submit:focus {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* Footer sits on the dark gradient */
.auth-footer,
.auth-footer a {
    color: rgba(255, 255, 255, .75);
}

.auth-footer a:hover {
    color: #fff;
}