/* Custom overrides - safe to edit per client branding needs */
.login-page { background: #f4f6f9; }
.card-lab-logo { max-height: 60px; margin-bottom: 10px; }
.small-box .icon { opacity: .4; }

/* Test picker (admin/appointments.php "Individual Tests") - each Select2
   dropdown row shown as name / short-code / category / group badges / price. */
.test-picker-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; font-size: 0.85rem; width: 100%; }
.test-picker-row .tpr-name { flex: 1 1 30%; font-weight: 600; min-width: 0; }
.test-picker-row .tpr-meta { flex: 1 1 45%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.test-picker-row .tpr-badge { background: var(--lab-primary, #17a2b8); color: #fff; border-radius: 3px; padding: 1px 6px; font-size: 0.72rem; white-space: nowrap; }
.test-picker-row .tpr-cat, .test-picker-row .tpr-group { color: #6c757d; font-size: 0.78rem; white-space: nowrap; }
.test-picker-row .tpr-price { flex: 0 0 auto; font-weight: 600; color: var(--lab-primary, #17a2b8); white-space: nowrap; margin-left: auto; }

/* Package picker (admin/appointments.php "Packages") - each Select2 dropdown
   row shown as package name + price, with its included tests listed below. */
.pkg-picker-row { padding: 3px 0; width: 100%; }
.pkg-picker-row .pkr-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pkg-picker-row .pkr-name { font-weight: 600; }
.pkg-picker-row .pkr-price { font-weight: 600; color: var(--lab-primary, #17a2b8); white-space: nowrap; }
.pkg-picker-row .pkr-tests { color: #6c757d; font-size: 0.8rem; margin-top: 1px; }

/* Top navbar brand logo (Admin + Manager + Patient share this component) */
.navbar-brand { display: flex; align-items: center; min-width: 0; }
.brand-image-logo {
    max-height: 33px;
    width: auto;
    margin-right: 8px;
    border-radius: 4px;
    background: #fff;
    padding: 2px;
    flex-shrink: 0;
}
/* Long lab names truncate with an ellipsis instead of overflowing/cropping the
   navbar (top-nav layout) or the fixed-width sidebar (left/right sidebar layout)
   - the full name is still available via the title="" tooltip on hover. */
.navbar-brand .brand-text,
.main-sidebar .brand-link .brand-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: inline-block;
    vertical-align: middle;
}
.navbar-brand .brand-text { max-width: 45vw; }
@media (max-width: 767.98px) {
    .navbar-brand .brand-text { max-width: 36vw; }
}
.main-sidebar .brand-link { display: flex; align-items: center; }
.main-sidebar .brand-link .brand-text { max-width: 150px; }

/* ---------------------------------------------------------------
   Top navigation (horizontal on desktop, collapses on mobile/tablet)
   --------------------------------------------------------------- */
.main-header .navbar-toggler {
    border-color: rgba(255,255,255,.6);
    background: rgba(255,255,255,.08);
}
.main-header .navbar-toggler-icon { filter: brightness(0) invert(1); }
.navbar-nav .nav-link.active,
.navbar-nav .dropdown-toggle.active {
    background-color: rgba(255,255,255,.18);
    border-radius: 4px;
    font-weight: 600;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--lab-primary);
    color: #fff;
}
@media (max-width: 767.98px) {
    .navbar-collapse { padding: 8px 0 4px; }
    .navbar-nav .nav-link, .navbar-nav .dropdown-toggle { padding-top: .6rem; padding-bottom: .6rem; }
    .navbar-nav .dropdown-menu { border: none; padding-left: 12px; box-shadow: none; background: transparent; }
    .navbar-nav .dropdown-item { color: rgba(255,255,255,.85); }
    .navbar-nav .dropdown-item:hover, .navbar-nav .dropdown-item:focus { background-color: rgba(255,255,255,.1); color: #fff; }
    .navbar-nav .dropdown-item.active { background-color: rgba(255,255,255,.25); color: #fff; }
}

/* WhatsApp action buttons - keep clearly visible/tappable at all sizes */
.btn-whatsapp {
    background-color: #25D366;
    border-color: #1ebe57;
    color: #fff;
    white-space: nowrap;
}
.btn-whatsapp:hover, .btn-whatsapp:focus {
    background-color: #1ebe57;
    border-color: #17a34a;
    color: #fff;
}

/* Small "pending step" badges used on Appointments lists */
.pending-step-badge { margin: 1px 2px 1px 0; display: inline-block; }
.text-lab-primary { color: var(--lab-primary); }

/* ---------------------------------------------------------------
   Mobile responsiveness
   --------------------------------------------------------------- */
@media (max-width: 576px) {
    .content-header h1 { font-size: 1.3rem; }
    .content-wrapper, .content-header, .content { padding-left: 0; padding-right: 0; }
    .content-header .container-fluid, .content .container-fluid { padding-left: 8px; padding-right: 8px; }
    .card-body { padding: .9rem .75rem; }
    .btn-whatsapp-text { display: none; }
    .table-sm td, .table-sm th { white-space: nowrap; }
    .brand-image-logo { max-height: 26px; margin-right: 6px; }
    .login-box, .register-box { width: 94%; }
}
@media (max-width: 767.98px) {
    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline > * { margin-right: 0 !important; margin-bottom: 6px !important; width: 100%; }
    .form-inline .btn { width: auto; align-self: flex-start; }
}
/* Ensure any wide table scrolls its own container instead of the page */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Scrollable, searchable listing tables (Doctors, Packages, Users split, etc.) */
.scrollable-table-wrap { max-height: 480px; overflow-y: auto; }
.scrollable-table-wrap thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.table-search-wrap { padding: .5rem .75rem; border-bottom: 1px solid #dee2e6; }

/* ---------------------------------------------------------------
   Fixed navbar (Top Menu layout) - desktop only. AdminLTE's own
   .main-header is position:static unconditionally; on narrow/mobile
   widths the collapsible menu can grow taller than one row, so fixed
   positioning is intentionally scoped to >=768px where the navbar is
   always a single inline row.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
    .layout-top-nav .main-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }
    .layout-top-nav .content-wrapper {
        padding-top: 3.5rem;
    }
}

/* ---------------------------------------------------------------
   Right Sidebar layout - mirrors AdminLTE's left-sidebar box model
   (margin-left -> margin-right) for both the expanded (250px) and
   sidebar-mini-collapsed (4.6rem) states.
   --------------------------------------------------------------- */
@media (min-width: 768px) {
    .layout-nav-right .main-sidebar { left: auto !important; right: 0; }
    .layout-nav-right .content-wrapper,
    .layout-nav-right .main-footer,
    .layout-nav-right .main-header {
        margin-left: 0 !important;
        margin-right: 250px;
    }
    .layout-nav-right.sidebar-collapse .content-wrapper,
    .layout-nav-right.sidebar-collapse .main-footer,
    .layout-nav-right.sidebar-collapse .main-header {
        margin-right: 4.6rem;
    }
}
.layout-nav-right .brand-link { text-align: right; }

/* ---------------------------------------------------------------
   Theme polish pass - visual consistency/refinement only, no new
   settings or toggle. Same single white-label theme throughout,
   just tighter spacing/shadows/hover states and consistent use of
   the lab's own brand color (--lab-primary) on primary actions.
   --------------------------------------------------------------- */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
}
.card-header {
    border-radius: 8px 8px 0 0 !important;
    background-color: rgba(0,0,0,.02);
    font-weight: 600;
}
.small-box {
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.08);
}

.btn { border-radius: 6px; transition: filter .15s ease, box-shadow .15s ease; }
.btn:hover { filter: brightness(0.95); }
.btn-lab-primary:hover, .btn-lab-primary:focus {
    filter: brightness(0.92);
    color: #fff;
}
.btn-xs { border-radius: 4px; }

.badge { border-radius: 4px; font-weight: 600; letter-spacing: .01em; }

.nav-link, .dropdown-item { transition: background-color .12s ease, color .12s ease; }

.table tbody tr:hover { background-color: rgba(0,0,0,.025); }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; border-top: none; }

/* Click-to-sort column headers (see sortable_th() in includes/functions.php) */
.sort-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: inherit; text-decoration: none; white-space: nowrap;
}
.sort-link:hover { color: var(--lab-primary); text-decoration: none; }
.sort-link i { opacity: .3; font-size: .75em; }
.sort-link.active { color: var(--lab-primary); font-weight: 700; }
.sort-link.active i { opacity: .8; }

/* Thin, unobtrusive scrollbar for the scrollable listing tables */
.scrollable-table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollable-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 4px; }
.scrollable-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.25); }

/* Payment gateway not granted by SuperAdmin for this lab (admin/payment-settings.php) */
.gateway-locked { opacity: .6; background: rgba(0,0,0,.015); }
.gateway-locked .card-header { background-color: rgba(0,0,0,.04); }

.form-control { border-radius: 6px; }
.form-control:focus { border-color: var(--lab-primary); box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--lab-primary) 25%, transparent); }