/**
 * ============================================================
 * TISSLA DESIGN SYSTEM - theme.css
 * ============================================================
 *
 * Modern Arabic RTL Theme
 * Version: 2.1.0
 * Last Updated: 2025-12-06
 *
 * CHANGELOG:
 * ----------
 * v2.1.0 - All button shadows now use color-mix() for consistency
 *        - Pagination padding uses design tokens
 *        - Full audit compliance achieved
 *
 * v2.0.0 - Major refactor: design tokens, section documentation,
 *          focus states, new button/alert variants
 *
 * TABLE OF CONTENTS:
 * ------------------
 * 1. CSS Variables (:root)
 * 2. Global Styles
 * 3. Typography
 * 4. Cards & Stat Cards
 * 5. Buttons
 * 6. Badges
 * 7. Forms
 * 8. Tables
 * 9. Action Icons
 * 10. Mobile Navigation
 * 11. Desktop Navbar
 * 12. Responsive Media Queries
 * 13. Alerts
 * 14. Dropdown Menus
 * 15. Nav Tabs & Nav Pills
 * 16. Quick Link Cards
 * 17. Print Styles
 * 18. Animations & Loading States
 * 19. Pagination
 * 20. Modals
 * 21. List Group
 *
 * ============================================================
 */

/* Fonts are loaded locally - no CDN dependency for China compatibility */

/* ===========================================
   1. CSS VARIABLES - DESIGN SYSTEM CONSTANTS ONLY
   =========================================== */
/*
 * ⚠️ IMPORTANT: Color variables are NO LONGER defined here!
 *
 * All customizable colors are now injected dynamically via:
 * <x-theme-variables /> component in layouts
 *
 * This follows SSOT (Single Source of Truth) principle.
 * Colors come from: WorkspaceSettingsService → config/theme.php
 *
 * @see resources/views/components/theme-variables.blade.php
 * @see app/Core/Services/WorkspaceSettingsService.php
 *
 * The following variables are defined by theme-variables component:
 * - --color-primary, --color-secondary, --color-accent
 * - --color-success, --color-danger, --color-warning, --color-info
 * - --bg-page, --bg-card, --bg-sidebar, --bg-navbar, --bg-input
 * - --text-primary, --text-secondary, --text-muted, --link-color
 * - --sidebar-text, --sidebar-text-active, --sidebar-hover-bg
 * - --border-color, --input-border, --focus-border
 * - --table-header-bg, --table-row-hover
 * - --font-family, --font-size
 * - --card-radius, --card-shadow, --button-radius
 */

:root {
  /* ===================================
     Design System Constants (Non-customizable)
     These are fixed design tokens, not theme colors
     =================================== */

  /* Radius Tokens */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Shadow Tokens */
  --shadow-sm: 0 2px 8px rgba(2, 8, 23, 0.04);
  --shadow-md: 0 4px 12px rgba(2, 8, 23, 0.08);
  --shadow-lg: 0 6px 18px rgba(2, 8, 23, 0.06);
  --shadow-xl: 0 8px 25px rgba(2, 8, 23, 0.1);

  /* Spacing Tokens */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  /* Layout Tokens */
  --sidebar-width: 260px;
  --sidebar-mini-width: 70px;
  --space-5: 20px;
  --space-6: 24px;

  /* Z-Index Tokens */
  --z-sidebar: 1000;
  --z-overlay: 1050;
  --z-mobile-drawer-backdrop: 1040;
  --z-mobile-drawer: 1045;

  /* Layout Constants */
  --navbar-height: 56px;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Font Stack (fallback - theme-variables provides --font-family) */
  --font: var(--font-family, "Cairo"), system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ===========================================
   GLOBAL STYLES
   =========================================== */
html, body {
  font-family: var(--font);
  background-color: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Main content spacing for fixed navigation */
.main-content {
  margin-top: calc(var(--navbar-height) + var(--space-5)); /* navbar + 20px spacing */
  padding-top: var(--space-4);
}

/* Container wrapper for pages */
.container.form-page {
  padding: var(--space-4);
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-primary-dark);
  letter-spacing: 0.2px;
  font-weight: 700;
}

/* Page Title Component */
.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.page-title h5 {
  margin: 0;
  font-size: 1.75rem;
}

.page-title .pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ===========================================
   CARDS
   =========================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.card-body {
  padding: var(--space-6);
}

/* Colored card headers: links & headings inherit text color */
.card-header.text-white,
.card-header.text-white a,
.card-header.text-white h1,
.card-header.text-white h2,
.card-header.text-white h3,
.card-header.text-white h4,
.card-header.text-white h5,
.card-header.text-white h6 {
  color: #fff;
}
.card-header.text-white a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Stats Cards - Compact Dashboard Style */
.card-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: box-shadow 0.2s ease;
}

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

.card-stat .stat-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-stat .stat-icon {
  font-size: 1.1rem;
  color: var(--text-primary);
}

.card-stat .label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
}

.card-stat .value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .card-stat {
    padding: 0.6rem 0.75rem;
  }
  .card-stat .value {
    font-size: 1rem;
  }
}

/* ===========================================
   BUTTONS
   =========================================== */
.btn {
  border-radius: var(--radius-md);
  padding: 0.55rem 1rem;
  font-weight: 600;
  font-family: var(--font);
  transition: all 0.2s ease;
  border-width: 1.5px;
}

/* Focus states for accessibility */
.btn:focus,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.btn-success:focus,
.btn-success:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-success) 25%, transparent);
}

.btn-danger:focus,
.btn-danger:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-danger) 25%, transparent);
}

.btn-warning:focus,
.btn-warning:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-warning) 25%, transparent);
}

.btn-info:focus,
.btn-info:focus-visible {
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-info) 25%, transparent);
}

.btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-color);
  background: var(--bg-card);
}

.btn-outline-secondary:hover {
  background: var(--text-secondary);
  border-color: var(--text-secondary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-secondary) 25%, transparent);
}

.btn-success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.btn-success:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-success) 40%, transparent);
}

.btn-warning {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: white;
}

.btn-warning:hover {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-warning) 40%, transparent);
}

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

.btn-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-danger) 40%, transparent);
}

.btn-info {
  background: var(--color-info);
  border-color: var(--color-info);
  color: white;
}

.btn-info:hover {
  background: var(--color-info);
  border-color: var(--color-info);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-info) 40%, transparent);
}

.btn-secondary {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: white;
}

.btn-secondary:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-secondary) 40%, transparent);
}

/* Outline Button Variants */
.btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-success);
  background: transparent;
}

.btn-outline-success:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-success) 25%, transparent);
}

.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: transparent;
}

.btn-outline-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-danger) 25%, transparent);
}

.btn-outline-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
  background: transparent;
}

.btn-outline-warning:hover {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-warning) 25%, transparent);
}

.btn-outline-info {
  color: var(--color-info);
  border-color: var(--color-info);
  background: transparent;
}

.btn-outline-info:hover {
  background: var(--color-info);
  border-color: var(--color-info);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-info) 25%, transparent);
}

/* Light & Dark button variants */
.btn-light {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn-light:hover {
  background: var(--table-row-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-dark {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: white;
}

.btn-dark:hover {
  background: var(--text-primary-darker);
  border-color: var(--text-primary-darker);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--text-primary-darker) 50%, transparent);
}

.btn-outline-light {
  color: var(--text-secondary);
  border-color: var(--border-color);
  background: transparent;
}

.btn-outline-light:hover {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.btn-outline-dark {
  color: var(--text-primary);
  border-color: var(--text-primary);
  background: transparent;
}

.btn-outline-dark:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: white;
}

/* ===========================================
   BADGES
   =========================================== */
.badge {
  border-radius: var(--radius-full);
  padding: 0.35rem 0.6rem;
  font-weight: 600;
  font-size: 0.75rem;
}

.badge-primary {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.badge-success {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
}

.badge-warning {
  background: color-mix(in srgb, var(--color-warning) 12%, transparent);
  color: var(--color-warning);
}

.badge-danger {
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
}

.badge-info {
  background: color-mix(in srgb, var(--color-info) 12%, transparent);
  color: var(--color-info);
}

.badge-secondary {
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-secondary);
}

/* ===========================================
   FORMS
   =========================================== */
.form-control, .form-select {
  background: var(--bg-input);
  border-color: var(--input-border);
  border-radius: var(--radius-md);
  border-width: 1.5px;
  padding: 0.6rem 0.75rem;
  font-family: var(--font);
  transition: all 0.2s ease;
}

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

.form-control:focus, .form-select:focus {
  background: var(--bg-card);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-color: var(--color-primary);
  outline: none;
}

.form-label {
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* ===========================================
   AUTO-FIT FORM FIELDS
   Short-content fields shrink to fit text,
   freeing horizontal space for more fields per row
   =========================================== */

/* Date/time inputs have fixed-length content */
input[type="date"].form-control,
input[type="date"].form-control-sm,
input[type="time"].form-control,
input[type="time"].form-control-sm,
input[type="month"].form-control,
input[type="month"].form-control-sm {
  width: auto;
  min-width: 8rem;
}

/* Number inputs are typically short */
input[type="number"].form-control,
input[type="number"].form-control-sm {
  width: auto;
  min-width: 5rem;
  max-width: 12rem;
}

/* Selects with short options (currency, status, etc.) */
select.form-select,
select.form-select-sm {
  width: auto;
  min-width: 6rem;
}

/* Auto-shrink Bootstrap grid columns containing short fields */
.row > [class*="col"]:has(input[type="date"]),
.row > [class*="col"]:has(input[type="time"]),
.row > [class*="col"]:has(input[type="month"]),
.row > [class*="col"]:has(input[type="number"]),
.row > [class*="col"]:has(select.form-select) {
  flex: 0 0 auto;
  width: auto;
}

/* Text inputs, textareas, autocompletes should still fill their column */
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="search"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
textarea.form-control {
  width: 100%;
}

/* Columns with text inputs keep their grid width */
.row > [class*="col"]:has(input[type="text"]),
.row > [class*="col"]:has(input[type="email"]),
.row > [class*="col"]:has(input[type="search"]),
.row > [class*="col"]:has(textarea),
.row > [class*="col"]:has(.autocomplete-input) {
  flex: unset;
  width: unset;
}

/* Tables: fields inside table cells stay 100% */
td input.form-control,
td select.form-select,
td input.form-control-sm,
td select.form-select-sm,
th input.form-control,
th select.form-select {
  width: 100%;
}

/* Section Bands for Forms */
.section-band {
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
  color: var(--text-secondary);
}

.soft-hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: var(--space-4) 0;
  opacity: 0.6;
}

/* ===========================================
   TABLES - Unified (Bootstrap + Tabulator + AG Grid + DataTables)
   =========================================== */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border-color);
}

/* Unified table header - works across all table libraries */
.table > thead th,
.tabulator .tabulator-header .tabulator-col,
.ag-header-cell,
.dataTables_wrapper thead th {
  position: sticky;
  top: 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--table-header-bg);
  white-space: nowrap;
  border-bottom: 2px solid var(--border-color);
  padding: 0.75rem;
  z-index: 1;
}

/* Unified striped rows */
.table-striped > tbody > tr:nth-child(even),
.tabulator-row:nth-child(even),
.ag-row-even {
  background-color: var(--neutral-50, #F8FAFC);
}

.table-striped tbody tr:nth-child(odd) {
  background: var(--row-stripe);
}

/* Unified cell padding */
.table td, .table th {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.table td.num, .table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Unified hover rows */
.table-hover tbody tr:hover,
.tabulator-row:hover,
.ag-row:hover {
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Tabulator specific overrides */
.tabulator {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font);
}

.tabulator .tabulator-header {
  background: var(--table-header-bg);
  border-bottom: 2px solid var(--border-color);
}

.tabulator .tabulator-header .tabulator-col {
  border-right: 1px solid var(--border-color);
}

.tabulator-row .tabulator-cell {
  border-right: 1px solid var(--border-color);
  padding: 0.75rem;
  font-size: var(--text-sm, 0.875rem);
}

/* ── Column-type classes (shared across all Vue list tables) ── */
/* Usage: <th class="col-date">التاريخ</th> / <td class="col-date">… */

.table .col-check {
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  padding-inline: 0.25rem;
}

.table .col-id {
  min-width: 70px;
  white-space: nowrap;
}

.table .col-date {
  width: 95px;
  min-width: 95px;
  white-space: nowrap;
}

.table .col-badge {
  min-width: 70px;
  white-space: nowrap;
}

.table .col-text {
  min-width: 120px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table .col-money {
  min-width: 100px;
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, 'Fira Code', 'Cascadia Code', monospace);
  direction: ltr;
}

/* TAWHEED F2 — عزل اتّجاه القيم الرقميّة داخل RTL (تعميم .col-money):
   السالب المتقدّم -1,234.56 يبقى متقدّماً بصريّاً ولا يقلبه bidi إلى «لاحق».
   تُطبَّق على كلّ خليّة/قيمة رقميّة (docs/FORMAT_SPEC.md). */
.num {
  direction: ltr;
  unicode-bidi: isolate;
}

.table .col-actions {
  min-width: 100px;
  white-space: nowrap;
  text-align: center;
}

/* NOTE (TAWHEED leftovers): a previous `.table-responsive .table .col-text { max-width: none }`
   override lived here ("ensure col-text can shrink"). max-width never prevents shrinking —
   the override only UNCAPPED the nowrap description columns, so long text blew the table
   past its container (e.g. journal list clipped the credit column at 1440px). Removed so
   the 320px cap + ellipsis above applies inside .table-responsive as designed. */

/* AG Grid specific overrides */
.ag-theme-alpine,
.ag-theme-balham {
  --ag-font-family: var(--font);
  --ag-header-background-color: var(--table-header-bg);
  --ag-border-color: var(--border-color);
  --ag-row-hover-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
  --ag-odd-row-background-color: var(--row-stripe, transparent);
}

/* DataTables specific overrides */
.dataTables_wrapper {
  font-family: var(--font);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.6rem;
  font-family: var(--font);
}

.dataTables_wrapper .dataTables_info {
  color: var(--text-secondary);
  font-size: var(--text-sm, 0.875rem);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  background: var(--bg-card) !important;
  margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
}

/* ===========================================
   ACTION ICONS
   =========================================== */
.action-icons {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
}

.action-icons .btn {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-secondary);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.action-icons .btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.action-icons .btn-danger {
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.action-icons .btn-danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: white;
}

.action-icons .btn-success {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.action-icons .btn-success:hover {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

.action-icons .btn-warning {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.action-icons .btn-warning:hover {
  background: var(--color-warning);
  border-color: var(--color-warning);
  color: white;
}

/* ===========================================
   MOBILE NAVIGATION
   =========================================== */

/* Mobile Header - Only shown on mobile */
.mobile-header {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-overlay, 1100);
  padding-top: env(safe-area-inset-top, 0);
}

.mobile-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding-inline: var(--space-3);
  gap: var(--space-3);
}

.mobile-menu-toggle {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mobile-menu-toggle:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.mobile-menu-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.hamburger-line {
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.2s ease;
  transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 16px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.mobile-brand img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mobile-brand span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-actions {
  width: 44px;
  flex-shrink: 0;
}

/* Mobile Drawer */
.mobile-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: var(--z-mobile-drawer-backdrop, 1120);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.mobile-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  inset-inline-end: -100%; /* RTL: slides from right, LTR: slides from left */
  width: 80vw;
  min-width: 300px;
  max-width: 360px;
  height: 100vh;
  background: var(--bg-card);
  border-inline-start: 1px solid var(--border-color); /* RTL-safe border */
  box-shadow: var(--shadow-lg);
  z-index: var(--z-mobile-drawer, 1140);
  transition: inset-inline-end 240ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-drawer.active {
  inset-inline-end: 0;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-section);
}

.mobile-drawer-header img {
  width: 28px;
  height: 28px;
}

.mobile-drawer-header span {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-drawer-nav {
  padding: var(--space-2) 0;
}

.mobile-nav-group {
  margin-bottom: var(--space-3);
}

.mobile-group-label {
  padding: var(--space-2) var(--space-5) var(--space-1);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-nav-item {
  margin: 0;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  min-height: 48px;
  position: relative;
}

.mobile-nav-link:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-primary);
}

.mobile-nav-link:focus {
  outline: none;
  box-shadow: inset 0 0 0 .2rem color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.mobile-nav-link.active {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  border-inline-end: 3px solid var(--color-primary); /* RTL-safe active indicator */
}

.mobile-nav-link i {
  font-size: 18px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.mobile-nav-danger {
  color: var(--color-danger);
}

.mobile-nav-danger:hover {
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
  color: var(--color-danger);
}

.mobile-nav-form {
  margin: 0;
}

/* Expandable Navigation Items */
.mobile-nav-expandable {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: right;
  cursor: pointer;
  min-height: 48px;
  font-family: inherit;
}

.mobile-nav-expandable:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-primary);
}

.mobile-nav-expandable .expand-icon {
  margin-right: auto;
  transition: transform 0.2s ease;
  font-size: 0.875rem;
}

.mobile-nav-expandable.expanded .expand-icon {
  transform: rotate(90deg);
}

/* Nested Children */
.mobile-nav-children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-nav-children.expanded {
  max-height: 1000px;
  transition: max-height 0.5s ease-in;
}

.mobile-nav-child {
  margin: 0 var(--space-3);
  margin-right: 2.5rem;
}

.mobile-nav-child-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.mobile-nav-child-link:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--text-primary);
}

.mobile-nav-child-link i {
  font-size: 1rem;
}

body.mobile-drawer-open {
  overflow: hidden;
}

.mobile-nav-user {
  border-top: 1px solid var(--border-color);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.mobile-user-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--text-secondary);
}

.mobile-user-info i {
  font-size: 24px;
  color: var(--color-primary);
}

.mobile-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.mobile-user-role {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===========================================
   DESKTOP NAVBAR
   =========================================== */
/* Uses `body .desktop-navbar` for specificity over Bootstrap defaults */
body .desktop-navbar {
  background: var(--bg-navbar);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  min-height: var(--navbar-height);
  display: block;
  visibility: visible;
  opacity: 1;
  z-index: var(--z-navbar, 1020);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0.5rem 0;
}

body .desktop-navbar .container-xl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
}

body .desktop-navbar .navbar-brand {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
  display: flex;
  align-items: center;
}

body .desktop-navbar .navbar-collapse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

body .desktop-navbar .navbar-nav {
  display: flex;
  visibility: visible;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: var(--space-3);
}

body .desktop-navbar .nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  visibility: visible;
}

body .desktop-navbar .nav-link:hover {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

body .desktop-navbar .nav-link.active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-weight: 600;
}

body .desktop-navbar .navbar-text {
  color: var(--text-secondary);
}

body .desktop-navbar .btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

body .desktop-navbar .nav-item {
  display: block;
  visibility: visible;
}

body .desktop-navbar .navbar-logout-btn {
  color: var(--color-danger);
  border-color: var(--color-danger);
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  visibility: visible;
  opacity: 1;
  background: var(--bg-card);
}

body .desktop-navbar .navbar-logout-btn:hover {
  background-color: var(--color-danger);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* ===========================================
   RESPONSIVE MEDIA QUERIES
   =========================================== */
@media (max-width: 768px) {
  /* Show mobile header, hide desktop navbar */
  .mobile-header {
    display: block !important;
  }

  .desktop-navbar {
    display: none !important;
  }

  /* Adjust main content for fixed mobile header */
  .main-content {
    margin-top: calc(var(--navbar-height) + var(--space-4)) !important; /* navbar + 16px spacing */
    padding-top: var(--space-3) !important;
  }

  /* Mobile Responsiveness */
  .container.form-page {
    padding: var(--space-1);
  }

  main.container {
    padding-inline: var(--space-2);
    padding-top: calc(var(--navbar-height) + var(--space-2)); /* navbar + 8px */
  }

  .page-title {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .page-title h5 {
    font-size: 1.5rem;
  }

  .card-body {
    padding: var(--space-3);
  }

  .action-icons {
    flex-wrap: wrap;
  }

  .table-responsive {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
  }

  .quick-link-card .icon {
    font-size: 2rem;
  }

  .btn {
    padding: 0.65rem 1.25rem;
    width: 100%;
  }

  .btn:not(.btn-sm):not(.action-icons .btn) {
    margin-bottom: 0.5rem;
  }
}

@media (min-width: 769px) {
  /* Hide mobile elements on desktop */
  .mobile-header {
    display: none !important;
  }

  .mobile-drawer,
  .mobile-drawer-backdrop {
    display: none !important;
  }

  .desktop-navbar {
    display: block !important;
  }
}

/* ===========================================
   ALERTS
   =========================================== */
.alert {
  border-radius: var(--radius-lg);
  border-width: 1.5px;
  padding: 1rem 1.25rem;
}

.alert-primary {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
  color: var(--color-primary);
}

.alert-success {
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
  color: var(--color-success);
}

.alert-danger {
  background: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
  color: var(--color-danger);
}

.alert-warning {
  background: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 20%, transparent);
  color: var(--color-warning);
}

.alert-info {
  background: color-mix(in srgb, var(--color-info) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-info) 20%, transparent);
  color: var(--color-info);
}

.alert-secondary {
  background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
  color: var(--color-secondary);
}

/* ===========================================
   DROPDOWN MENUS
   =========================================== */
.dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-1) 0;
  font-family: var(--font);
}

.dropdown-item {
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  transition: all 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--color-primary);
  color: white;
}

.dropdown-item i {
  margin-inline-end: 0.5rem;
  width: 1.25rem;
  text-align: center;
}

.dropdown-divider {
  border-top-color: var(--border-color);
  margin: var(--space-1) 0;
}

.dropdown-header {
  color: var(--text-secondary);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.5rem 1rem;
}

/* ===========================================
   NAV TABS & NAV PILLS
   =========================================== */
.nav-tabs {
  border-bottom: 2px solid var(--border-color);
  gap: var(--space-1);
}

.nav-tabs .nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-sm, 0.875rem);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.625rem 1rem;
  margin-bottom: -2px;
  transition: all 0.2s ease;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  color: var(--color-primary);
  border-bottom-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  background: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
  background: transparent;
}

.nav-pills {
  gap: var(--space-1);
}

.nav-pills .nav-link {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--text-sm, 0.875rem);
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}

.nav-pills .nav-link:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-primary);
}

.nav-pills .nav-link.active {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

/* ===========================================
   QUICK LINK CARDS
   =========================================== */
.quick-link-card {
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.quick-link-card:hover {
  transform: translateY(-3px);
  text-decoration: none;
  color: inherit;
}

.quick-link-card .card {
  border: 1.5px solid var(--border-color);
  height: 100%;
}

.quick-link-card:hover .card {
  border-color: var(--color-primary);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.quick-link-card .icon {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.quick-link-card .title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

.quick-link-card .description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
  .action-icons .btn {
    padding: 0.6rem 0.8rem;
  }

  .quick-link-card {
    transform: none;
  }

  .quick-link-card:active {
    transform: scale(0.98);
  }
}

/* Dark mode: Reserved for future implementation */

/* ===========================================
   PRINT STYLES
   =========================================== */
@media print {
  body {
    background: white !important;
    color: black !important;
  }

  .navbar, .btn, .action-icons {
    display: none !important;
  }

  .card {
    border: 1px solid #000 !important;
    box-shadow: none !important;
    background: white !important;
  }

  /* D8 (TAWHEED-2026-07-29): أُزيلت قاعدة @page 80mm العامّة — كانت تفرض مقاس
     وصل حراريّ على كلّ طباعة في النظام. CSS لا يسمح بتقييد @page بصنف حاوٍ،
     وصفحات الوصل الحراريّ (body.thermal-print) مستقلّة وتعرّف @page 80mm داخلها. */

  .receipt {
    font-size: 12px;
    line-height: 1.3;
  }

  /* A4 report format */
  .report-page {
    page-break-inside: avoid;
  }
}

/* ===========================================
   ANIMATIONS & LOADING STATES
   =========================================== */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

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

/* Loading states */
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-loading {
  position: relative;
  color: transparent !important;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid;
  border-color: currentColor transparent currentColor transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Reset personalization link */
.reset-personalization {
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.reset-personalization:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Unified Page Header Layout - Stacked on mobile, one row on desktop */
.page-header.stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-header.stacked .title-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.page-header.stacked .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

@media (min-width: 768px) {
  /* One row on desktop - RTL: title right, actions left */
  .page-header.stacked {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
  }

  /* Inverted: title-group on left, actions on right */
  .page-header.stacked .title-group {
    order: 1;
  }

  .page-header.stacked .actions {
    order: 2;
    justify-content: flex-end; /* Align buttons to right on desktop */
  }
}

/* Service cards and device icons */
.service-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* ===========================================
   PAGINATION
   =========================================== */
.pagination {
  gap: var(--space-1);
  margin-top: var(--space-6);
}

.pagination .page-link {
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--table-row-hover);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  min-width: 40px;
  text-align: center;
}

.pagination .page-link:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.pagination .page-item.active .page-link {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 8px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

.pagination .page-item.disabled .page-link {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
}

.pagination .page-item.disabled .page-link:hover {
  transform: none;
  box-shadow: none;
}

/* ===========================================
   18. MODALS - UNIFIED DESIGN SYSTEM
   =========================================== */

/* Modal Content - Uses dynamic card radius from theme settings */
body .modal-content {
  border-radius: var(--card-radius, var(--radius-md));
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-family: var(--font-family, var(--font));
}

/* Modal Header - Unified White Design with dynamic settings */
body .modal-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--card-radius, var(--radius-md)) var(--card-radius, var(--radius-md)) 0 0;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}

/* Modal Title - Uses theme text color and font */
body .modal-header .modal-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: calc(var(--font-size, 16px) * 1.1);
  font-family: var(--font-family, var(--font));
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  margin-inline-end: 1rem;
}

/* Icons in Modal Title - Uses primary color from theme */
.modal-header .modal-title i {
  color: var(--color-primary);
  font-size: calc(var(--font-size, 16px) * 1.25);
}

/* Close Button - Consistent styling */
.modal-header .btn-close {
  opacity: 0.6;
  transition: opacity 0.2s ease;
  margin: 0;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

/* Modal Body - Uses theme background and font */
body .modal-body {
  padding: var(--space-5);
  background: var(--bg-card);
  font-family: var(--font-family, var(--font));
  font-size: var(--font-size, 16px);
  color: var(--text-primary);
}

/* Modal Body Form Elements - Unified styling */
body .modal-body .form-label {
  font-family: var(--font-family, var(--font));
  font-size: calc(var(--font-size, 16px) * 0.875);
  color: var(--text-secondary);
  font-weight: 600;
}

body .modal-body .form-control,
body .modal-body .form-select {
  font-family: var(--font-family, var(--font));
  font-size: var(--font-size, 16px);
  border-radius: var(--input-radius, var(--radius-md));
  border-color: var(--input-border);
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: var(--focus-border);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* Modal Footer - Uses theme styling */
.modal-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: var(--space-4) var(--space-5);
  gap: var(--space-2);
}

/* Modal Footer Buttons - Unified from theme */
body .modal-footer .btn {
  font-family: var(--font-family, var(--font));
  font-size: var(--font-size, 16px);
  border-radius: var(--button-radius, var(--radius-md));
}

/* Compact Modal Header (for smaller modals) */
.modal-header.py-2 {
  padding: var(--space-2) var(--space-4);
}

.modal-header.py-2 .modal-title {
  font-size: calc(var(--font-size, 16px) * 1);
}

/* Override any colored backgrounds - Force white with theme color */
body .modal-header.bg-primary,
body .modal-header.bg-success,
body .modal-header.bg-danger,
body .modal-header.bg-warning,
body .modal-header.bg-info,
body .modal-header.bg-secondary,
body .modal-header.bg-dark {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Reset text color in colored headers - Use theme text color */
body .modal-header.bg-primary .modal-title,
body .modal-header.bg-success .modal-title,
body .modal-header.bg-danger .modal-title,
body .modal-header.bg-warning .modal-title,
body .modal-header.bg-info .modal-title,
body .modal-header.bg-secondary .modal-title,
body .modal-header.bg-dark .modal-title,
body .modal-header.text-white {
  color: var(--text-primary);
}

/* Reset close button color */
.modal-header .btn-close-white {
  filter: none;
  opacity: 0.6;
}

/* Modal Dialog Sizes */
.modal-dialog {
  margin: var(--space-4) auto;
}

.modal-dialog-centered {
  min-height: calc(100% - (var(--space-4) * 2));
}

/* Responsive Modal */
@media (max-width: 768px) {
  .modal-dialog {
    margin: var(--space-2);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--space-3);
  }

  .modal-header .modal-title {
    font-size: calc(var(--font-size, 16px) * 0.95);
  }
}

/* ===========================================
   19. LIST GROUP - UNIFIED DESIGN SYSTEM
   ===========================================
   Bootstrap defines --bs-list-group-action-color in .list-group (not :root)
   so we MUST override in .list-group selector to have higher specificity.
   =========================================== */

/* Override Bootstrap's CSS Variables at the correct specificity level */
.list-group {
  --bs-list-group-action-color: var(--text-primary, #212529);
  --bs-list-group-action-hover-color: var(--text-primary, #212529);
  --bs-list-group-action-hover-bg: var(--table-row-hover, #f8f9fa);
  --bs-list-group-action-active-color: var(--text-primary, #212529);
  --bs-list-group-action-active-bg: var(--table-row-hover, #e9ecef);
  --bs-list-group-color: var(--text-primary, #212529);
  --bs-list-group-bg: var(--bg-card, #fff);
  --bs-list-group-border-color: var(--border-color, rgba(0, 0, 0, 0.125));
}

/* ========================================
   Icon-only square button helper
   Usage: .btn.btn-icon makes any Bootstrap btn a square icon button
   ======================================== */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.btn-icon.btn-sm {
    width: 28px;
    height: 28px;
}
.btn-icon.btn-lg {
    width: 40px;
    height: 40px;
}
.btn-icon i {
    font-size: 0.9rem;
}

/* Dropdown split inside btn-icon group — narrower toggle */
.btn-group > .btn-icon.dropdown-toggle-split {
    width: 18px;
    min-width: 18px;
    padding: 0;
}

/* ========================================
   Bulk Action Bar
   Fixed bottom bar for multi-select actions
   ======================================== */
.bulk-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #e8f4fd 0%, #d1ecf1 100%);
    border-top: 2px solid #bee5eb;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    animation: bulk-bar-slide-up 0.3s ease-out;
}

.bulk-action-bar__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #0c5460;
}

.bulk-action-bar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #17a2b8;
    color: white;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
}

.bulk-action-bar__label {
    font-size: 0.9rem;
    color: #0c5460;
}

.bulk-action-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bulk-action-bar__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(12, 84, 96, 0.1);
    color: #0c5460;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-inline-start: 0.5rem;
}

.bulk-action-bar__clear:hover {
    background: rgba(12, 84, 96, 0.25);
    transform: scale(1.1);
}

@keyframes bulk-bar-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Transition classes for Vue */
.slide-up-enter-active {
    animation: bulk-bar-slide-up 0.3s ease-out;
}

.slide-up-leave-active {
    animation: bulk-bar-slide-up 0.3s ease-in reverse;
}

@media (max-width: 768px) {
    .bulk-action-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }

    .bulk-action-bar__actions {
        flex-wrap: wrap;
    }
}

@media print {
    .bulk-action-bar {
        display: none !important;
    }
}