/* ═══════════════════════════════════════════════════════════════
   02-base.css — Global Resets & Accessibility
   ─────────────────────────────────────────────────────────────
   Normalises browser defaults and establishes baseline styles
   that every page inherits automatically.

   Sections:
     • HTML / body reset          (font, background, overflow)
     • Box-sizing border-box      (universal *)
     • Focus-visible ring          (keyboard-only focus outline)
     • Custom scrollbar styling    (thin, themed tracks/thumbs)
     • ::selection highlight colour
     • Accessibility helpers       (.sr-only, reduced-motion)
     • Base anchor / button resets

   Depends on: 01-tokens.css (custom properties).
   Consumers: every page — applied to root elements.
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ── */
html {
    font-family: var(--font-family);
    font-size: 100%;
    /* 16px base for rem calculations */
    line-height: var(--lh-normal);
    background: var(--color-bg);
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Crisper Arabic text */
}

body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-md);
    line-height: var(--lh-normal);
}

/* All form elements inherit the app font */
input,
select,
textarea,
button {
    font-family: inherit;
}

/* ── Text selection (theme-consistent dark) ── */
::selection {
    background: var(--color-text-strong, #0f172a);
    color: #fff;
}

::-moz-selection {
    background: var(--color-text-strong, #0f172a);
    color: #fff;
}

/* ── Global focus ring (WCAG 2.4.7) ──
   outline-offset: 2px default; some compact elements use -2px inset
   to keep ring within bounds — outline remains visible in both cases. */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    /* WCAG 2.4.7: Ensure focus indicator is clearly separated from the element */
}

/* ── Sleek scrollbars (WebKit + Firefox) ── */
* {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ── Micro-interactions ── */
button,
[role="button"] {
    transition: background-color var(--duration-fast) var(--ease-default),
        color var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default),
        box-shadow var(--duration-fast) var(--ease-default);
}

button:active:not(:disabled),
[role="button"]:active:not(:disabled) {
    transform: scale(0.98);
}

/* ── Screen reader only ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Skip link ── */
.zimam-skip-link {
    position: absolute;
    top: -100px;
    inset-inline-end: 1rem;
    z-index: var(--z-modal);
    padding: 0.75rem 1rem;
    background: var(--color-text-strong);
    color: var(--color-surface);
    font-size: var(--text-lg);
    font-weight: var(--fw-medium);
    border-radius: 0.5rem;
    transition: top var(--duration-normal);
}

.zimam-skip-link:focus {
    top: 1rem;
}

/* ── Utilities: Layout ── */
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-wrap { flex-wrap: wrap; }
.shrink-0 { flex-shrink: 0; }
.grow-0 { flex-grow: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* ── Utilities: Positioning ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }

/* ── Utilities: Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* ── Utilities: Padding & Margin ── */
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-0 { padding-left: 0; padding-right: 0; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pb-10 { padding-bottom: 2.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.ms-2 { margin-inline-start: 0.5rem; }
.mr-auto { margin-right: auto; }

/* ── Utilities: Typography ── */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.font-normal { font-weight: var(--fw-normal); }
.font-medium { font-weight: var(--fw-medium); }
.font-semibold { font-weight: var(--fw-semibold); }
.font-bold { font-weight: var(--fw-bold); }
.font-sans { font-family: var(--font-family); }
.leading-relaxed { line-height: var(--lh-relaxed); }
.tabular-nums { font-variant-numeric: tabular-nums; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }

/* ── Utilities: Colors (Slate/Gray replacement) ── */
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: var(--color-text-faint); }
.text-slate-500 { color: var(--color-text-muted); }
.text-slate-600 { color: var(--color-text-secondary); }
.text-slate-800 { color: #1e293b; }
.text-slate-900 { color: var(--color-text-strong); }
.text-blue-600 { color: var(--color-primary); }
.text-rose-400 { color: #fb7185; }
.text-rose-500 { color: #f43f5e; }
.text-rose-600 { color: #e11d48; }
.bg-slate-50 { background-color: var(--color-bg-subtle); }
.bg-slate-200 { background-color: var(--color-border); }
.bg-white { background-color: var(--color-surface); }

/* ── Utilities: Borders & Radius ── */
.border { border: 1px solid var(--color-border); }
.border-2 { border-width: 2px; }
.border-slate-100 { border-color: var(--color-border-light); }
.border-slate-200 { border-color: var(--color-border); }
.border-slate-300 { border-color: #cbd5e1; }
.border-t-slate-500 { border-top-color: #64748b; }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-card); }
.rounded-full { border-radius: 9999px; }

/* ── Utilities: Shadows ── */
.shadow-sm { box-shadow: var(--shadow-sm); }

/* ── Interactive ── */
.cursor-pointer { cursor: pointer; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* ── Utilities: Hover states ── */
.hover\:text-slate-600:hover { color: var(--color-text-secondary); }

/* ── Utilities: Animations ── */
.animate-spin { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* ── Utilities: Opacity ── */
.opacity-50 { opacity: 0.5; }

/* ── Dimensions ── */
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-10 { width: 2.5rem; }
.w-14 { width: 3.5rem; }
.w-full { width: 100%; }
.w-\[3\.5rem\] { width: 3.5rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-10 { height: 2.5rem; }
.h-full { height: 100%; }
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }

/* ── Responsive overrides (desktop ≥ 1024px) ── */
@media (min-width: 1024px) {
    .lg\:px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
}

/* ── Grid utilities ── */
.col-span-full { grid-column: 1 / -1; }

/* ── Avatar color modifiers (used by AvatarHelper.GetColorClass across all components) ── */
.drawer-avatar--purple { background: #7c3aed; }
.drawer-avatar--rose   { background: #e11d48; }
.drawer-avatar--blue   { background: #2563eb; }
.drawer-avatar--amber  { background: #d97706; }
.drawer-avatar--teal   { background: #0d9488; }