// ==== Bootstrap modified classes ====
@import "variables";

.card-body {
    padding: 1rem;
    position: relative; // for loader.
}

.card { border-radius: 0 !important;}

.card-header {
    padding: .25rem 1rem;
    font-weight: bold;
    border-radius: 0 !important;
}

.navbar, .card-header { font-size: $font-size;}

.btn:active {
    margin-bottom: -2px;
    margin-top: 2px;
}

.btn:active:disabled {
    margin-bottom: 0;
    margin-top: 0;
}

.alert {
    padding: 0.2rem 0.5rem;
    font-size: $font-size;
}

.alert-dismissible .close { padding: .1rem 0.5rem;}

.dropdown-menu {
    font-size: $font-size;
    //box-shadow: $shadow-sm;
}

.modal-footer, .modal-header, .modal-body { padding: .25rem .5rem;}

.modal-header {
    line-height: 1.5rem; // to keep header text in vertically center.
    font-weight: bold;
    align-items: center; // vertically centre the title + close button (Bootstrap defaults to flex-start)
}

// New UI standard: round close button. Geometry here is theme-agnostic (same in
// dark & light); the surface/border/hover colours live in colors-dark/-light.scss.
// Covers both the in-header close button AND the absolutely-positioned close that
// some full-screen modals (e.g. the test-case layout) drop straight into .modal-content.
.modal-header .close,
.modal-content > .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    vertical-align: middle;     // centre against sibling inline content (some headers wrap it in a float-right div)
    border-radius: 50%;
    line-height: 1;
    opacity: 1;                 // Bootstrap dims .close to 0.5 by default
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;

    // the X glyph sits centred; sized to the round button
    span { display: inline-flex; }
    i { font-size: 0.95rem; line-height: 1; }

    // Normalise the close glyph app-wide. Modals use three different close icons:
    //   fa-window-close (\f410, boxy square) · fa-times-circle (\f057, circled X)
    //   · fa-times (\f00d, plain X). The first two read as a "box/circle inside the
    // round button". Force them all to a clean plain X (\f00d) so every modal's
    // round close button is identical, without editing each template.
    // (Font Awesome 5 Free, solid weight 900.)
    i.fa-window-close::before,
    i.fa-times-circle::before { content: "\f00d"; }
}
// Flush-right only when it's a flex child of the header (not the absolutely-positioned variant).
.modal-header .close { margin: 0 0 0 auto; }
// Absolutely-positioned corner close (test-case / system-logs full-screen modals): its sibling
// action icons sit at the same inline `top: 0.25rem` but on a 1.3rem (`line-height-1-3`) line, so
// their centre is at 0.9rem; the 1.75rem round button pinned at the same top centres at 1.125rem —
// ~0.225rem lower. Pull it up by exactly that half-height difference so it lines up with the icons.
.modal-content > .close { margin-top: -0.225rem; }
.modal-header .close:hover,
.modal-header .close:focus { opacity: 1; outline: none; }

// Some modals group the close button with a docs link / info icon in a
// `float-right` wrapper. Those children have different heights (e.g. the 25px
// docs logo), so on a shared inline baseline the round close button reads as
// off-centre. Lay the wrapper out as a centred flex row so every action—incl.
// the close button—sits on one vertically-centred line. Order keeps Close last.
.modal-header > .float-right {
    float: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;               // even, comfortable spacing between header actions (docs / info / close)
    margin-left: auto;          // push the action group to the right edge…
    padding-left: 1rem;         // …but never let it crowd the title text
}
.modal-header > .float-right .close { margin: 0; order: 1; }

// New UI standard: header action icons (docs logo + info / help glyphs) share a
// consistent size and sit centred next to the round close button. Drop the ad-hoc
// inline sizing/margins (font-size:25px, ml-2/3, mt-n1/n2) the templates carry.
.modal-header > .float-right {
    // Docs wordmark logo — fixed height (the SVG is 235×145, so width auto keeps ratio),
    // a touch recessed, brightening on hover like a link.
    a {
        display: inline-flex;
        align-items: center;
        margin: 0 !important;
    }
    img {
        height: 20px !important;
        width: auto !important;
        margin: 0 !important;        // neutralise mt-n1/n2 + ml/mr that skewed centring
        opacity: 0.9;
        transition: opacity 0.15s ease;
    }
    a:hover img { opacity: 1; }

    // Info / help action — normalise the inline font-size:1.4em + harsh text-info to
    // a consistent glyph that matches the close button's scale and brand colour.
    > span {
        font-size: 1rem !important;
        display: inline-flex;
        align-items: center;
        margin: 0 !important;
    }
    > span i { font-size: 1.15rem; line-height: 1; transition: color 0.15s ease; }
}

.nav-link { padding: 0.5rem 1rem !important;}

// Pin navbar item metrics so swapping bootswatch themes (slate <-> cerulean) can't reflow the
// navbar (prevents the menu "dancing" on dark/light toggle). Theme-agnostic — same in both modes.
.navbar { min-height: 44px; }
.navbar-nav .nav-link {
    padding: 0.5rem 1rem !important;
    line-height: 1.5 !important;
    font-size: $font-size !important;
    font-weight: 400 !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.show > .nav-link { font-weight: 400 !important; } // no bold jump on active

// Menu (dropdown) separator — brand-tinted hairline, visible in both themes.
.dropdown-divider {
    border-top: 1px solid rgba(97, 175, 239, 0.20);
    margin: 0.3rem 0.5rem;
}

// Pin heading sizes so the bootswatch slate/cerulean swap renders them identically (same in dark & light).
h1, .h1 { font-size: 2.5rem !important; }
h2, .h2 { font-size: 2rem !important; }
h3, .h3 { font-size: 1.75rem !important; }
h4, .h4 { font-size: 1.40625rem !important; }
h5, .h5 { font-size: 1.171875rem !important; }
h6, .h6 { font-size: 0.9375rem !important; }

// Heading standard (theme-agnostic) — spacing/weight/line-height. Color is set per theme.
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.nav-pills .nav-link, .nav-tabs .nav-link, .nav-tabs .nav-link:hover {color: var(--content-primary--shade--four);}

.navbar-brand {
    //padding-top: 0.3125rem !important;
    padding-top: 0 !important;
    padding-bottom: 0.3125rem !important;
    font-size: 1.25rem !important;
}

// To view form-control in disable mode
.form-control:disabled, .form-control[readonly] {
    background-color: transparent !important;
    border: none !important;
}

// ==== Consistent input HEIGHT across both themes ====
// bootswatch slate (dark) and cerulean (light) ship DIFFERENT .form-control padding +
// font-size, and since the height is calc(1.5em + padding + 2px) (em-based) the inputs
// render at different heights per theme. Pin font-size + padding + line-height + border
// so every input is identical in dark & light, everywhere in the app.
.form-control {
    font-size: $font-size !important;          // 0.875rem
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    border-width: 1px !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
}
.form-control-sm, .col-form-label-sm { font-size: $font-size !important; }
.form-control-sm {
    padding: 0.25rem 0.5rem !important;
    line-height: 1.5 !important;
    border-width: 1px !important;
    height: calc(1.5em + 0.5rem + 2px) !important;
}
// input-group prefix/suffix boxes must match the input height (same padding/line-height/font).
.input-group-sm .input-group-text, .input-group-sm .form-control { font-size: $font-size !important; }
textarea.form-control, textarea.form-control-sm { height: auto !important; } // textareas size to rows

//.modal-content { max-height: calc(100vh - 72px);}
.modal-content { max-height: calc(100vh - 68px); } // 72px is giving scroll in case of log profile.

.modal-body { overflow: hidden;}

.modal-open {
    padding-right: 0 !important; // to prevent dancing of body when modal open on firefox.
}

.modal-open .modal { overflow: hidden;}

@media (min-width: 576px) {
    .modal-lg {
        max-width: 800px;
    }
}

.modal-open .modal { // to prevent column sizing in modal.
    overflow: auto;
}

// file upload classes
.custom-file-input:lang(en) ~ .custom-file-label::after {padding: 5px; height: 30px;}

// Override Bootswatch's harsh .btn black border + text-shadow (doesn't suit the brand gradient buttons).
.btn {
    border-color: transparent;
    text-shadow: none;
}

// ==== Consistent button HEIGHT + font across both themes ====
// Same root cause as inputs: bootswatch slate (dark) uses padding 0.75rem 1rem / font 0.9375rem,
// cerulean (light) uses 0.375rem 0.75rem / font 1rem — so buttons render at different heights per
// theme. Pin font-size + padding + line-height + border so buttons are identical in dark & light.
// EXCLUDE explicitly-sized icon buttons (.btn-xsm-custom, .btn-icon-only) — they set their
// own width/height/padding and must not be re-padded by these consistency rules.
.btn:not(.btn-xsm-custom):not(.btn-icon-only) {
    font-size: $font-size !important;          // 0.875rem
    padding: 0.375rem 0.75rem !important;
    line-height: 1.5 !important;
    border-width: 1px !important;
}
.btn-sm:not(.btn-xsm-custom):not(.btn-icon-only),
.btn-group-sm > .btn:not(.btn-xsm-custom):not(.btn-icon-only) {
    font-size: $font-size !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1.5 !important;
    border-width: 1px !important;
}