/* ═══════════════════════════════════════════════════════════════
   HMS Custom Styles — ST MED & ST MARY CLINIC
   Sierra Leone Healthcare ERP
═══════════════════════════════════════════════════════════════ */

:root {
    --hms-primary:        #0096C7;
    --hms-primary-dark:   #0077a0;
    --hms-primary-light:  #e0f4fb;
    --hms-secondary:      #0096C7;
    --hms-success:        #2e7d32;
    --hms-warning:        #f57c00;
    --hms-error:          #D61F2C;
    --hms-danger:         #D61F2C;
    --hms-bg:             #f5f7f9;
    --hms-surface:        #ffffff;
    --hms-text:           #1F2937;
    --hms-sidebar-width:  260px;
}

/* ── Global ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { font-family: 'Inter', 'Roboto', sans-serif; background: var(--hms-bg); }

/* ── Sidebar Nav ─────────────────────────────────────────────── */
.mud-nav-link.active {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    font-weight: 600;
}
.mud-nav-link:hover {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

/* ── Cards ───────────────────────────────────────────────────── */
.rounded-lg { border-radius: 12px !important; }
.rounded-xl { border-radius: 16px !important; }

/* ── Tables ──────────────────────────────────────────────────── */
.mud-table-row:hover { background: rgba(0,150,199,0.05) !important; cursor: pointer; }

/* ── Chips ───────────────────────────────────────────────────── */
.mud-chip { font-weight: 500 !important; }

/* ── Page fade-in ────────────────────────────────────────────── */
.mud-main-content { animation: fadeIn 0.2s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ── Form inputs ─────────────────────────────────────────────── */
.mud-input-outlined .mud-input-outlined-border { border-radius: 8px !important; }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #bdbdbd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; }

/* ── VIP patient row ─────────────────────────────────────────── */
.vip-row { background: linear-gradient(90deg, rgba(255,193,7,0.05), transparent) !important; }

/* ── Dashboard chart bars ────────────────────────────────────── */
.chart-bar-primary { background: linear-gradient(180deg, #0096C7, #00b4ed) !important; }
.chart-bar-success { background: linear-gradient(180deg, #2e7d32, #66bb6a) !important; }

/* ── Badge pulse animation ───────────────────────────────────── */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.alert-pulse { animation: pulse 2s ease-in-out infinite; }

/* ── Loading shimmer ─────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ══════════════════════════════════════════════════════════════
   SCREEN-ONLY: print-related elements hidden during normal view
═══════════════════════════════════════════════════════════════ */

.print-only           { display: none !important; }
.print-brand-header   { display: none; }
.thermal-receipt      { display: none; }

/* ══════════════════════════════════════════════════════════════
   PRINT STYLES — A4 professional document layout
   Applied when user clicks Print / Ctrl+P / window.print()
═══════════════════════════════════════════════════════════════ */

@media print {

    /* ── Page setup ────────────────────────────────────────────── */
    @page {
        size: A4 portrait;
        margin: 15mm 18mm 18mm 18mm;
    }

    /* ── Reset body ────────────────────────────────────────────── */
    html, body {
        background: white !important;
        color: black !important;
        font-size: 11pt;
        font-family: 'Inter', Arial, sans-serif;
    }

    /* ── Hide UI chrome ─────────────────────────────────────────── */
    .mud-drawer,
    .mud-appbar,
    .mud-fab,
    .no-print,
    .mud-snackbar-location,
    [class*="quick-action"],
    .mud-dialog-container { display: none !important; }

    /* ── Reset layout for print ─────────────────────────────────── */
    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        animation: none !important;
    }

    .mud-container { max-width: none !important; padding: 0 !important; }
    .mud-paper { box-shadow: none !important; border: 1px solid #e0e0e0; }

    /* ── Show print-only elements ───────────────────────────────── */
    .print-only         { display: block !important; }
    .print-brand-header { display: flex !important; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2.5px solid #0096C7; }

    /* ── Typography ─────────────────────────────────────────────── */
    h1, .mud-typography-h1 { font-size: 20pt !important; }
    h2, .mud-typography-h2 { font-size: 16pt !important; }
    h3, .mud-typography-h3 { font-size: 14pt !important; }
    h5, .mud-typography-h5 { font-size: 13pt !important; }
    h6, .mud-typography-h6 { font-size: 11pt !important; }
    p, .mud-typography-body1, .mud-typography-body2 { font-size: 10pt !important; }
    .mud-typography-caption { font-size: 9pt !important; }

    /* ── Tables ─────────────────────────────────────────────────── */
    table, .mud-table { border-collapse: collapse !important; width: 100% !important; }
    thead, .mud-table-head { background: #f5f5f5 !important; }
    th, .mud-table-cell[role="columnheader"] {
        border: 1px solid #d0d0d0 !important;
        padding: 5px 8px !important;
        font-size: 9.5pt !important;
        font-weight: 700 !important;
        text-align: left !important;
        color: #333 !important;
    }
    td, .mud-table-cell {
        border: 1px solid #e0e0e0 !important;
        padding: 5px 8px !important;
        font-size: 9.5pt !important;
        color: #222 !important;
    }

    /* ── Page breaks ─────────────────────────────────────────────── */
    .page-break-before { page-break-before: always; }
    .page-break-after  { page-break-after: always; }
    .no-break          { page-break-inside: avoid; }
    tr { page-break-inside: avoid; }

    /* ── Chips / badges ─────────────────────────────────────────── */
    .mud-chip { border: 1px solid #aaa !important; background: #f5f5f5 !important; color: #333 !important; }

    /* ── MudGrid in print ───────────────────────────────────────── */
    .mud-grid { display: block !important; }
    .mud-grid-item { display: block !important; width: 100% !important; max-width: 100% !important; }

    /* ── Colors in print (avoid ink waste) ──────────────────────── */
    .mud-primary-text  { color: #0096C7 !important; }
    .mud-success-text  { color: #2e7d32 !important; }
    .mud-error-text    { color: #D61F2C !important; }

    /* ── Print-specific invoice total block ─────────────────────── */
    .invoice-totals { border-top: 2px solid #333; margin-top: 8px; padding-top: 8px; }
    .invoice-total-row { display: flex; justify-content: space-between; padding: 3px 0; }
    .invoice-grand-total { font-weight: 700; font-size: 12pt; border-top: 1.5px solid #333; padding-top: 5px; }
}

/* ══════════════════════════════════════════════════════════════
   THERMAL RECEIPT — 80mm thermal printer layout
   Use class="thermal-receipt" on the receipt component
═══════════════════════════════════════════════════════════════ */

.thermal-receipt-preview {
    width: 300px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    background: white;
    padding: 12px;
    border: 1px dashed #bbb;
    border-radius: 4px;
}

@media print {
    .thermal-receipt-preview {
        width: 80mm;
        border: none;
        padding: 0;
        font-size: 10px;
    }
}