/*
 * ================================================================
 *  HRINCU — DESIGN SYSTEM  v1.0
 *  Central source of truth for all CSS tokens.
 *  Import this FIRST, before Bootstrap and Tailwind overrides.
 * ================================================================
 */

/* ──────────────────────────────────────────────
   1. COLOR PALETTE
   ────────────────────────────────────────────── */
:root {
  /* Brand — Purple (single authoritative scale) */
  --color-brand-950: #1a0535;   /* deepest — used for dark text on light bg  */
  --color-brand-900: #39004E;   /* primary brand — buttons, active states     */
  --color-brand-800: #3b0764;   /* section backgrounds, dark bands            */
  --color-brand-700: #5b21b6;   /* hover states on brand-900 buttons          */
  --color-brand-600: #7e22ce;   /* hero primary button                        */
  --color-brand-500: #a855f7;   /* accents, links, icon highlights            */
  --color-brand-400: #c084fc;   /* badge dots, light accents                  */
  --color-brand-200: #e9d5ff;   /* borders on light purple cards              */
  --color-brand-100: #f0e6ff;   /* active sidebar item bg                     */
  --color-brand-50:  #f9f5ff;   /* hover sidebar item bg                      */
  --color-brand-25:  #f5f0fa;   /* page/dashboard background                  */

  /* Success — Green (single source, replaces #22c55e AND #00A550) */
  --color-success-700: #15803d;
  --color-success-600: #16a34a;
  --color-success-500: #22c55e;  /* status badges                             */
  --color-success-100: #dcfce7;
  --color-success-50:  #f0fdf4;

  /* Danger — Red */
  --color-danger-700:  #b91c1c;
  --color-danger-600:  #c0392b;  /* logout, delete actions                    */
  --color-danger-500:  #ef4444;
  --color-danger-100:  #fee2e2;
  --color-danger-50:   #fff5f4;

  /* Warning */
  --color-warning-500: #f59e0b;
  --color-warning-100: #fef3c7;
  --color-warning-50:  #fffbeb;

  /* Neutral — Gray */
  --color-gray-900: #111827;
  --color-gray-800: #1f2937;
  --color-gray-700: #374151;
  --color-gray-600: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-400: #9ca3af;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50:  #f9fafb;

  /* Surface / Background */
  --color-surface:       #ffffff;
  --color-surface-raised:#f9fafb;
  --color-bg-page:       #f5f0fa;   /* dashboard page bg                      */
  --color-bg-footer:     #140a1f;
  --color-bg-footer-alt: #1d0f2c;

  /* Text */
  --color-text-primary:   #1a0535;  /* headings, important labels             */
  --color-text-secondary: #374151;  /* body text                              */
  --color-text-muted:     #9e7db5;  /* secondary labels, placeholders         */
  --color-text-disabled:  #c3b9d0;  /* disabled states, divider labels        */
  --color-text-inverse:   #ffffff;

  /* Border */
  --color-border-light:  #f0eaf5;   /* internal card borders                  */
  --color-border-base:   #e8d8f8;   /* form borders, dividers                 */
  --color-border-strong: #d1d5db;   /* table borders                          */

  /* Semantic aliases — use these in components, not raw palette */
  --color-primary:        var(--color-brand-900);
  --color-primary-hover:  var(--color-brand-700);
  --color-primary-light:  var(--color-brand-50);
  --color-primary-border: var(--color-brand-200);
  --color-accent:         var(--color-brand-500);
}


/* ──────────────────────────────────────────────
   2. TYPOGRAPHY SCALE
   ────────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-sans:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ar:    'Noto Sans Arabic', 'Tajawal', 'Cairo', var(--font-sans);
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Type Scale (1.250 Major Third ratio) */
  --text-xs:   0.75rem;    /* 12px — labels, badges, metadata               */
  --text-sm:   0.875rem;   /* 14px — secondary body, table cells            */
  --text-base: 1rem;       /* 16px — primary body text                      */
  --text-lg:   1.125rem;   /* 18px — card titles, form section headers       */
  --text-xl:   1.25rem;    /* 20px — page sub-headings                      */
  --text-2xl:  1.5rem;     /* 24px — section headings                       */
  --text-3xl:  1.875rem;   /* 30px — page headings                          */
  --text-4xl:  2.25rem;    /* 36px — hero/marketing headings                */
  --text-5xl:  3rem;       /* 48px — display headings                       */

  /* Font Weights */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  1.75;

  /* Letter Spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}


/* ──────────────────────────────────────────────
   3. SPACING SCALE
   Base unit: 4px (0.25rem)
   ────────────────────────────────────────────── */
:root {
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* Component-specific spacing */
  --spacing-card-x:    var(--space-6);   /* card horizontal padding          */
  --spacing-card-y:    var(--space-5);   /* card vertical padding            */
  --spacing-section-y: var(--space-16);  /* section vertical padding         */
  --spacing-form-gap:  var(--space-5);   /* gap between form fields          */
  --spacing-btn-x:     var(--space-6);   /* button horizontal padding        */
  --spacing-btn-y:     var(--space-3);   /* button vertical padding          */
  --spacing-input-x:   var(--space-4);   /* input horizontal padding         */
  --spacing-input-y:   0.625rem;         /* 10px — input vertical padding    */
}


/* ──────────────────────────────────────────────
   4. BORDER RADIUS SCALE
   ────────────────────────────────────────────── */
:root {
  --radius-sm:   0.25rem;    /* 4px  — badges, small chips                  */
  --radius-base: 0.5rem;     /* 8px  — inputs, small cards                  */
  --radius-md:   0.75rem;    /* 12px — buttons, icon boxes                  */
  --radius-lg:   1rem;       /* 16px — cards, panels                        */
  --radius-xl:   1.25rem;    /* 20px — dashboard cards                      */
  --radius-2xl:  1.5rem;     /* 24px — large modals                         */
  --radius-full: 9999px;     /* pills, avatars                              */
}


/* ──────────────────────────────────────────────
   5. SHADOWS
   ────────────────────────────────────────────── */
:root {
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 2px 8px rgba(57, 0, 78, 0.06);
  --shadow-md:  0 4px 16px rgba(57, 0, 78, 0.10);
  --shadow-lg:  0 8px 24px rgba(57, 0, 78, 0.15);
  --shadow-xl:  0 16px 48px rgba(57, 0, 78, 0.20);
  --shadow-btn: 0 4px 12px rgba(88, 28, 135, 0.35);
  --shadow-btn-hover: 0 8px 20px rgba(88, 28, 135, 0.45);
}


/* ──────────────────────────────────────────────
   6. TRANSITIONS
   ────────────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ──────────────────────────────────────────────
   7. Z-INDEX SCALE
   ────────────────────────────────────────────── */
:root {
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-overlay:  400;
  --z-toast:    500;
}


/* ──────────────────────────────────────────────
   8. LAYOUT / BREAKPOINTS (reference)
   sm:640  md:768  lg:1024  xl:1280  2xl:1536
   ────────────────────────────────────────────── */
:root {
  --container-max:   80rem;    /* 1280px — max page width                    */
  --container-prose: 65ch;     /* readable text width                        */
  --sidebar-width:   270px;
}


/* ================================================================
   COMPONENT TOKENS
   ================================================================ */

/* ── BUTTONS ── */
:root {
  --btn-font-size:      var(--text-sm);
  --btn-font-weight:    var(--font-semibold);
  --btn-line-height:    1;
  --btn-border-radius:  var(--radius-md);
  --btn-transition:     all var(--transition-base);

  /* Primary */
  --btn-primary-bg:         var(--color-brand-900);
  --btn-primary-bg-hover:   var(--color-brand-700);
  --btn-primary-color:      var(--color-text-inverse);
  --btn-primary-shadow:     var(--shadow-btn);
  --btn-primary-shadow-hover: var(--shadow-btn-hover);

  /* Secondary */
  --btn-secondary-bg:       transparent;
  --btn-secondary-border:   var(--color-brand-200);
  --btn-secondary-color:    var(--color-brand-900);
  --btn-secondary-bg-hover: var(--color-brand-50);

  /* Danger */
  --btn-danger-bg:          var(--color-danger-600);
  --btn-danger-bg-hover:    var(--color-danger-700);
  --btn-danger-color:       var(--color-text-inverse);

  /* Sizes */
  --btn-sm-px:  var(--space-4);
  --btn-sm-py:  var(--space-2);
  --btn-sm-fs:  var(--text-xs);
  --btn-md-px:  var(--space-6);
  --btn-md-py:  var(--space-3);
  --btn-md-fs:  var(--text-sm);
  --btn-lg-px:  var(--space-8);
  --btn-lg-py:  0.875rem;
  --btn-lg-fs:  var(--text-base);
}

/* ── FORMS ── */
:root {
  --input-bg:           var(--color-surface);
  --input-border:       var(--color-border-strong);
  --input-border-focus: var(--color-brand-500);
  --input-border-error: var(--color-danger-500);
  --input-bg-error:     var(--color-danger-50);
  --input-radius:       var(--radius-base);
  --input-font-size:    var(--text-sm);
  --input-color:        var(--color-text-secondary);
  --input-placeholder:  var(--color-gray-400);
  --input-shadow-focus: 0 0 0 3px rgba(168, 85, 247, 0.15);
  --label-font-size:    var(--text-sm);
  --label-font-weight:  var(--font-medium);
  --label-color:        var(--color-text-secondary);
}

/* ── CARDS ── */
:root {
  --card-bg:         var(--color-surface);
  --card-border:     var(--color-border-light);
  --card-radius:     var(--radius-lg);
  --card-shadow:     var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --card-padding-x:  var(--spacing-card-x);
  --card-padding-y:  var(--spacing-card-y);
}

/* ── TABLES ── */
:root {
  --table-border:       rgba(57, 0, 78, 0.10);
  --table-header-bg:    var(--color-brand-25);
  --table-header-color: var(--color-brand-900);
  --table-row-hover:    var(--color-brand-50);
  --table-font-size:    var(--text-sm);
  --table-cell-py:      0.875rem;
  --table-cell-px:      var(--space-4);
}

/* ── BADGES ── */
:root {
  --badge-radius:      var(--radius-full);
  --badge-font-size:   0.7rem;
  --badge-font-weight: var(--font-semibold);
  --badge-px:          var(--space-3);
  --badge-py:          var(--space-1);

  /* Status colors */
  --badge-pending-bg:    #fef3c7;
  --badge-pending-color: #92400e;
  --badge-active-bg:     var(--color-success-100);
  --badge-active-color:  var(--color-success-700);
  --badge-closed-bg:     var(--color-gray-100);
  --badge-closed-color:  var(--color-gray-600);
  --badge-danger-bg:     var(--color-danger-100);
  --badge-danger-color:  var(--color-danger-700);
}


/* ================================================================
   BASE RESET / GLOBALS
   ================================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body {
  font-family: var(--font-ar);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin-top: 0;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  }
h5 { font-size: var(--text-lg);  }
h6 { font-size: var(--text-base); }

@media (max-width: 768px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl);  }
}

p {
  margin-top: 0;
  line-height: var(--leading-relaxed);
}

a {
  color: var(--color-brand-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-brand-700);
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Accessibility — focus ring */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ================================================================
   COMPONENT CLASSES
   ================================================================ */

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--btn-md-fs);
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  padding: var(--btn-md-py) var(--btn-md-px);
  border-radius: var(--btn-border-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--btn-transition);
  white-space: nowrap;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-color);
  border-color: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--btn-primary-color);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-1px);
}

/* Secondary (Outline) */
.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-color);
  border-color: var(--btn-secondary-border);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-color);
}

/* Danger */
.btn-danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-color);
  border-color: var(--btn-danger-bg);
}

.btn-danger:hover {
  background: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-bg-hover);
  color: var(--btn-danger-color);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-gray-100);
  color: var(--color-text-primary);
}

/* Sizes */
.btn-sm {
  font-size: var(--btn-sm-fs);
  padding: var(--btn-sm-py) var(--btn-sm-px);
  border-radius: var(--radius-base);
}

.btn-lg {
  font-size: var(--btn-lg-fs);
  padding: var(--btn-lg-py) var(--btn-lg-px);
}

/* Full width */
.btn-block {
  width: 100%;
}

/* Loading state */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}


/* ── CARDS ── */
.ds-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.ds-card:hover {
  box-shadow: var(--card-shadow-hover);
}

.ds-card-header {
  padding: var(--card-padding-y) var(--card-padding-x);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ds-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.ds-card-body {
  padding: var(--card-padding-y) var(--card-padding-x);
}

.ds-card-footer {
  padding: var(--card-padding-y) var(--card-padding-x);
  border-top: 1px solid var(--card-border);
  background: var(--color-surface-raised);
}


/* ── FORMS ── */
.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--spacing-form-gap);
}

.ds-label {
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  color: var(--label-color);
}

.ds-label .required {
  color: var(--color-danger-500);
  margin-inline-start: 2px;
}

.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--input-font-size);
  color: var(--input-color);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--spacing-input-y) var(--spacing-input-x);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  appearance: none;
}

.ds-input::placeholder,
.ds-textarea::placeholder {
  color: var(--input-placeholder);
}

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
  border-color: var(--input-border-focus);
  box-shadow: var(--input-shadow-focus);
}

.ds-input.is-error,
.ds-select.is-error,
.ds-textarea.is-error {
  border-color: var(--input-border-error);
  background: var(--input-bg-error);
}

.ds-field-error {
  font-size: var(--text-xs);
  color: var(--color-danger-600);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.ds-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}


/* ── TABLES ── */
.ds-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--table-border);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--table-font-size);
  white-space: nowrap;
}

.ds-table thead th {
  background: var(--table-header-bg);
  color: var(--table-header-color);
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--table-border);
  text-align: start;
}

.ds-table tbody td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: 1px solid var(--table-border);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

.ds-table tbody tr:last-child td {
  border-bottom: none;
}

.ds-table tbody tr:hover td {
  background: var(--table-row-hover);
}


/* ── BADGES ── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--badge-py) var(--badge-px);
  border-radius: var(--badge-radius);
  font-size: var(--badge-font-size);
  font-weight: var(--badge-font-weight);
  line-height: 1;
}

.ds-badge-pending  { background: var(--badge-pending-bg);  color: var(--badge-pending-color);  }
.ds-badge-success  { background: var(--badge-active-bg);   color: var(--badge-active-color);   }
.ds-badge-closed   { background: var(--badge-closed-bg);   color: var(--badge-closed-color);   }
.ds-badge-danger   { background: var(--badge-danger-bg);   color: var(--badge-danger-color);   }
.ds-badge-brand    { background: var(--color-brand-100);   color: var(--color-brand-900);      }


/* ── SECTION TYPOGRAPHY ── */
.ds-section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-500);
  margin-bottom: var(--space-3);
}

.ds-section-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.ds-section-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 42rem;
}

@media (max-width: 768px) {
  .ds-section-title { font-size: var(--text-2xl); }
  .ds-section-desc  { font-size: var(--text-sm);  }
}


/* ── ALERTS / NOTIFICATIONS ── */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-base);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.ds-alert-success {
  background: var(--color-success-50);
  border-color: #bbf7d0;
  color: var(--color-success-700);
}

.ds-alert-danger {
  background: var(--color-danger-50);
  border-color: #fecaca;
  color: var(--color-danger-700);
}

.ds-alert-warning {
  background: var(--color-warning-50);
  border-color: #fde68a;
  color: #92400e;
}

.ds-alert-info {
  background: var(--color-brand-50);
  border-color: var(--color-brand-200);
  color: var(--color-brand-900);
}


/* ── ICON BOX ── */
.ds-icon-box {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-600);
  flex-shrink: 0;
  transition: background var(--transition-base), color var(--transition-base);
}

.ds-icon-box-lg {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
}

.ds-icon-box:hover,
.group:hover .ds-icon-box {
  background: var(--color-brand-100);
  color: var(--color-brand-900);
}


/* ── AVATAR ── */
.ds-avatar {
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-border-base);
  flex-shrink: 0;
}

.ds-avatar-sm  { width: 32px;  height: 32px; }
.ds-avatar-md  { width: 48px;  height: 48px; }
.ds-avatar-lg  { width: 64px;  height: 64px; }
.ds-avatar-xl  { width: 96px;  height: 96px; }


/* ── DIVIDER ── */
.ds-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-6) 0;
  border: none;
}

.ds-divider-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin: var(--space-4) 0;
}

.ds-divider-label::before,
.ds-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}


/* ── EMPTY STATE ── */
.ds-empty {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  color: var(--color-text-muted);
}

.ds-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  opacity: 0.4;
}

.ds-empty-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.ds-empty-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}


/* ── PAGINATION ── */
.ds-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.ds-page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.ds-page-item:hover {
  background: var(--color-brand-50);
  border-color: var(--color-brand-200);
  color: var(--color-brand-900);
}

.ds-page-item.active {
  background: var(--color-brand-900);
  border-color: var(--color-brand-900);
  color: var(--color-text-inverse);
}

.ds-page-item.disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* ================================================================
   UTILITY CLASSES
   ================================================================ */

/* Section padding */
.ds-section     { padding: var(--spacing-section-y) 0; }
.ds-section-sm  { padding: calc(var(--spacing-section-y) / 2) 0; }

/* Text utilities */
.text-brand     { color: var(--color-brand-900); }
.text-muted     { color: var(--color-text-muted); }
.text-success   { color: var(--color-success-600); }
.text-danger    { color: var(--color-danger-600); }

/* Background utilities */
.bg-brand       { background-color: var(--color-brand-900); }
.bg-brand-light { background-color: var(--color-brand-25); }
.bg-surface     { background-color: var(--color-surface); }

/* Flex helpers */
.ds-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ds-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* Truncate */
.ds-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Visually hidden (accessible) */
.ds-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;
}