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

:root{
  --bg:            #000000;
  --text:          #F5F5F7;
  --text-dim:      rgba(245,245,247,0.62);
  --text-faint:    rgba(245,245,247,0.38);

  --glass:         rgba(255,255,255,0.055);
  --glass-strong:  rgba(255,255,255,0.09);
  --glass-border:  rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
  --blur:          26px;

  --blue:    #0A84FF;
  --blue-soft: rgba(10,132,255,0.16);
  --green:   #30D158;
  --green-soft: rgba(48,209,88,0.14);
  --red:     #FF453A;
  --red-soft: rgba(255,69,58,0.14);
  --amber:   #FF9F0A;
  --amber-soft: rgba(255,159,10,0.14);
  --purple:  #BF5AF2;

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --sidebar-w: 248px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }
img{ max-width:100%; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }

/* ============================================
   Fond ambiant — halos de couleur flous, fixes
   ============================================ */
.ambient{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.ambient span{
  position:absolute; border-radius:50%; filter:blur(90px);
}
.ambient .b1{ width:640px; height:640px; top:-220px; left:-160px; background:var(--blue); opacity:0.22; }
.ambient .b2{ width:520px; height:520px; bottom:-200px; right:-140px; background:var(--purple); opacity:0.16; }
.ambient .b3{ width:420px; height:420px; top:40%; left:55%; background:var(--amber); opacity:0.08; }

/* ============================================
   Layout : sidebar + contenu
   ============================================ */
.app{ position:relative; z-index:1; display:flex; min-height:100vh; }

.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:rgba(20,20,22,0.55);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border-right:1px solid var(--glass-border);
  display:flex; flex-direction:column;
  padding:26px 16px;
  position:sticky; top:0; height:100vh;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px 26px;
  font-weight:800; font-size:1.05rem; letter-spacing:-0.01em;
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue); }

.nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border-radius:var(--radius-sm);
  color:var(--text-dim);
  font-size:0.92rem; font-weight:500;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.nav a svg{ width:18px; height:18px; flex-shrink:0; opacity:0.85; }
.nav a:hover{ background:var(--glass); color:var(--text); }
.nav a.active{ background:var(--glass-strong); color:var(--text); box-shadow:inset 0 0 0 1px var(--glass-border-strong); }

.sidebar-foot{ padding-top:16px; border-top:1px solid var(--glass-border); }
.sidebar-foot a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:var(--radius-sm);
  color:var(--text-faint); font-size:0.88rem;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.sidebar-foot a:hover{ color:var(--text); background:var(--glass); }
.sidebar-foot svg{ width:17px; height:17px; }

.main{ flex:1; min-width:0; padding:34px 44px 60px; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:30px; gap:20px; flex-wrap:wrap;
}
.topbar h1{ font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; margin:0; }
.topbar .sub{ color:var(--text-dim); font-size:0.92rem; margin-top:4px; }
.topbar-actions{ display:flex; gap:10px; }

/* ============================================
   Cartes verre
   ============================================ */
.glass-card{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:26px;
}
.glass-card + .glass-card{ margin-top:20px; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.kpi{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:20px 22px;
}
.kpi .label{ font-size:0.82rem; color:var(--text-dim); margin-bottom:10px; }
.kpi .value{ font-size:1.7rem; font-weight:800; letter-spacing:-0.02em; }
.kpi .delta{ font-size:0.8rem; margin-top:8px; display:inline-flex; align-items:center; gap:4px; }
.kpi .delta.up{ color:var(--green); }
.kpi .delta.down{ color:var(--red); }
.kpi.accent-blue .value{ color:var(--blue); }
.kpi.accent-green .value{ color:var(--green); }
.kpi.accent-red .value{ color:var(--red); }
.kpi.accent-amber .value{ color:var(--amber); }

.grid-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:20px; }

/* ============================================
   Boutons
   ============================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--radius-pill);
  font-size:0.88rem; font-weight:600;
  border:1px solid transparent;
  transition:transform .15s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:#3399ff; }
.btn-glass{ background:var(--glass-strong); color:var(--text); border-color:var(--glass-border-strong); }
.btn-glass:hover{ background:rgba(255,255,255,0.14); }
.btn-danger{ background:var(--red-soft); color:var(--red); border-color:rgba(255,69,58,0.3); }
.btn-danger:hover{ background:rgba(255,69,58,0.24); }
.btn-sm{ padding:7px 14px; font-size:0.8rem; }
.btn-icon{ width:36px; height:36px; padding:0; border-radius:var(--radius-pill); }
.btn svg{ width:15px; height:15px; }

/* ============================================
   Tables
   ============================================ */
.table-wrap{ overflow-x:auto; }
table.data{ width:100%; border-collapse:collapse; font-size:0.9rem; }
table.data th{
  text-align:left; padding:10px 14px;
  color:var(--text-faint); font-weight:600; font-size:0.78rem;
  border-bottom:1px solid var(--glass-border);
  white-space:nowrap;
}
table.data td{
  padding:13px 14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  vertical-align:middle;
}
table.data tbody tr{ transition:background .15s var(--ease); }
table.data tbody tr:hover{ background:rgba(255,255,255,0.03); }
table.data tbody tr:last-child td{ border-bottom:none; }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px; border-radius:var(--radius-pill);
  font-size:0.76rem; font-weight:600;
}
.badge-green{ background:var(--green-soft); color:var(--green); }
.badge-red{ background:var(--red-soft); color:var(--red); }
.badge-amber{ background:var(--amber-soft); color:var(--amber); }
.badge-blue{ background:var(--blue-soft); color:var(--blue); }
.badge-gray{ background:var(--glass-strong); color:var(--text-dim); }

.amount-in{ color:var(--green); font-weight:600; }
.amount-out{ color:var(--red); font-weight:600; }

.row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ============================================
   Formulaires / modales
   ============================================ */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.82rem; color:var(--text-dim); margin-bottom:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.input, select.input, textarea.input{
  width:100%;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  color:var(--text);
  font-size:0.9rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; border-color:var(--blue); background:rgba(255,255,255,0.09);
}
.input::placeholder{ color:var(--text-faint); }

.modal-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  width:100%; max-width:460px;
  background:rgba(28,28,30,0.86);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-lg);
  padding:28px;
  max-height:88vh; overflow-y:auto;
}
.modal h3{ margin:0 0 20px; font-size:1.2rem; font-weight:700; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(16px);
  background:rgba(28,28,30,0.92);
  backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border-strong);
  color:var(--text);
  padding:13px 22px; border-radius:var(--radius-pill);
  font-size:0.87rem; font-weight:500;
  opacity:0; pointer-events:none; z-index:300;
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.empty{ text-align:center; padding:60px 20px; color:var(--text-dim); }
.empty h3{ color:var(--text); margin-bottom:8px; }

/* ============================================
   Login (code d'accès)
   ============================================ */
.login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; padding:20px;
}
.login-card{
  width:100%; max-width:360px;
  background:var(--glass);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border-strong);
  border-radius:28px;
  padding:38px 34px;
  text-align:center;
}
.login-card .dot{ width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 14px var(--blue); margin:0 auto 18px; }
.login-card h1{ font-size:1.3rem; font-weight:800; margin:0 0 6px; }
.login-card p{ color:var(--text-dim); font-size:0.88rem; margin:0 0 26px; }
.code-inputs{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; }
.code-inputs input{
  width:44px; height:54px; text-align:center; font-size:1.4rem; font-weight:700;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  color:var(--text);
}
.code-inputs input:focus{ outline:none; border-color:var(--blue); background:rgba(255,255,255,0.1); }
.login-error{ color:var(--red); font-size:0.84rem; margin-bottom:14px; min-height:18px; }

/* ============================================
   Documents (gestionnaire de fichiers)
   ============================================ */
.breadcrumb{ display:flex; align-items:center; gap:6px; font-size:0.86rem; color:var(--text-dim); margin-bottom:18px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--text-dim); transition:color .15s var(--ease); }
.breadcrumb a:hover{ color:var(--text); }
.breadcrumb .sep{ color:var(--text-faint); }

.file-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(148px,1fr)); gap:14px; }
.file-tile{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:18px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  transition:background .15s var(--ease), border-color .15s var(--ease);
  cursor:pointer;
  position:relative;
}
.file-tile:hover{ background:var(--glass-strong); border-color:var(--glass-border-strong); }
.file-tile .icon{ width:40px; height:40px; }
.file-tile .name{ font-size:0.82rem; font-weight:500; word-break:break-word; line-height:1.3; }
.file-tile .meta{ font-size:0.72rem; color:var(--text-faint); }
.file-tile .tile-menu{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); opacity:0;
  transition:opacity .15s var(--ease);
}
.file-tile:hover .tile-menu{ opacity:1; }

.dropdown-menu{
  position:fixed; z-index:150;
  background:rgba(28,28,30,0.94);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border-strong);
  border-radius:12px; padding:6px; min-width:170px;
  box-shadow:0 14px 34px rgba(0,0,0,0.45);
}
.dropdown-menu button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:9px 11px; border-radius:8px; background:transparent; border:none;
  color:var(--text); font-size:0.85rem;
}
.dropdown-menu button:hover{ background:var(--glass-strong); }
.dropdown-menu button.danger{ color:var(--red); }
.dropdown-menu svg{ width:15px; height:15px; opacity:0.85; }

.dropzone{
  border:1.5px dashed var(--glass-border-strong);
  border-radius:var(--radius-lg);
  padding:34px; text-align:center;
  color:var(--text-dim); font-size:0.88rem;
  margin-bottom:22px;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.dropzone.drag{ border-color:var(--blue); background:var(--blue-soft); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width:1080px){
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .sidebar{ position:fixed; left:0; top:0; z-index:50; height:100vh; transform:translateX(-100%); transition:transform .25s var(--ease); }
  .sidebar.open{ transform:translateX(0); }
  #mobileNavToggle{ display:flex !important; }
  .main{ padding:24px 18px 60px; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .field-row{ grid-template-columns:1fr; }
}