/* DMS Web design system v1.0.0
 * Typeface choice: IBM Plex Sans for display/labels + Source Sans 3 for body/data.
 * Palette intent: calm indigo-teal enterprise surfaces with semantic states.
 */
:root {
    --dms-font-display: "IBM Plex Sans", "Segoe UI", sans-serif;
    --dms-font-body: "Source Sans 3", "Segoe UI", sans-serif;
    --dms-color-text-default: #182230;
    --dms-color-text-muted: #465467;
    --dms-color-surface-canvas: #f6f7fb;
    --dms-color-surface-raised: #ffffff;
    --dms-color-action-primary: #3346a8;
    --dms-color-action-primary-hover: #27388f;
    --dms-color-action-secondary: #0e7490;
    --dms-color-state-success: #146c43;
    --dms-color-state-warning: #8a5300;
    --dms-color-state-danger: #b42318;
    --dms-color-focus-ring: #1d4ed8;
    --dms-color-border-subtle: #d9dfeb;
    --dms-space-1: 0.25rem;
    --dms-space-2: 0.5rem;
    --dms-space-3: 0.75rem;
    --dms-space-4: 1rem;
    --dms-space-6: 1.5rem;
    --dms-space-8: 2rem;
    --dms-radius-sm: 0.375rem;
    --dms-radius-md: 0.625rem;
    --dms-shadow-card: 0 0.25rem 1rem rgb(24 34 48 / 0.08);
}

@media (prefers-color-scheme: dark) {
    :root[data-dms-theme="system"] {
        --dms-color-text-default: #edf1f7;
        --dms-color-text-muted: #b9c4d4;
        --dms-color-surface-canvas: #111827;
        --dms-color-surface-raised: #1f2937;
        --dms-color-border-subtle: #3b4759;
        --dms-color-action-primary: #9da9ff;
        --dms-color-action-primary-hover: #c5ccff;
        --dms-shadow-card: 0 0.25rem 1rem rgb(0 0 0 / 0.24);
    }
}

html { scroll-behavior: smooth; }
html, body { scroll-padding-top: 5rem; }
*[id="main-content"] { scroll-margin-top: 5rem; }
body {
    background: var(--dms-color-surface-canvas);
    color: var(--dms-color-text-default);
    font-family: var(--dms-font-body);
    font-size: 1rem;
    line-height: 1.55;
}
html[lang="ar"] {
    --dms-font-display: "Noto Sans Arabic", "IBM Plex Sans", sans-serif;
    --dms-font-body: "Noto Sans Arabic", "Source Sans 3", sans-serif;
}
html[dir="rtl"] .dms-table td[data-numeric="true"],
html[dir="rtl"] .dms-money { text-align: start; }

h1, h2, h3, h4, h5, h6,
.navbar-brand, .nav-link-title, .page-title, .card-title {
    font-family: var(--dms-font-display);
    letter-spacing: -0.012em;
}

.dms-skip-link {
    position: fixed;
    z-index: 2000;
    top: var(--dms-space-2);
    left: var(--dms-space-2);
    transform: translateY(-150%);
    padding: var(--dms-space-2) var(--dms-space-4);
    border-radius: var(--dms-radius-sm);
    background: var(--dms-color-action-primary);
    color: #fff;
    font-family: var(--dms-font-display);
    font-weight: 650;
}
.dms-skip-link:focus { transform: translateY(0); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--dms-color-focus-ring);
    outline-offset: 2px;
}
.dms-target-review { box-shadow: 0 0 0 2px var(--dms-color-state-warning); }
.dms-live-region {
    position: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dms-shell-header {
    background: var(--dms-color-surface-raised);
    border-bottom: 1px solid var(--dms-color-border-subtle);
}
.dms-shell-header .nav-link { min-height: 2.75rem; }
.dms-shell-header .nav-link:hover,
.dms-shell-header .nav-link:focus-visible { color: var(--dms-color-action-primary); }
.dms-primary-nav .nav-link[aria-current="page"] {
    color: var(--dms-color-action-primary);
    font-weight: 650;
    box-shadow: inset 0 -0.2rem 0 var(--dms-color-action-primary);
}

.dms-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dms-space-4);
    margin-bottom: var(--dms-space-6);
}
.dms-page-header__eyebrow {
    margin: 0 0 var(--dms-space-1);
    color: var(--dms-color-text-muted);
    font-family: var(--dms-font-display);
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dms-card {
    border: 1px solid var(--dms-color-border-subtle);
    border-radius: var(--dms-radius-md);
    background: var(--dms-color-surface-raised);
    box-shadow: var(--dms-shadow-card);
}
.dms-card__header { padding: var(--dms-space-4) var(--dms-space-6); border-bottom: 1px solid var(--dms-color-border-subtle); }
.dms-card__body { padding: var(--dms-space-6); }

.dms-status {
    display: inline-flex;
    align-items: center;
    gap: var(--dms-space-1);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-family: var(--dms-font-display);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.3;
}
.dms-status--success { color: var(--dms-color-state-success); background: color-mix(in srgb, var(--dms-color-state-success) 10%, transparent); }
.dms-status--warning { color: var(--dms-color-state-warning); background: color-mix(in srgb, var(--dms-color-state-warning) 10%, transparent); }
.dms-status--danger { color: var(--dms-color-state-danger); background: color-mix(in srgb, var(--dms-color-state-danger) 10%, transparent); }

.dms-table { font-variant-numeric: tabular-nums; }
.dms-table th { font-family: var(--dms-font-display); font-weight: 650; }
.dms-table td[data-numeric="true"], .dms-money { font-variant-numeric: tabular-nums; text-align: end; }
.dms-table tbody tr:focus-within { background: color-mix(in srgb, var(--dms-color-action-primary) 7%, transparent); }

.dms-alert { border-inline-start: 0.25rem solid currentColor; border-radius: var(--dms-radius-sm); padding: var(--dms-space-3) var(--dms-space-4); }
.dms-alert--info { color: var(--dms-color-action-secondary); }
.dms-alert--error { color: var(--dms-color-state-danger); }
.dms-empty-state, .dms-loading-state { padding: var(--dms-space-8); color: var(--dms-color-text-muted); text-align: center; }

.dms-density-compact .table > :not(caption) > * > * { padding-block: 0.45rem; }

@media (max-width: 767.98px) {
    .dms-page-header { margin-bottom: var(--dms-space-4); }
    .dms-card__body { padding: var(--dms-space-4); }
    .dms-shell-header .navbar-nav { gap: 0.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
    body { background: #fff; color: #000; }
    .dms-card { box-shadow: none; }
    .dms-skip-link, .dms-shell-header, .d-print-none { display: none !important; }
}