/**
 * Luxury Dark Theme CSS
 * The Doctor Agency ERP - Production Ready
 * Dark theme with gold accents, RTL Arabic support
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Tajawal:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════ */
/* ROOT VARIABLES & COLOR SCHEME */
/* ═══════════════════════════════════════════════════════════════ */

:root {
  /* Primary Colors */
  --dark-bg-primary: #080E1A;
  --dark-bg-secondary: #0a0d14;
  --dark-surface-primary: #101825;
  --dark-surface-secondary: #1a2332;
  --dark-border: #2d3a4a;

  /* Brand Color */
  --brand-primary: #F59E0B;
  --brand-secondary: #d4af37;
  --brand-dark: #D97706;
  --brand-light: #FCD34D;

  /* Text Colors */
  --text-primary: #E2E8F0;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --text-light: #4B5563;

  /* Status Colors */
  --status-success: #10B981;
  --status-success-light: #A7F3D0;
  --status-error: #EF4444;
  --status-error-light: #FCA5A5;
  --status-warning: #F59E0B;
  --status-warning-light: #FCD34D;
  --status-info: #3B82F6;
  --status-info-light: #BFDBFE;

  /* Additional Colors */
  --color-purple: #8B5CF6;
  --color-cyan: #06B6D4;
  --color-emerald: #10B981;
  --color-orange: #F97316;
  --color-pink: #D946EF;
  --color-lime: #84CC16;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.6);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.7);

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════ */
/* BASE STYLES */
/* ═══════════════════════════════════════════════════════════════ */

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

html {
  direction: rtl;
  font-size: 16px;
}

body {
  font-family: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Verdana, sans-serif;
  background-color: var(--dark-bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════ */
/* SCROLLBAR STYLING */
/* ═══════════════════════════════════════════════════════════════ */

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

::-webkit-scrollbar-track {
  background: var(--dark-surface-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 4px;
  transition: background var(--transition-base);
}

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

/* ═══════════════════════════════════════════════════════════════ */
/* SIDEBAR STYLING */
/* ═══════════════════════════════════════════════════════════════ */

.sidebar {
  width: 260px;
  background: var(--dark-surface-primary);
  border-left: 1px solid var(--dark-border);
  overflow-y: auto;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100;
}

.sidebar-user-section {
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--dark-border);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-container {
  flex-shrink: 0;
}

.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #000;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--dark-bg-primary);
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-divider {
  height: 1px;
  background: var(--dark-border);
  margin: 12px 0;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  border-right: 3px solid transparent;
  user-select: none;
}

.nav-item:hover {
  background: rgba(245, 158, 11, 0.08);
  color: var(--text-primary);
  transform: translateX(-2px);
}

.nav-item.active {
  background: rgba(245, 158, 11, 0.15);
  color: var(--brand-primary);
  border-right-color: var(--brand-primary);
  font-weight: 600;
}

.nav-icon {
  font-size: 20px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-label {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-logout {
  padding: 12px;
  border-top: 1px solid var(--dark-border);
  margin-top: 12px;
}

.logout-btn {
  width: 100%;
  padding: 10px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--status-error);
  color: var(--status-error-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--transition-base);
  font-family: inherit;
}

.logout-btn:hover {
  background: var(--status-error);
  color: white;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* ═══════════════════════════════════════════════════════════════ */
/* NOTIFICATION SYSTEM */
/* ═══════════════════════════════════════════════════════════════ */

.notification-system {
  position: relative;
}

.notification-bell {
  background: none;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 24px;
  position: relative;
  padding: 4px;
  transition: color var(--transition-base);
}

.notification-bell:hover {
  color: var(--brand-primary);
  transform: scale(1.1);
  animation: jiggle 0.6s ease;
}

@keyframes jiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--status-error);
  color: white;
  font-size: 11px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--dark-bg-primary);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
}

.notification-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 500px;
  background: var(--dark-surface-primary);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  overflow: hidden;
}

.notification-panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--dark-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-panel-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.close-panel {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
  padding: 0;
  transition: color var(--transition-base);
}

.close-panel:hover {
  color: var(--brand-primary);
}

.notification-list-container {
  flex: 1;
  overflow-y: auto;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--dark-bg-primary);
}

.notification-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

.notification-item {
  padding: 16px;
  background: var(--dark-surface-secondary);
  border-bottom: 1px solid var(--dark-border);
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: all var(--transition-base);
}

.notification-item:hover {
  background: var(--dark-surface-primary);
}

.notification-item.unread {
  background: rgba(245, 158, 11, 0.08);
  border-right: 3px solid var(--brand-primary);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-header {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.notification-type-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.notification-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.notification-message {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 8px;
  line-height: 1.4;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.notification-timestamp {
  color: var(--text-muted);
}

.notification-type-badge {
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.15);
  color: var(--brand-primary);
}

.notification-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.notification-action-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  opacity: 0;
  transition: all var(--transition-base);
}

.notification-item:hover .notification-action-btn {
  opacity: 1;
}

.notification-action-btn:hover {
  color: var(--brand-primary);
  transform: scale(1.2);
}

.notification-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--dark-border);
}

.mark-all-read-btn {
  width: 100%;
  padding: 10px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition-base);
  font-family: inherit;
}

.mark-all-read-btn:hover {
  background: var(--brand-primary);
  color: #000;
}

.notification-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

/* ═══════════════════════════════════════════════════════════════ */
/* MODAL & DIALOG STYLING */
/* ═══════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn var(--transition-base);
  backdrop-filter: blur(4px);
}

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

.modal-box {
  background: var(--dark-surface-primary);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow: auto;
  animation: slideUp var(--transition-base);
  display: flex;
  flex-direction: column;
}

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

.modal-small {
  max-width: 400px;
}

.modal-medium {
  max-width: 600px;
}

.modal-large {
  max-width: 800px;
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--dark-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0;
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 24px;
  padding: 0;
  transition: color var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
}

.modal-close-btn:hover {
  background: rgba(245, 158, 11, 0.1);
  color: var(--brand-primary);
}

.modal-content {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  color: var(--text-primary);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--dark-border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--dark-surface-secondary);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.confirmation-content {
  text-align: center;
  padding: 20px 0;
}

.confirmation-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.confirmation-message {
  color: var(--text-primary);
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
}

.alert-message {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.prompt-input-container {
  margin: 20px 0;
}

.prompt-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: all var(--transition-base);
}

.prompt-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* TOAST NOTIFICATIONS */
/* ═══════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000;
  max-width: 400px;
}

.toast {
  background: var(--dark-surface-primary);
  border: 1px solid var(--dark-border);
  border-left: 4px solid var(--text-secondary);
  color: var(--text-primary);
  padding: 16px 20px;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease;
  word-break: break-word;
  max-width: 100%;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast.success {
  border-left-color: var(--status-success);
  background: rgba(16, 185, 129, 0.08);
  color: var(--status-success-light);
}

.toast.error {
  border-left-color: var(--status-error);
  background: rgba(239, 68, 68, 0.08);
  color: var(--status-error-light);
}

.toast.warning {
  border-left-color: var(--status-warning);
  background: rgba(245, 158, 11, 0.08);
  color: var(--status-warning-light);
}

.toast.info {
  border-left-color: var(--status-info);
  background: rgba(59, 130, 246, 0.08);
  color: var(--status-info-light);
}

.toast-message {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
}

.toast-close {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  opacity: 0.7;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.toast-close:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════ */
/* LOADING STATES */
/* ═══════════════════════════════════════════════════════════════ */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(245, 158, 11, 0.2);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

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

.loading-message {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
}

.loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--dark-surface-primary) 0%,
    var(--dark-surface-secondary) 50%,
    var(--dark-surface-primary) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
  height: 200px;
  width: 100%;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════ */
/* BUTTON STYLES */
/* ═══════════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--brand-primary);
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-base);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--dark-surface-secondary);
  color: var(--text-primary);
  border: 1px solid var(--dark-border);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-base);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--dark-border);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--status-error);
  border: 1px solid var(--status-error);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-base);
  font-family: inherit;
}

.btn-danger:hover:not(:disabled) {
  background: var(--status-error);
  color: white;
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.3);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════ */
/* FORM INPUTS */
/* ═══════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  background: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: all var(--transition-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

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

/* ═══════════════════════════════════════════════════════════════ */
/* EDITABLE FIELDS */
/* ═══════════════════════════════════════════════════════════════ */

.editable-field {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-base);
  display: inline-block;
  position: relative;
}

.editable-field:hover:not(.editing) {
  background: rgba(245, 158, 11, 0.1);
  color: var(--brand-primary);
}

.editable-field.editing {
  background: transparent;
}

.edit-input,
.edit-textarea,
.edit-select {
  padding: 8px 12px;
  background: var(--dark-bg-secondary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: all var(--transition-base);
}

.edit-input:focus,
.edit-textarea:focus,
.edit-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.field-loading {
  opacity: 0.6;
  pointer-events: none;
}

.field-loading-spinner {
  animation: spin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════ */
/* BADGES & LABELS */
/* ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-primary {
  background: rgba(245, 158, 11, 0.2);
  color: var(--brand-primary);
}

.badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: var(--status-success);
}

.badge-error {
  background: rgba(239, 68, 68, 0.2);
  color: var(--status-error);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--status-warning);
}

.badge-info {
  background: rgba(59, 130, 246, 0.2);
  color: var(--status-info);
}

/* ═══════════════════════════════════════════════════════════════ */
/* TABLES */
/* ═══════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--dark-surface-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

thead {
  background: var(--dark-surface-secondary);
  border-bottom: 1px solid var(--dark-border);
}

th {
  padding: 16px;
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

td {
  padding: 16px;
  color: var(--text-secondary);
  font-size: 14px;
  border-bottom: 1px solid var(--dark-border);
}

tbody tr {
  transition: all var(--transition-base);
}

tbody tr:hover {
  background: var(--dark-surface-secondary);
  color: var(--text-primary);
  cursor: pointer;
}

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

.table-row-hover {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════ */
/* CARDS */
/* ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--dark-surface-primary);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-lg);
}

.card-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dark-border);
}

.card-body {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.card-footer {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--dark-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════ */
/* RESPONSIVE DESIGN */
/* ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }

  .nav-label {
    display: none;
  }

  .nav-item {
    justify-content: center;
  }

  .notification-panel {
    width: 320px;
    right: -50%;
  }

  .modal-box {
    width: 95%;
    max-height: 95vh;
  }

  .toast-container {
    right: 10px;
    left: 10px;
    bottom: 10px;
  }

  .toast {
    max-width: 100%;
  }

  th, td {
    padding: 12px;
    font-size: 13px;
  }

  .card {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    font-size: 14px;
  }

  .sidebar {
    width: 60px;
    padding: 10px 0;
  }

  .sidebar-user-section {
    flex-direction: column;
    gap: 8px;
    padding: 0 8px 12px;
  }

  .user-info {
    display: none;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .nav-item {
    padding: 10px;
    justify-content: center;
  }

  .nav-icon {
    font-size: 18px;
  }

  .modal-box {
    width: 98%;
  }

  .modal-header,
  .modal-content,
  .modal-footer {
    padding: 16px;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 8px;
  }

  .card {
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* UTILITY CLASSES */
/* ═══════════════════════════════════════════════════════════════ */

.text-primary {
  color: var(--text-primary);
}

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

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

.text-brand {
  color: var(--brand-primary);
}

.bg-primary {
  background: var(--dark-surface-primary);
}

.bg-secondary {
  background: var(--dark-surface-secondary);
}

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

.rounded {
  border-radius: var(--radius-md);
}

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

.p-4 { padding: 16px; }
.pt-4 { padding-top: 16px; }
.pb-4 { padding-bottom: 16px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

.m-4 { margin: 16px; }
.mt-4 { margin-top: 16px; }
.mb-4 { margin-bottom: 16px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }

.flex {
  display: flex;
}

.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.w-full {
  width: 100%;
}

.opacity-50 {
  opacity: 0.5;
}

.cursor-pointer {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.visible {
  visibility: visible;
}

.opacity-0 {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════ */
/* V13 Task 2.3 Stage 1 — Lucide Icon styling                       */
/* Stroke uses --brand-primary; each usage context sets its own size */
/* ═══════════════════════════════════════════════════════════════ */
[data-lucide] {
  stroke: var(--brand-primary, #F59E0B);
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  flex-shrink: 0;
}

/* SVG (after createIcons replaces the <i>) — size inherits; stroke is set
   explicitly because SVG 'stroke' does NOT inherit by default. */
svg.lucide,
svg[data-lucide] {
  width: 20px;
  height: 20px;
  stroke: var(--brand-primary, #F59E0B);
  vertical-align: middle;
}

.nav-icon,
svg.nav-icon {
  width: 20px !important;
  height: 20px !important;
  margin-inline-end: 8px;
  stroke: var(--brand-primary, #F59E0B);
}

.header-icon,
svg.header-icon {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--brand-primary, #F59E0B);
}

.nav-label {
  vertical-align: middle;
}

/* Active nav item: brighter stroke (gold variant) */
.nav-item.active [data-lucide],
.nav-item.active svg.lucide {
  stroke: var(--brand-light, #FCD34D);
}

/* ═══════════════════════════════════════════════════════════════ */
/* Phase 3 Stage A (2026-04-19) — Part 1: Legacy short-name aliases */
/* Consolidated from the old :root block that used to live in       */
/* index.html. Keeps existing `var(--brand)`, `var(--success)` …     */
/* references working. Effective palette identical to pre-cleanup.  */
/* ═══════════════════════════════════════════════════════════════ */
:root {
  --dark-bg:        var(--dark-bg-primary);      /* #080E1A */
  --dark-surface:   #0F1419;                     /* preserved — differs slightly from --dark-surface-primary (#101825) */
  --dark-border:    #1F2937;                     /* preserved — overrides the luxury :root (#2d3a4a) to keep prod tone */
  --brand:          var(--brand-primary);        /* #F59E0B */
  --success:        var(--status-success);       /* #10B981 */
  --danger:         var(--status-error);         /* #EF4444 */
  --warning:        var(--status-warning);       /* #F59E0B */
  --info:           var(--status-info);          /* #3B82F6 */
  --text-primary:   #F3F4F6;                     /* preserved — overrides the luxury :root (#E2E8F0) to keep prod tone */
  --text-tertiary:  var(--text-muted);           /* #6B7280 */
}

/* ═══════════════════════════════════════════════════════════════ */
/* Phase 3 Stage A (2026-04-19) — Part 2: Typography Hierarchy     */
/* Serif headings (Amiri AR + Playfair Display EN) + Sans body     */
/* Body fonts (Tajawal/Cairo) untouched.                            */
/* ═══════════════════════════════════════════════════════════════ */
:root {
  --font-heading: 'Amiri', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading,
.page-title,
.section-title,
.card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
}

h1, .h1, .page-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

h3, .h3 {
  font-weight: 600;
}

h4, h5, h6, .h4, .h5, .h6 {
  font-weight: 600;
}

body,
p, span, div,
input, textarea, button, select, label {
  font-family: var(--font-body);
}

body, p {
  line-height: 1.6;
}

/* KPI / metric / stat numbers stay in sans body font for numeric clarity */
.kpi-value, .metric-value, .stat-number,
.nav-label, .nav-icon,
button, .btn {
  font-family: var(--font-body);
}

/* ═══════════════════════════════════════════════════════════════ */
/* Phase 3 Stage B (2026-04-19) — Theme Toggle Button               */
/* Injected into .header-actions by components/theme-toggle.js.     */
/* Matches the gold-outlined language/bell aesthetic of V13.        */
/* ═══════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--dark-border, #2d3a4a);
  border-radius: var(--radius-md, 8px);
  padding: 6px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary, #F59E0B);
  transition: background var(--transition-base, 0.3s) ease,
              border-color var(--transition-base, 0.3s) ease,
              transform var(--transition-fast, 0.15s) ease;
  margin-inline-start: 6px;
  margin-inline-end: 4px;
  font-family: var(--font-body);
  line-height: 1;
}

.theme-toggle-btn:hover {
  background: var(--dark-surface-secondary, rgba(255, 255, 255, 0.04));
  border-color: var(--brand-primary, #F59E0B);
  transform: scale(1.05);
}

.theme-toggle-btn:active {
  transform: scale(0.96);
}

.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--brand-primary, #F59E0B);
  outline-offset: 2px;
}

.theme-toggle-btn [data-lucide],
.theme-toggle-btn svg.lucide {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  display: block;
}

/* Smooth background/text colour transitions when the cascade flips themes */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Respect reduced-motion users — disable theme transitions + toggle animation */
@media (prefers-reduced-motion: reduce) {
  html,
  .theme-toggle-btn {
    transition: none;
  }
  .theme-toggle-btn:hover,
  .theme-toggle-btn:active {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Mobile Overhaul Stage M1 (2026-04-19) — Global Foundation       */
/* Scope: overflow, box-sizing, container padding, media safety,    */
/* tap targets, iOS font-size (prevents zoom). No component logic   */
/* changes — widget/table/sidebar refactors land in M2 and M3.      */
/* ═══════════════════════════════════════════════════════════════ */

/* Rule 1 — Kill horizontal scroll everywhere */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Rule 2 — Universal box-sizing (extends the * rule at top of file
   to pseudo-elements so padding/border never expand layout boxes) */
*::before,
*::after {
  box-sizing: border-box;
}

/* Rule 3 — Minimum safe padding on content containers */
.content-area,
.page-content,
.container,
main {
  padding-left: max(16px, 4vw);
  padding-right: max(16px, 4vw);
}

/* Rule 4 — Scroll-safe tables (complements the Task 2.2 + mobile.css
   rules; idempotent if already declared) */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rule 5 — Long text safety (emails, URLs, IDs, etc.) */
.email,
.long-text,
.user-email,
[data-wrap="anywhere"] {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Rule 6 — Images / media respect container bounds */
img,
video,
iframe,
svg:not(.lucide):not([data-lucide]) {
  max-width: 100%;
  height: auto;
}

/* Rule 7 — Form elements stay within viewport */
input,
textarea,
select,
button {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Mobile refinements (max-width: 768px)                            */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Content area tighter on mobile */
  .content-area,
  .page-content,
  main {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Body baseline font size */
  body {
    font-size: 15px;
  }

  /* Heading scale — tighter on small viewports */
  h1, .h1, .page-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  h2, .h2 {
    font-size: 1.25rem;
  }
  h3, .h3 {
    font-size: 1.1rem;
  }

  /* Comfortable tap targets for buttons */
  button,
  .btn,
  .action-btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* Form inputs — 16px font-size prevents iOS auto-zoom on focus */
  input,
  textarea,
  select {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Small phones (max-width: 480px)                                  */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .content-area,
  .page-content,
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  body {
    font-size: 14px;
  }

  h1, .h1, .page-title {
    font-size: 1.35rem;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Mobile Overhaul Stage M2 (2026-04-19) — Tables → Cards on Mobile */
/* Scope: rows become vertically-stacked cards under 768px, with    */
/* data-label pseudo-elements serving as inline labels. Fallback    */
/* for label-less tables: keep them horizontally scrollable inside  */
/* .table-responsive (safety net from Task 2.2).                    */
/* ═══════════════════════════════════════════════════════════════ */

/* Base table spacing (desktop baseline) */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  padding: 12px 16px;
  text-align: start;                 /* RTL-aware (right in ar, left in en) */
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Mobile breakpoint — transform tables into cards */
@media (max-width: 768px) {

  /* Visually hide column headers but keep them for screen readers */
  table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Tables turn into vertical block layout */
  table,
  tbody,
  tr {
    display: block;
    width: 100%;
  }

  /* Each row becomes a standalone card */
  tbody tr {
    margin-bottom: 16px;
    padding: 16px;
    background: var(--dark-surface-primary, #101825);
    border: 1px solid var(--dark-border, #2d3a4a);
    border-radius: 12px;
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.2));
  }

  /* Cells stack vertically inside each card */
  tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--dark-border, #2d3a4a);
    gap: 12px;
    min-height: 44px;
  }

  tbody td:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  tbody td:first-child {
    padding-top: 0;
  }

  /* Pseudo-label from data-label attribute */
  tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-secondary, #94A3B8);
    font-size: 0.875rem;
    min-width: 90px;
    text-align: start;
  }

  /* Value side of each cell takes the remaining space */
  tbody td > * {
    text-align: end;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Email cells break anywhere (handles long addresses gracefully) */
  tbody td.email,
  tbody td[data-type="email"],
  tbody td .email {
    word-break: break-all;
    font-size: 0.85rem;
    text-align: end;
    max-width: 65%;
  }

  /* Action cells: stack buttons vertically, full-width */
  tbody td.actions,
  tbody td[data-type="actions"] {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  tbody td.actions::before,
  tbody td[data-type="actions"]::before {
    width: 100%;
    margin-bottom: 4px;
  }

  tbody td.actions button,
  tbody td.actions .btn,
  tbody td[data-type="actions"] button,
  tbody td[data-type="actions"] .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Badge / pill / role-chip — never overflow the card edge */
  tbody td .badge,
  tbody td .pill,
  tbody td .status-badge,
  tbody td .role-badge {
    white-space: normal;
    word-break: break-word;
    max-width: 60%;
    text-align: end;
  }
}

/* Smaller phones refinement */
@media (max-width: 480px) {
  tbody tr {
    padding: 12px;
    margin-bottom: 12px;
  }

  tbody td::before {
    min-width: 80px;
    font-size: 0.8rem;
  }

  tbody td {
    font-size: 0.9rem;
  }
}

/* Scrollable-table fallback for tables that don't ship data-label yet.
   A table wrapped in .table-responsive stays scrollable horizontally
   (already defined in mobile.css); .table-cards / .responsive-cards
   opt into the cards pattern explicitly and bypass the min-width. */
@media (max-width: 768px) {
  .table-responsive table {
    min-width: 600px;
  }

  .table-responsive .table-cards,
  .table-responsive table.responsive-cards {
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Mobile Overhaul Stage M3 (2026-04-19) — Widget + Header Polish   */
/* Scope: hide dev-mode widget IDs, give header + breadcrumb proper */
/* backgrounds, unify widget card styling, add mobile single-column */
/* grid + drawer-style sidebar.                                     */
/* ═══════════════════════════════════════════════════════════════ */

/* Hide dev-only widget name labels (set by _ent9WrapCard) */
.widget-name-debug,
[data-widget-dev-name] > .widget-title .widget-name-debug {
  display: none;
}

/* Header — proper surface + sticky. Fills the inline-style gap from the
   original `.header` rule in index.html that was stripped during Stage B
   hotfix-2. luxury.css becomes single source of truth for this surface. */
.header,
header.app-header,
.main-header {
  background: var(--dark-surface-primary, #101825);
  border-bottom: 1px solid var(--dark-border, #2d3a4a);
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Breadcrumb row */
.breadcrumb,
.breadcrumb-row,
.page-breadcrumb {
  background: var(--dark-surface-secondary, rgba(255, 255, 255, 0.02));
  padding: 10px 16px;
  border-bottom: 1px solid var(--dark-border, #2d3a4a);
  font-size: 0.875rem;
  color: var(--text-secondary, #94A3B8);
}

.breadcrumb a,
.breadcrumb-row a {
  color: var(--text-secondary, #94A3B8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb a:hover,
.breadcrumb-row a:hover {
  color: var(--brand-primary, #F59E0B);
}

.breadcrumb-separator,
.breadcrumb > :not(:last-child)::after {
  content: '›';
  margin: 0 8px;
  color: var(--text-muted, #6B7280);
}

/* Widget card baseline styling */
.widget,
.widget-card,
.dashboard-widget {
  background: var(--dark-surface-primary, #101825);
  border: 1px solid var(--dark-border, #2d3a4a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.2));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget:hover,
.widget-card:hover,
.dashboard-widget:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
}

/* Widget title/header styling */
.widget-title,
.widget-label,
.widget-header {
  color: var(--text-secondary, #94A3B8);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* Mobile widget + shell refinements (max-width: 768px)             */
/* ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .header,
  header.app-header,
  .main-header {
    padding: 10px 12px;
  }

  .breadcrumb,
  .breadcrumb-row,
  .page-breadcrumb {
    padding: 8px 12px;
    font-size: 0.8rem;
  }

  .widget,
  .widget-card,
  .dashboard-widget {
    padding: 16px;
    margin-bottom: 12px;
  }

  /* Widget metrics — bigger on mobile for readability */
  .widget-value,
  .metric-value,
  .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
  }

  /* Dashboard grids — single column */
  .dashboard-grid,
  .widgets-grid,
  .widgets-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Sidebar becomes drawer on mobile (hidden by default, slides in) */
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;                                  /* RTL: drawer on right */
    height: 100vh;
    width: min(280px, 85vw);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
  }

  .sidebar.open,
  .sidebar.active,
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Backdrop shown only when sidebar is open */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  /* Main content fills full width while drawer is hidden */
  .main-content,
  .content-area,
  .page-content {
    margin-right: 0 !important;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Desktop widget grid (≥769px) — multi-column auto-fill            */
/* ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .dashboard-grid,
  .widgets-grid,
  .widgets-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Mobile Overhaul Stage M3 REVISED (2026-04-19) — Dr. David's      */
/* direct requirements:                                             */
/*   1. "العنوان بجانب الايكونات" — nav-label visible beside each   */
/*      sidebar icon (override earlier `.nav-label { display:none}` */
/*      + icon-only sidebar width collapse at 480px).               */
/*   2. "كل شئ داخل حيز الفون فقط" — universal viewport containment */
/*      + debug Clients/Users tables that get broken by an earlier  */
/*      `table { display:block; white-space:nowrap }` rule in       */
/*      mobile.css that fights the M2 cards pattern.                */
/* ═══════════════════════════════════════════════════════════════ */

/* ── Part 1 — Sidebar: labels beside icons on mobile ─────────────── */
@media (max-width: 768px) {
  /* Revert the luxury.css `.nav-label { display: none }` collapse — users
     want full labels now. Use !important to beat earlier rules declared
     inside the same @media block elsewhere in this file. */
  .sidebar .nav-label,
  .sidebar .nav-item .nav-label,
  .sidebar .nav-item > span:not(.nav-icon) {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    color: var(--text-primary, #E2E8F0);
    font-size: 0.95rem;
    font-weight: 500;
    margin-inline-start: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Icon + label stacked horizontally in each nav row */
  .sidebar .nav-item {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 12px 16px;
    min-height: 44px;
  }

  /* Sidebar wide enough to show labels (was 200px / 60px) */
  .sidebar {
    width: min(280px, 85vw) !important;
  }

  .sidebar .nav-icon,
  .sidebar .nav-item .nav-icon,
  .sidebar svg.lucide.nav-icon {
    flex-shrink: 0;
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 480px) {
  /* Override the 60px icon-only sidebar on small phones */
  .sidebar {
    width: min(280px, 88vw) !important;
    padding: 20px 0 !important;
  }

  .sidebar .nav-item {
    padding: 12px 14px !important;
    justify-content: flex-start !important;
  }

  .sidebar .user-info {
    display: flex !important;
  }

  .sidebar .sidebar-user-section {
    flex-direction: row !important;
  }
}

/* ── Part 2 — Universal viewport containment ─────────────────────── */
@media (max-width: 768px) {
  /* Baseline safety for every element */
  body * {
    max-width: 100%;
  }

  /* Form + action elements */
  input,
  textarea,
  select,
  .form-control,
  .input {
    max-width: 100%;
    box-sizing: border-box;
  }

  button,
  .btn,
  .action-btn {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }

  /* Search bars + filter toolbars wrap instead of overflowing */
  .search-bar,
  .search-container,
  .filter-bar,
  .filter-container,
  .page-header,
  .page-toolbar,
  .toolbar,
  .page-actions,
  .action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
  }

  .search-bar > *,
  .filter-bar > *,
  .page-toolbar > *,
  .toolbar > *,
  .action-bar > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Cards + panels cannot bleed */
  .card,
  .widget,
  .panel,
  .section,
  .box {
    max-width: 100%;
    overflow: hidden;
  }

  /* Main content containers */
  .content-area,
  .main-content,
  .page-content,
  main,
  .dashboard-container {
    max-width: 100vw;
    width: 100%;
    overflow-x: hidden;
  }

  /* Generic grid/row fallback — 1fr on mobile */
  .grid,
  .row {
    grid-template-columns: 1fr !important;
    display: grid;
    gap: 12px;
  }
}

/* ── Part 3 — Clients/Users cards pattern override ───────────────── */
/* mobile.css line 145-154 forces `table { display: block;            */
/* white-space: nowrap }` inside .content-area/.card/.page-section,   */
/* which defeats the M2 cards pattern. Undo that for the two tables   */
/* we explicitly ship as cards (Clients + Users). Tables without      */
/* data-label still fall back to horizontal scroll via mobile.css.    */
@media (max-width: 768px) {
  /* Select tables whose cells already carry data-label — those are
     guaranteed to be cards-compatible. This uses :has() where
     supported; the explicit IDs/classes below are the fallback. */
  .content-area table:has(td[data-label]),
  .card table:has(td[data-label]),
  .page-section table:has(td[data-label]),
  #clientsTableBody,
  #usersTableBody,
  table.responsive-cards,
  table.table-cards {
    display: table !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Re-hide the thead even when the table is inside the `.content-area
     table { display:block }` mobile.css context (the parent override above
     undoes that, so thead hiding rule from M2 applies again — we just
     make double-sure with an explicit repeat). */
  .content-area table:has(td[data-label]) thead,
  #clientsTableBody ~ thead,
  #usersTableBody ~ thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Row cells revert to flex (M2 card-row styling) — force in case the
     parent `display:block` above interferes. */
  .content-area table:has(td[data-label]) tbody tr,
  #clientsTableBody tr,
  #usersTableBody tr,
  table.responsive-cards tbody tr,
  table.table-cards tbody tr {
    display: block;
    white-space: normal;
  }

  .content-area table:has(td[data-label]) tbody td,
  #clientsTableBody td,
  #usersTableBody td,
  table.responsive-cards tbody td,
  table.table-cards tbody td {
    display: flex;
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Stage U2 (2026-04-19) — Widget & Card Theme-Aware Refactor       */
/*                                                                  */
/* Moves inline hardcoded colors out of dashboard widgets + client- */
/* details containers into CSS classes backed by var(--*). Light    */
/* theme (U3) can now re-skin these surfaces without JS changes.    */
/*                                                                  */
/* Scope (this block):                                              */
/*   • .dashboard-widget / .dyn-widget  — dashboard widget shell    */
/*   • .widget-panel-inset              — inner dark block inside   */
/*                                        a widget body             */
/*   • .panel-card / .panel-card--lg    — page section containers   */
/*   • .stat-card                       — 8 tiny sunken grid cards  */
/*                                        in sales pipeline section */
/*                                                                  */
/* Colors preserved exactly via new --dark-border-subtle variable   */
/* (#1e293b) — the existing --dark-border (#2d3a4a) is the heavier  */
/* shell border and should not be reused here.                      */
/* ═══════════════════════════════════════════════════════════════ */

:root {
  /* Subtle border inside dashboard widgets + client-details cards.
     Separate from --dark-border (#2d3a4a) which is the outer shell. */
  --dark-border-subtle: #1e293b;
  /* Sunken inner surface used inside dashboard widget bodies
     (e.g. Team/CC widget "row" blocks in dashboard.js). */
  --dark-surface-inset: #0B1220;
}

/* Dashboard widget shell — output of _ent9WrapCard(). */
.dashboard-widget,
.dyn-widget {
  background: var(--dark-surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--dark-border-subtle);
  border-radius: 12px;
  padding: 20px;
  min-height: 140px;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
}

.dashboard-widget:hover,
.dyn-widget:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Widget title row (flex — label + dev-badge) */
.dashboard-widget > .widget-title,
.dyn-widget > .widget-title {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dev-name debug chip — hidden via M3 rule, but set color var for
   completeness so dev-tools inspection shows a themeable color. */
.widget-name-debug {
  color: var(--text-light);
  font-size: 10px;
}

/* Inner inset panel inside a widget body (e.g. row-list items).
   Only color/background/radius belong to the class — layout
   (padding/margin/font-size/text-align) stays inline so each
   call-site can size itself. */
.widget-panel-inset {
  background: var(--dark-surface-inset);
  color: var(--text-primary);
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Generic card container for page sections (client-details cards,
   future pages). Surface matches dashboard widget but lighter
   default min-height (none). */
.panel-card {
  background: var(--dark-surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--dark-border-subtle);
  border-radius: 12px;
  padding: 20px;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}

/* Larger padding variant — full-width detail sections that need
   more breathing room (client info card, sales pipeline, etc.) */
.panel-card--lg {
  padding: 24px;
}

/* Sunken stat card — smaller tile used inside a grid
   (client-details Sales Pipeline 4×2 metric grid). */
.stat-card {
  background: var(--dark-bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--dark-border-subtle);
  border-radius: 8px;
  padding: 14px;
  transition: background 0.3s ease,
              border-color 0.3s ease,
              color 0.3s ease;
}

/* Mobile refinements (extends U1/M1). Keeps touch targets but
   trims padding so cards breathe inside narrow viewports. */
@media (max-width: 768px) {
  .dashboard-widget,
  .dyn-widget {
    padding: 16px;
    min-height: 120px;
  }
  .panel-card {
    padding: 16px;
  }
  .panel-card--lg {
    padding: 18px;
  }
  .stat-card {
    padding: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════ */
/* Stage U3 (2026-04-19) — Light Theme Luxurious                    */
/*                                                                  */
/* Proper light palette built on U2 foundation (widgets + cards are */
/* theme-aware via CSS variables). Activation: theme-toggle.js sets */
/* <html data-theme="minimal-light">. Default remains luxury-dark.  */
/*                                                                  */
/* Palette:                                                         */
/*   • Cream warm white (#FAF9F6)  — canvas                         */
/*   • Pure white (#FFFFFF)        — cards/widgets for crispness    */
/*   • Deep charcoal (#1F1F1F)     — primary text (AAA contrast)    */
/*   • Matte gold (#B8941F)        — accent (readable on cream)     */
/*                                                                  */
/* Rule ordering: this block appears AFTER both :root declarations  */
/* so specificity ties resolve in favor of [data-theme] rules when  */
/* the attribute is present on <html>. Dark theme values stay as    */
/* the cascade fallback when the attribute is "luxury-dark" or any  */
/* other value.                                                     */
/* ═══════════════════════════════════════════════════════════════ */

[data-theme="minimal-light"] {
  /* Backgrounds — warm cream ecosystem */
  --dark-bg-primary: #FAF9F6;         /* main canvas — cream warm white */
  --dark-bg-secondary: #F5F4F0;       /* slightly darker for depth (stat cards) */
  --dark-surface-primary: #FFFFFF;    /* cards, widgets — pure white for crispness */
  --dark-surface-secondary: #F9F8F4;  /* elevated surfaces */
  --dark-surface-inset: #F0EFEB;      /* inset/pressed states (widget inner panels) */

  /* Borders — soft gray for subtle separation */
  --dark-border: #E5E7EB;             /* standard outer border */
  --dark-border-subtle: #EEEDEA;      /* softer inner border (dashboard widgets, panel cards) */

  /* Text — deep charcoal hierarchy (AAA contrast on cream) */
  --text-primary: #1F1F1F;
  --text-secondary: #4B5563;
  --text-muted: #6B7280;
  --text-light: #9CA3AF;

  /* Brand — matte gold darkened for readability on light backgrounds */
  --brand-primary: #B8941F;
  --brand-secondary: #D4AF37;
  --brand-light: #E5B84A;
  --brand-dark: #8B6F1A;

  /* Status colors — darker variants for contrast on light bg */
  --status-success: #059669;          /* emerald-600 */
  --status-success-light: #A7F3D0;
  --status-error: #DC2626;            /* red-600 */
  --status-error-light: #FCA5A5;
  --status-warning: #D97706;          /* amber-600 */
  --status-warning-light: #FCD34D;
  --status-info: #2563EB;             /* blue-600 */
  --status-info-light: #BFDBFE;

  /* Shadows — warm + soft, low-alpha charcoal */
  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.04);
  --shadow-md: 0 4px 6px rgba(31, 31, 31, 0.06);
  --shadow-lg: 0 10px 15px rgba(31, 31, 31, 0.08);
  --shadow-xl: 0 20px 25px rgba(31, 31, 31, 0.10);
  --shadow-2xl: 0 25px 50px rgba(31, 31, 31, 0.12);
}

/* ── Light theme — element-specific refinements ─────────────────── */

/* Body + main containers pick up cream canvas */
[data-theme="minimal-light"] body,
[data-theme="minimal-light"] .content-area,
[data-theme="minimal-light"] .main-content,
[data-theme="minimal-light"] .page-content,
[data-theme="minimal-light"] main,
[data-theme="minimal-light"] .dashboard-container {
  background: var(--dark-bg-primary);
  color: var(--text-primary);
}

/* Sidebar — white panel with soft left shadow for lift */
[data-theme="minimal-light"] .sidebar {
  background: #FFFFFF;
  border-inline-start: 1px solid var(--dark-border);
  box-shadow: -2px 0 10px rgba(31, 31, 31, 0.04);
}

/* Sidebar user section text */
[data-theme="minimal-light"] .sidebar .user-name,
[data-theme="minimal-light"] .sidebar .user-role-badge {
  color: var(--text-primary);
}

/* Sidebar nav items — label colors on light */
[data-theme="minimal-light"] .sidebar .nav-label,
[data-theme="minimal-light"] .sidebar .nav-item span,
[data-theme="minimal-light"] .sidebar a > span {
  color: var(--text-primary);
}

[data-theme="minimal-light"] .sidebar .nav-item {
  color: var(--text-primary);
}

[data-theme="minimal-light"] .sidebar .nav-item:hover {
  background: rgba(184, 148, 31, 0.08);
}

[data-theme="minimal-light"] .sidebar .nav-item.active {
  background: rgba(184, 148, 31, 0.12);
  color: var(--brand-primary);
}

/* Sidebar divider — soft separator */
[data-theme="minimal-light"] .sidebar-divider {
  background: var(--dark-border);
}

/* Header — white surface + soft bottom shadow */
[data-theme="minimal-light"] .header,
[data-theme="minimal-light"] header.app-header,
[data-theme="minimal-light"] .main-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--dark-border);
  box-shadow: 0 1px 3px rgba(31, 31, 31, 0.04);
}

/* Breadcrumb in light mode */
[data-theme="minimal-light"] .breadcrumb,
[data-theme="minimal-light"] .breadcrumb-row,
[data-theme="minimal-light"] .page-breadcrumb {
  background: var(--dark-surface-secondary);
  border-bottom: 1px solid var(--dark-border);
  color: var(--text-secondary);
}

[data-theme="minimal-light"] .breadcrumb a,
[data-theme="minimal-light"] .breadcrumb-row a {
  color: var(--text-secondary);
}

[data-theme="minimal-light"] .breadcrumb a:hover,
[data-theme="minimal-light"] .breadcrumb-row a:hover {
  color: var(--brand-primary);
}

[data-theme="minimal-light"] .breadcrumb-separator,
[data-theme="minimal-light"] .breadcrumb > :not(:last-child)::after {
  color: var(--text-muted);
}

/* Tables (card pattern from U1/M2) — white rows, soft borders */
[data-theme="minimal-light"] table,
[data-theme="minimal-light"] tbody,
[data-theme="minimal-light"] tbody tr {
  background: var(--dark-surface-primary);
  border-color: var(--dark-border);
  color: var(--text-primary);
}

[data-theme="minimal-light"] thead th {
  color: var(--text-secondary);
  background: var(--dark-surface-secondary);
  border-bottom: 1px solid var(--dark-border);
}

[data-theme="minimal-light"] tbody td::before {
  color: var(--text-secondary);
}

/* Dashboard widgets + panel cards — already theme-aware via U2 vars,
   explicit rules here pin the light polish (shadow + hover border). */
[data-theme="minimal-light"] .dashboard-widget,
[data-theme="minimal-light"] .dyn-widget,
[data-theme="minimal-light"] .widget-card {
  background: var(--dark-surface-primary);
  border-color: var(--dark-border);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}

[data-theme="minimal-light"] .dashboard-widget:hover,
[data-theme="minimal-light"] .dyn-widget:hover,
[data-theme="minimal-light"] .widget-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
}

[data-theme="minimal-light"] .dashboard-widget > .widget-title,
[data-theme="minimal-light"] .dyn-widget > .widget-title {
  color: var(--text-secondary);
}

[data-theme="minimal-light"] .widget-name-debug {
  color: var(--text-light);
}

/* Panel cards (client-details containers) */
[data-theme="minimal-light"] .panel-card,
[data-theme="minimal-light"] .panel-card--lg,
[data-theme="minimal-light"] .info-panel,
[data-theme="minimal-light"] .client-card {
  background: var(--dark-surface-primary);
  border-color: var(--dark-border);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Stat cards — slight cream tint so they read as "sunken" vs white panel */
[data-theme="minimal-light"] .stat-card {
  background: var(--dark-bg-secondary);
  border-color: var(--dark-border-subtle);
  color: var(--text-primary);
}

/* Widget inner panels (audit row, campaigns, sales win-rate) */
[data-theme="minimal-light"] .widget-panel-inset {
  background: var(--dark-surface-inset);
  color: var(--text-primary);
}

/* Theme toggle button — light-theme polish */
[data-theme="minimal-light"] .theme-toggle-btn {
  color: var(--brand-primary);
  border-color: var(--dark-border);
  background: transparent;
}

[data-theme="minimal-light"] .theme-toggle-btn:hover {
  background: rgba(184, 148, 31, 0.08);
  border-color: var(--brand-primary);
}

/* Lucide icons keep brand gold */
[data-theme="minimal-light"] svg.lucide,
[data-theme="minimal-light"] .sidebar svg.lucide {
  color: var(--brand-primary);
  stroke: currentColor;
}

/* Form inputs */
[data-theme="minimal-light"] input,
[data-theme="minimal-light"] textarea,
[data-theme="minimal-light"] select,
[data-theme="minimal-light"] .form-input,
[data-theme="minimal-light"] .form-control {
  background: #FFFFFF;
  color: var(--text-primary);
  border: 1px solid var(--dark-border);
}

[data-theme="minimal-light"] input:focus,
[data-theme="minimal-light"] textarea:focus,
[data-theme="minimal-light"] select:focus,
[data-theme="minimal-light"] .form-input:focus {
  border-color: var(--brand-primary);
  outline: 2px solid rgba(184, 148, 31, 0.2);
  outline-offset: 0;
}

[data-theme="minimal-light"] input::placeholder,
[data-theme="minimal-light"] textarea::placeholder {
  color: var(--text-muted);
}

/* Modal surfaces */
[data-theme="minimal-light"] .modal-box,
[data-theme="minimal-light"] .modal-content,
[data-theme="minimal-light"] .dialog {
  background: var(--dark-surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--dark-border);
  box-shadow: var(--shadow-xl);
}

[data-theme="minimal-light"] .modal-overlay {
  background: rgba(31, 31, 31, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

[data-theme="minimal-light"] .modal-header {
  border-bottom: 1px solid var(--dark-border);
}

[data-theme="minimal-light"] .modal-footer {
  border-top: 1px solid var(--dark-border);
}

/* Scrollbar — keep unobtrusive on light */
[data-theme="minimal-light"] ::-webkit-scrollbar-track {
  background: var(--dark-bg-secondary);
}

[data-theme="minimal-light"] ::-webkit-scrollbar-thumb {
  background: var(--dark-border);
  border-radius: 4px;
}

[data-theme="minimal-light"] ::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary);
}