/* ================================================
   App.css - Global Overrides
   ================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    background: var(--medical-bg, #f8fafc) !important;
}

/* Tabular numbers for clean, aligned numbers across tables, codes, dates, pagination */
table, .fluent-modern-table, .mabn-pill, .col-stt, .col-birth, .col-ngaychup, .col-mnv, .pagination-info, .highlight-count, input[type="number"], input[type="date"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv11" 1;
}

a, .btn-link {
    color: var(--medical-primary, #0ea5e9);
    text-decoration: none;
}

a:hover, .btn-link:hover {
    color: var(--medical-primary-dark, #0284c7);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--medical-text, #0f172a);
    font-weight: 600;
}

/* ===== Modal Performance - Disable Animations ===== */
.ant-modal,
.ant-modal-content,
.ant-modal-mask,
.ant-modal-wrap {
    animation: none !important;
    transition: none !important;
}

/* ===== Blazor Loading Indicator ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #333;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Error Boundary ===== */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ===== Form Validation ===== */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--medical-success, #10b981);
}

.invalid {
    outline: 1px solid var(--medical-danger, #ef4444);
}

.validation-message {
    color: var(--medical-danger, #ef4444);
    font-size: 12px;
}

/* ==========================================================================
   Fix modal clipping / Select2 & DatePicker hidden under modals
   ========================================================================== */
.fluent-modal-box, 
.modal-dialog-card {
    overflow: visible !important;
}

.fluent-modal-header,
.modal-dialog-header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}

.fluent-modal-footer,
.modal-dialog-footer {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    position: relative;
    z-index: 5;
}

/* Extra bottom padding inside modal bodies so bottom controls have room */
.fluent-modal-body,
.modal-dialog-body,
.modal-form-body {
    padding-bottom: 40px !important;
}

.form-section-card {
    overflow: visible !important;
}

/* Global Select2 / VietnameseSelect & DatePicker popover elevation */
.fluent-dropdown-backdrop,
.vn-datepicker-backdrop {
    z-index: 10040 !important;
}

.fluent-dropdown-menu,
.vn-calendar-popover {
    z-index: 10050 !important;
}