/* UI/UX + responsive enhancements, shared between public site, admin and patient portal. */

:root { color-scheme: light; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { min-width: 0; }
main, .dashboard-layout, .dashboard-content, .dashboard-content > .container-fluid,
.row > *, .card, .card-body, .modal-body, .navbar, .navbar-collapse { min-width: 0; }
img, video, canvas, iframe { max-width: 100%; }
p, h1, h2, h3, h4, h5, h6, .card-title { overflow-wrap: break-word; }
input, select, textarea, button { font: inherit; }
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; }

/* Accessible keyboard and focus states */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #cf9a3c;
    outline-offset: 3px;
}
:where(.btn, .nav-link, .sidebar-menu a) { transition-duration: .18s; }
.skip-to-content {
    position: fixed; top: -85px; right: 14px; z-index: 20000;
    padding: 10px 18px; border-radius: 12px; background: #fff; color: #173747;
    box-shadow: 0 4px 22px #0003; font-weight: 700;
}
.skip-to-content:focus { top: 12px; }
.sidebar-menu a.active, .sidebar-menu a[aria-current="page"] {
    background: rgba(255,255,255,.16); color: #fff;
    box-shadow: inset -3px 0 0 #e4c184;
}
.sidebar-menu a.active i { color: #e4c184; }
.sidebar-close {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    min-width: 44px; min-height: 44px; color: white;
}
.sidebar-close:hover, .sidebar-close:focus-visible { color: #fff; background: #ffffff24; }
.sidebar-close i { font-size: 1.35rem; }
.sidebar-heading { padding-inline-start: 10px; padding-inline-end: 10px; }
.sidebar-heading > div, .sidebar-heading strong, .sidebar-heading small { min-width: 0; overflow-wrap: anywhere; }

/* Off-canvas backdrop and safe stacking */
.sidebar-backdrop[hidden] { display: none !important; }
.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 1045;
    background: rgba(13, 27, 35, .58);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
body.sidebar-open { overflow: hidden !important; touch-action: none; }
body.sidebar-open #dashboardSidebar { touch-action: pan-y; }

/* Visible and keyboard-scrollable dense tables; no hidden columns */
.dashboard-content .table-responsive, .dashboard-content .table-wrapper,
.dashboard-content .table-container, .table-scroll { max-width: 100%; overscroll-behavior-x: contain; }
.table-scroll-hint {
    margin: .4rem .3rem .9rem; color: #526b74; font-size: .8rem;
    text-align: center; font-weight: 700;
}
.table-scroll-hint[hidden] { display: none !important; }
.table-responsive:focus-visible, .table-wrapper:focus-visible,
.table-container:focus-visible, .table-scroll:focus-visible { outline-offset: -3px; }
.dashboard-content .table td, .dashboard-content .table th { max-width: 36rem; }
.dashboard-content .table td { overflow-wrap: break-word; }
.dashboard-content .table .btn { white-space: nowrap; }

/* Consistent controls and clear click targets */
.form-label, label { overflow-wrap: anywhere; }
.form-control, .form-select { width: 100%; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline-offset: 2px; }
.btn.is-submitting { cursor: progress; }
.modal { padding-inline: 0 !important; }
.modal-content { max-height: calc(100dvh - 16px); }
.modal-dialog-scrollable .modal-content { overflow: hidden; }
.modal-body { overscroll-behavior-y: contain; }

/* Site navigation: brand never forces the hamburger out of view. */
@media (max-width: 991.98px) {
    .main-header .navbar { display: flex; flex-wrap: wrap; gap: 8px; }
    .main-header .navbar-brand { min-width: 0; flex: 1 1 auto; max-width: calc(100% - 64px); margin-inline-end: 0; }
    .main-header .navbar-brand > span:last-child { min-width: 0; }
    .main-header .navbar-toggler { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
    .main-header .navbar-collapse { flex: 0 0 100%; width: 100%; }
    .main-header .navbar-nav { gap: 2px; align-items: stretch; }
    .main-header .nav-link { padding: 11px 14px !important; border-radius: 9px; }
    .main-header .nav-link.active { background: #edf3f2; border-bottom: 0 !important; }
    .main-header .navbar-collapse .btn { margin-top: 4px; }

    body[data-notification-role="admin"] #dashboardSidebar,
    body[data-notification-role="patient"] #dashboardSidebar {
        z-index: 1050; overflow-x: hidden; overflow-y: auto;
        height: 100dvh !important; max-height: 100dvh;
        padding-top: 66px;
        visibility: hidden;
        pointer-events: none;
        transition: transform .24s ease !important;
    }
    body[data-notification-role="admin"] #dashboardSidebar.show,
    body[data-notification-role="patient"] #dashboardSidebar.show {
        visibility: visible; pointer-events: auto;
    }
    .admin-topbar { min-height: 68px; height: auto; }
    .admin-topbar > .d-flex { gap: 8px; padding-inline: 12px !important; min-height: 68px; }
    .admin-topbar #mobileSidebarToggle {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px; margin-inline-end: 0 !important;
        border-radius: 10px;
    }
    .admin-topbar > .d-flex > div { min-width: 0; }
    .admin-topbar h5, .admin-topbar h6 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-topbar .text-white .fw-bold {
        display: block; max-width: min(24vw, 190px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .dashboard-layout { min-width: 0; }
    .dashboard-content > .container-fluid { padding-top: 16px !important; padding-bottom: 20px !important; }
    .dashboard-content .row > * { min-width: 0; }
    .dashboard-content .card-header .d-flex { flex-wrap: wrap; gap: 8px; }
    .dashboard-content .card-header h2, .dashboard-content .card-header h3,
    .dashboard-content .card-header h4, .dashboard-content .card-header h5 { min-width: 0; }
    .modal-dialog { max-width: calc(100vw - 20px); }
}

@media (max-width: 767.98px) {
    .dashboard-content { padding: 12px !important; }
    .dashboard-content .container-fluid { padding-inline: 4px !important; }
    .dashboard-content .row { --bs-gutter-x: 1rem; }
    .dashboard-content .row > [class*="col-"] { min-width: 0; }
    .dashboard-content :is(.card-header, .card-footer) { gap: 8px; }
    .dashboard-content .form-control, .dashboard-content .form-select,
    .dashboard-content input[type="date"], .dashboard-content input[type="time"],
    .modal .form-control, .modal .form-select { min-height: 44px; font-size: 16px; }
    .dashboard-content :is(.btn:not(.btn-sm),button:not(.btn-close)),
    .modal .btn:not(.btn-sm) { min-height: 42px; }
    .dashboard-content .d-flex > :is(h1,h2,h3,h4,h5) { min-width: 0; }
    .dashboard-content .table-responsive > table.table,
    .dashboard-content .table-wrapper > table.table,
    .dashboard-content .table-container > table.table { min-width: 680px !important; }
    .dashboard-content .modal .table-responsive > table.table { min-width: 610px !important; }
    .modal-dialog { margin: 8px auto; width: calc(100% - 16px); }
    .modal-content { max-height: calc(100dvh - 16px); }
    .modal-body { overflow-y: auto; max-height: calc(100dvh - 154px); }
    .modal-footer { align-items: stretch; }
    .modal-footer > .btn { flex: 1 1 120px; }
    .site-footer .row > * { min-width: 0; }
    .floating-whatsapp { bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
    .admin-topbar h6 { font-size: .86rem; }
    .admin-topbar .text-white .fw-bold { max-width: 22vw; font-size: .75rem; }
    .main-header .navbar-brand strong { font-size: .84rem; }
    .main-header .navbar-brand small { font-size: .68rem; }
    .sidebar-heading strong { font-size: 1rem; }
    .dashboard-content .container-fluid { padding-inline: 0 !important; }
    .dashboard-content .card-body { padding: 11px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    .sidebar-backdrop, #dashboardSidebar, .admin-topbar, .skip-to-content,
    .table-scroll-hint, .floating-whatsapp { display: none !important; }
    body[data-notification-role="admin"] .dashboard-layout,
    body[data-notification-role="patient"] .dashboard-layout { padding: 0 !important; }
    .dashboard-content { padding: 0 !important; }
    html, body { overflow: visible !important; }
}