/* KeshGoPortal app overrides on top of INSPINIA. */

h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: .8125rem; }

.blazor-error-boundary {
    background: #b32121;
    color: #fff;
    padding: 1rem;
    border-radius: .25rem;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Reconnect modal styling on top of INSPINIA */
#components-reconnect-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}
#components-reconnect-modal > div {
    background: #fff;
    color: #212529;
    padding: 1.25rem 1.5rem;
    border-radius: .375rem;
    min-width: 320px;
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.25);
}

/* ---------- Mobile-friendly tweaks ---------- */

/* Sidebar native scrolling (we removed simplebar from NavMenu because it
   mutates the DOM and conflicts with Blazor's renderer, causing the sidebar
   to disappear after navigation). */
.sidenav-menu .scrollbar {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Page title header: stack title and actions on small screens. */
.page-title-head {
    flex-wrap: wrap;
    gap: .5rem;
}
.page-title-head .breadcrumb {
    flex-wrap: wrap;
}

/* Card headers with embedded controls (search box, buttons): stack on mobile. */
.card-header.d-flex {
    flex-wrap: wrap;
    gap: .5rem;
}
@media (max-width: 575.98px) {
    .card-header .form-control,
    .card-header input[type="text"],
    .card-header input[type="search"] {
        max-width: 100% !important;
        width: 100%;
    }
}

/* Tighten container padding on phones so cards use full width. */
@media (max-width: 575.98px) {
    .content-page > .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
    .card-body {
        padding: 1rem;
    }
}

/* Auth pages: ensure card padding/margins look good on small screens. */
@media (max-width: 575.98px) {
    .auth-box .card,
    .auth-box .card.p-4 {
        padding: 1.25rem !important;
    }
    .auth-brand img {
        height: 110px !important;
    }
}

/* Forms: prevent overflow of long inputs on narrow screens. */
.form-control,
.form-select {
    max-width: 100%;
}

/* Tables already use .table-responsive — make sure they scroll cleanly. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Hide non-essential columns on very small screens.
   (Add `d-none d-md-table-cell` to <th>/<td> in markup where appropriate;
    this is a safety net for content already there.) */
@media (max-width: 575.98px) {
    .table-custom th,
    .table-custom td {
        white-space: nowrap;
    }
}

/* Dropdown menus: keep within viewport on small screens. */
@media (max-width: 575.98px) {
    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }
}

/* Compact Blazor error UI */
#blazor-error-ui {
    background: #ffffc6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    color: #2c2c2c;
    display: none;
    left: 0;
    padding: .6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1500;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }