/*
 * Manalia global interaction and mobile hardening.
 * Loaded after the legacy theme layers so these rules remain the final,
 * predictable contract for selection, bulk controls and compact screens.
 */

html[data-theme] input[type="checkbox"],
html[data-theme] input[type="radio"] {
    accent-color: var(--accent, var(--primary, #53693f));
}

html[data-theme] tr.is-selected-row,
html[data-theme] tr.is-selected-row > th,
html[data-theme] tr.is-selected-row > td {
    background: color-mix(
        in srgb,
        var(--accent, var(--primary, #53693f)) 12%,
        var(--card, #fff)
    ) !important;
    color: var(--text, #111827) !important;
}

html[data-theme="dark"] tr.is-selected-row,
html[data-theme="dark"] tr.is-selected-row > th,
html[data-theme="dark"] tr.is-selected-row > td {
    background: color-mix(in srgb, #38bdf8 14%, #0f172a) !important;
    color: #eaf2ff !important;
}

html[data-theme="dark"] tr.is-selected-row :is(
    a,
    span,
    small,
    strong,
    label
) {
    color: inherit !important;
}

.table-tools {
    max-width: 100%;
}

.table-bulk-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.table-bulk-actions[hidden] {
    display: none !important;
}

.table-bulk-actions .btn {
    min-height: 36px;
    padding: 6px 10px;
    white-space: nowrap;
}

.table-bulk-status {
    min-width: 0;
    color: var(--muted, #64748b);
    font-size: 12px;
    font-weight: 750;
}

.table-bulk-actions .btn:disabled {
    cursor: not-allowed;
    opacity: .48;
}

html[data-theme="dark"] .table-bulk-actions .btn {
    background: #111c2f !important;
    color: #eaf2ff !important;
    border-color: #243449 !important;
}

html[data-theme="dark"] .table-bulk-actions .btn:hover:not(:disabled),
html[data-theme="dark"] .table-bulk-actions .btn:focus-visible:not(:disabled) {
    background: #18324a !important;
    border-color: #38bdf8 !important;
}

/*
 * Select2 appends its open dropdown to dropdownParent. For modal fields that
 * parent is the modal root, beside a legacy dialog stacking context. Keep only
 * the floating dropdown above the dialog and restore its inherited hit area.
 */
body.modal-open > .select2-container--open,
body > .modal.show > .select2-container--open {
    z-index: 2147483100 !important;
    pointer-events: auto !important;
}

@media (max-width: 992px) {
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    .app-shell,
    .content,
    .page-body,
    .panel,
    .card,
    .row,
    [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .topbar {
        display: grid !important;
        grid-template-areas:
            "menu title actions"
            "search search search";
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center !important;
        gap: 8px 10px !important;
    }

    .topbar .mobile-menu-toggle {
        grid-area: menu;
    }

    .topbar > div:first-of-type {
        grid-area: title;
        min-width: 0 !important;
    }

    .topbar .global-search {
        grid-area: search;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
    }

    .topbar .global-search-field,
    .topbar .global-search-field input {
        width: 100%;
        min-width: 0;
    }

    .topbar .global-search-results {
        inset-inline: 0;
        width: 100%;
        max-width: 100%;
    }

    .topbar .topbar-actions {
        grid-area: actions;
        min-width: 0;
    }

    .table-responsive,
    .table-wrapper,
    .table-wrap,
    .manalia-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table,
    .table-wrapper > table,
    .table-wrap > table,
    .manalia-table-wrap > table {
        width: max-content;
        min-width: 100%;
        max-width: none;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-content {
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }

    .select2-container,
    .select2-dropdown,
    .dropdown-menu {
        max-width: 100% !important;
    }

    img,
    svg,
    video,
    canvas {
        max-width: 100%;
        height: auto;
    }

    pre,
    code {
        max-width: 100%;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }
}

@media (max-width: 576px) {
    .content {
        padding-inline: 6px !important;
    }

    .page-body {
        padding-inline: 0 !important;
    }

    .panel,
    .card,
    .stat-card,
    .patient-header {
        border-radius: 18px !important;
    }

    .panel {
        padding: 14px !important;
    }

    .panel-head {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .panel-head > .d-flex,
    .panel-head > form,
    .panel-head > div:last-child:not(:first-child) {
        width: 100%;
        max-width: 100%;
    }

    .panel-head > .d-flex .btn {
        flex: 1 1 130px;
        margin-top: 0 !important;
    }

    .topbar {
        padding: 8px !important;
    }

    .topbar h1 {
        font-size: 15px !important;
    }

    .topbar .mobile-menu-toggle,
    .topbar .topbar-reminder-btn,
    .topbar .user-action-menu__trigger {
        min-width: 42px !important;
        min-height: 42px !important;
    }

    .topbar .user-action-menu__name,
    .topbar .user-action-menu__role,
    .topbar .user-action-menu__caret {
        display: none !important;
    }

    .topbar .user-action-menu__trigger {
        width: 42px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .user-action-menu__panel {
        position: fixed !important;
        top: 62px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
    }

    input,
    select,
    textarea,
    .form-control,
    .form-select,
    .select2-search__field {
        font-size: 16px !important;
    }

    .btn,
    button,
    summary,
    a.btn {
        min-height: 42px;
    }

    .table-tools {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: 8px !important;
        align-items: center;
    }

    .table-tools .table-search {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
    }

    .table-selected-count {
        justify-self: start;
    }

    .table-bulk-actions {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .table-bulk-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .table-bulk-status {
        grid-column: 1 / -1;
    }

    .input-group,
    .btn-group {
        max-width: 100%;
    }
}

/*
 * The get-started hero uses the configurable brand gradient. Its secondary
 * color can be too light for text in both themes, so keep the brand hue while
 * guaranteeing a dark-enough endpoint and stable foreground colors.
 */
.get-started-hero {
    background:
        linear-gradient(135deg, var(--manalia-brand-primary, #53693f), #667465)
        !important;
    background:
        linear-gradient(
            135deg,
            var(--manalia-brand-primary, #53693f) 0%,
            color-mix(
                in srgb,
                var(--manalia-brand-secondary, #a7b88d) 55%,
                #172033
            ) 100%
        )
        !important;
}

.get-started-hero :is(h2, .help-hero-box strong) {
    color: #fff !important;
}

.get-started-hero :is(p, .help-eyebrow, .help-hero-box span) {
    color: #f8fafc !important;
}

.get-started-hero .help-eyebrow,
.get-started-hero .help-hero-box {
    background: rgba(15, 23, 42, .28);
    border-color: rgba(255, 255, 255, .48);
}

/*
 * Live readiness cards on /get-started use warning/success/risk tones. In
 * dark mode their muted text previously inherited a low-contrast color, so
 * pin the foregrounds and tinted surfaces here. This file loads after app.css.
 */
html[data-theme="dark"] .startup-step h3,
html[data-theme="dark"] .startup-readiness-card strong,
html[data-theme="dark"] .help-guide-panel h2 {
    color: #f8fafc;
}

html[data-theme="dark"] .startup-step p,
html[data-theme="dark"] .startup-readiness-card span,
html[data-theme="dark"] .help-guide-panel .panel-head p,
html[data-theme="dark"] .help-guide-panel p {
    color: #dbeafe;
}

html[data-theme="dark"] .startup-links a {
    background: rgba(96, 165, 250, .16);
    color: #bfdbfe !important;
}

html[data-theme="dark"] .startup-readiness-card.is-ready {
    background: rgba(20, 83, 45, .36);
    border-color: rgba(134, 239, 172, .6);
}

html[data-theme="dark"] .startup-readiness-card.is-warning {
    background: rgba(120, 53, 15, .38);
    border-color: rgba(253, 230, 138, .62);
}

html[data-theme="dark"] .startup-readiness-card.is-risk,
html[data-theme="dark"] .help-warning-list div {
    background: rgba(127, 29, 29, .36);
    border-color: rgba(254, 202, 202, .62);
}

html[data-theme="dark"] .help-warning-list div {
    color: #fecaca;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .modal,
    .table-tools,
    tr.is-selected-row {
        transition: none !important;
        animation: none !important;
    }
}