/* SmartCare Admin — Utilities */

/* Text */
.text-xs   { font-size: var(--fs-xs)  !important; }
.text-sm   { font-size: var(--fs-sm)  !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg   { font-size: var(--fs-lg)  !important; }
.text-xl   { font-size: var(--fs-xl)  !important; }
.text-2xl  { font-size: var(--fs-2xl) !important; }
.text-3xl  { font-size: var(--fs-3xl) !important; }
.text-4xl  { font-size: var(--fs-4xl) !important; }
.text-5xl  { font-size: var(--fs-5xl) !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }

.text-brand   { color: var(--brand-primary) !important; }
.text-success { color: var(--brand-success) !important; }
.text-warning { color: var(--brand-warning) !important; }
.text-danger  { color: var(--brand-danger)  !important; }
.text-info    { color: var(--brand-info)    !important; }

/* Gradient text */
.text-gradient {
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Backgrounds */
.bg-mesh {
    background-image: var(--gradient-mesh);
    /* Gradient stops share the same structure across all accents/themes, so this
       cross-fades smoothly when the user switches theme/accent (no page reload). */
    transition: background-image var(--dur-slow) var(--ease-out);
}
.bg-surface-0 { background: var(--surface-0); }
.bg-surface-1 { background: var(--surface-1); }
.bg-surface-2 { background: var(--surface-2); }
.bg-elevated  { background: var(--surface-elevated); }

/* Borders */
.bordered { border: 1px solid var(--border); }
.bordered-strong { border: 1px solid var(--border-strong); }

/* Radii */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }

/* Shadows */
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Spacing helpers (top-level) */
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: var(--space-5) !important; }
.p-6 { padding: var(--space-6) !important; }

/* Flex */
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-1  { flex: 1 1 auto !important; }
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.items-start  { align-items: flex-start !important; }
.items-end    { align-items: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.justify-end     { justify-content: flex-end !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }

.w-100 { width: 100% !important; }

/* Sparkline / inline chart */
.spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 28px;
}
.spark > span {
    flex: 1;
    background: var(--brand-200);
    border-radius: 2px;
    min-height: 2px;
}
.spark > span.up { background: var(--brand-primary); }
[data-theme="dark"] .spark > span { background: var(--brand-700); }
[data-theme="dark"] .spark > span.up { background: var(--brand-400); }

/* Skeletons */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-1) 50%, var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s linear infinite;
    border-radius: var(--radius-sm);
}
@keyframes skel { to { background-position: -200% 0; } }

/* =============================================================
 * ACCESSIBILITY — professional-standard baselines
 * ========================================================== */

/* Screen-reader-only content (skip links, field hints). */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-content link: hidden until focused, then visible top-left. */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 1000;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    padding: 10px 16px;
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    color: var(--brand-on-primary);
}

/* WCAG 2.3.3 — respect users who ask for less motion. Neutralize transitions/animations
   (sidebar collapse, KPI hovers, skeletons, spinners keep only a minimal fade). */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Stronger borders / rings for users who request higher contrast. */
@media (prefers-contrast: more) {
    :root {
        --border: #94a3b8;
        --border-strong: #475569;
    }
    .btn, .form-control, .form-select, .data-table, .card, .section-card {
        border-width: 2px !important;
    }
}

/* =============================================================
 * PRINT — clean, ink-friendly output for records/handouts
 * ========================================================== */
@media print {
    /* Drop app chrome — only the main content prints. */
    .app-sidebar,
    .app-topbar,
    .action-bar,
    .toolbar,
    .theme-picker,
    .topbar-btn,
    .row-actions,
    .btn,
    .app-main__actions,
    .pagination,
    #paginationContainer,
    .filter-chip,
    .quick-action { display: none !important; }

    /* Collapse the grid so main content spans the page. */
    .app-shell { display: block !important; }
    .app-main { padding: 0 !important; }

    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    /* Force light rendering even if the user had dark mode on. */
    [data-theme="dark"] { color-scheme: light; }

    .section-card,
    .data-table-wrap,
    .field-group,
    .kpi-tile {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .data-table thead th {
        background: #eee !important;
        color: #000 !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    /* Don't append URLs for in-page anchors / JS links. */
    a[href^="#"]::after,
    a[href^="javascript"]::after { content: ""; }
}