/* patch_15: final UI/UX normalization layer.
   This file intentionally sits after onehealth-workspace-common.css and before map-explorer.css.
   Goal: keep Ecology / Pathogen Analysis / AlphaCorona / Acoustic / Map screens on one visual system
   without changing the functional design or domain-specific layout. */
:root {
    --oh-final-primary: #0b2f6b;
    --oh-final-primary-hover: #082452;
    --oh-final-secondary: #334155;
    --oh-final-create: #0f766e;
    --oh-final-edit: #1d4ed8;
    --oh-final-danger: #dc2626;
    --oh-final-danger-hover: #991b1b;
    --oh-final-surface: #ffffff;
    --oh-final-surface-soft: #f8fbff;
    --oh-final-border: #cfe0f6;
    --oh-final-border-soft: #e5edf7;
    --oh-final-text: #0f172a;
    --oh-final-muted: #64748b;
    --oh-final-radius-lg: 18px;
    --oh-final-radius-md: 14px;
    --oh-final-radius-sm: 10px;
    --oh-final-control-h: 34px;
    --oh-final-control-sm-h: 28px;
    --oh-final-shadow: 0 12px 28px rgba(9, 70, 96, 0.06);
}

/* Page shell: title -> stats -> filters -> left/center/right panels. */
.bat-one-screen,
.pathogen-one-screen,
.alpha-one-screen,
.oh-page-three-pane {
    gap: 10px !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.bat-hero,
.pathogen-hero,
.alpha-hero,
.oh-page-header,
.map-header,
.acoustic-header {
    border: 1px solid var(--oh-final-border) !important;
    border-radius: var(--oh-final-radius-lg) !important;
    background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
    box-shadow: var(--oh-final-shadow) !important;
    padding: 14px 18px !important;
    margin: 0 0 10px !important;
}

.bat-panel,
.pathogen-panel,
.alpha-panel,
.oh-card,
.map-card,
.acoustic-card {
    border: 1px solid var(--oh-final-border) !important;
    border-radius: var(--oh-final-radius-lg) !important;
    background: var(--oh-final-surface) !important;
    box-shadow: var(--oh-final-shadow) !important;
}

.bat-panel-head,
.pathogen-panel-head,
.alpha-panel-head,
.oh-card-head,
.map-card-head,
.acoustic-card-head {
    min-height: 58px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--oh-final-border-soft) !important;
}

.bat-panel-head h2,
.pathogen-panel-head h2,
.alpha-panel-head h2,
.oh-card h2,
.oh-card h3,
.map-card h2,
.acoustic-card h2 {
    color: #06204b !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: -0.03em !important;
}

.bat-panel-head p,
.pathogen-panel-head p,
.alpha-panel-head p,
.oh-muted,
.map-muted,
.acoustic-muted {
    color: var(--oh-final-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* KPI cards. */
.bat-kpi-strip,
.pathogen-kpi-strip,
.alpha-kpi-strip,
.oh-kpi-strip {
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.bat-kpi-strip article,
.pathogen-kpi-strip article,
.alpha-kpi-strip article,
.oh-kpi-card {
    min-height: 76px !important;
    border: 1px solid var(--oh-final-border) !important;
    border-radius: var(--oh-final-radius-lg) !important;
    background: var(--oh-final-surface) !important;
    box-shadow: var(--oh-final-shadow) !important;
    padding: 11px 13px !important;
}

.bat-kpi-strip strong,
.pathogen-kpi-strip strong,
.alpha-kpi-strip strong,
.oh-kpi-card strong {
    color: #06204b !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
    font-weight: 950 !important;
}

.bat-kpi-strip span,
.pathogen-kpi-strip span,
.alpha-kpi-strip span,
.oh-kpi-card span,
.oh-kpi-card small {
    color: var(--oh-final-muted) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
}

/* Buttons: one size system for navigation, create, edit, delete, modal footer and row actions. */
button,
.btn,
.bat-btn,
.pathogen-btn,
.alpha-btn,
.oh-action-btn,
.oh-modal-btn,
.bat-mini-btn,
.pathogen-row-action,
.alpha-row-action,
.alpha-row-map-btn,
.bat-row-action,
.oh-admin-action,
.oh-user-action,
.oh-pager button,
.pager button,
.pagination button {
    min-height: var(--oh-final-control-h) !important;
    border-radius: var(--oh-final-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
}

.bat-mini-btn,
.pathogen-row-action,
.alpha-row-action,
.alpha-row-map-btn,
.bat-row-action,
.oh-pager button,
.pager button,
.pagination button {
    min-height: var(--oh-final-control-sm-h) !important;
    padding: 0 10px !important;
}

.oh-action-primary,
.btn.btn-primary,
.bat-btn-primary,
.pathogen-btn.primary,
.alpha-btn.primary {
    background: var(--oh-final-primary) !important;
    border: 1px solid var(--oh-final-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(11, 47, 107, .18) !important;
}

.oh-action-primary:hover:not(:disabled),
.btn.btn-primary:hover:not(:disabled),
.bat-btn-primary:hover:not(:disabled),
.pathogen-btn.primary:hover:not(:disabled),
.alpha-btn.primary:hover:not(:disabled) {
    background: var(--oh-final-primary-hover) !important;
    border-color: var(--oh-final-primary-hover) !important;
}

.oh-action-secondary,
.btn.btn-secondary,
.btn.btn-outline-secondary.oh-action-secondary,
.bat-btn-secondary,
.pathogen-btn.secondary,
.alpha-btn.secondary {
    background: var(--oh-final-secondary) !important;
    border: 1px solid var(--oh-final-secondary) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(51, 65, 85, .16) !important;
}

.oh-admin-action-create,
.oh-record-create-strip .oh-admin-action-create,
.oh-record-toolbar .oh-admin-action-create {
    background: var(--oh-final-create) !important;
    border: 1px solid var(--oh-final-create) !important;
    color: #ffffff !important;
}

.oh-admin-action-edit,
.bat-row-action.oh-admin-action-edit,
.pathogen-row-action.oh-admin-action-edit,
.alpha-row-action.oh-admin-action-edit {
    background: var(--oh-final-edit) !important;
    border: 1px solid var(--oh-final-edit) !important;
    color: #ffffff !important;
}

.oh-admin-action-delete,
.oh-action-danger,
.btn.btn-danger,
.bat-row-action.danger,
.bat-btn-danger,
.pathogen-row-action.danger,
.alpha-row-action.danger {
    background: var(--oh-final-danger) !important;
    border: 1px solid var(--oh-final-danger) !important;
    color: #ffffff !important;
}

.oh-admin-action-delete:hover:not(:disabled),
.oh-action-danger:hover:not(:disabled),
.btn.btn-danger:hover:not(:disabled),
.bat-row-action.danger:hover:not(:disabled),
.pathogen-row-action.danger:hover:not(:disabled),
.alpha-row-action.danger:hover:not(:disabled) {
    background: var(--oh-final-danger-hover) !important;
    border-color: var(--oh-final-danger-hover) !important;
}

.oh-user-action,
.btn.btn-outline-primary.oh-user-action,
.btn.btn-outline-secondary.oh-user-action,
.bat-row-action:not(.oh-admin-action):not(.danger),
.pathogen-row-action:not(.oh-admin-action):not(.danger),
.alpha-row-action:not(.oh-admin-action):not(.danger),
.alpha-row-map-btn {
    background: #ffffff !important;
    border: 1px solid #bfdbfe !important;
    color: var(--oh-final-primary) !important;
    box-shadow: none !important;
}

.oh-user-action:hover:not(:disabled),
.bat-row-action:not(.oh-admin-action):not(.danger):hover:not(:disabled),
.pathogen-row-action:not(.oh-admin-action):not(.danger):hover:not(:disabled),
.alpha-row-action:not(.oh-admin-action):not(.danger):hover:not(:disabled),
.alpha-row-map-btn:hover:not(:disabled) {
    background: #eff6ff !important;
    border-color: #60a5fa !important;
}

/* Tabs and pills. */
.bat-tabs,
.pathogen-tabs,
.alpha-tabs,
.pathogen-side-tabs,
.oh-tabs {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.bat-tab,
.pathogen-tab,
.alpha-tab,
.bat-tabs button,
.pathogen-tabs button,
.alpha-tabs button,
.pathogen-side-tabs button,
.oh-tabs button {
    min-height: 30px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--oh-final-primary) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    padding: 0 12px !important;
}

.bat-tab.active,
.pathogen-tab.active,
.alpha-tab.active,
.bat-tabs button.active,
.pathogen-tabs button.active,
.alpha-tabs button.active,
.pathogen-side-tabs button.active,
.oh-tabs button.active {
    background: var(--oh-final-primary) !important;
    border-color: var(--oh-final-primary) !important;
    color: #ffffff !important;
}

/* Filters: keep compact and reusable. */
.oh-page-filter-strip,
.bat-center-search-panel.oh-page-filter-strip,
.ac-filter-grid.oh-page-filter-strip,
.pa-filter-grid.oh-page-filter-strip,
.map-filter-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    min-height: 0 !important;
    border: 1px solid var(--oh-final-border) !important;
    border-radius: var(--oh-final-radius-lg) !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(9, 70, 96, 0.045) !important;
}

.oh-page-filter-strip .oh-field,
.bat-center-search-panel.oh-page-filter-strip .oh-field,
.ac-filter-grid.oh-page-filter-strip .oh-field,
.pa-filter-grid.oh-page-filter-strip .oh-field,
.map-filter-strip .oh-field {
    flex: 1 1 150px !important;
    min-width: 140px !important;
    max-width: 100% !important;
    display: grid !important;
    gap: 4px !important;
}

.oh-page-filter-strip .wide.oh-field,
.oh-page-filter-strip .oh-field.wide,
.bat-center-search-panel.oh-page-filter-strip .wide.oh-field,
.map-filter-strip .wide.oh-field {
    flex: 1.65 1 280px !important;
    min-width: 260px !important;
}

.oh-page-filter-strip .filter-actions,
.oh-page-filter-strip .bat-center-search-actions,
.oh-page-filter-strip .ac-filter-actions,
.oh-page-filter-strip .pa-filter-actions,
.map-filter-strip .filter-actions {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-left: auto !important;
}

.oh-page-filter-strip label,
.oh-page-filter-strip .oh-field > span,
.map-filter-strip label,
.map-filter-strip .oh-field > span {
    font-size: 11px !important;
    line-height: 1.15 !important;
    color: var(--oh-final-primary) !important;
    font-weight: 900 !important;
}

.oh-page-filter-strip input,
.oh-page-filter-strip select,
.map-filter-strip input,
.map-filter-strip select,
.bat-center-search-panel input,
.bat-center-search-panel select,
.pathogen-panel input,
.pathogen-panel select,
.alpha-panel input,
.alpha-panel select,
.bat-editor-form input,
.bat-editor-form select,
.bat-editor-form textarea {
    height: var(--oh-final-control-h) !important;
    min-height: var(--oh-final-control-h) !important;
    border-radius: var(--oh-final-radius-sm) !important;
    border: 1px solid #c7d7ee !important;
    background: #ffffff !important;
    color: var(--oh-final-text) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    padding: 0 12px !important;
}

.bat-editor-form textarea,
.pathogen-panel textarea,
.alpha-panel textarea {
    min-height: 74px !important;
    padding: 10px 12px !important;
    line-height: 1.45 !important;
}

.oh-page-filter-strip input:focus,
.oh-page-filter-strip select:focus,
.map-filter-strip input:focus,
.map-filter-strip select:focus,
.bat-editor-form input:focus,
.bat-editor-form select:focus,
.bat-editor-form textarea:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14) !important;
    outline: none !important;
}

/* Tables and row action alignment. */
.bat-table,
.pathogen-table,
.alpha-table,
.oh-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 12px !important;
}

.bat-table th,
.pathogen-table th,
.alpha-table th,
.oh-table th {
    height: 34px !important;
    background: #eef6ff !important;
    color: #06204b !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

.bat-table td,
.pathogen-table td,
.alpha-table td,
.oh-table td {
    min-height: 38px !important;
    height: 38px !important;
    border-bottom: 1px solid #edf2f7 !important;
    color: var(--oh-final-text) !important;
    vertical-align: middle !important;
}

.oh-row-actions,
.bat-row-actions,
.pathogen-row-actions,
.alpha-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Pager final baseline: same height and spacing across center panes. */
.oh-fixed-pager,
.oh-pager,
.bat-pager,
.pathogen-pager,
.alpha-pager,
.pager,
.pagination {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    padding: 6px 0 !important;
}

.oh-pager .page-info,
.bat-pager .page-info,
.pathogen-pager .page-info,
.alpha-pager .page-info,
.pager .page-info,
.pagination .page-info {
    min-height: var(--oh-final-control-sm-h) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    border: 1px solid #dbeafe !important;
    color: var(--oh-final-primary) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

/* Modals: keep all create/update/delete flows as overlay popups, not inline management pages. */
.oh-modal-backdrop,
.bat-modal-backdrop,
.alpha-modal-backdrop,
.pathogen-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    background: rgba(15, 23, 42, .42) !important;
    backdrop-filter: blur(2px) !important;
}

.oh-modal,
.bat-modal,
.alpha-modal,
.pathogen-modal {
    width: min(720px, calc(100vw - 36px)) !important;
    max-height: calc(100vh - 36px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .26) !important;
}

.oh-modal-header,
.bat-modal-header,
.alpha-modal-header,
.pathogen-modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
    border-bottom: 1px solid #dbeafe !important;
}

.oh-modal-body,
.bat-modal-body,
.alpha-modal-body,
.pathogen-modal-body {
    overflow: auto !important;
    padding: 16px !important;
}

.oh-modal-actions,
.bat-modal-actions,
.alpha-modal-actions,
.pathogen-modal-actions,
.oh-modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #dbeafe !important;
}

/* Compact screens used in demonstrations. */
@media (max-width: 1380px) {
    .bat-kpi-strip,
    .pathogen-kpi-strip,
    .alpha-kpi-strip,
    .oh-kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .bat-one-screen,
    .pathogen-one-screen,
    .alpha-one-screen {
        grid-template-columns: minmax(220px, 24%) minmax(460px, 1fr) minmax(260px, 27%) !important;
    }
}

@media (max-width: 1100px) {
    .bat-kpi-strip,
    .pathogen-kpi-strip,
    .alpha-kpi-strip,
    .oh-kpi-strip,
    .bat-one-screen,
    .pathogen-one-screen,
    .alpha-one-screen {
        grid-template-columns: 1fr !important;
    }

    .oh-page-filter-strip .filter-actions,
    .oh-page-filter-strip .bat-center-search-actions,
    .oh-page-filter-strip .ac-filter-actions,
    .oh-page-filter-strip .pa-filter-actions,
    .map-filter-strip .filter-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}