/* ===== Avannis Bootstrap 5.3.8 overrides ===== */

/* 1) Gilroy via OTF (fonts folder is at /fonts, site.css is in /Content) */
@font-face {
    font-family: "Gilroy";
    src: local("Gilroy Regular"), local("Gilroy-Regular"), url("../fonts/gilroy-light.otf") format("opentype");
    font-weight: 400; /* use 300 if this file is truly Light */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilroy";
    src: local("Gilroy ExtraBold"), local("Gilroy-ExtraBold"), url("../fonts/gilroy-extrabold.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* 2) Brand tokens (make sure site.css loads AFTER bootstrap.min.css) */
:root,
:root[data-bs-theme="light"] {
    --bs-font-sans-serif: "Gilroy", "Segoe UI", Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-primary: #0493fc;
    --bs-primary-rgb: 4, 147, 252;
    /* Use deep navy for secondary so white text has contrast */
    --bs-secondary: #132749;
    --bs-secondary-rgb: 19, 39, 73;
    --bs-body-color: #132749; /* navy text */
    --bs-body-bg: #ffffff; /* page background (set to #e7e7e7 if you want gray) */

    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 85%, black);
    --bs-focus-ring-color: color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

    :root[data-bs-theme="dark"] {
        /* Base */
        --bs-body-bg: #101a2d; /* your chosen dark gray-navy */
        --bs-body-color: #e6edf6; /* light gray-blue text for readability */
        --bs-border-color: #1c2840; /* subtle border tone */
        --bs-heading-color: #f2f6fc; /* lighter headings */
        /* Brand colors stay consistent */
        --bs-primary: #0493fc;
        --bs-primary-rgb: 4, 147, 252;
        --bs-secondary: #132749;
        --bs-secondary-rgb: 19, 39, 73;
        /* Links */
        --bs-link-color: #5ab0ff;
        --bs-link-hover-color: #82c4ff;
        --bs-focus-ring-color: color-mix(in srgb, var(--bs-primary) 35%, transparent);
        /* Surfaces (cards, modals, dropdowns, inputs) */
        --bs-card-bg: #132749;
        --bs-card-border-color: var(--bs-border-color);
        --bs-modal-bg: #132749;
        --bs-dropdown-bg: #132749;
        --bs-offcanvas-bg: #132749;
        /* Tables */
        --bs-table-bg: transparent;
        --bs-table-color: var(--bs-body-color);
        --bs-table-striped-bg: rgba(255,255,255,0.04);
        --bs-table-hover-bg: rgba(255,255,255,0.06);
        --bs-table-border-color: var(--bs-border-color);
        /* Forms */
        --bs-form-control-bg: #15213b;
        --bs-form-control-border-color: #243352;
        --bs-input-placeholder-color: #a7b3c7;
    }

        /* Buttons adjusted for this softer dark mode */
        :root[data-bs-theme="dark"] .btn-primary {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: #fff;
        }

            :root[data-bs-theme="dark"] .btn-primary:hover {
                background-color: #0377cc;
                border-color: #0377cc;
            }

        :root[data-bs-theme="dark"] .btn-secondary {
            background-color: #1e2f53;
            border-color: #1e2f53;
            color: #e6edf6;
        }

            :root[data-bs-theme="dark"] .btn-secondary:hover {
                background-color: #253863;
                border-color: #253863;
            }

        /* Ensure the close (X) icon is visible */
        :root[data-bs-theme="dark"] .btn-close {
            filter: invert(1) grayscale(100%) brightness(130%);
            opacity: .8;
        }

            :root[data-bs-theme="dark"] .btn-close:hover {
                opacity: 1;
            }

        /* Legacy navbar/panels harmonized with this dark gray */
        :root[data-bs-theme="dark"] .navbar {
            background-color: #132749;
            border-color: #132749;
        }

        :root[data-bs-theme="dark"] .panel-heading {
            background-color: #132749 !important;
            color: #fff !important;
            border-color: #132749 !important;
        }

        :root[data-bs-theme="dark"] .panel-success > .panel-heading {
            background-color: #0493fc !important;
            border-color: #0493fc !important;
        }


        /* Utilities you already use */
        :root[data-bs-theme="dark"] .tools-compact.card-dense .card-body { /* keep padding; colors inherit */
        }

        :root[data-bs-theme="dark"] .table-noscroll th,
        :root[data-bs-theme="dark"] .table-noscroll td {
            color: var(--bs-body-color);
        }

    :root[data-bs-theme="light"] #themeToggle {
        border-color: #132749;
        color: #132749;
    }

        :root[data-bs-theme="light"] #themeToggle:hover {
            background: #132749;
            color: #fff;
        }


/* 3) Logo sizing in navbar */
.logo-img {
    height: 50px;
    width: auto;
    display: block;
}

.navbar-brand {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* 4) Page spacing & small utility tweaks carried over from your old file */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.dl-horizontal dt {
    white-space: normal;
}

input, select, textarea {
    max-width: 280px;
}

/* 5) Links & focus (BS5 picks up colors from variables, these are just explicit fallbacks) */
a {
    color: #0493fc;
}

    a:hover {
        color: #0377cc;
    }

.form-control:focus {
    border-color: #0493fc;
    box-shadow: 0 0 8px rgba(4,147,252,.25);
}

/* ========= Legacy BS3 compatibility (safe to delete once all views are BS5) ========= */
/* Navbar (old BS3 markup) */
.navbar {
    background-color: #132749;
    border-color: #132749;
    max-height: 50px;
}

    .navbar .navbar-brand, .navbar-nav > li > a {
        color: #fff !important;
    }

        .navbar .navbar-nav > li > a:hover, .navbar .navbar-brand:hover {
            color: #e7e7e7 !important;
        }

.navbar-collapse {
    background-color: #0493fc !important;
}

/* Panels (BS3) */
.panel {
    border-color: #1b3767;
}

.panel-heading {
    background-color: #132749 !important;
    color: #fff !important;
    border-color: #132749 !important;
}

.panel-success > .panel-heading {
    background-color: #0493fc !important;
    border-color: #0493fc !important;
}

/* Buttons (map BS3 names to your palette) */
.btn {
    --bs-btn-font-size: small;
}
.btn-primary {
    background-color: #0493fc;
    border-color: #0493fc;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #0377cc;
        border-color: #0377cc;
    }

.btn-secondary {
    background-color: #fff;
    border-color: #fff;
    color: #132749;
}

    .btn-secondary:hover {
        background-color: #0e1d36;
        border-color: #0e1d36;
    }
/* ========= End legacy block ========= */

/* Restore Bootstrap 5 close icon if theme stripped it out */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: 0.5;
}

    .btn-close:hover {
        opacity: 0.75;
    }

.glyphicon-refresh-animate {
    animation: spin .7s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Compact tools card (top-right) */
.tools-compact.card-dense .card-body {
    padding: .5rem .6rem;
}

.tools-compact .table-sm td,
.tools-compact .table-sm th {
    padding: .25rem .4rem;
    font-size: .82rem;
}

.tools-compact .btn.btn-sm {
    padding: .25rem .5rem;
    font-size: .82rem;
}

.tools-compact .btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

/* Cap height so it never grows tall; scroll if it needs to */
.tools-compact {
    max-height: 180px;
    overflow: auto;
}

/* Right column is flex; top tools are fixed, bottom fills the rest */
.right-col {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - (var(--nav-h) + .75rem));
}

    .right-col .tools-wrap {
        flex: 0 0 auto;
    }

    .right-col .work-wrap {
        flex: 1 1 auto;
        min-height: 0;
    }
        /* enables child to stretch */
        .right-col .work-wrap .workarea {
            height: 100%;
        }
/* make iframe fill */

.table-sm > :not(caption) > * > * {
    padding: 0 0;
    font-size: small;
}
/* Make columns share space and wrap long words instead of scrolling */
.table-noscroll {
    table-layout: fixed;
    width: 95%;
}

    .table-noscroll th,
    .table-noscroll td {
        white-space: normal; /* allow wrapping */
        word-break: break-word; /* break long tokens */
        overflow-wrap: anywhere; /* modern fallback */
    }