/* ============================================
   Dhakker Admin v2 — Global Design System
   Black & White Theme
   ============================================

   Table of Contents:
   1. Font Imports
   2. CSS Custom Properties (Design Tokens)
   3. CSS Reset & Base Styles
   4. Typography
   5. Form Elements Base
   6. Scrollbar Styling
   7. Selection Styling
   8. Utility Classes
      8a. Display
      8b. Flexbox
      8c. Grid
      8d. Spacing (Padding & Margin)
      8e. Width & Height
      8f. Text & Font
      8g. Background & Border
      8h. Shadow & Opacity
      8i. Overflow & Position
      8j. Cursor & Pointer Events
      8k. Transitions & Animations
   9. Layout Utilities
   10. Responsive Utilities
   11. Print Styles
   12. Accessibility
   ============================================ */


/* ============================================
   1. Font Imports
   ============================================ */

/* Inter — Body text, UI elements */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* DM Sans — Headings, navigation */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* Amiri — Arabic text rendering */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&display=swap');

/* Cairo — Arabic sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');

/* Custom Arabic Fonts */
@font-face {
  font-family: 'Year of the Camel';
  src: url('../fonts/YearOfTheCamel-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Palestine';
  src: url('../fonts/Palestine-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ============================================
   2. CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
  /* ── Core Colors ── */
  --color-black: #000000;
  --color-white: #ffffff;

  /* ── Grayscale Palette ──
     Neutral gray scale following Tailwind's neutral palette.
     Used throughout the interface for text, borders, and backgrounds. */
  --color-gray-50:  #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-800: #262626;
  --color-gray-900: #171717;
  --color-gray-950: #0a0a0a;

  /* ── Semantic Colors ──
     Map design tokens to semantic roles.
     Inspired by shadcn/ui color system. */
  --color-primary: var(--color-black);
  --color-primary-foreground: var(--color-white);
  --color-secondary: var(--color-gray-100);
  --color-secondary-foreground: var(--color-gray-900);
  --color-muted: var(--color-gray-100);
  --color-muted-foreground: var(--color-gray-500);
  --color-accent: var(--color-gray-100);
  --color-accent-foreground: var(--color-gray-900);
  --color-destructive: #dc2626;
  --color-destructive-foreground: var(--color-white);

  /* ── Background & Foreground ── */
  --color-background: var(--color-white);
  --color-foreground: var(--color-gray-950);
  --color-card: var(--color-white);
  --color-card-foreground: var(--color-gray-950);
  --color-popover: var(--color-white);
  --color-popover-foreground: var(--color-gray-950);

  /* ── Border & Input ── */
  --color-border: var(--color-gray-200);
  --color-input: var(--color-gray-200);
  --color-ring: var(--color-gray-950);

  /* ── Typography ──
     Type scale using rem values for accessibility.
     Base size: 16px (1rem). */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Arabic Typesetting', serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;

  /* Font sizes — 12px to 36px scale */
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2rem;       /* 32px */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Letter spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ── Spacing Scale ──
     Based on a 4px grid system.
     Consistent spatial rhythm across the interface. */
  --spacing-0:  0;
  --spacing-1:  0.25rem;   /* 4px */
  --spacing-2:  0.5rem;    /* 8px */
  --spacing-3:  0.75rem;   /* 12px */
  --spacing-4:  1rem;      /* 16px */
  --spacing-5:  1.25rem;   /* 20px */
  --spacing-6:  1.5rem;    /* 24px */
  --spacing-8:  2rem;      /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */
  --spacing-16: 4rem;      /* 64px */
  --spacing-20: 5rem;      /* 80px */
  --spacing-24: 6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-none: 0;
  --radius-sm:   0.125rem;  /* 2px */
  --radius-base: 0.25rem;   /* 4px */
  --radius-md:   0.375rem;  /* 6px */
  --radius-lg:   0.5rem;    /* 8px */
  --radius-xl:   0.75rem;   /* 12px */
  --radius-2xl:  1rem;      /* 16px */
  --radius-full: 9999px;

  /* ── Shadows ──
     Subtle gray shadows for depth hierarchy.
     Used sparingly for cards, dropdowns, and modals. */
  --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-none: 0 0 #0000;

  /* ── Transitions ──
     Standard easing curves for micro-interactions. */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower:  500ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index Scale ── */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-fixed: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;

  /* ── Layout ── */
  --sidebar-width: 260px;
  --topbar-height: 56px;
  --content-max-width: 1280px;
}


/* ============================================
   3. CSS Reset & Base Styles
   ============================================
   Modern CSS reset based on Josh Comeau's approach.
   Ensures consistent rendering across browsers. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  min-height: 100vh;
  /* Prevent layout shift from scrollbar */
  overflow-y: scroll;
}

/* Hide page content until auth check completes (prevents dashboard flash) */
body.auth-pending > *:not(script) {
  visibility: hidden;
}

/* Remove default list styles */
ul, ol {
  list-style: none;
}

/* Remove default link styling */
a {
  color: inherit;
  text-decoration: none;
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography */
input, button, textarea, select {
  font: inherit;
  color: inherit;
}

/* Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Remove button default styles */
button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Table defaults */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Ensure proper Arabic text direction */
[dir="rtl"],
.text-arabic {
  font-family: var(--font-arabic);
  direction: rtl;
}


/* ============================================
   4. Typography
   ============================================
   Heading styles use DM Sans.
   Body text uses Inter.
   Arabic text uses Amiri. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-foreground);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tighter);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

p {
  line-height: var(--line-height-relaxed);
  color: var(--color-gray-700);
}

p + p {
  margin-top: var(--spacing-4);
}

small {
  font-size: var(--font-size-sm);
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-gray-100);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-base);
  border: 1px solid var(--color-gray-200);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-gray-950);
  color: var(--color-gray-100);
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-6) 0;
}


/* ============================================
   5. Form Elements Base
   ============================================
   Baseline styles for form controls.
   Component-specific styles go in components.css. */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-foreground);
  background-color: var(--color-background);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-ring);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-gray-400);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-gray-50);
}

label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
  margin-bottom: var(--spacing-1);
}

textarea {
  resize: vertical;
  min-height: 80px;
}


/* ============================================
   6. Scrollbar Styling
   ============================================
   Minimal, elegant scrollbars that match the B&W theme. */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-400);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}


/* ============================================
   7. Selection Styling
   ============================================ */

::selection {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-gray-900);
  color: var(--color-white);
}


/* ============================================
   8. Utility Classes
   ============================================
   Tailwind-inspired utility classes for rapid layout.
   BEM naming is used for component styles (in components.css).
   Utility classes use single-purpose flat naming. */


/* ── 8a. Display ── */

.hidden      { display: none !important; }
.block       { display: block; }
.inline-block { display: inline-block; }
.inline      { display: inline; }
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.inline-grid { display: inline-grid; }
.contents    { display: contents; }


/* ── 8b. Flexbox ── */

.flex-row         { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col         { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap        { flex-wrap: wrap; }
.flex-nowrap      { flex-wrap: nowrap; }
.flex-1           { flex: 1 1 0%; }
.flex-auto        { flex: 1 1 auto; }
.flex-none        { flex: none; }
.flex-shrink-0    { flex-shrink: 0; }
.flex-grow        { flex-grow: 1; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* Gap utilities */
.gap-0  { gap: 0; }
.gap-1  { gap: var(--spacing-1); }
.gap-2  { gap: var(--spacing-2); }
.gap-3  { gap: var(--spacing-3); }
.gap-4  { gap: var(--spacing-4); }
.gap-5  { gap: var(--spacing-5); }
.gap-6  { gap: var(--spacing-6); }
.gap-8  { gap: var(--spacing-8); }
.gap-10 { gap: var(--spacing-10); }
.gap-12 { gap: var(--spacing-12); }


/* ── 8c. Grid ── */

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }


/* ── 8d. Spacing (Padding & Margin) ── */

/* Padding — all sides */
.p-0  { padding: 0; }
.p-1  { padding: var(--spacing-1); }
.p-2  { padding: var(--spacing-2); }
.p-3  { padding: var(--spacing-3); }
.p-4  { padding: var(--spacing-4); }
.p-5  { padding: var(--spacing-5); }
.p-6  { padding: var(--spacing-6); }
.p-8  { padding: var(--spacing-8); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }

/* Padding — horizontal */
.px-0  { padding-left: 0; padding-right: 0; }
.px-1  { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2  { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3  { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4  { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5  { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6  { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-8  { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

/* Padding — vertical */
.py-0  { padding-top: 0; padding-bottom: 0; }
.py-1  { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2  { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3  { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4  { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5  { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6  { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-8  { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

/* Padding — individual sides */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: var(--spacing-1); }
.pt-2 { padding-top: var(--spacing-2); }
.pt-4 { padding-top: var(--spacing-4); }
.pt-6 { padding-top: var(--spacing-6); }
.pt-8 { padding-top: var(--spacing-8); }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: var(--spacing-1); }
.pb-2 { padding-bottom: var(--spacing-2); }
.pb-4 { padding-bottom: var(--spacing-4); }
.pb-6 { padding-bottom: var(--spacing-6); }
.pb-8 { padding-bottom: var(--spacing-8); }

.pl-0 { padding-left: 0; }
.pl-2 { padding-left: var(--spacing-2); }
.pl-4 { padding-left: var(--spacing-4); }
.pl-6 { padding-left: var(--spacing-6); }

.pr-0 { padding-right: 0; }
.pr-2 { padding-right: var(--spacing-2); }
.pr-4 { padding-right: var(--spacing-4); }
.pr-6 { padding-right: var(--spacing-6); }

/* Margin — all sides */
.m-0    { margin: 0; }
.m-1    { margin: var(--spacing-1); }
.m-2    { margin: var(--spacing-2); }
.m-4    { margin: var(--spacing-4); }
.m-auto { margin: auto; }

/* Margin — horizontal */
.mx-0    { margin-left: 0; margin-right: 0; }
.mx-2    { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
.mx-4    { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Margin — vertical */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }

/* Margin — individual sides */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--spacing-1); }
.mt-2  { margin-top: var(--spacing-2); }
.mt-3  { margin-top: var(--spacing-3); }
.mt-4  { margin-top: var(--spacing-4); }
.mt-6  { margin-top: var(--spacing-6); }
.mt-8  { margin-top: var(--spacing-8); }
.mt-auto { margin-top: auto; }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--spacing-1); }
.mb-2  { margin-bottom: var(--spacing-2); }
.mb-3  { margin-bottom: var(--spacing-3); }
.mb-4  { margin-bottom: var(--spacing-4); }
.mb-6  { margin-bottom: var(--spacing-6); }
.mb-8  { margin-bottom: var(--spacing-8); }

.ml-0    { margin-left: 0; }
.ml-1    { margin-left: var(--spacing-1); }
.ml-2    { margin-left: var(--spacing-2); }
.ml-4    { margin-left: var(--spacing-4); }
.ml-auto { margin-left: auto; }

.mr-0    { margin-right: 0; }
.mr-1    { margin-right: var(--spacing-1); }
.mr-2    { margin-right: var(--spacing-2); }
.mr-4    { margin-right: var(--spacing-4); }
.mr-auto { margin-right: auto; }

/* Negative margins (useful for bleed effects) */
.-mt-1 { margin-top: calc(-1 * var(--spacing-1)); }
.-mt-2 { margin-top: calc(-1 * var(--spacing-2)); }
.-ml-1 { margin-left: calc(-1 * var(--spacing-1)); }
.-ml-2 { margin-left: calc(-1 * var(--spacing-2)); }


/* ── 8e. Width & Height ── */

.w-full    { width: 100%; }
.w-auto    { width: auto; }
.w-screen  { width: 100vw; }
.w-fit     { width: fit-content; }
.max-w-sm  { max-width: 24rem; }   /* 384px */
.max-w-md  { max-width: 28rem; }   /* 448px */
.max-w-lg  { max-width: 32rem; }   /* 512px */
.max-w-xl  { max-width: 36rem; }   /* 576px */
.max-w-2xl { max-width: 42rem; }   /* 672px */
.max-w-3xl { max-width: 48rem; }   /* 768px */
.max-w-4xl { max-width: 56rem; }   /* 896px */
.max-w-5xl { max-width: 64rem; }   /* 1024px */
.max-w-6xl { max-width: 72rem; }   /* 1152px */
.max-w-7xl { max-width: 80rem; }   /* 1280px */
.max-w-full { max-width: 100%; }
.min-w-0   { min-width: 0; }

.h-full    { height: 100%; }
.h-auto    { height: auto; }
.h-screen  { height: 100vh; }
.min-h-0   { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }

/* Fixed size utilities (common icon/avatar sizes) */
.size-4  { width: 1rem; height: 1rem; }
.size-5  { width: 1.25rem; height: 1.25rem; }
.size-6  { width: 1.5rem; height: 1.5rem; }
.size-8  { width: 2rem; height: 2rem; }
.size-10 { width: 2.5rem; height: 2.5rem; }
.size-12 { width: 3rem; height: 3rem; }
.size-16 { width: 4rem; height: 4rem; }


/* ── 8f. Text & Font ── */

/* Font size */
.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }
.text-4xl  { font-size: var(--font-size-4xl); }

/* Font weight */
.font-light    { font-weight: var(--font-weight-light); }
.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* Font family */
.font-sans    { font-family: var(--font-sans); }
.font-heading { font-family: var(--font-heading); }
.font-arabic  { font-family: var(--font-arabic); }
.font-mono    { font-family: var(--font-mono); }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text color */
.text-primary   { color: var(--color-foreground); }
.text-secondary { color: var(--color-muted-foreground); }
.text-muted     { color: var(--color-gray-400); }
.text-white     { color: var(--color-white); }
.text-black     { color: var(--color-black); }
.text-destructive { color: var(--color-destructive); }

/* Text decoration */
.underline    { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text transform */
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text overflow & wrapping */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre    { white-space: pre; }
.break-words       { overflow-wrap: break-word; }
.break-all         { word-break: break-all; }

/* Line height */
.leading-none    { line-height: var(--line-height-none); }
.leading-tight   { line-height: var(--line-height-tight); }
.leading-snug    { line-height: var(--line-height-snug); }
.leading-normal  { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose   { line-height: var(--line-height-loose); }

/* Letter spacing */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter); }
.tracking-tight   { letter-spacing: var(--letter-spacing-tight); }
.tracking-normal  { letter-spacing: var(--letter-spacing-normal); }
.tracking-wide    { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider   { letter-spacing: var(--letter-spacing-wider); }
.tracking-widest  { letter-spacing: var(--letter-spacing-widest); }


/* ── 8g. Background & Border ── */

/* Background colors */
.bg-white    { background-color: var(--color-white); }
.bg-black    { background-color: var(--color-black); }
.bg-gray-50  { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.bg-gray-950 { background-color: var(--color-gray-950); }
.bg-transparent { background-color: transparent; }
.bg-muted    { background-color: var(--color-muted); }

/* Border */
.border   { border: 1px solid var(--color-border); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--color-border); }
.border-b { border-bottom: 1px solid var(--color-border); }
.border-l { border-left: 1px solid var(--color-border); }
.border-r { border-right: 1px solid var(--color-border); }
.border-2 { border-width: 2px; }

/* Border color */
.border-gray-100 { border-color: var(--color-gray-100); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-gray-800 { border-color: var(--color-gray-800); }
.border-black    { border-color: var(--color-black); }
.border-transparent { border-color: transparent; }

/* Border radius */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded      { border-radius: var(--radius-base); }
.rounded-md   { 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-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Divide (for child element borders) */
.divide-y > * + * { border-top: 1px solid var(--color-border); }
.divide-x > * + * { border-left: 1px solid var(--color-border); }


/* ── 8h. Shadow & Opacity ── */

.shadow-xs   { box-shadow: var(--shadow-xs); }
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow      { box-shadow: var(--shadow-base); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-xl   { box-shadow: var(--shadow-xl); }
.shadow-2xl  { box-shadow: var(--shadow-2xl); }
.shadow-inner { box-shadow: var(--shadow-inner); }
.shadow-none { box-shadow: var(--shadow-none); }

.opacity-0   { opacity: 0; }
.opacity-25  { opacity: 0.25; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }


/* ── 8i. Overflow & Position ── */

.overflow-auto    { overflow: auto; }
.overflow-hidden  { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll  { overflow: scroll; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-y-auto  { overflow-y: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.static   { position: static; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0   { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0  { left: 0; }


/* ── 8j. Cursor & Pointer Events ── */

.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab     { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none     { user-select: none; }
.select-text     { user-select: text; }
.select-all      { user-select: all; }


/* ── 8k. Transitions & Animations ── */

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: var(--ease-in-out);
  transition-duration: 200ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: var(--ease-in-out);
  transition-duration: 200ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: var(--ease-in-out);
  transition-duration: 200ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: var(--ease-in-out);
  transition-duration: 200ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: var(--ease-in-out);
  transition-duration: 200ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: var(--ease-in-out);
  transition-duration: 200ms;
}

.duration-fast { transition-duration: 150ms; }
.duration-base { transition-duration: 200ms; }
.duration-slow { transition-duration: 300ms; }

/* Transform utilities */
.scale-95  { transform: scale(0.95); }
.scale-100 { transform: scale(1); }
.scale-105 { transform: scale(1.05); }

.translate-y-0 { transform: translateY(0); }
.translate-y-1 { transform: translateY(0.25rem); }
.translate-y-2 { transform: translateY(0.5rem); }
.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }

.rotate-0   { transform: rotate(0deg); }
.rotate-45  { transform: rotate(45deg); }
.rotate-90  { transform: rotate(90deg); }
.rotate-180 { transform: rotate(180deg); }

/* Hover state utilities */
.hover\:bg-gray-50:hover  { background-color: var(--color-gray-50); }
.hover\:bg-gray-100:hover { background-color: var(--color-gray-100); }
.hover\:bg-gray-200:hover { background-color: var(--color-gray-200); }
.hover\:bg-gray-900:hover { background-color: var(--color-gray-900); }
.hover\:bg-black:hover    { background-color: var(--color-black); }
.hover\:text-black:hover  { color: var(--color-black); }
.hover\:shadow-md:hover   { box-shadow: var(--shadow-md); }
.hover\:shadow-lg:hover   { box-shadow: var(--shadow-lg); }
.hover\:opacity-80:hover  { opacity: 0.8; }
.hover\:scale-105:hover   { transform: scale(1.05); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }

/* Focus visible (keyboard navigation) */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Keyframe animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.animate-fade-in    { animation: fadeIn 0.2s ease-out forwards; }
.animate-fade-out   { animation: fadeOut 0.2s ease-out forwards; }
.animate-slide-up   { animation: slideInUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-slide-down { animation: slideInDown 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-slide-left { animation: slideInLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-slide-right { animation: slideInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-scale-in   { animation: scaleIn 0.2s ease-out forwards; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }

/* Stagger delay classes for lists */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }


/* ============================================
   9. Layout Utilities
   ============================================
   Common layout patterns used across pages. */

/* Container: Centers content with max-width and horizontal padding */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

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

/* Not sr-only (undo sr-only) */
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ============================================
   10. Responsive Utilities
   ============================================
   Mobile-first breakpoints.
   sm: 640px, md: 768px, lg: 1024px, xl: 1280px */

/* ── Small screens (640px+) ── */
@media (min-width: 640px) {
  .sm\:hidden  { display: none; }
  .sm\:block   { display: block; }
  .sm\:flex    { display: flex; }
  .sm\:grid    { display: grid; }
  .sm\:inline  { display: inline; }

  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }

  .sm\:px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
  .sm\:py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }

  .sm\:text-sm   { font-size: var(--font-size-sm); }
  .sm\:text-base { font-size: var(--font-size-base); }

  .container {
    padding-left: var(--spacing-6);
    padding-right: var(--spacing-6);
  }
}

/* ── Medium screens (768px+) ── */
@media (min-width: 768px) {
  .md\:hidden  { display: none; }
  .md\:block   { display: block; }
  .md\:flex    { display: flex; }
  .md\:grid    { display: grid; }
  .md\:inline-flex { display: inline-flex; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }

  .md\:gap-4 { gap: var(--spacing-4); }
  .md\:gap-6 { gap: var(--spacing-6); }
  .md\:gap-8 { gap: var(--spacing-8); }

  .md\:px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
  .md\:px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
  .md\:py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
  .md\:py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

  .md\:text-lg  { font-size: var(--font-size-lg); }
  .md\:text-xl  { font-size: var(--font-size-xl); }
  .md\:text-2xl { font-size: var(--font-size-2xl); }
  .md\:text-3xl { font-size: var(--font-size-3xl); }

  .container {
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
  }
}

/* ── Large screens (1024px+) ── */
@media (min-width: 1024px) {
  .lg\:hidden  { display: none; }
  .lg\:block   { display: block; }
  .lg\:flex    { display: flex; }
  .lg\:grid    { display: grid; }
  .lg\:inline-flex { display: inline-flex; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .lg\:flex-row { flex-direction: row; }

  .lg\:gap-6  { gap: var(--spacing-6); }
  .lg\:gap-8  { gap: var(--spacing-8); }
  .lg\:gap-12 { gap: var(--spacing-12); }

  .lg\:px-8  { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
  .lg\:px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
  .lg\:py-8  { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

  .lg\:text-xl  { font-size: var(--font-size-xl); }
  .lg\:text-2xl { font-size: var(--font-size-2xl); }
  .lg\:text-3xl { font-size: var(--font-size-3xl); }
  .lg\:text-4xl { font-size: var(--font-size-4xl); }
}

/* ── Extra large screens (1280px+) ── */
@media (min-width: 1280px) {
  .xl\:hidden { display: none; }
  .xl\:block  { display: block; }
  .xl\:flex   { display: flex; }
  .xl\:grid   { display: grid; }

  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  .xl\:gap-8  { gap: var(--spacing-8); }
  .xl\:gap-10 { gap: var(--spacing-10); }

  .xl\:px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
}

/* ── Mobile-only overrides (below 640px) ── */
@media (max-width: 639px) {
  .mobile\:hidden { display: none; }
  .mobile\:block  { display: block; }
  .mobile\:flex   { display: flex; }
  .mobile\:flex-col { flex-direction: column; }
  .mobile\:w-full { width: 100%; }
  .mobile\:text-sm { font-size: var(--font-size-sm); }
  .mobile\:text-center { text-align: center; }
  .mobile\:p-3 { padding: var(--spacing-3); }
  .mobile\:px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
  .mobile\:gap-3 { gap: var(--spacing-3); }
}


/* ============================================
   11. Print Styles
   ============================================ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  a, a:visited {
    text-decoration: underline;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  .hidden-print,
  nav,
  footer {
    display: none !important;
  }
}


/* ============================================
   12. Accessibility
   ============================================ */

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

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  :root {
    --color-border: var(--color-gray-400);
    --color-input: var(--color-gray-400);
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: 0 0 0 1px var(--color-gray-400);
    --shadow-lg: 0 0 0 2px var(--color-gray-400);
  }
}

/* Focus visible indicator for accessibility */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}