/**
 * Jetpack ERP - Premium Light Design System (Stripe / Linear / Vercel inspired)
 * 100% Light Theme Only - Strictly No Dark Components
 */

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

:root {
  --bg-main: #F6F8FB;
  --bg-surface: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-hover: #F8FAFC;
  --bg-subtle: #F1F5F9;
  
  --primary-red: #DC3545;
  --primary-hover: #BB2D3B;
  --primary-light: #FFF1F2;
  --primary-border: #FECDD3;

  --text-main: #202634;
  --text-muted: #788292;
  --text-secondary: #4B5563;
  --text-light: #9CA3AF;

  --border-color: #E2E8F0;
  --border-focus: #DC3545;

  --success: #16A36A;
  --success-bg: #DCFCE7;
  --success-text: #15803D;
  --success-border: #BBF7D0;

  --warning: #E9A23B;
  --warning-bg: #FEF3C7;
  --warning-text: #B45309;
  --warning-border: #FDE68A;

  --danger: #DC3545;
  --danger-bg: #FEE2E2;
  --danger-text: #B91C1C;
  --danger-border: #FECACA;

  --info: #3984D6;
  --info-bg: #DBEAFE;
  --info-text: #1D4ED8;
  --info-border: #BFDBFE;

  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 14px;

  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
}

/* Base Reset & Typography */
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic RTL Typography */
html[dir="rtl"], html[lang="ar"], html[lang="ar"] body {
  font-family: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] th, html[dir="rtl"] td {
  text-align: right;
}
html[dir="rtl"] .text-right {
  text-align: left !important;
}
html[dir="rtl"] .text-left {
  text-align: right !important;
}

/* Clean Modern Scrollbar Across All Browsers */
* {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 9999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Sidebar Navigation Specific Scrollbar */
.custom-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
}
.custom-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.custom-sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.custom-sidebar-nav::-webkit-scrollbar-thumb {
  background: #E2E8F0;
  border-radius: 9999px;
}
.custom-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: #CBD5E1;
}

/* -------------------------------------------------------------
 * GLOBAL DARK-TO-LIGHT OVERRIDES (Transforms all existing views)
 * ------------------------------------------------------------- */
body.bg-\[\#0b0f19\], 
body.bg-slate-950,
body.bg-slate-900 {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

/* Surfaces & Containers */
.bg-\[\#0b0f19\],
.bg-\[\#0f172a\],
.bg-\[\#151d30\],
.bg-\[\#0c1220\],
.bg-slate-950,
.bg-slate-900 {
  background-color: var(--bg-surface) !important;
}

.bg-slate-800,
.bg-slate-800\/60,
.bg-slate-800\/50,
.bg-slate-800\/40,
.bg-slate-800\/30,
.bg-slate-800\/20 {
  background-color: var(--bg-hover) !important;
}

/* Borders */
.border-slate-800,
.border-slate-800\/80,
.border-slate-700,
.border-slate-700\/80,
.border-slate-700\/60,
.border-slate-700\/50,
.border-slate-600 {
  border-color: var(--border-color) !important;
}

/* Typography mappings: convert legacy text-white inside cards, but NEVER break colored buttons/badges */
.erp-card > .text-white,
.erp-card h1.text-white,
.erp-card h2.text-white,
.erp-card h3.text-white,
.erp-card h4.text-white {
  color: var(--text-main) !important;
}

/* ALWAYS protect white text on buttons, badges, and primary action components */
button.text-white,
a.text-white,
button.text-white *,
a.text-white *,
button[class*="bg-"] .text-white,
a[class*="bg-"] .text-white,
.btn-primary,
.btn-primary *,
[class*="bg-\[\#DC3545\]"],
[class*="bg-\[\#DC3545\]"] *,
[class*="bg-\[\#16A36A\]"],
[class*="bg-\[\#16A36A\]"] *,
[class*="bg-rose-600"],
[class*="bg-rose-600"] *,
[class*="bg-emerald-600"],
[class*="bg-emerald-600"] *,
[class*="bg-red-600"],
[class*="bg-red-600"] * {
  color: #FFFFFF !important;
}

.text-slate-400 {
  color: var(--text-muted) !important;
}
.text-slate-300,
.text-slate-200 {
  color: var(--text-secondary) !important;
}
.text-slate-500 {
  color: var(--text-light) !important;
}

/* Divider rules */
.divide-slate-800 > :not([hidden]) ~ :not([hidden]),
.divide-slate-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-color) !important;
}

/* -------------------------------------------------------------
 * 1. PREMIUM CARDS (Inspired by Stripe & Linear)
 * ------------------------------------------------------------- */
.erp-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color: var(--text-main) !important;
}

.erp-card:hover {
  border-color: #CBD5E1 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}

.glass-panel {
  background: var(--bg-surface) !important;
  backdrop-filter: none !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

/* -------------------------------------------------------------
 * 2. COMPLETE TABLE REDESIGN – HIGHEST PRIORITY
 * ------------------------------------------------------------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.erp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--bg-surface) !important;
  color: var(--text-main) !important;
  border-radius: var(--radius-lg);
}

.erp-table thead,
table thead {
  background-color: #F8FAFC !important;
}

.erp-table th,
table th {
  background-color: #F8FAFC !important;
  color: #4B5563 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--border-color) !important;
  white-space: nowrap;
}

.erp-table td,
table td {
  background-color: var(--bg-surface) !important;
  color: var(--text-main) !important;
  padding: 13px 16px !important;
  border-bottom: 1px solid #F1F5F9 !important;
  font-size: 0.8125rem !important;
  vertical-align: middle;
}

.erp-table tbody tr:hover td,
table tbody tr:hover td {
  background-color: #F8FAFC !important;
}

.erp-table tbody tr:last-child td,
table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Action Buttons inside Tables */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 0.15s ease;
  gap: 4px;
}

.action-btn-view {
  background-color: #F8FAFC;
  color: #4B5563;
  border: 1px solid var(--border-color);
}
.action-btn-view:hover {
  background-color: #F1F5F9;
  color: var(--text-main);
}

.action-btn-edit {
  background-color: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
}
.action-btn-edit:hover {
  background-color: #BFDBFE;
}

.action-btn-delete {
  background-color: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid var(--danger-border);
}
.action-btn-delete:hover {
  background-color: #FECACA;
}

.action-btn-print {
  background-color: #F8FAFC;
  color: #4B5563;
  border: 1px solid var(--border-color);
}
.action-btn-print:hover {
  background-color: #F1F5F9;
  color: var(--text-main);
}

/* -------------------------------------------------------------
 * 3. STATUS BADGES (Light Theme Pastel Style)
 * ------------------------------------------------------------- */
.badge-livre,
.badge-paye,
.badge-active,
.badge-validee {
  background-color: var(--success-bg) !important;
  color: var(--success-text) !important;
  border: 1px solid var(--success-border) !important;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-en-cours,
.badge-in-transit,
.badge-a-enlever {
  background-color: var(--info-bg) !important;
  color: var(--info-text) !important;
  border: 1px solid var(--info-border) !important;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-retour,
.badge-rtn,
.badge-partiel {
  background-color: var(--warning-bg) !important;
  color: var(--warning-text) !important;
  border: 1px solid var(--warning-border) !important;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-annule,
.badge-non-paye,
.badge-danger {
  background-color: var(--danger-bg) !important;
  color: var(--danger-text) !important;
  border: 1px solid var(--danger-border) !important;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-en-attente,
.badge-brouillon,
.badge-neutral {
  background-color: #F1F5F9 !important;
  color: #475569 !important;
  border: 1px solid #E2E8F0 !important;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* -------------------------------------------------------------
 * 4. FORMS, INPUTS & BUTTONS
 * ------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
select,
textarea {
  background-color: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 0.875rem;
  padding: 8px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-light);
}

/* Primary Brand Red Buttons */
.btn-primary,
button.bg-rose-600,
a.bg-rose-600,
button.bg-rose-500,
a.bg-rose-500,
button.bg-\[\#DC3545\],
a.bg-\[\#DC3545\],
button.bg-\[\#202634\],
a.bg-\[\#202634\],
button.bg-slate-900,
a.bg-slate-900 {
  background-color: var(--primary-red) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px 0 rgba(220, 53, 69, 0.2) !important;
}

.btn-primary:hover,
button.bg-rose-600:hover,
a.bg-rose-600:hover,
button.bg-rose-500:hover,
a.bg-rose-500:hover,
button.bg-\[\#DC3545\]:hover,
a.bg-\[\#DC3545\]:hover,
button.bg-\[\#202634\]:hover,
a.bg-\[\#202634\]:hover,
button.bg-slate-900:hover,
a.bg-slate-900:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.3) !important;
}

/* Secondary Neutral Light Button */
.btn-secondary,
button.bg-slate-800,
a.bg-slate-800 {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: all 0.15s ease !important;
}

.btn-secondary:hover,
button.bg-slate-800:hover,
a.bg-slate-800:hover {
  background-color: #F8FAFC !important;
  color: var(--text-main) !important;
  border-color: #D2D8E2 !important;
}

/* -------------------------------------------------------------
 * 5. MODALS & POPUPS (Clean White)
 * ------------------------------------------------------------- */
.modal-backdrop,
div[id$="-modal"] {
  background-color: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(2px) !important;
}

.modal-content,
div[id$="-modal"] > div > div,
div[id$="-modal"] .bg-\[\#151d30\],
div[id$="-modal"] .bg-slate-900 {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-modal) !important;
  color: var(--text-main) !important;
}

.modal-header,
.modal-footer {
  background-color: #FFFFFF !important;
  border-color: var(--border-color) !important;
}

/* Dropdowns */
.dropdown-menu,
#notif-menu {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-dropdown) !important;
  color: var(--text-main) !important;
}

/* -------------------------------------------------------------
 * 6. TOAST NOTIFICATIONS (100% Light Theme)
 * ------------------------------------------------------------- */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.erp-toast {
  pointer-events: auto;
  min-width: 320px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-dropdown);
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.erp-toast-success {
  border-left: 4px solid var(--success) !important;
}
.erp-toast-danger {
  border-left: 4px solid var(--danger) !important;
}
.erp-toast-warning {
  border-left: 4px solid var(--warning) !important;
}
.erp-toast-info {
  border-left: 4px solid var(--info) !important;
}

/* -------------------------------------------------------------
 * 7. CHARTS (Clean White Containers)
 * ------------------------------------------------------------- */
.chart-container {
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-card) !important;
}

/* -------------------------------------------------------------
 * 8. RTL SUPPORT (Arabic)
 * ------------------------------------------------------------- */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .erp-toast {
  right: auto;
  left: 24px;
  text-align: right;
}

[dir="rtl"] .action-btn {
  flex-direction: row-reverse;
}

/* Keep numbers, dates, prices and barcodes consistently LTR in Arabic */
[dir="rtl"] .font-mono,
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="date"],
[dir="rtl"] .font-barcode {
  direction: ltr !important;
  display: inline-block;
  unicode-bidi: embed;
}

/* -------------------------------------------------------------
 * 9. RESPONSIVE DESIGN (320px to 1920px)
 * ------------------------------------------------------------- */
.table-responsive,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (max-width: 768px) {
  .erp-table th,
  .erp-table td {
    padding: 10px 12px !important;
    font-size: 0.8125rem !important;
  }
  
  .erp-card {
    padding: 14px !important;
  }
  
  #toast-container {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  
  .erp-toast {
    min-width: unset;
    width: 100%;
  }

  /* Modals on mobile phones */
  div[id*="modal"] > div {
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
}