/* ChekHealth 2026 shared components (design system artboard 11). Class names are prefixed ck- so they never collide
   with Syncfusion's e- classes; the Syncfusion controls themselves are restyled at the bottom of this file. */

/* ---------- Buttons ---------- */
.ck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ck-space-2);
    min-height: var(--ck-control-sm);
    padding: 0 var(--ck-space-3);
    border: 1px solid var(--ck-border-strong);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
    color: var(--ck-ink);
    font: var(--ck-text-label);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.ck-btn:hover { border-color: var(--ck-primary); color: var(--ck-primary-hover); }
.ck-btn-primary { background: var(--ck-primary); border-color: var(--ck-primary); color: #fff; }
.ck-btn-primary:hover { background: var(--ck-primary-hover); border-color: var(--ck-primary-hover); color: #fff; }
.ck-btn-quiet { border-color: transparent; background: transparent; color: var(--ck-slate); }
.ck-btn-quiet:hover { background: var(--ck-primary-soft); border-color: transparent; }
.ck-btn-destructive { border-color: var(--ck-critical); color: var(--ck-critical-text); background: var(--ck-critical-soft); }
.ck-btn-destructive:hover { background: var(--ck-critical); color: #fff; border-color: var(--ck-critical); }
.ck-btn-md { min-height: var(--ck-control-md); }
.ck-btn-lg { min-height: var(--ck-control-lg); padding: 0 var(--ck-space-4); }
.ck-btn:disabled, .ck-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; background: var(--ck-canvas); color: var(--ck-slate); border-color: var(--ck-border); }
.ck-btn-primary:disabled { background: #9bbfc0; border-color: #9bbfc0; color: #fff; }

/* ---------- Status chips: always an icon glyph plus words, never colour alone ---------- */
.ck-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.05rem 0.55rem 0.05rem 0.35rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25rem;
    white-space: nowrap;
}
.ck-chip-glyph { font-size: 0.8em; line-height: 1; }
.ck-chip-neutral { background: #eef1f3; color: var(--ck-ink); border-color: var(--ck-border); }
.ck-chip-success { background: var(--ck-success-soft); color: var(--ck-success-text); }
.ck-chip-info { background: var(--ck-info-soft); color: var(--ck-info-text); }
.ck-chip-warning { background: var(--ck-warning-soft); color: var(--ck-warning-text); }
.ck-chip-critical { background: var(--ck-critical-soft); color: var(--ck-critical-text); }

/* ---------- Alerts and validation ---------- */
.ck-alert {
    display: flex;
    gap: var(--ck-space-3);
    align-items: flex-start;
    padding: var(--ck-space-3) var(--ck-space-4);
    border: 1px solid transparent;
    border-radius: var(--ck-radius-md);
    font-size: 0.875rem;
}
.ck-alert-glyph { font-weight: 700; flex: none; width: 1.25rem; text-align: center; }
.ck-alert-title { font-weight: 650; display: block; }
.ck-alert-success { background: var(--ck-success-soft); border-color: #bde5c8; color: var(--ck-success-text); }
.ck-alert-info { background: var(--ck-info-soft); border-color: #c4d7fb; color: var(--ck-info-text); }
.ck-alert-warning { background: var(--ck-warning-soft); border-color: #f4d49e; color: var(--ck-warning-text); }
.ck-alert-critical { background: var(--ck-critical-soft); border-color: #f3b4b4; color: var(--ck-critical-text); }

.ck-field-error { display: flex; gap: 0.35rem; margin-top: 0.25rem; color: var(--ck-critical-text); font-size: 0.8125rem; }
.ck-field-error::before { content: "!"; flex: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ck-critical); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1rem; text-align: center; }

/* ---------- Avatar and patient identity ---------- */
.ck-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ck-primary-soft);
    color: var(--ck-primary-hover);
    font-weight: 650;
    font-size: 0.8125rem;
}
.ck-avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.ck-avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }

.ck-identity { display: flex; align-items: center; gap: var(--ck-space-3); min-width: 0; }
.ck-identity-name { font-weight: 650; font-size: 1rem; line-height: 1.25rem; }
.ck-identity-meta { color: var(--ck-slate); font-size: 0.8125rem; }
.ck-identity-text { min-width: 0; }

/* ---------- Clinical-safety banners: icon + label + detail, whole row is the action ---------- */
.ck-safety {
    display: flex;
    align-items: center;
    gap: var(--ck-space-3);
    width: 100%;
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid transparent;
    border-radius: var(--ck-radius-md);
    text-align: left;
    font: inherit;
    cursor: default;
}
button.ck-safety, a.ck-safety { cursor: pointer; text-decoration: none; }
.ck-safety-glyph { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 0.9rem; color: #fff; }
.ck-safety-title { font-weight: 700; display: block; }
.ck-safety-detail { font-size: 0.8125rem; display: block; }
.ck-safety-allergy, .ck-safety-urgent, .ck-safety-contraindication { background: var(--ck-critical-soft); border-color: #f3b4b4; color: var(--ck-critical-text); }
.ck-safety-allergy .ck-safety-glyph, .ck-safety-urgent .ck-safety-glyph, .ck-safety-contraindication .ck-safety-glyph { background: var(--ck-critical); }
.ck-safety-abnormal, .ck-safety-caution { background: var(--ck-warning-soft); border-color: #f4d49e; color: var(--ck-warning-text); }
.ck-safety-abnormal .ck-safety-glyph, .ck-safety-caution .ck-safety-glyph { background: var(--ck-warning); }
.ck-safety-info { background: var(--ck-info-soft); border-color: #c4d7fb; color: var(--ck-info-text); }
.ck-safety-info .ck-safety-glyph { background: var(--ck-info); }
/* Contraindication gets a heavier border so it differs from an allergy without relying on colour. */
.ck-safety-contraindication { border-width: 2px; border-color: var(--ck-critical); }

/* ---------- Stat tiles ---------- */
.ck-stat {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: var(--ck-space-2) var(--ck-space-3);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
}
.ck-stat-value { font-size: 1.375rem; font-weight: 650; line-height: 1.75rem; font-variant-numeric: tabular-nums; }
.ck-stat-label { color: var(--ck-slate); font-size: 0.8125rem; }
.ck-stat-warning { background: var(--ck-warning-soft); border-color: #f4d49e; }
.ck-stat-info { background: var(--ck-info-soft); border-color: #c4d7fb; }
.ck-stat-success { background: var(--ck-success-soft); border-color: #bde5c8; }
.ck-stat-critical { background: var(--ck-critical-soft); border-color: #f3b4b4; }

/* ---------- Compact tables ---------- */
.ck-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.ck-table th { padding: 0.35rem var(--ck-space-3); text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--ck-slate); background: #f3f6f6; border-bottom: 1px solid var(--ck-border); }
.ck-table td { padding: 0.35rem var(--ck-space-3); border-bottom: 1px solid var(--ck-border); }
.ck-table tr[aria-selected="true"] td, .ck-table tr.ck-selected td { background: var(--row-selected); }
.ck-table tr[aria-selected="true"] td:first-child, .ck-table tr.ck-selected td:first-child { box-shadow: inset 3px 0 0 var(--ck-primary); }
.ck-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Inspector panel (side panel for the selected row) ---------- */
.ck-inspector {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--ck-surface);
    border-left: 1px solid var(--ck-border);
}
.ck-inspector-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ck-space-2); padding: var(--ck-space-3) var(--ck-space-4); border-bottom: 1px solid var(--ck-border); }
.ck-inspector-title { margin: 0; font-size: 1.125rem; font-weight: 650; }
.ck-inspector-body { flex: 1; min-height: 0; overflow: auto; padding: var(--ck-space-3) var(--ck-space-4); }

/* ---------- Collapsible rail ---------- */
.ck-rail { width: var(--ck-rail-width); flex: none; overflow: auto; background: var(--ck-surface); border-right: 1px solid var(--ck-border); transition: width 0.15s ease; }
.ck-rail.ck-rail-collapsed { width: 0; overflow: hidden; border-right: 0; }
.ck-rail-toggle { flex: none; width: 1.5rem; align-self: stretch; border: 0; background: var(--ck-canvas); border-right: 1px solid var(--ck-border); color: var(--ck-slate); cursor: pointer; }
.ck-rail-toggle:hover { background: var(--ck-primary-soft); color: var(--ck-primary-hover); }

/* ---------- Reserved action dock: stays in layout so content is never hidden behind it ---------- */
.ck-dock {
    display: flex;
    align-items: center;
    gap: var(--ck-space-2);
    flex: none;
    min-height: var(--ck-dock-height);
    padding: var(--ck-space-2) var(--ck-space-4);
    background: var(--ck-surface);
    border-top: 1px solid var(--ck-border);
}
.ck-dock-spacer { flex: 1; }
.ck-dock-context { display: flex; align-items: center; gap: var(--ck-space-3); min-width: 0; }

/* ---------- Segmented tabs ---------- */
.ck-segmented { display: inline-flex; border: 1px solid var(--ck-border-strong); border-radius: var(--ck-radius-md); overflow: hidden; background: var(--ck-surface); }
.ck-segmented > button { min-height: var(--ck-control-sm); padding: 0 var(--ck-space-3); border: 0; border-right: 1px solid var(--ck-border); background: transparent; font: var(--ck-text-label); font-weight: 600; color: var(--ck-ink); cursor: pointer; }
.ck-segmented > button:last-child { border-right: 0; }
.ck-segmented > button[aria-pressed="true"] { background: var(--ck-primary-soft); color: var(--ck-primary-hover); box-shadow: inset 0 -2px 0 var(--ck-primary); }

/* ---------- Keyboard keys ---------- */
.ck-kbd { display: inline-block; min-width: 1.5rem; padding: 0 0.35rem; border: 1px solid var(--ck-border-strong); border-bottom-width: 2px; border-radius: 0.3rem; background: var(--ck-surface); font: 500 0.75rem/1.25rem var(--ck-font-mono); text-align: center; color: var(--ck-slate); }

/* ---------- Empty and loading states ---------- */
.ck-empty { padding: var(--ck-space-6) var(--ck-space-4); text-align: center; color: var(--ck-slate); }
.ck-empty strong { display: block; color: var(--ck-ink); }
.ck-skeleton { height: 0.9rem; border-radius: 0.25rem; background: linear-gradient(90deg, #eef1f3 25%, #e2e7ea 50%, #eef1f3 75%); background-size: 200% 100%; animation: ck-shimmer 1.4s linear infinite; }
@keyframes ck-shimmer { to { background-position: -200% 0; } }

/* ---------- Side sheet: a Syncfusion dialog docked to the right edge, full height, with a reserved footer ----------
   Used with CssClass="ck-sheet" and <DialogPositionData X="right" Y="top" />. The dialog root is moved to the body by Syncfusion,
   so these rules are global rather than scoped. */
.e-dialog.ck-sheet {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100vh !important;
    max-height: 100vh !important;
    max-width: 100vw;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--ck-shadow-raised);
}
.e-dialog.ck-sheet .e-dlg-header-content { flex: none; }
.e-dialog.ck-sheet .e-dlg-content { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--ck-space-3) var(--ck-space-4); }
.e-dialog.ck-sheet .e-footer-content { flex: none; padding: var(--ck-space-2) var(--ck-space-4); border-top: 1px solid var(--ck-border); background: var(--ck-surface); }

/* ---------- Syncfusion controls carry the same density, radius and focus ---------- */
.e-btn, .e-css.e-btn { border-radius: var(--ck-radius-md); font-weight: 600; }
.e-btn.e-small, .e-css.e-btn.e-small { min-height: var(--ck-control-sm); }
.e-input-group, .e-input-group.e-control-wrapper { border-radius: var(--ck-radius-md); min-height: var(--ck-control-sm); }
.e-input-group.e-input-focus:not(.e-error) { border-color: var(--ck-primary); box-shadow: var(--ck-focus-ring); }
.e-input-group.e-error, .e-control-wrapper.e-error { border-color: var(--ck-critical); }
.e-checkbox-wrapper .e-frame.e-check { background: var(--ck-primary); border-color: var(--ck-primary); }
.e-checkbox-wrapper:focus-within .e-frame { box-shadow: var(--ck-focus-ring); }
.e-grid .e-headercell { font-size: 0.75rem; }
.e-btn:disabled, .e-btn.e-disabled { opacity: 0.55; }