/* ============================================================
   KARBON-BOX — Glassmorphism Theme Override
   Surcharge les classes Tailwind compilées pour appliquer
   un style glassmorphism (indigo/violet, transparences, blur)
   ============================================================ */

/* ── VARIABLES ──────────────────────────────────────── */
:root {
  --glass-primary: #4f46e5;
  --glass-primary-dark: #4338ca;
  --glass-primary-deeper: #3730a3;
  --glass-accent: #7c3aed;
  --glass-white: rgba(255, 255, 255, 0.82);
  --glass-white-subtle: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(199, 210, 254, 0.4);
  --glass-blur: 16px;
}

/* ── POLICE — NUNITO SANS ───────────────────────────── */
body,
table,
input,
select,
textarea,
button {
  font-family: 'Nunito Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Taille de police du tableau légèrement augmentée pour lisibilité */
table.text-xs,
.text-xs table,
table[class*="text-xs"] {
  font-size: 12px !important;
}

/* ── BANDEAU HEADER — BOUTONS HARMONISÉS ──────────── */
#kb-ofx-dashboard-btn,
#kb-connecteurs-btn,
#kb-suivi-btn,
#kb-stats-native-btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#kb-ofx-dashboard-btn svg,
#kb-connecteurs-btn svg,
#kb-suivi-btn svg,
#kb-stats-native-btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── EMPÊCHER LE SCROLL DU BODY ────────────────────── */
html, body {
  overflow: hidden !important;
  height: 100vh !important;
}

/* ── FOND DE PAGE — MESH GRADIENT ───────────────────── */
body.bg-gray-50,
.bg-gray-100 {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    #eef2ff !important;
}

/* ── GRADIENT OVERRIDES (blue → indigo) ─────────────── */

/* from-blue-600 : #2563eb → #4f46e5 */
.from-blue-600 {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position) !important;
}

/* from-blue-700 : #1d4ed8 → #4338ca */
.from-blue-700 {
  --tw-gradient-from: #4338ca var(--tw-gradient-from-position) !important;
}

/* to-blue-700 : #1d4ed8 → #4338ca */
.to-blue-700 {
  --tw-gradient-to: #4338ca var(--tw-gradient-to-position) !important;
}

/* to-blue-800 : #1e40af → #3730a3 */
.to-blue-800 {
  --tw-gradient-to: #3730a3 var(--tw-gradient-to-position) !important;
}

/* via-blue-900 (login background) */
.via-blue-900 {
  --tw-gradient-via: #312e81 var(--tw-gradient-via-position) !important;
}

/* ── BACKGROUND COLORS ──────────────────────────────── */

.bg-blue-500 { background-color: #6366f1 !important; }
.bg-blue-600 { background-color: #4f46e5 !important; }
.bg-blue-700 { background-color: #4338ca !important; }

.bg-blue-50  { background-color: rgba(238, 242, 255, 0.9) !important; }
.bg-blue-100 { background-color: rgba(224, 231, 255, 0.8) !important; }

/* ── HOVER BACKGROUNDS ──────────────────────────────── */

.hover\:bg-blue-500:hover { background-color: #6366f1 !important; }
.hover\:bg-blue-600:hover { background-color: #4f46e5 !important; }
.hover\:bg-blue-700:hover { background-color: #4338ca !important; }
.hover\:bg-blue-50:hover  { background-color: rgba(238, 242, 255, 0.85) !important; }

/* ── TEXT COLORS ────────────────────────────────────── */

.text-blue-100 { color: #e0e7ff !important; }
.text-blue-300 { color: #a5b4fc !important; }
.text-blue-500 { color: #6366f1 !important; }
.text-blue-600 { color: #4f46e5 !important; }
.text-blue-700 { color: #4338ca !important; }
.text-blue-800 { color: #3730a3 !important; }

/* ── BORDER COLORS ──────────────────────────────────── */

.border-blue-400 { border-color: rgba(129, 140, 248, 0.5) !important; }
.border-blue-500 { border-color: rgba(99, 102, 241, 0.6) !important; }
.border-blue-600 { border-color: rgba(79, 70, 229, 0.6) !important; }

.hover\:border-blue-400:hover { border-color: rgba(129, 140, 248, 0.7) !important; }

/* ── FOCUS RING / BORDER ────────────────────────────── */

.focus\:ring-blue-300:focus { --tw-ring-color: rgba(165, 180, 252, 0.5) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: rgba(99, 102, 241, 0.5) !important; }
.focus\:border-blue-500:focus { border-color: rgba(99, 102, 241, 0.7) !important; }

.ring-blue-500 { --tw-ring-color: rgba(99, 102, 241, 0.5) !important; }

/* ── PLACEHOLDER ────────────────────────────────────── */

.placeholder-blue-300::placeholder { color: rgba(165, 180, 252, 0.6) !important; }

/* ── GLASSMORPHISM — PANNEAUX / CARDS ───────────────── */

/* Fonds blancs semi-transparents avec blur */
.bg-white {
  background-color: var(--glass-white) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Sous-barres (filtres, toolbars) */
.bg-gray-50 {
  background-color: rgba(238, 242, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* En-têtes de tableau */
.bg-gray-100 {
  background:
    linear-gradient(180deg, rgba(238, 242, 255, 0.92), rgba(224, 231, 255, 0.88)) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Zone viewer document */
.bg-gray-200 {
  background:
    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.03) 0%, transparent 50%),
    linear-gradient(180deg, #e0e7ff 0%, #c7d2fe 100%) !important;
}

/* ── BORDURES SUBTILES ──────────────────────────────── */

.border-gray-200 { border-color: var(--glass-border) !important; }
.border-gray-300 { border-color: rgba(165, 180, 252, 0.35) !important; }

.border-b { border-bottom-color: rgba(199, 210, 254, 0.35); }
.border-r { border-right-color: rgba(199, 210, 254, 0.35); }
.border-t { border-top-color: rgba(199, 210, 254, 0.35); }

/* ── OMBRES RAFFINÉES ───────────────────────────────── */

.shadow-lg {
  box-shadow:
    0 10px 24px -4px rgba(79, 70, 229, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.shadow-xl {
  box-shadow:
    0 20px 40px -8px rgba(79, 70, 229, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

.shadow-2xl {
  box-shadow:
    0 25px 60px -12px rgba(79, 70, 229, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

/* ── HEADER — REFLET LUMINEUX ───────────────────────── */

header,
[class*="shadow-lg"][class*="shrink-0"][class*="bg-gradient-to-r"] {
  position: relative;
}

header::after,
.shrink-0.shadow-lg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  pointer-events: none;
}

/* ── BOUTONS — GRADIENTS ET OMBRES COLORÉES ─────────── */

/* Bouton primaire indigo */
.bg-blue-600.text-white,
.bg-blue-600.hover\:bg-blue-700 {
  background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
  transition: all 0.2s ease;
}
.bg-blue-600.text-white:hover,
.bg-blue-600.hover\:bg-blue-700:hover {
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.4) !important;
  transform: translateY(-1px);
}

/* Bouton vert */
.bg-green-600.text-white {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
  transition: all 0.2s ease;
}
.bg-green-600.text-white:hover {
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35) !important;
  transform: translateY(-1px);
}

/* Bouton amber */
.bg-amber-600.text-white {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
  transition: all 0.2s ease;
}
.bg-amber-600.text-white:hover {
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35) !important;
  transform: translateY(-1px);
}

/* ── INPUTS — GLOW AU FOCUS ─────────────────────────── */

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(99, 102, 241, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
  outline: none;
}

/* ── SELECTS DANS LE HEADER — Options lisibles ──────── */
header select option {
  background: #fff !important;
  color: #1e293b !important;
}

/* Override the karbon-red focus variables */
:root {
  --karbon-red: #4f46e5;
  --karbon-red-dark: #4338ca;
}

/* ── TABLEAU — LIGNES ALTERNÉES ─────────────────────── */

/* Lignes paires subtiles */
table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.35);
}
table tbody tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Hover sur ligne */
table tbody tr:hover {
  background-color: rgba(79, 70, 229, 0.04) !important;
}

/* Ligne sélectionnée */
table tbody tr.border-l-4,
table tbody tr[class*="bg-blue-100"] {
  background-color: rgba(79, 70, 229, 0.08) !important;
  border-left-color: #4f46e5 !important;
}

/* Retirer le gras du nom, de la date et du TTC dans le tableau */
table tbody td.truncate.font-medium {
  font-weight: 400 !important;
}
table tbody td input[type="date"] {
  font-weight: 400 !important;
}
table tbody td.font-semibold.kb-amt-col {
  font-weight: 400 !important;
}

/* En-têtes de tableau — text indigo */
table thead th {
  color: #4338ca;
  letter-spacing: 0.02em;
}

/* ── SÉLECTION ACTIVE (pagination, etc) ─────────────── */

.bg-blue-600:not(.text-white):not(button) {
  background-color: #4f46e5 !important;
}

/* ── LOGIN — AJUSTEMENTS ────────────────────────────── */

.rounded-2xl.shadow-2xl {
  background-color: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ── SPLITTER DRAGGABLE ─────────────────────────────── */

#kb-splitter {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: rgba(199, 210, 254, 0.4);
  transition: background 0.15s, width 0.15s;
  position: relative;
  z-index: 5;
}
#kb-splitter:hover {
  background: rgba(99, 102, 241, 0.3);
  width: 6px;
}
#kb-splitter.kb-splitter-active {
  background: rgba(79, 70, 229, 0.5);
  width: 6px;
}

/* ── DROP ZONE (upload) ─────────────────────────────── */

.border-dashed {
  border-color: rgba(79, 70, 229, 0.25) !important;
  transition: all 0.3s ease;
}
.border-dashed:hover {
  border-color: rgba(79, 70, 229, 0.45) !important;
  background-color: rgba(79, 70, 229, 0.03) !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.05);
}

/* ── SCROLLBARS ─────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.15);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.3);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.15) transparent;
}

/* ── TOAST NOTIFICATIONS ────────────────────────────── */

.bg-blue-600.fixed,
.fixed.bg-blue-600 {
  background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
  box-shadow: 0 8px 30px rgba(79, 70, 229, 0.25) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.bg-green-600.fixed,
.fixed.bg-green-600 {
  background: linear-gradient(135deg, #059669, #047857) !important;
  box-shadow: 0 8px 30px rgba(5, 150, 105, 0.25) !important;
}

.bg-red-600.fixed,
.fixed.bg-red-600 {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  box-shadow: 0 8px 30px rgba(220, 38, 38, 0.25) !important;
}

/* ── MODALS — OVERLAY GLASS ─────────────────────────── */

.fixed.inset-0.bg-black\/50,
.fixed.inset-0[class*="bg-black"] {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Modal cards */
.fixed .rounded-lg.shadow-2xl,
.fixed .rounded-lg.overflow-hidden {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* ── META THEME COLOR ───────────────────────────────── */
/* Updated via JS in patch, but CSS fallback for consistent look */

/* ── CONTEXT MENU ───────────────────────────────────── */

.fixed.bg-white.rounded-lg.shadow-xl.border {
  border-color: var(--glass-border) !important;
  box-shadow:
    0 20px 40px -8px rgba(79, 70, 229, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

/* ── BADGES STATUT — TEINTES INDIGO ─────────────────── */

.bg-blue-100.text-blue-600,
.bg-blue-100.text-blue-700 {
  background-color: rgba(224, 231, 255, 0.8) !important;
  color: #4f46e5 !important;
}

/* ── SELECTED ROW LEFT BORDER ───────────────────────── */

.border-blue-600 { border-color: #4f46e5 !important; }
.border-l-blue-500 { border-left-color: #6366f1 !important; }
.border-blue-500 { border-color: #6366f1 !important; }

/* ── SÉLECTEUR DE THÈME COMPACT ─────────────────────── */

/* Conteneur des dots de couleur (flex items-center gap-1 mr-1) dans le header */
header .gap-1.mr-1,
header [class*="gap-1"][class*="mr-1"] {
  max-width: 180px;
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 3px !important;
  padding: 2px 0;
}
header .gap-1.mr-1::-webkit-scrollbar,
header [class*="gap-1"][class*="mr-1"]::-webkit-scrollbar {
  display: none;
}
/* Dots plus petits */
header .gap-1.mr-1 button,
header [class*="gap-1"][class*="mr-1"] button {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  flex-shrink: 0;
}

/* ── BANDEAUX ULTRA-COMPACTS — MAXIMISER L'IMAGE ──── */

/* Header principal — hauteur minimale */
header {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}
header h1 { font-size: 14px !important; }

/* BANDEAU 1 : Nom dossier + boutons sur la même ligne */
main > .bg-white.border-b.shrink-0 {
  padding: 4px 8px !important;
  flex-wrap: nowrap !important;
  min-height: 0 !important;
  gap: 0 !important;
  justify-content: flex-start !important;
}
/* Partie gauche : largeur fixe pour alignement constant des boutons */
main > .bg-white.border-b.shrink-0 > .flex.items-center:first-child {
  flex: none !important;
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  overflow: hidden !important;
}
main > .bg-white.border-b.shrink-0 h2 {
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.2;
}
/* Masquer les compteurs dots (redondants avec les onglets filtres) */
main > .bg-white.border-b.shrink-0 .flex.gap-3.items-center {
  display: none !important;
}
/* Partie droite : boutons alignés, poussés à droite */
main > .bg-white.border-b.shrink-0 > .flex.items-center.gap-2:last-child {
  width: auto !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  gap: 4px !important;
}
/* Boutons compacts */
main > .bg-white.border-b.shrink-0 > .flex.items-center.gap-2 > button {
  padding: 6px 10px !important;
  font-size: 11px !important;
  border-radius: 4px !important;
  line-height: 1.3;
}
main > .bg-white.border-b.shrink-0 > .flex.items-center.gap-2 > button svg {
  width: 13px !important;
  height: 13px !important;
}

/* BANDEAU 2 : Recherche + onglets filtres — hauteur minimale */
main > .bg-gray-50.border-b.shrink-0 {
  padding: 1px 8px !important;
  min-height: 0 !important;
}
/* Zone de recherche — largeur fixe, pas flex-1 */
main > .bg-gray-50.border-b.shrink-0 > .relative.flex-1 {
  flex: 0 0 auto !important;
  width: 200px !important;
}
input[placeholder="Rechercher..."].w-full.pl-10 {
  padding: 1px 8px 1px 28px !important;
  font-size: 11px !important;
  height: 22px !important;
}
/* Icône recherche repositionnée pour la nouvelle hauteur */
main > .bg-gray-50.border-b.shrink-0 .relative svg {
  width: 14px !important;
  height: 14px !important;
}
/* Onglets filtres : 1cm à droite du champ recherche */
main > .bg-gray-50.border-b.shrink-0 > .flex.items-center.gap-1 {
  margin-left: 38px !important;
}
main > .bg-gray-50.border-b.shrink-0 .flex.items-center.gap-1 > button {
  padding: 1px 5px !important;
  font-size: 10px !important;
  line-height: 1.2;
}

/* ── COLONNES MONTANTS (HT/TVA/TTC) — largeurs fixes + alignement ── */
th.kb-amt-col, td.kb-amt-col {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  text-align: right !important;
  white-space: nowrap !important;
}
/* TVA = 2e colonne kb-amt-col (entre HT et TTC) — fond jaune */
td.kb-amt-col + td.kb-amt-col:not(.font-semibold) {
  background: rgba(253, 224, 71, 0.18) !important;
}

/* ── TRANSITIONS GLOBALES ───────────────────────────── */

button, a, input, select, textarea {
  transition: all 0.15s ease;
}