/* =============================================================
   components.css — Design System Components
   Lawyer Office App — Design System v1.0
   Extends Bootstrap 5 without conflicting.
   Section 1: Tailwind compatibility layer (utility classes needed
              by existing templates after Tailwind CDN removal)
   Section 2: Reusable UI components (card, animated-button, badge,
              table, form enhancements, skeleton wrappers)
   Requires: variables.css + Bootstrap 5 loaded first.
   ============================================================= */

/* ──────────────────────────────────────────────────────────────
   1. TAILWIND COMPATIBILITY LAYER
   Maps Tailwind utility class names → equivalent CSS rules so
   existing templates work after the Tailwind CDN is removed.
   ────────────────────────────────────────────────────────────── */

/* Display */
.flex         { display: flex;         }
.inline-flex  { display: inline-flex;  }
.grid         { display: grid;         }
.block        { display: block;        }
.inline-block { display: inline-block; }
.hidden       { display: none !important; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky;   }
.fixed    { position: fixed;    }

/* Flexbox axis alignment */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row;    }
.flex-wrap     { flex-wrap: wrap;        }
.flex-nowrap   { flex-wrap: nowrap;      }
.items-center  { align-items: center;    }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end;  }
.justify-center  { justify-content: center;        }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end;      }
.justify-start   { justify-content: flex-start;    }

/* Flex/Grid grow/shrink */
.flex-1        { flex: 1 1 0%; }
.flex-auto     { flex: 1 1 auto; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow     { flex-grow: 1; }
.min-w-0       { min-width: 0; }

/* Gap utilities (4px baseline) */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* Space-y / space-x (child margin stacks) */
.space-y-1 > * + * { margin-block-start: var(--space-1); }
.space-y-2 > * + * { margin-block-start: var(--space-2); }
.space-y-3 > * + * { margin-block-start: var(--space-3); }
.space-y-4 > * + * { margin-block-start: var(--space-4); }
.space-x-1 > * + * { margin-inline-start: var(--space-1); }
.space-x-2 > * + * { margin-inline-start: var(--space-2); }
.space-x-3 > * + * { margin-inline-start: var(--space-3); }

/* Padding (logical properties for RTL support) */
.p-1  { padding: var(--space-1);  }
.p-2  { padding: var(--space-2);  }
.p-3  { padding: var(--space-3);  }
.p-4  { padding: var(--space-4);  }
.p-5  { padding: var(--space-5);  }
.p-6  { padding: var(--space-6);  }
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.py-1 { padding-block:  var(--space-1); }
.py-2 { padding-block:  var(--space-2); }
.py-3 { padding-block:  var(--space-3); }
.py-4 { padding-block:  var(--space-4); }
.py-12{ padding-block:  3rem;           }
.pt-2 { padding-block-start: var(--space-2); }
.pb-2 { padding-block-end:   var(--space-2); }

/* Width / Height */
.w-3  { width: 0.75rem;  }
.w-4  { width: 1rem;     }
.w-5  { width: 1.25rem;  }
.w-6  { width: 1.5rem;   }
.w-7  { width: 1.75rem;  }
.w-0  { width: 0;        }
.w-full { width: 100%;   }
.w-48   { width: 12rem;  }
.w-60   { width: 15rem;  }
.w-80   { width: 20rem;  }
.h-3  { height: 0.75rem; }
.h-4  { height: 1rem;    }
.h-6  { height: 1.5rem;  }
.h-px { height: 1px;     }
.h-full { height: 100%;  }

/* Max-width */
.max-w-xl  { max-width: 36rem;  }
.max-w-2xl { max-width: 42rem;  }
.max-w-full{ max-width: 100%;   }

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

/* Border radius */
.rounded-md   { border-radius: 0.375rem; }
.rounded-lg   { border-radius: 0.5rem;   }
.rounded-xl   { border-radius: 0.75rem;  }
.rounded-2xl  { border-radius: 1rem;     }
.rounded-full { border-radius: var(--radius-full); }

/* Border utilities */
.border-t   { border-top:    1px solid var(--color-border); }
.border-b   { border-bottom: 1px solid var(--color-border); }

/* Font weight */
.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-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black     { font-weight: var(--font-weight-black);     }

/* Font size */
.text-xs   { font-size: var(--font-size-xs); line-height: 1rem;   }
.text-sm   { font-size: var(--font-size-sm); line-height: 1.25rem;}
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); line-height: 1.75rem; }
.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 alignment */
.text-center { text-align: center; }
.text-start  { text-align: start;  }
.text-end    { text-align: end;    }

/* Text colors (brand + slate palette) */
.text-brand    { color: var(--color-primary); }
.text-ink      { color: var(--color-text-ink); }
.text-muted    { color: var(--color-text-muted); }

.text-slate-400 { color: var(--color-slate-400); }
.text-slate-500 { color: var(--color-slate-500); }
.text-slate-600 { color: var(--color-slate-600); }
.text-slate-700 { color: var(--color-slate-700); }
.text-slate-900 { color: var(--color-slate-900); }
.text-gray-400  { color: var(--color-gray-400);  }
.text-gray-500  { color: var(--color-gray-500);  }
.text-gray-700  { color: var(--color-gray-700);  }

.text-emerald-600 { color: #059669; }
.text-amber-600   { color: #d97706; }
.text-rose-500    { color: var(--color-rose-500); }
.text-blue-500    { color: var(--color-blue-500); }

/* Background colors */
.bg-brand        { background-color: var(--color-primary); }
.bg-surface      { background-color: var(--color-surface); }
.bg-soft         { background-color: var(--color-surface-soft); }
.bg-slate-50     { background-color: var(--color-slate-50);  }
.bg-slate-100    { background-color: var(--color-slate-100); }
.bg-slate-200    { background-color: var(--color-slate-200); }
.bg-gray-100     { background-color: var(--color-gray-100);  }
.bg-gray-200     { background-color: var(--color-gray-200);  }
.bg-amber-50     { background-color: var(--color-amber-50);  }
.bg-amber-100    { background-color: var(--color-amber-100); }
.bg-emerald-100  { background-color: var(--color-emerald-100); }

/* Border colors */
.border-brand      { border-color: var(--color-primary) !important; }
.border-slate-200  { border-color: var(--color-slate-200);  }
.border-gray-200   { border-color: var(--color-gray-200);   }
.border-amber-200  { border-color: var(--color-amber-200);  }

/* Shadow aliases */
.shadow-card  { box-shadow: var(--shadow-card);  }
.shadow-soft  { box-shadow: var(--shadow-soft);  }
.shadow-hover { box-shadow: var(--shadow-hover); }
.shadow-none  { box-shadow: none; }

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

/* Additional layout utilities */
.bg-white   { background-color: #ffffff; }
.bg-transparent { background-color: transparent; }

.border     { border: 1px solid var(--color-border); }
.border-2   { border: 2px solid var(--color-border); }

/* Transition utilities */
.transition         { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.transition-all     { transition: all 300ms var(--transition-base); }
.transition-transform { transition: transform var(--transition-base); }

/* Hover pseudo-variants (CSS fallback for removed Tailwind) */
.hover\:shadow-card:hover  { box-shadow: var(--shadow-card); }
.hover\:shadow-soft:hover  { box-shadow: var(--shadow-soft); }
.hover\:shadow-md:hover    { box-shadow: var(--shadow-md);   }
.hover\:text-brand:hover   { color: var(--color-primary);   }
.hover\:text-danger:hover  { color: var(--color-danger);    }
.hover\:border-brand:hover { border-color: var(--color-primary); }
.hover\:bg-slate-100:hover { background-color: var(--color-slate-100); }
.hover\:underline:hover    { text-decoration: underline; }

/* Focus pseudo-variants */
.focus\:outline-none:focus { outline: none; }

/* Responsive grid helpers (mobile-first, matches Tailwind md/lg breakpoints) */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:col-span-2  { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Visually hidden (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-width: 0;
}

/* ──────────────────────────────────────────────────────────────
   2. REUSABLE DESIGN SYSTEM COMPONENTS
   ────────────────────────────────────────────────────────────── */

/* ── 2a. App Card ─────────────────────────────────────────── */

.app-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  color: var(--color-text);
}

.app-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.app-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}

.app-card-body   { padding: 0; }

/* ── 2b. KPI / Stat Card ──────────────────────────────────── */

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.kpi-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.kpi-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  color: var(--color-text-ink);
  line-height: var(--line-height-tight);
}

.kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.kpi-badge.up   { color: var(--color-success); }
.kpi-badge.down { color: var(--color-danger);  }

/* ── 2c. Animated Button ──────────────────────────────────── */

.btn-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition:
    transform        var(--transition-fast),
    box-shadow       var(--transition-fast),
    background-color var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn-animated:hover {
  background: var(--color-primary-alt);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-animated:active {
  transform: translateY(0) scale(.98);
  box-shadow: none;
}

.btn-animated:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Loading / spinner state */
.btn-animated .btn-label  { transition: opacity var(--transition-fast); }
.btn-animated .btn-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.btn-animated .btn-spinner::after {
  content: '';
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: spin .6s linear infinite;
}
.btn-animated[data-loading="true"] .btn-label  { opacity: 0; }
.btn-animated[data-loading="true"] .btn-spinner { display: flex; }
.btn-animated[data-loading="true"] { pointer-events: none; opacity: .8; }

/* ── 2d. Badge ─────────────────────────────────────────────── */

.ds-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border: 1px solid transparent;
}
.ds-badge.success { background: var(--color-success-soft); color: #065f46; border-color: var(--color-success-border); }
.ds-badge.warning { background: var(--color-warning-soft); color: #92400e; border-color: var(--color-warning-border); }
.ds-badge.danger  { background: var(--color-danger-soft);  color: #b91c1c; border-color: var(--color-danger-border);  }
.ds-badge.info    { background: var(--color-info-soft);    color: var(--color-info); border-color: var(--color-info-border); }

/* ── 2e. Table Enhancements ───────────────────────────────── */

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.ds-table thead th {
  background: var(--color-surface-soft);
  color: var(--color-text-soft);
  font-weight: var(--font-weight-extrabold);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
.ds-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}
.ds-table tbody tr:hover {
  background: var(--color-surface-soft);
}
.ds-table tbody td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  vertical-align: middle;
}

/* Scrollable table wrapper */
.table-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* ── 2f. Form Enhancements ────────────────────────────────── */

/* Input base */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
textarea,
select {
  border-color: var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* ── 2g. Dark Mode for Components ─────────────────────────── */

html.dark-mode .app-card,
[data-theme="dark"] .app-card,
html.dark-mode .kpi-card,
[data-theme="dark"] .kpi-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

html.dark-mode .kpi-value,
[data-theme="dark"] .kpi-value {
  color: var(--color-text);
}

html.dark-mode .kpi-label,
[data-theme="dark"] .kpi-label {
  color: var(--color-text-soft);
}

html.dark-mode .bg-slate-50,
html.dark-mode .bg-slate-100,
html.dark-mode .bg-slate-200,
html.dark-mode .bg-gray-100,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100,
[data-theme="dark"] .bg-slate-200,
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--color-surface-soft) !important;
}

html.dark-mode .text-ink,
html.dark-mode .text-slate-700,
html.dark-mode .text-slate-900,
[data-theme="dark"] .text-ink,
[data-theme="dark"] .text-slate-700,
[data-theme="dark"] .text-slate-900 {
  color: var(--color-text) !important;
}

html.dark-mode .text-slate-500,
html.dark-mode .text-slate-600,
html.dark-mode .text-gray-500,
html.dark-mode .text-gray-700,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-700 {
  color: var(--color-text-soft) !important;
}

html.dark-mode .border-slate-200,
html.dark-mode .border-gray-200,
html.dark-mode .border-t,
html.dark-mode .border-b,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-b {
  border-color: var(--color-border) !important;
}

/* ── 2h. RTL / Accessibility Notes ───────────────────────── */
/*
 * Logical properties (margin-inline, padding-inline, etc.) are used
 * throughout this file, which makes all components RTL-compatible
 * automatically without needing [dir="rtl"] overrides.
 *
 * Bootstrap 5 utility classes (me-auto, ms-auto, text-start, etc.)
 * are NOT overridden here — Bootstrap already handles RTL correctly
 * when the <html dir="rtl"> attribute is set.
 */