/**
 * EMR Correctional Healthcare — Compiled Overrides
 * =================================================
 * Compiled from: ui/emr-scss/emr-overrides.scss
 *   imports: _emr-variables.scss, _emr-correctional.scss
 *
 * Default branding colors (overridden at runtime via Layout::renderBrandingCss):
 *   Primary:   #1F5FAF
 *   Secondary: #5BAE2E
 */

/* -------------------------------------------------------------------------
   Default branding (compile-time) — overridden per-tenant at runtime
   ------------------------------------------------------------------------- */
:root {
    --vz-primary: #1F5FAF;
    --vz-primary-rgb: 31, 95, 175;
    --vz-secondary: #5BAE2E;
    --vz-secondary-rgb: 91, 174, 46;
}

/* -------------------------------------------------------------------------
   Sidebar override
   ------------------------------------------------------------------------- */
[data-sidebar="dark"] .navbar-menu {
    background-color: #171818;
}
[data-sidebar="dark"] .navbar-brand-box {
    background-color: #171818;
}

/* -------------------------------------------------------------------------
   Patient status badges (Velzon badge-soft equivalents via CSS vars)
   ------------------------------------------------------------------------- */
.badge-status-booked {
    color: var(--vz-primary);
    background-color: rgba(var(--vz-primary-rgb), 0.1);
}
.badge-status-active {
    color: var(--vz-success);
    background-color: rgba(var(--vz-success-rgb), 0.1);
}
.badge-status-released {
    color: var(--vz-secondary);
    background-color: rgba(var(--vz-secondary-rgb), 0.1);
}
.badge-status-transferred {
    color: var(--vz-warning);
    background-color: rgba(var(--vz-warning-rgb), 0.1);
}
.badge-status-deceased {
    color: var(--vz-dark);
    background-color: rgba(var(--vz-dark-rgb), 0.1);
}

/* -------------------------------------------------------------------------
   MRN display — monospaced for readability
   ------------------------------------------------------------------------- */
.mrn-display {
    font-family: monospace;
    font-size: 0.9em;
    letter-spacing: 0.05em;
}

/* -------------------------------------------------------------------------
   Medication pass — status colors
   ------------------------------------------------------------------------- */
.med-pass-status-given   { color: var(--vz-success); }
.med-pass-status-refused { color: var(--vz-danger); }
.med-pass-status-held    { color: var(--vz-warning); }
.med-pass-status-not-due { color: var(--vz-secondary); }

/* -------------------------------------------------------------------------
   Clinical data density — tighter table rows for MAR/med pass views
   ------------------------------------------------------------------------- */
.table-clinical {
    font-size: 0.8125rem;
}
.table-clinical td,
.table-clinical th {
    padding: 0.4rem 0.6rem;
}

/* -------------------------------------------------------------------------
   Controlled substance indicator
   ------------------------------------------------------------------------- */
.controlled-substance-badge::before {
    content: "C-II";
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--vz-danger);
    border: 1px solid var(--vz-danger);
    border-radius: 3px;
    padding: 0 3px;
    margin-right: 4px;
    vertical-align: middle;
}

/* -------------------------------------------------------------------------
   Permission level pills (used in role/permission views)
   ------------------------------------------------------------------------- */
.perm-none {
    color: var(--vz-secondary);
    background-color: rgba(var(--vz-secondary-rgb), 0.1);
}
.perm-read {
    color: var(--vz-info);
    background-color: rgba(var(--vz-info-rgb), 0.1);
}
.perm-write {
    color: var(--vz-primary);
    background-color: rgba(var(--vz-primary-rgb), 0.1);
}
.perm-delete {
    color: var(--vz-danger);
    background-color: rgba(var(--vz-danger-rgb), 0.1);
}

/* =========================================================================
   EMR Density Overrides — Compact layout for data-heavy correctional EHR
   ========================================================================= */

.navbar-header {height:49px;}
.header-item {height:49px;}
.card-header-tabs {margin-bottom:0;}
.footer {border-top:1px solid var(--vz-header-border);}

/* ── Card density ──────────────────────────────────────────────────────── */
.card {
    --vz-card-spacer-y: 0.625rem;
    --vz-card-spacer-x: 0.75rem;
    margin-bottom: 0.75rem;
}
.card-header {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}
.card-footer {
    padding: 0.375rem 0.75rem;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
.page-content {padding:calc(60px + 0.75rem) 0.5rem 70px 0.5rem !important;}
.page-title-box {
    padding-bottom: 0.5rem !important;
    /*margin-bottom: 0 !important;*/
}

/* ── Tables (global tighter) ───────────────────────────────────────────── */
.table > :not(caption) > * > * {
    padding: 0.35rem 0.5rem;
}
.table {
    font-size: 0.8rem;
}
.table thead th {
    font-size: 0.725rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Buttons / badges / forms ──────────────────────────────────────────── */
.btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}
.badge {
    font-size: 0.7rem;
    padding: 0.2em 0.45em;
}
.form-control-sm,
.form-select-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    min-height: 28px;
}
.alert {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

/* =========================================================================
   EMR Utility Classes — Compact dashboard, MAR, and patient components
   ========================================================================= */

/* ── emr-stat-mini — ultra-compact stat card ───────────────────────────── */
.emr-stat-mini {
    text-align: center;
    padding: 0.5rem 0.375rem;
}
.emr-stat-mini .stat-icon {
    width: 28px;
    height: 28px;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.emr-stat-mini .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}
.emr-stat-mini .stat-label {
    font-size: 0.675rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--vz-secondary-color);
    margin-top: 0.125rem;
}

/* ── emr-page-header — compact page heading ────────────────────────────── */
.emr-page-header {
    margin-bottom: 0.75rem;
}
.emr-page-header h1,
.emr-page-header .h1 {
    font-size: 1.1rem;
    margin-bottom: 0;
}
.emr-page-header .subtitle {
    font-size: 0.75rem;
    color: var(--vz-secondary-color);
}

/* ── emr-dash-grid — 3-column dashboard grid ───────────────────────────── */
.emr-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 991.98px) {
    .emr-dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .emr-dash-grid { grid-template-columns: 1fr; }
}

/* ── MAR split-pane — patient list + medications ───────────────────────── */
.mar-split-pane {
    display: flex;
    min-height: calc(100vh - 200px);
    gap: 0.75rem;
}
.mar-patient-list {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
}
.mar-patient-item {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.1s;
}
.mar-patient-item:hover {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.04);
}
.mar-patient-item.active {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.08);
    border-left: 3px solid var(--vz-primary, #405189);
}
.mar-patient-item .patient-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.mar-patient-item .patient-name {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}
.mar-patient-item .patient-meta {
    font-size: 0.7rem;
    color: var(--vz-secondary-color);
}
.mar-patient-item .med-count {
    margin-left: auto;
    flex-shrink: 0;
}
.mar-medications-panel {
    flex: 1;
    overflow-y: auto;
}

/* ── emr-med-card — medication card (not table row) ────────────────────── */
.emr-med-card {
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.emr-med-card .med-name {
    font-size: 0.8125rem;
    font-weight: 600;
}
.emr-med-card .med-details {
    font-size: 0.725rem;
    color: var(--vz-secondary-color);
}

/* ── emr-patient-header — dense patient header card ────────────────────── */
.emr-patient-header .card-body {
    padding: 0.625rem;
}
.emr-patient-header .patient-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.emr-patient-header h1,
.emr-patient-header .h1 {
    font-size: 1rem;
    margin-bottom: 0;
}

/* ── emr-allergy-banner ────────────────────────────────────────────────── */
.emr-allergy-banner {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

/* ── emr-stats-bar — inline stat strip ─────────────────────────────────── */
.emr-stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    padding: 0.375rem 0;
    margin-bottom: 0.75rem;
}

/* ── emr-section-title — small section heading ─────────────────────────── */
.emr-section-title {
    font-size: 0.725rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--vz-border-color, #e9ebec);
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
    color: var(--vz-secondary-color);
}

/* ── emr-quick-links — 2-col grid links ────────────────────────────────── */
.emr-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}
.emr-quick-links a {
    display: block;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--vz-border-color, #e9ebec);
    border-radius: 0.375rem;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.1s;
}
.emr-quick-links a:hover {
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), 0.06);
}

/* ── Progress thin variant ─────────────────────────────────────────────── */
.progress-thin {
    height: 4px;
}

/* ── emr-pass-footer — sticky bottom bar ───────────────────────────────── */
.emr-pass-footer {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--vz-border-color, #e9ebec);
    background: var(--vz-card-bg, #fff);
    padding: 0.375rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ── Online/Offline Connectivity Indicator ─────────────────────────────── */
.emr-connectivity {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: default;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
}
.emr-connectivity.online {
    background-color: rgba(91, 174, 46, 0.12);
    color: #5BAE2E;
}
.emr-connectivity.offline {
    background-color: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    animation: offline-pulse 2s ease-in-out infinite;
}
.emr-connectivity .connectivity-icon {
    font-size: 0.875rem;
    line-height: 1;
}
.emr-connectivity .connectivity-badge {
    font-size: 0.6rem;
    padding: 0.1em 0.35em;
    min-width: 1rem;
    text-align: center;
    margin-left: 0.125rem;
}
@keyframes offline-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}