/* ========================================
   CSS Variables (Single :root block)
   ======================================== */
:root {
    --colifegreen: #26bfb8;
    --colifegray: #575757;
    --colifeorange: #fba618;
    --colifegold: #faa61a;
    --colifeblack: #2e2d2d;
    --colifeheader: #ced3dd;
    --qmsgreen: #05000e;
    --qmsgray: #575757;
    --qmsorange: #fba618;
    --qmsgold: #c99ecf;
    --qmsblack: #2e2d2d;
    --qmsbar: #3b3b3b;
    --appbar-height: 128px;
    --footer-height: 64px;
}

/* ========================================
   Base & Reset
   ======================================== */
html, body { font-family: Vazirmatn, sans-serif; font-variant-numeric: lining-nums; overflow-x: hidden !important; height: 100%; }
main { height: 100%; }
h1, h2, h3, h4, h5, h6, p { font-family: Vazirmatn !important; }
p { font-size: .8rem !important; }
span, mudpaper, mudlink, a { margin: 0; padding: 0; font-family: vazirmatn !important; font-size: 14px; word-spacing: -1px; height: 100%; }
option { font-family: vazirmatn, Tahoma !important; }
input[inputmode="numeric"] { font-family: 'Vazirmatn', sans-serif !important; }
h1:focus { outline: none; }
::-webkit-scrollbar-button { display: none !important; }

/* ========================================
   Layout & Direction
   ======================================== */
.content { padding-top: 1.1rem; }
.col { height: 100% !important; margin: 0; }
.ltr { direction: ltr !important; }
.dirrtl { direction: rtl !important; text-align: start; }
.rtl-caption { direction: rtl !important; text-align: left; }
.txc, .align-center { text-align: center !important; }
.full-height { height: 100%; display: flex; flex-direction: column; }

/* ========================================
   App Loading
   ======================================== */
.app-loading { position: fixed; inset: 0; background: #f7f7f7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 9999; transition: opacity .2s ease; }
.app-loading__spinner { width: 52px; height: 52px; border: 4px solid rgba(0, 0, 0, 0.08); border-top-color: var(--colifegreen); border-radius: 50%; animation: app-loading-spin 1s linear infinite; }
.app-loading__title { font-size: 1rem; color: var(--qmsgray); }
.app-loading__skeleton { width: 240px; height: 12px; background: linear-gradient(90deg, #f0f0f0, #e2e2e2, #f0f0f0); background-size: 400px 100%; border-radius: 8px; animation: app-loading-shimmer 1.2s ease-in-out infinite; }
.app-loading__skeleton--wide { width: 320px; }

@keyframes app-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes app-loading-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}

/* ========================================
   Text Colors
   ======================================== */
.text-violet { color: #c80fa2 !important; }
.text-green { color: green; }
.text-cyan { color: #0ff !important; }
.text-blue { color: blue !important; }
.text-red { color: red !important; }
.text-qmsblack { color: var(--qmsblack); }
.text-qmsgray { color: var(--qmsgray); }
.text-qmsgreen { color: var(--qmsgreen); }
.text-qmsgold { color: var(--qmsgold); }
.text-english-bold { font-weight: 700; }
.text-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ========================================
   Background Colors - Utility
   ======================================== */
.bg-silver { background: #f1f6c1; }
.bg-yellow { background: #ff0 !important; padding: 2px; border-radius: 3px; }
.bg-green { background: green; }
.bg-nika { background: #faf0fd !important; }
.bg-caption { background-color: #f1f6c1 !important; }
.bg-header { background-color: #ffe4c4 !important; }
.bg-rt { background-color: #bbdefb; }
.bggreen { background: lime; }
.bgyellow { background: #ff0; }

/* ========================================
   Background Colors - Laboratory
   ======================================== */
.bias-bg { background-color: #FFF6E5 !important; }
.cv-bg { background-color: #E8F8FF !important; }
.totalerror-bg { background-color: #F9F0FF !important; }
.sigma-bg { background-color: #E9FFF0 !important; }
.repeatability-bg { background-color: #FFF1F3 !important; }
.Getweenrun-bg { background-color: #F4FFF7 !important; }
.withinlab-bg { background-color: #F5F9FF !important; }
.longterm-bg { background-color: #FFF9E8 !important; }
.minmeasure-bg { background-color: #F7F7FF !important; }
.maxmeasure-bg { background-color: #EFFFFB !important; }
.lab-bg { padding: 8px 12px; border-radius: 6px; }

/* ========================================
   Background Colors - Light Shades
   ======================================== */
.bg-5x-light-yellow { background: #FFFEF5 !important; }
.bg-4x-light-yellow { background: #FFFDE7 !important; }
.bg-3x-light-yellow { background: #FFF9C4 !important; }
.bg-2x-light-yellow { background: #FFF59D !important; }
.bg-1x-light-yellow { background: #FFF176 !important; }
.bg-5x-light-purple, .bg-4x-light-purple { background: #F3E5F5 !important; }
.bg-3x-light-purple { background: #E1BEE7 !important; }
.bg-2x-light-purple { background: #CE93D8 !important; }
.bg-1x-light-purple { background: #BA68C8 !important; }
.bg-5x-light-green { background: #F2FBF2 !important; }
.bg-4x-light-green { background: #E8F5E9 !important; }
.bg-3x-light-green { background: #C8E6C9 !important; }
.bg-2x-light-green { background: #A5D6A7 !important; }
.bg-1x-light-green { background: #81C784 !important; }
.bg-5x-light-orange { background: #FFF8F0 !important; }
.bg-4x-light-orange { background: #FFF3E0 !important; }
.bg-3x-light-orange { background: #FFE0B2 !important; }
.bg-2x-light-orange { background: #FFCC80 !important; }
.bg-1x-light-orange { background: #FFB74D !important; }
.bg-5x-light-blue { background: #fffbf0 !important; }
.bg-4x-light-blue { background: #E3F2FD !important; }
.bg-3x-light-blue { background: #BBDEFB !important; }
.bg-2x-light-blue { background: #90CAF9 !important; }
.bg-1x-light-blue { background: #64B5F6 !important; }
.bg-5x-light-magenta { background: #FEF4F8 !important; }
.bg-4x-light-magenta { background: #FCE4EC !important; }
.bg-3x-light-magenta { background: #F8BBD0 !important; }
.bg-2x-light-magenta { background: #F48FB1 !important; }
.bg-1x-light-magenta { background: #F06292 !important; }

/* ========================================
   Row & Value Colors
   ======================================== */
.gold-row { background-color: #FFE082 !important; }
.pink-row { background-color: #FFC1E3 !important; }
.clicked-row { background-color: #e0f7fa; }
.low-value { background-color: #D3E3F5 !important; color: #000; }
.normal-value { background-color: #DDF5CC !important; color: #000; }
.high-value { background-color: #FDE3CC !important; color: #000; }
.bg-low-row { background-color: #E9F1FA !important; }
.bg-normal-row { background-color: #EFFAE5 !important; }
.bg-high-row { background-color: #FEF0E3 !important; }

/* ========================================
   Panels
   ======================================== */
.blue-panel { min-height: 400px; background-color: #D3E3F5 !important; }
.peach-panel { min-height: 400px; background-color: #FDE3CC !important; }
.green-panel { min-height: 400px; background-color: #DDF5CC !important; }
.silver-panel { min-height: 300px; background-color: lightgray !important; }
.orange-panel { min-height: 300px; background-color: #f5deb3 !important; }
.ctrl-panel { min-height: 380px !important; }

/* ========================================
   Links & Buttons
   ======================================== */
a, .btn-link { color: #006bb7; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .1rem white, 0 0 0 .25rem #258cfb; }

/* ========================================
   Validation
   ======================================== */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #dc3545; font-size: 11px; }

/* ========================================
   MudBlazor - General
   ======================================== */
.mud-drawer-header { padding: 0; margin-bottom: 1rem; }
.mud-picker-inline { flex: unset; position: relative; }
.mud-container { max-width: 2800px; padding-top: 0; padding-right: 15px; }
.mud-ripple-checkbox { padding: 0 !important; }
.mud-badge { margin: 5px; }
.mud-toolbar { height: 48px !important; margin-right: 3px;}
.mud-divider-fullwidth { margin-top: 1px; margin-bottom: 1px; border-color: #add8e6; border-width: thin !important; }
.mud-snackbar-location-top-center { top: 30% !important; }

/* ========================================
   MudBlazor - Input
   ======================================== */
.mud-input { font-family: Vazirmatn !important; font-size: 12px !important; padding: 1px; }
.mud-input::placeholder { background-color: #fff; color: #258cfb; }
.mud-input.mud-input-underline::before { border-bottom: 1px solid #e7f5f8 !important; }
.mud-input-adornment-end { margin-inline-end: .5rem; }
.mud-input-numeric-spin { visibility: hidden; font-family: Vazirmatn !important; }
.mud-input-label { padding: 4px !important; }
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol { font-size: 12px !important; border-radius: 5px; padding: 2px; top: -4px; }
.mudformcontrol { border: 1px solid silver; border-radius: 4px; }

/* ========================================
   MudBlazor - Dialog
   ======================================== */
.mud-dialog { border-radius: 12px !important; }
.mud-dialog .mud-dialog-title { background-color: var(--colifeheader); height: 30px; }
.mud-dialog .mud-dialog-title .mud-button-close { top: 4px; left: 12px; right: unset; padding: 3px; }
.mud-dialog-title { padding: 8px 18px 1px 12px !important; background-color: #dcdcdc; color: navy; }
.mud-dialog-content { padding: 8px 18px 1px 12px !important; overflow-x: hidden !important; }

/* ========================================
   MudBlazor - Table
   ======================================== */
.mud-table td, .mud-table th { border: 1px solid #eee; }
.mud-table-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell { background-color: #fffff0; }
.mud-table-container { padding: 0; padding-bottom: 14px; max-height: calc(80vh - var(--appbar-height)); }
.mud-table-pagination-toolbar { border-top: 0 solid; flex-flow: row-reverse !important; gap: 1rem; }
.mud-table-cell { height: 35px !important; font-size: .7rem !important; padding: 7px 7px 0 0; }
.mud-table-head { background-color: #fffaf0; }
.mud-table-row-expander { margin: 1rem; }
.pointer-rows .mud-table-row { cursor: pointer !important; }

/* ========================================
   MudBlazor - DataGrid
   ======================================== */
.mud-data-grid, .mud-table { border-radius: 12px; overflow: hidden; background-color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); }
.mud-data-grid .mud-table-head, .mud-table-head { background-color: #f5f7fa; }
.mud-data-grid .mud-table-cell, .mud-table-cell { border-color: #e9edf3; }
.mud-data-grid .mud-table-body .mud-table-row:nth-child(even), .mud-table-body .mud-table-row:nth-child(even) { background-color: #fafcfe; }
.mud-data-grid .mud-table-body .mud-table-row:hover, .mud-table-body .mud-table-row:hover { background-color: #edf7f7; }
.mud-data-grid .mud-data-grid-toolbar { background-color: #f5f7fa; border-bottom: 1px solid #e9edf3; }
.mud-data-grid .mud-data-grid-toolbar .mud-typography { font-weight: 600; }

.mud-theme-dark .mud-data-grid, .mud-theme-dark .mud-table { background-color: #1f2327; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.mud-theme-dark .mud-data-grid .mud-table-head, .mud-theme-dark .mud-table-head { background-color: #2a2f35; }
.mud-theme-dark .mud-data-grid .mud-table-cell, .mud-theme-dark .mud-table-cell { border-color: #2f3640; }
.mud-theme-dark .mud-data-grid .mud-table-body .mud-table-row:nth-child(even), .mud-theme-dark .mud-table-body .mud-table-row:nth-child(even) { background-color: #242a30; }
.mud-theme-dark .mud-data-grid .mud-table-body .mud-table-row:hover, .mud-theme-dark .mud-table-body .mud-table-row:hover { background-color: #2d353d; }
.mud-theme-dark .mud-data-grid .mud-data-grid-toolbar { background-color: #2a2f35; border-bottom-color: #2f3640; }
/* ========================================
   MudBlazor - Tabs
   ======================================== */
.mud-tabs { border-radius: 3px !important; margin-top: 8px;}
.mud-tabs-rounded { background: #e1f9fb; }
.mud-tab { font-size: 12px !important; font-weight: 500 !important; }
.mud-tab-active { font-size: 12px !important; color: red !important; font-weight: 700 !important; }
.mud-tabs-panels { padding-top: .7rem; overflow: auto; }
.mud-tab mud-ripple { min-width: 1px; }
.mud-tabs .mud-tab .mud-tab-indicator { right: 0 !important; left: auto !important; transform: none !important; }
.mud-expand-panel-text { font-size: 12px !important; }

/* ========================================
   MudBlazor - Typography
   ======================================== */
.mud-typography-body1 { font-size: .8rem !important; }
.mud-typography-body2 { font-size: .8rem !important; padding: 0; }
.mud-typography-h6 { font-size: 1rem !important; }
.mud-typography-subtitle1 { color: blue; }
.mud-nav-link-text { font-size: .75rem !important; padding-top: 4px; margin-inline-start: 10px !important; }
.mud-nav-link-icon{ color: darkblue !important;}
/* ========================================
   MudBlazor - Icons & Buttons
   ======================================== */
.mud-icon-size-small {
    font-size: 1rem !important;
    margin: 2px;
}
.mud-icon-size-medium { font-size: 1.15rem !important; }
.mud-icon-size-large { font-size: 2rem !important; margin: 4px !important; }
.mud-icon-button { padding: 2px; border-radius: 8px !important; }
.mud-button-filled-size-medium { padding: .5rem; }
.mud-button-label { margin: 0; font-size: .8rem !important; }
.mud-button-group-text.mud-button-group-override-styles.mud-button-group-horizontal.mud-button-group-rtl .mud-button-root:not(:first-child),
.mud-button-group-text.mud-button-group-override-styles.mud-button-group-horizontal.mud-button-group-rtl > :not(:first-child) .mud-button-root { border-color: #fff; }

/* ========================================
   MudBlazor - TreeView
   ======================================== */
.mud-treeview-item { font-size: .75rem; justify-content: end; margin: 0; border-radius: 20px; }
.mud-treeview-item-arrow { margin-top: 0; margin-bottom: 8px; }
.tree-item-highlighter { justify-self: start; margin-left: 5px !important; margin-right: 0 !important; margin-top: 3px !important; padding: 0 !important; }

/* ========================================
   MudBlazor - Grid
   ======================================== */
.mud-grid > .mud-item { display: flex; flex-direction: column; }
.mud-grid-spacing-xs-6 > .mud-grid-item { /*margin-top: 24px;*/ }
.mud-tooltip { background-color: var(--qmsgray) !important; color: #fff; border-radius: 4px; padding: 8px; }
.tooltip-inner { font-family: Vazirmatn; font-size: 11px; }

/* ========================================
   Column Headers
   ======================================== */
.sortable-column-header { font-size: .71rem !important; }
.column-header { font-size: .71rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: auto; }

/* ========================================
   Cards & Containers
   ======================================== */
.card { max-width: 400px; min-width: 280px; margin-left: 5%; margin-right: 5%; }
.centerdiv { max-width: 400px !important; min-width: 280px !important; margin: 5% !important; }
.error { max-width: 400px; min-width: 280px; }
.card-result { max-width: 100%; min-width: 400px; max-height: 85vh; margin: 0 1%; padding: 1rem; display: flex; flex-direction: column; height: 530px; }
.dashboard-container { padding-top: 1rem; }
.dashboard-grid { align-items: stretch; }
.dashboard-grid .mud-item { height: 100%; }
.dashboard-card { background-color: #fff; border: 1px solid #ececec; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); height: 100%; }
.dashboard-card-muted { background-color: #fafafa; }
.dashboard-card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.dashboard-card-title { color: var(--qmsblack); font-weight: 600; }
.dashboard-card-subtitle { color: var(--qmsgray); font-size: .75rem; }
.dashboard-card-body { display: flex; flex-direction: column; gap: .35rem; }
.dashboard-card-list { max-height: 260px; overflow: auto; }
.dashboard-card-compact { min-height: 180px; }
.dashboard-card-tall { min-height: 200px; }
.dashboard-accent-green { border-top: 3px solid #26bfb8; }
.dashboard-accent-blue { border-top: 3px solid #225fef; }
.dashboard-accent-amber { border-top: 3px solid #fba618; }
.dashboard-accent-purple { border-top: 3px solid #BA68C8; }
.dashboard-accent-magenta { border-top: 3px solid #F06292; }
.dashboard-accent-cyan { border-top: 3px solid #00BCD4; }
.dashboard-accent-dark { border-top: 3px solid #2e2d2d; }
.dashboard-accent-red { border-top: 3px solid #9d0b08; }
.dashboard-accent-nika { border-top: 3px solid #7d0ef6; }



/* ========================================
   Login & Center Layout
   ======================================== */
.login-wrapper { height: 100%; display: flex; flex-flow: column; justify-content: center; align-items: center; background-color: var(--qmsgray); }
.center-dialog-div { height: 100%; display: flex; flex-flow: column; justify-content: center !important; align-items: center !important; margin-top: 100px; }
.center-div { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; }

/* ========================================
   Form Elements
   ======================================== */
.data-text { border: 1px solid gray; border-radius: 4px; vertical-align: middle !important; text-align: center; margin: 5px 0; }
.forgot-gutter { --bs-gutter-x: 0 !important; }
.input-group-lg .custom-file-label { font-size: 1.4rem; margin: 0; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.custom-radio, .custom-checkbox { display: flex; align-items: center; margin-bottom: 10px; }
.custom-radio input[type="radio"], .custom-checkbox input[type="checkbox"] { margin-right: 10px; }
.custom-select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; background-color: #f9f9f9; transition: border-color .3s ease; }
.custom-select:focus { border-color: #007bff; outline: none; }

/* ========================================
   QC Flat Form
   ======================================== */
.qc-flat-form, qc-flat-group { direction: rtl; font-size: 12px; color: #000; max-width: 400px; margin: 6px; }
.qc-flat-row { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-flat-group { display: flex; align-items: center; justify-content: flex-start; gap: 4px; margin-bottom: 4px; }
.qc-flat-group span { font-size: 12px; text-align: right; margin-left: 10px; font-weight: 500; min-width: 60px; }
.qc-flat-readonly { height: 24px; border: 1px solid silver; background-color: #fff; font-size: 14px; padding: 0 4px; border-radius: 3px; width: 140px; padding-top: 4px; }
.qc-flat-input, .qc-flat-select { height: 24px; border: 1px solid silver; background-color: #fff; font-size: 12px; padding: 0 4px; border-radius: 3px; width: 140px; }
.qc-flat-input:focus, .qc-flat-select:focus { outline: none; border-color: #888; }
.qc-flat-button { margin-top: 6px; width: 100%; height: 24px; border: 1px solid silver; background-color: #f2f2f2; color: #000; font-size: 12px; cursor: pointer; transition: background-color 0.2s; }
.qc-flat-button:hover { background-color: #e0e0e0; }
.qc-flat-check, .qc-flat-radio { width: 16px; height: 16px; border: 1px solid silver; appearance: none; position: relative; cursor: pointer; background-color: #fff; }
.qc-flat-check:checked::after { content: ""; position: absolute; top: 1px; left: 5px; width: 5px; height: 10px; border: solid #000; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.qc-flat-radio { border-radius: 50%; }
.qc-flat-radio:checked::after { content: ""; position: absolute; top: 2px; left: 2px; width: 4px; height: 4px; background-color: #000; border-radius: 50%; }
.qc-flat-display { min-width: 50px; height: 22px; border: 1px solid silver; font-size: 12px; line-height: 24px; padding: 0 4px; background-color: #f9f9f9; color: #000; text-align: center; }
.form-group label { font-size: 11px; text-align: right; margin-left: 10px; font-weight: 500; }

/* ========================================
   Thin Grid & Items
   ======================================== */
.thingrid { padding: 6px 0 0 6px; margin: 0 0 0 3px; width: auto !important; }
.thinitem { padding-top: 4px !important; padding-left: 4px !important; }
.thinitem .mud-input input.mud-input-root-outlined,
.thinitem .mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end,
.thinitem .mud-input .mud-input-outlined .mud-input-outlined-with-label .mud-shrink .mud-typography-subtitle1 { padding: 12px 16px 4px 10px !important; font-size: 12px; }
.thinfield { margin-top: 8px; border: 1px solid silver; padding: 2px 4px 2px 2px; }
.thinitem .mud-input-label { font-size: 10px !important; color: #1861ac; }
.thinitem .mud-button-filled-size-medium { padding: 4px 6px; margin-top: 8px !important; width: 100% !important; }

/* ========================================
   Chips
   ======================================== */
.custom-chip { padding: 6px; border-radius: 8px; display: flex; flex-direction: column; gap: 8px; max-width: 300px; position: relative; height: 60px; background: ivory; }
.chip-select { width: 100%; padding: 1px; background: transparent; border-bottom: 1px solid silver; margin-bottom: 3px; }
.chip-header { display: flex; justify-content: space-between; align-items: end; padding-bottom: 4px; }
.chip-header-text { flex-grow: 1; text-align: right !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-header-actions { display: flex; gap: 8px; }
.chip-content { display: flex; gap: 2px; align-items: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-header-icon { margin: 0 0 2px 4px; }

/* ========================================
   Org Chart
   ======================================== */
.org-node { display: flex; flex-direction: column; align-items: center; position: relative; margin: 10px; }
.org-title { padding: 10px 20px; border: 1px solid #ccc; background-color: #f9f9f9; border-radius: 5px; text-align: center; min-width: 120px; box-shadow: 2px 2px 5px #00001a; }
.org-children { display: flex; justify-content: center; margin-top: 20px; position: relative; }
.org-child { display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 10px; }
.org-line, .org-connector { position: absolute; height: 20px; width: 100%; }
.org-line line, .org-connector line { stroke: #ccc; stroke-width: 2; }

/* ========================================
   Tables - Custom
   ======================================== */
.result-table-container { overflow-y: auto; overflow-x: auto; border: 1px solid #ddd; }
.result-custom-table { width: 100%; border-collapse: collapse; }
.result-custom-table th, .result-custom-table td { padding: 8px; border: 1px solid #ddd; text-align: left; }
.result-custom-table th { background-color: #f2f2f2; position: sticky; top: 0; }
.resultheader { display: flex; justify-content: space-between; align-items: center; }
.result-col { text-align: center; padding: 3px; }
.yellow-input { background-color: #ff0; border: none; width: 50px; text-align: center; }
.levey-table { width: 100%; border-color: silver; text-align: center; font-size: 10px; }
.levey-table th td { background: #e3f2fd; padding: 4px !important; }
.levey-table tr { height: 20px; }
.diagnosis-table, .comparison-table { width: 100%; border-collapse: collapse; text-align: center; direction: rtl; font-size: 16px; }
.diagnosis-table th, .diagnosis-table td, .comparison-table th, .comparison-table td { border: 1px solid #000; padding: 8px; }

/* ========================================
   Thin Editable Table
   ======================================== */
.thin-table-container { overflow: auto; max-width: 100%; margin: 10px; padding-bottom: 10px; max-height: 420px; position: relative; background-color: #fff; }
.thin-editable-table { border-collapse: collapse; width: 100%; font-family: Arial, sans-serif; }
.thin-editable-table th, .thin-editable-table td { white-space: nowrap; font-family: vazirmatn !important; font-size: 12px; border: 1px solid #ddd; padding: 4px; text-align: center; background-color: #fff; }
.thin-editable-table thead th { position: sticky; top: 0; padding: 6px; z-index: 2; }
.thin-editable-table th { background-color: #f8f8f8; position: sticky; z-index: 1; }
.thin-editable-table td input { width: 50px; box-sizing: border-box; border: none; padding: 4px; font-size: 12px; text-align: center; outline: none; color: #000; }
.thin-editable-table td input.silver { color: silver; }
.thin-editable-table td input:focus { background-color: #faafff; color: #000 !important; }

/* ========================================
   Compact Grid
   ======================================== */
.compact-grid .mud-table { direction: ltr !important; font-family: Arial !important; border-collapse: collapse; width: 100%; table-layout: auto; }
.compact-grid .mud-table td, .compact-grid .mud-table th { padding: 4px !important; border: 1px solid #ddd !important; text-align: left; font-size: .7rem; font-family: Arial !important; white-space: nowrap; }
.compact-grid .mud-table th { background-color: #f7f7f7; font-weight: 700; }
.compact-grid .mud-table-cell { font-size: .7rem; text-align: center; }

/* ========================================
   Round Tables
   ======================================== */
.round-table { border: 1px solid silver; border-radius: 5px; overflow: hidden; margin-top: 4px; background: #f0f8ff; }
.round-table table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.round-table thead { display: table; width: 100%; table-layout: fixed; }
.round-table tbody { display: block; max-height: 150px; overflow-y: auto; width: 100%; }
.round-table tbody tr { display: table; width: 100%; table-layout: fixed; }
.round-table th, .round-table td { padding: 4px; border-bottom: 1px solid silver; white-space: pre-line; word-wrap: break-word; word-break: break-word; background: white; }
.round-table th { background: #e6f2ff; }
.round-table th:last-child, .round-table td p { border-right: none; font-size: 10px !important; }
.round-table-1 { border: 1px solid silver; border-radius: 5px; overflow: hidden; margin: 4px 0 0 0; background: #f0f8ff; font-size: 11px !important; }
.round-table-1 table { border-collapse: collapse; width: 100%; table-layout: auto; background: transparent; }
.round-table-1 thead tr, .tbody-scroll tr { display: contents; width: 100%; table-layout: auto; }
.tbody-scroll { display: block; max-height: 250px; overflow-y: auto; }
.round-table-1 th, .round-table-1 td { padding: 8px; border-bottom: 1px solid silver; white-space: normal; background: white; font-size: 12px !important; }
.round-table-1 th:last-child, .round-table-1 td:last-child { border-right: none; }
.round-table-1 tr:last-child td { border-bottom: none; }

/* ========================================
   Fixed Dialog
   ======================================== */
.fixed-dialog .dialog-layout { display: flex; flex-direction: column; height: 80vh; max-height: 700px; }
.fixed-dialog-sm .dialog-layout-sm { display: flex; flex-direction: column; max-height: 700px; }
.fixed-dialog .dialog-title { flex-shrink: 0; padding: 8px; background-color: #fff; z-index: 1; }
.fixed-dialog .dialog-actions { flex-shrink: 0; padding: 8px; background-color: #fff; z-index: 1; display: flex; justify-content: flex-end; gap: 12px; }
.fixed-dialog .dialog-content { overflow-y: auto; flex-grow: 1; padding-left: 10px; overflow-x:hidden; }
.fixed-dialog .dialog-tabs { flex-shrink: 0; background-color: #fff; z-index: 1; margin-top: -8px; }

/* ========================================
   Utility Classes
   ======================================== */
.pagetitle { font-size: 13px !important; font-weight: 700 !important; }
.ip-notes { color: red !important; background-color: #faebd7; border-radius: 2px; padding: 2px; font-size: 10px; }
.me-auto { font-size: .7rem !important; }
.ics { font-size: 12px; }
.top-corner-round { border-radius: 5px 5px 0 0 !important; }
.radius-5 { border-radius: 5px; }
.bs-5 { border-radius: 5px; margin-top: 0 !important; }
.xs-hidden { visibility: hidden; }
.title-band { background: #f2fbf2; padding: 4px; border-radius: 4px; margin: 2px; }
.divider { border-color: #000; border-width: 1px; max-height: 20px; margin-top: 6px; }
#components-reconnect-modal, .components-reconnect-modal { display: none !important; }

/* ========================================
   Height & Scroll Utilities
   ======================================== */
.equal-height-A { display: flex; flex-direction: column; overflow: auto; height: 100%; }
.equal-height-B { display: flex; flex-direction: column; overflow: auto; height: 100% !important; max-height: 475px; }
.equal-height { display: flex; flex-direction: column; overflow: auto; max-height: 580px; }
.equal-height .mud-paper { flex: 1; display: flex; flex-direction: column; }
.scrollable-content { max-height: 800px; overflow-y: auto; padding: 16px; }
.fixed-actions { position: sticky; bottom: 0; background: #fff; padding: 16px; box-shadow: 0 -2px 5px #00001a; }

/* ========================================
   Navbar
   ======================================== */
.navbar { display: flex; align-items: center; justify-content: space-between; background-color: #333; padding: 0 1rem; height: 60px; color: #fff; position: relative; }
.navbar-logo a { color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 700; }
.navbar-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.menu-item { position: relative; }
.menu-item a { color: #fff; padding: 1rem; display: block; text-decoration: none; }
.menu-item:hover .mega-menu { display: flex; }

.mud-nav-group .mud-navmenu .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link{
    padding-left:0;
}
/* ========================================
   Image Preview
   ======================================== */
.img-viewport {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #f4f6f8;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}
.img-preview { max-width: 100%; max-height: 100%; user-select: none; pointer-events: none; }

/* ========================================
   Error Boundary
   ======================================== */
.blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA9My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: #fff; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ========================================
   Animations
   ======================================== */
.spinner1 { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 20px auto; }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

/* ========================================
   Media Queries (sorted by breakpoint)
   ======================================== */
@media print { .no-print { display: none; } }
@media (max-width: 440px) { .xs-hide { display: none; } .xs-show { display: block; } }
@media (min-width: 441px) { .xs-hide { display: block; } .xs-show { display: none; } }
@media (max-width: 450px) { .w-xs-100 { width: 100%; } }
@media (max-width: 766px) { .mobile-hide { display: none; } .mobile-show { display: block; } }
@media (min-width: 767px) { .mobile-hide { display: block; } .mobile-show { display: none; } .max-vh-60 { height: 60vh !important; overflow-y: auto !important; } }
@media (max-width: 1023px) { .sm-hieght-2 { max-height: 1200px !important; height: 1200px !important; } }
@media (min-width: 1024px) { .sm-hieght-2 { height: 80vh !important; overflow-y: auto !important; } }
@media (max-width: 1199px) { .max-vh { height: 80vh !important; overflow-y: auto !important; } }
@media (min-width: 1200px) { .max-vh { height: 80vh !important; overflow-y: auto !important; } }
@media (max-width: 2460px) { .btn-sm-30 { margin-top: 20px !important; } }
@media (max-height: 339px) { .fixed-dialog .dialog-layout { height: 60vh; } }
@media (max-height: 639px) { .fixed-dialog .dialog-layout { height: 70vh; } }
@media (min-height: 840px) { .fixed-dialog .dialog-layout { height: 85vh; } }
@media (min-height: 900px) { .fixed-dialog .dialog-layout { height: 90vh; } }

/* ========================================
   Sidebar
   ======================================== */
.sidebar-drawer {
    background: #f8f9fb;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
/*    max-width: 280px !important;
    width: auto !important;*/
}
.sidebar-header { padding: 1rem 1rem 0.5rem; border-bottom: 0px solid rgba(0, 0, 0, 0.06); }
.sidebar-logo { display: flex; align-items: center; justify-content: center; }
.sidebar-logo img { height: auto; }
.sidebar-nav { padding: 0.5rem 0.75rem 1rem; }
.sidebar-divider { margin: 0.75rem 0; border-color: rgba(0, 0, 0, 0.08); }
.sidebar-divider-thick { margin: 0.75rem 0; border-color: rgba(0, 0, 0, 0.12); border-width: 2px; }
.sidebar-nav .mud-nav-link { border-radius: 10px; margin: 0.15rem 0; padding: 0.45rem 0.75rem; font-weight: 400; color: black; }
.sidebar-nav .mud-nav-link:hover { background: rgba(38, 191, 184, 0.08); color: var(--qmsblack); }
.sidebar-nav .mud-nav-link.mud-nav-link-active { background: rgba(38, 191, 184, 0.16); color: var(--colifegreen); }
.sidebar-nav .mud-nav-link .mud-icon-root { margin-inline-end: 0.5rem; color: inherit; }
.sidebar-nav .mud-nav-group > .mud-nav-link { font-weight: 600; color: darkblue}

.mud-theme-dark .sidebar-drawer { background: #1f2023; border-right-color: rgba(255, 255, 255, 0.08); }
.mud-theme-dark .sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
.mud-theme-dark .sidebar-divider { border-color: rgba(255, 255, 255, 0.12); }
.mud-theme-dark .sidebar-divider-thick { border-color: rgba(255, 255, 255, 0.2); }
.mud-theme-dark .sidebar-nav .mud-nav-link { color: #e5e7eb; }
.mud-theme-dark .sidebar-nav .mud-nav-link:hover { background: rgba(38, 191, 184, 0.15); color: #e5e7eb; }
.mud-theme-dark .sidebar-nav .mud-nav-link.mud-nav-link-active { background: rgba(38, 191, 184, 0.25); color: #9fe5e2; }

/* ========================================
   Menu Search
   ======================================== */
.menu-search { background: #ffffff; }
.menu-search .mud-input-control { background: #f9fafb; border-radius: 10px; padding: 0.35rem; }
.menu-search .mud-input-root { padding: 0; }
.menu-search .mud-input-adornment-start { color: var(--qmsgray); }
.mud-theme-dark .menu-search { background: #1f2327; }
.mud-theme-dark .menu-search .mud-input-control { background: #2a2f35; }