/* ─────────────────────────────────────────────────────────────────────
   MIRA3 — site-wide custom overrides on top of Skote.
   Keep this file SHORT. Prefer Bootstrap/Skote utilities in markup;
   only put rules here that can't be expressed as utility classes.
   ───────────────────────────────────────────────────────────────────── */

/* Cool grey backdrop — light mode only, dark mode preserves Skote's dark bg. */
html:not([data-bs-theme="dark"]) body { background-color: #eef0f3 !important; }
html:not([data-bs-theme="dark"]) .main-content,
html:not([data-bs-theme="dark"]) .page-content { background-color: #eef0f3; }

/* Uniform tight shadow on every card site-wide (matches the home page look).
   Uses Bootstrap's --bs-box-shadow-sm var so it stays in sync with theme tokens.
   Per-card .shadow-lg / .shadow-none in markup can still override. */
.page-content .card { box-shadow: var(--bs-box-shadow-sm); }

/* Roomier card-header padding (Bootstrap default 0.625rem feels tight under bold h5 titles). */
.page-content .card-header { padding-top: 1rem; padding-bottom: 1rem; }

/* Hover lift for KPI / hero cards (no stock utility for hover translate).
   Scoped by .mini-stats-wid so only those cards animate — other pages unaffected. */
.page-content .card { transition: transform .2s ease; }
.mini-stats-wid:hover { transform: translateY(-2px); }
a:has(> .mini-stats-wid) .card:hover { transform: translateY(-3px); }

/* MI/Detail tab pills: bigger touch target, white-button affordance for inactive,
   per-pill color via --pill-color / --pill-hover-bg inline CSS variables. */
.mi-detail-tabs .nav-link {
    padding: 0.55rem 1.1rem;
    font-weight: 500;
    transition: all .15s ease;
}
.mi-detail-tabs .nav-link:not(.active) {
    background-color: #fff;
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow-sm);
}
.mi-detail-tabs .nav-link:not(.active):hover {
    background-color: var(--pill-hover-bg, var(--bs-primary-bg-subtle));
    color: var(--pill-color, var(--bs-primary));
}
.mi-detail-tabs .nav-link.active {
    background-color: var(--pill-color, var(--bs-primary)) !important;
    color: #fff !important;
}
.mi-detail-tabs .nav-link.active .bx { color: #fff !important; }

/* Badge inside a pill: white border so it stays visible when the active pill bg
   matches the badge color (e.g. Downtime pill = danger, count badge = danger). */
.mi-detail-tabs .nav-link .badge { border: 2px solid #fff; }

/* Bigger base text on the two shop-floor dashboards (Production Lines landing =
   .ml-root, per-line Monitor = .mm). Both pages size every inner element in `em`
   relative to this root font-size, so bumping only the root scales the whole page
   proportionally — no per-element hardcoding, no new class. These are meant to be
   read at a distance, so they run one step larger than the app's --bs-body-font-size. */
.ml-root,
.mm { font-size: calc(var(--bs-body-font-size) * 1.2); }

/* Select2 size parity with Bootstrap form controls site-wide.
   Select2 ships at ~28px by default, regardless of Bootstrap sizing on the
   underlying <select>. We target select2's own marker class (.select2-hidden-accessible
   is set on every enhanced native select) so this works for selects without an
   explicit .form-select class (some legacy pages use custom classes like
   .selectprogroup, .selectmachineselect, etc.). */

/* Default size — matches .form-control (~36px) for the typical filter / form row. */
select.select2-hidden-accessible + .select2 .select2-selection,
select.select2-hidden-accessible + .select2 .select2-selection--single,
select.select2-hidden-accessible + .select2 .select2-selection--multiple {
    min-height: 36px;
    height: auto;
    border-radius: 0.25rem;
    font-size:0.9375rem;
    padding: 0;
}
select.select2-hidden-accessible + .select2 .select2-selection__rendered {
    line-height: 34px !important;
    padding-left: 12px !important;
    padding-right: 28px !important;
}
select.select2-hidden-accessible + .select2 .select2-selection__arrow {
    height: 34px !important;
    top: 1px !important;
}
select.select2-hidden-accessible + .select2 .select2-selection--multiple .select2-selection__rendered {
    line-height: normal !important;
    padding: 4px 8px !important;
    min-height: 34px;
}

/* Large size — matches .form-control-lg (~42px); more-specific selector wins
   over the default rule above when the native select carries .form-select-lg. */
select.form-select-lg.select2-hidden-accessible + .select2 .select2-selection,
select.form-select-lg.select2-hidden-accessible + .select2 .select2-selection--single,
select.form-select-lg.select2-hidden-accessible + .select2 .select2-selection--multiple {
    min-height: 42px;
    font-size:1.125rem;
}
select.form-select-lg.select2-hidden-accessible + .select2 .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 16px !important;
    padding-right: 32px !important;
    font-size:1.125rem;
}
select.form-select-lg.select2-hidden-accessible + .select2 .select2-selection__arrow {
    height: 40px !important;
    right: 6px !important;
}
select.form-select-lg.select2-hidden-accessible + .select2 .select2-selection--multiple .select2-selection__rendered {
    padding: 6px 12px !important;
    min-height: 40px;
}


/* ──────────────────────────────────────────────────────────────────────────────
   Footer removed (Views/Shared/_Layout.cshtml no longer renders _footer).

   Skote positions .footer absolutely at height 60px and reserves a matching
   padding-bottom on .page-content so content clears it. With no footer that
   padding is just dead space at the bottom of every page, so it is dropped —
   and .footer itself is hidden defensively in case a view renders one directly.
   ────────────────────────────────────────────────────────────────────────────── */
.page-content { padding-bottom: 24px !important; }
.footer { display: none !important; }


/* ──────────────────────────────────────────────────────────────────────────────
   Topbar brand — icon + "ABT IoT" wordmark.

   Skote ships a single <img height="22"> per logo state, which renders the
   48x48 square mark far too small and gives the 250px brand box nothing else
   to hold. The brand box is now a flex lockup: mark + name + tagline when the
   sidebar is expanded (.logo-lg), mark only when it is collapsed (.logo-sm).

   Skote decides WHICH anchor shows: .logo-light on a dark sidebar,
   .logo-dark on a light one — so the two only differ in text colour.
   ────────────────────────────────────────────────────────────────────────────── */
.navbar-brand-box { padding: 0 1rem; text-align: left; }

.logo .mira-brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    vertical-align: middle;   /* centres the mark on the 70px line box in .logo-sm */
    /* the 48px source upscales softly; a hairline ring keeps the edge crisp
       against both the dark brand box and a white one */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 2px 6px rgba(0, 0, 0, .22);
}

.logo .mira-brand {
    /* inline-flex, not flex: .logo-lg is an inline span inside an anchor with
       line-height:70px — a block-level child there spawns stray 70px line boxes. */
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 10px;
    line-height: 1;              /* .logo sets line-height:70px — reset inside */
}

.mira-brand-txt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mira-brand-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.05;
    white-space: nowrap;
}
.mira-brand-name .i {
    font-weight: 600;
    color: #50a5f1;              /* Skote $info — reads as an accent on both grounds */
    margin-left: 3px;
}

.mira-brand-sub {
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .085em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    opacity: .62;
}

/* Colour only — which anchor is visible is Skote's call (see comment above). */
.logo-light .mira-brand-name { color: #fff; }
.logo-light .mira-brand-sub  { color: rgba(255, 255, 255, .85); }
.logo-dark  .mira-brand-name { color: #2a3042; }
.logo-dark  .mira-brand-sub  { color: #74788d; }
/* #50a5f1 is too pale on the white topbar a light sidebar gives us. */
.logo-dark  .mira-brand-name .i { color: #2b7fc4; }

/* Collapsed sidebar: 70px box, so drop the horizontal padding and centre the
   mark instead of letting the 1rem gutters squeeze it. */
.vertical-collpsed .navbar-brand-box { padding: 0; text-align: center; }
.vertical-collpsed .logo .mira-brand-mark { width: 36px; height: 36px; }

/* Small screens: Skote swaps to .logo-sm and lets the box auto-size. */
@media (max-width: 992px) {
    .navbar-brand-box { padding: 0 .75rem; }
}