/* ═══════════════════════════════════════════════
   KilieBTP — Design inspiré Business Central
   Couleurs originales conservées
   ═══════════════════════════════════════════════ */

:root {
  --navy:      #0f2137;
  --navy2:     #1a3351;
  --navy3:     #243b53;
  --orange:    #f59e0b;
  --orange2:   #d97706;
  --green:     #10b981;
  --red:       #ef4444;
  --yellow:    #f59e0b;
  --blue:      #3b82f6;
  --purple:    #8b5cf6;
  --gray:      #64748b;
  --gray2:     #94a3b8;
  --light:     #f8fafc;
  --white:     #ffffff;
  --border:    #e2e8f0;
  --border2:   #f1f5f9;
  --sidebar-w: 240px;
  --topbar-h:  56px;
  --cmdbar-h:  44px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.12);
  --radius:    6px;
  --radius-sm: 4px;
  --font:      'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:var(--font); font-size:13px; color:#1e293b; background:#f0f2f5; }
a { cursor:pointer; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* ═══════════════════════════════
   LOGIN — conservé + amélioré
═══════════════════════════════ */
.login-page { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.login-container {
  display:flex; flex-direction:column; justify-content:center; padding:3rem 4rem;
  max-width:520px; margin:0 auto; width:100%;
}
.login-brand {
  display:flex; align-items:center; gap:.6rem; font-size:1.4rem; font-weight:800;
  color:var(--navy); margin-bottom:2rem;
}
.login-brand i { color:var(--orange); font-size:1.6rem; }
.login-brand b { color:var(--orange); }
.login-container h2 { font-size:1.6rem; font-weight:800; color:var(--navy); margin-bottom:.3rem; }
.login-sub { color:var(--gray); margin-bottom:1.8rem; font-size:.9rem; }
.login-footer { text-align:center; margin-top:1.2rem; color:var(--gray); font-size:.875rem; }
.login-footer a { color:var(--orange); font-weight:600; text-decoration:none; }
.login-visual {
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy2) 50%, #1e4080 100%);
  display:flex; align-items:center; justify-content:center; padding:4rem 3rem; position:relative; overflow:hidden;
}
.login-visual::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 30%, rgba(245,158,11,.12) 0%, transparent 60%);
}
.lv-content { color:white; max-width:400px; position:relative; }
.lv-content h3 { font-size:1.8rem; font-weight:800; margin-bottom:1rem; line-height:1.3; }
.lv-content p { color:#94a3b8; margin-bottom:2rem; font-size:1rem; line-height:1.6; }
.lv-feat { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; font-size:.9rem; }
.lv-feat i { color:var(--green); width:18px; flex-shrink:0; }
.toggle-pwd { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--gray); cursor:pointer; }

.auth-tabs {
  display:flex; gap:.25rem; background:var(--light); padding:.3rem;
  border-radius:var(--radius-sm); margin-bottom:1.5rem;
}
.auth-tab {
  flex:1; padding:.5rem; border-radius:var(--radius-sm); border:none; background:transparent;
  font-size:.875rem; font-weight:600; color:var(--gray); cursor:pointer; font-family:var(--font);
}
.auth-tab.active { background:white; color:var(--navy); box-shadow:var(--shadow-sm); }
.pwd-bar { display:flex; gap:3px; margin-top:.3rem; }
.pwd-bar-seg { flex:1; height:3px; border-radius:2px; background:var(--border); transition:background .2s; }
.pwd-bar-seg.weak   { background:var(--red); }
.pwd-bar-seg.medium { background:var(--orange); }
.pwd-bar-seg.strong { background:var(--green); }

/* ═══════════════════════════════
   LAYOUT PRINCIPAL (BC-style)
═══════════════════════════════ */
#main-app { display:flex; height:100vh; overflow:hidden; }

/* ── SIDEBAR BC-STYLE ── */
.sidebar {
  width:var(--sidebar-w); min-width:var(--sidebar-w); height:100vh; overflow-y:auto;
  background:var(--navy); display:flex; flex-direction:column;
  position:relative; z-index:50; transition:width .25s ease; border-right:1px solid rgba(255,255,255,.06);
}
.sidebar.collapsed { width:52px; min-width:52px; }
.sidebar.collapsed .sidebar-nav span,
.sidebar.collapsed .sidebar-user .user-info,
.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .logout-btn span { display:none; }
.sidebar.collapsed .sidebar-logo { justify-content:center; padding:.9rem; }
.sidebar.collapsed .nav-item { justify-content:center; padding:.7rem .8rem; margin:.05rem .25rem; }
.sidebar.collapsed .sidebar-user { justify-content:center; padding:.7rem; }
.sidebar.collapsed .badge-nav { display:none; }

.sidebar-logo {
  display:flex; align-items:center; gap:.65rem; padding:1rem 1.1rem;
  font-size:1.1rem; font-weight:800; color:white; border-bottom:1px solid rgba(255,255,255,.07);
  min-height:var(--topbar-h); flex-shrink:0;
}
.sidebar-logo i { color:var(--orange); font-size:1.3rem; flex-shrink:0; }
.sidebar-logo b { color:var(--orange); }

.sidebar-user {
  display:flex; align-items:center; gap:.65rem; padding:.75rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0;
}
.user-avatar {
  width:34px; height:34px; border-radius:var(--radius-sm); flex-shrink:0;
  background:linear-gradient(135deg, var(--orange), #fbbf24);
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:800; font-size:.8rem;
}
.user-name { font-weight:600; font-size:.82rem; color:white; line-height:1.3; }
.user-role { font-size:.72rem; color:#94a3b8; }

.sidebar-nav { flex:1; padding:.3rem 0; overflow-y:auto; }
.nav-section-title {
  font-size:.62rem; font-weight:700; color:#475569; letter-spacing:.09em;
  padding:.6rem 1rem .25rem; text-transform:uppercase;
}
.nav-item {
  display:flex; align-items:center; gap:.65rem; padding:.6rem 1rem;
  color:#94a3b8; font-weight:500; font-size:.83rem; cursor:pointer;
  transition:all .12s; margin:.05rem .35rem; border-radius:var(--radius-sm);
  text-decoration:none; position:relative; border-left:2px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,.06); color:#e2e8f0; }
.nav-item.active { background:rgba(245,158,11,.12); color:var(--orange); border-left-color:var(--orange); font-weight:600; }
.nav-item.active i { color:var(--orange); }
.nav-item i { font-size:.9rem; flex-shrink:0; width:16px; text-align:center; }
.badge-nav {
  margin-left:auto; background:var(--red); color:white; border-radius:50px;
  font-size:.62rem; font-weight:700; padding:.1rem .4rem; min-width:16px; text-align:center;
}
.badge-nav.badge-warn { background:var(--orange); }

.logout-btn {
  display:flex; align-items:center; gap:.65rem; padding:.85rem 1rem 1.2rem;
  color:#64748b; background:none; border:none; cursor:pointer; font-size:.83rem; width:100%;
  font-family:var(--font); transition:color .12s; border-top:1px solid rgba(255,255,255,.06);
}
.logout-btn:hover { color:var(--red); }

/* ── MAIN CONTENT ── */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* ── TOPBAR BC-STYLE ── */
.topbar {
  height:var(--topbar-h); background:white; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 1.2rem;
  flex-shrink:0; gap:1rem;
}
.topbar-left { display:flex; align-items:center; gap:.75rem; min-width:0; }
.menu-toggle {
  width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--gray); font-size:.9rem; flex-shrink:0;
}
.menu-toggle:hover { background:var(--light); }
.page-title { font-size:1rem; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right { display:flex; align-items:center; gap:.6rem; flex-shrink:0; }
.topbar-btn {
  width:32px; height:32px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--gray); position:relative;
}
.topbar-btn:hover { background:var(--light); }
.topbar-company { font-size:.82rem; font-weight:700; color:var(--navy); padding:.3rem .65rem; border-left:1px solid var(--border); margin-left:.25rem; }
.notif-dot {
  position:absolute; top:5px; right:5px; width:7px; height:7px;
  border-radius:50%; background:var(--orange); border:1.5px solid white;
}

/* BREADCRUMB */
.breadcrumb { display:flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--gray); }
.breadcrumb-item { color:var(--gray); cursor:pointer; }
.breadcrumb-item:hover { color:var(--orange); text-decoration:underline; }
.breadcrumb-sep { color:var(--gray2); }
.breadcrumb-current { color:var(--navy); font-weight:600; }

/* ── COMMAND BAR (BC-style ribbon) ── */
.command-bar {
  height:var(--cmdbar-h); background:white; border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1.2rem; gap:.25rem; flex-shrink:0;
}
.cmd-btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .65rem;
  border:none; background:transparent; color:var(--navy); font-size:.82rem; font-weight:500;
  cursor:pointer; border-radius:var(--radius-sm); font-family:var(--font); white-space:nowrap;
  transition:background .12s;
}
.cmd-btn:hover { background:rgba(15,33,55,.06); }
.cmd-btn i { font-size:.82rem; }
.cmd-btn.cmd-primary { color:var(--orange); font-weight:600; }
.cmd-btn.cmd-danger { color:var(--red); }
.cmd-btn-sep { width:1px; height:20px; background:var(--border); margin:0 .2rem; }
.cmd-spacer { flex:1; }

/* ── PAGE CONTENT ── */
.page-content { flex:1; overflow-y:auto; padding:1.2rem 1.4rem; background:#f0f2f5; }

/* ═══════════════════════════════
   COMPONENTS BC-STYLE
═══════════════════════════════ */

/* Cards */
.card {
  background:white; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.2rem 1.4rem; box-shadow:var(--shadow-sm);
}
.card-header {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
  padding-bottom:.75rem; border-bottom:1px solid var(--border2);
}
.card-title { font-size:.9rem; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:.5rem; }

/* Fasttab (BC-style collapsible section) */
.fasttab {
  background:white; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.75rem; overflow:hidden;
}
.fasttab-header {
  display:flex; align-items:center; justify-content:space-between; padding:.7rem 1.1rem;
  cursor:pointer; background:#fafbfc; border-bottom:1px solid var(--border);
  font-weight:700; font-size:.85rem; color:var(--navy); user-select:none;
}
.fasttab-header:hover { background:#f1f5f9; }
.fasttab-body { padding:1.1rem; }
.fasttab-body.collapsed { display:none; }

/* KPI Cards BC-style */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-bottom:1.2rem; }
.kpi-card {
  background:white; border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem 1.1rem; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  border-top:3px solid transparent;
}
.kpi-card.kpi-blue   { border-top-color:var(--blue); }
.kpi-card.kpi-orange { border-top-color:var(--orange); }
.kpi-card.kpi-green  { border-top-color:var(--green); }
.kpi-card.kpi-purple { border-top-color:var(--purple); }
.kpi-card.kpi-red    { border-top-color:var(--red); }

.kpi-row { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:.5rem; }
.kpi-icon {
  width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center;
  justify-content:center; font-size:1rem;
}
.kpi-icon.blue   { background:#eff6ff; color:var(--blue); }
.kpi-icon.orange { background:#fef3c7; color:var(--orange2); }
.kpi-icon.green  { background:#d1fae5; color:var(--green); }
.kpi-icon.purple { background:#f5f3ff; color:var(--purple); }
.kpi-icon.red    { background:#fee2e2; color:var(--red); }
.kpi-value { font-size:1.5rem; font-weight:800; color:var(--navy); line-height:1.1; }
.kpi-label { font-size:.75rem; color:var(--gray); font-weight:500; }
.kpi-trend {
  font-size:.72rem; font-weight:600; display:flex; align-items:center; gap:.2rem; margin-top:.3rem;
}
.kpi-trend.up   { color:var(--green); }
.kpi-trend.down { color:var(--red); }
.kpi-trend.neutral { color:var(--gray); }

/* Tables BC-style */
.table-wrap { overflow-x:auto; margin:0 -1.4rem; padding:0 1.4rem; }
.card .table-wrap { margin:0 -1.4rem -1.2rem; padding:0; }
table { width:100%; border-collapse:collapse; font-size:.83rem; }
thead th {
  text-align:left; padding:.6rem .9rem; background:#f8fafc; color:var(--gray);
  font-weight:700; font-size:.73rem; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:2px solid var(--border); white-space:nowrap; position:sticky; top:0;
}
tbody td {
  padding:.65rem .9rem; border-bottom:1px solid var(--border2); color:#1e293b;
  vertical-align:middle; font-size:.83rem;
}
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background:#fffbf2; cursor:pointer; }
.table-empty {
  text-align:center; padding:2.5rem; color:var(--gray2); cursor:default !important;
}
.table-empty i { font-size:2rem; display:block; margin-bottom:.7rem; opacity:.5; }

/* Buttons BC-style */
.btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem;
  border-radius:var(--radius-sm); font-weight:600; font-size:.82rem; cursor:pointer;
  border:1px solid transparent; transition:all .12s; text-decoration:none; white-space:nowrap;
  font-family:var(--font); line-height:1;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--orange); color:white; border-color:var(--orange2); }
.btn-primary:hover:not(:disabled) { background:var(--orange2); }
.btn-success { background:var(--green); color:white; border-color:#059669; }
.btn-success:hover:not(:disabled) { background:#059669; }
.btn-danger  { background:var(--red); color:white; border-color:#dc2626; }
.btn-danger:hover:not(:disabled)  { background:#dc2626; }
.btn-secondary { background:white; color:var(--navy); border-color:var(--border); }
.btn-secondary:hover:not(:disabled) { background:var(--light); border-color:var(--gray2); }
.btn-navy { background:var(--navy); color:white; border-color:var(--navy2); }
.btn-navy:hover:not(:disabled) { background:var(--navy2); }
.btn-ghost { background:transparent; color:var(--gray); border-color:transparent; }
.btn-ghost:hover:not(:disabled) { background:var(--light); }
.btn-sm { padding:.3rem .65rem; font-size:.77rem; }
.btn-xs { padding:.2rem .5rem; font-size:.72rem; }
.btn-full { width:100%; justify-content:center; }
.btn-icon { width:28px; height:28px; padding:0; justify-content:center; font-size:.82rem; }
.btn-icon.btn-sm { width:26px; height:26px; }

/* Badges */
.badge {
  display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:50px;
  font-size:.7rem; font-weight:700; white-space:nowrap;
}
.badge-primary  { background:#eff6ff; color:var(--blue); }
.badge-success  { background:#d1fae5; color:#065f46; }
.badge-warning  { background:#fef3c7; color:#92400e; }
.badge-danger   { background:#fee2e2; color:#991b1b; }
.badge-secondary{ background:#f1f5f9; color:var(--gray); }
.badge-navy     { background:var(--navy); color:white; }
.badge-orange   { background:#fef3c7; color:var(--orange2); }
.badge-info     { background:#eff6ff; color:var(--blue); }

/* Forms BC-style */
.form-group { margin-bottom:.9rem; }
.form-group label {
  display:block; font-weight:600; font-size:.78rem; color:var(--navy); margin-bottom:.3rem;
  letter-spacing:.01em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:.5rem .75rem; border:1px solid #d1d5db; border-radius:var(--radius-sm);
  font-size:.83rem; color:#1e293b; font-family:var(--font); transition:border .12s, box-shadow .12s;
  background:white; line-height:1.4;
}
.form-group input:hover:not(:focus):not([readonly]),
.form-group select:hover:not(:focus),
.form-group textarea:hover:not(:focus) { border-color:#9ca3af; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--orange); box-shadow:0 0 0 2px rgba(245,158,11,.15);
}
.form-group input[readonly] { background:#f8fafc; color:var(--gray); cursor:default; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem; }
.form-group textarea { resize:vertical; min-height:75px; }
.form-hint { font-size:.72rem; color:var(--gray); margin-top:.25rem; }
.form-section { font-size:.78rem; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.6rem; margin-top:1.2rem; padding-bottom:.3rem; border-bottom:1px solid var(--border); }

/* Alerts */
.alert {
  padding:.65rem .9rem; border-radius:var(--radius-sm); font-size:.83rem; margin-bottom:.85rem;
  display:flex; align-items:flex-start; gap:.5rem; line-height:1.5;
}
.alert i { flex-shrink:0; margin-top:.1rem; }
.alert-error   { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.alert-success { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.alert-warning { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.alert-info    { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }

/* Modal */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  backdrop-filter:blur(2px);
}
.modal {
  background:white; border-radius:var(--radius); width:100%; max-width:600px;
  max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  animation:modalIn .18s ease-out;
}
@keyframes modalIn { from{opacity:0;transform:scale(.97) translateY(-6px)} to{opacity:1;transform:none} }
.modal-lg { max-width:860px; }
.modal-xl { max-width:1100px; }
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.2rem; border-bottom:2px solid var(--border); flex-shrink:0;
  background:#f8fafc; border-radius:var(--radius) var(--radius) 0 0;
}
.modal-header h3 { font-size:.9rem; font-weight:700; color:var(--navy); }
.modal-close {
  width:28px; height:28px; border:none; background:transparent; border-radius:var(--radius-sm);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--gray);
}
.modal-close:hover { background:var(--border); }
.modal-body { flex:1; overflow-y:auto; padding:1.2rem; }
.modal-footer {
  padding:.85rem 1.2rem; border-top:1px solid var(--border); display:flex;
  justify-content:flex-end; gap:.6rem; flex-shrink:0; background:#fafbfc;
  border-radius:0 0 var(--radius) var(--radius);
}

/* Toast */
#toast-container {
  position:fixed; bottom:1.2rem; right:1.2rem; z-index:2000;
  display:flex; flex-direction:column; gap:.4rem;
}
.toast {
  background:var(--navy); color:white; padding:.6rem 1rem; border-radius:var(--radius-sm);
  font-size:.82rem; font-weight:500; box-shadow:var(--shadow-lg); max-width:340px;
  display:flex; align-items:center; gap:.5rem; animation:slideIn .25s ease;
}
.toast.success { background:var(--green); }
.toast.error   { background:var(--red); }
.toast.warning { background:var(--orange2); }
@keyframes slideIn { from{transform:translateX(110%);opacity:0} to{transform:none;opacity:1} }

/* Progress bar */
.progress { height:6px; background:var(--border); border-radius:50px; overflow:hidden; }
.progress-bar { height:100%; border-radius:50px; background:linear-gradient(90deg,var(--orange),#fbbf24); transition:width .4s ease; }
.progress-bar.green { background:linear-gradient(90deg,var(--green),#34d399); }
.progress-bar.red   { background:linear-gradient(90deg,var(--red),#f87171); }
.progress-bar.blue  { background:linear-gradient(90deg,var(--blue),#60a5fa); }

/* Page layout */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem;
  gap:1rem; flex-wrap:wrap;
}
.page-header-info h2 { font-size:1.15rem; font-weight:800; color:var(--navy); line-height:1.2; }
.page-header-info p  { font-size:.78rem; color:var(--gray); margin-top:.2rem; }
.page-header-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
/* Alias pour compat */
.page-header h2 { font-size:1.15rem; font-weight:800; color:var(--navy); }
.page-header p  { font-size:.78rem; color:var(--gray); margin-top:.2rem; }

/* Tabs */
.tabs { display:flex; gap:.2rem; background:var(--border2); padding:.25rem; border-radius:var(--radius-sm); margin-bottom:1rem; width:fit-content; }
.tab-btn {
  padding:.38rem .95rem; border-radius:var(--radius-sm); border:none; background:transparent;
  font-size:.8rem; font-weight:600; color:var(--gray); cursor:pointer; font-family:var(--font); white-space:nowrap;
}
.tab-btn.active { background:white; color:var(--navy); box-shadow:var(--shadow-sm); }

/* Search & Filters (toolbar) */
.toolbar {
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap;
  padding:.75rem 0; border-bottom:1px solid var(--border2);
}
.search-box { flex:1; min-width:180px; position:relative; }
.search-box i { position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:var(--gray2); font-size:.82rem; }
.search-box input {
  width:100%; padding:.45rem .75rem .45rem 2rem; border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.82rem; font-family:var(--font); color:#1e293b;
}
.search-box input:focus { outline:none; border-color:var(--orange); }

/* Status dot */
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:.35rem; }
.dot-green  { background:var(--green); }
.dot-orange { background:var(--orange); }
.dot-red    { background:var(--red); }
.dot-gray   { background:var(--gray2); }
.dot-blue   { background:var(--blue); }

/* Grid layouts */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.85rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; }

/* Devis & Factures document lines */
.line-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.line-table th { background:#f8fafc; padding:.5rem .75rem; text-align:left; font-weight:700; font-size:.72rem; text-transform:uppercase; border:1px solid var(--border); letter-spacing:.04em; color:var(--gray); }
.line-table td { padding:.5rem .75rem; border:1px solid var(--border); }
.line-table tbody tr:hover { background:#fffbf2; }
.line-table tfoot td { font-weight:700; background:#f8fafc; }
.line-table .total-row td { background:var(--navy); color:white; font-weight:800; }

/* Abonnement plan cards */
.plan-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.plan-card {
  background:white; border:2px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; text-align:center; position:relative; transition:border-color .2s, box-shadow .2s;
}
.plan-card:hover { border-color:var(--orange); box-shadow:var(--shadow); }
.plan-card.current { border-color:var(--orange); }
.plan-price { font-size:1.8rem; font-weight:900; color:var(--navy); margin:.5rem 0; }

/* ── KDIALOG ── */
#kdialog-overlay {
  position:fixed; inset:0; background:rgba(15,33,55,.5); z-index:3000;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  backdrop-filter:blur(3px);
}
.kdialog {
  background:white; border-radius:var(--radius); padding:2rem 1.8rem;
  max-width:400px; width:100%; text-align:center; box-shadow:var(--shadow-lg);
  animation:kDialogIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes kDialogIn { from{transform:scale(.88) translateY(12px);opacity:0} to{transform:none;opacity:1} }
.kdialog-icon { font-size:2.8rem; margin-bottom:.6rem; line-height:1; }
.kdialog-title { font-size:1.05rem; font-weight:800; color:var(--navy); margin-bottom:.5rem; }
.kdialog-msg { color:var(--gray); font-size:.88rem; line-height:1.6; margin-bottom:1.3rem; }
.kdialog-actions { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; }

/* Loader */
.loader { text-align:center; padding:2.5rem; color:var(--gray); }
.spinner {
  width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--orange);
  border-radius:50%; animation:spin .6s linear infinite; margin:0 auto .85rem;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Stat row (inline stats) */
.stat-row { display:flex; gap:1.5rem; flex-wrap:wrap; }
.stat-item { display:flex; flex-direction:column; }
.stat-item .stat-val { font-size:1.2rem; font-weight:800; color:var(--navy); }
.stat-item .stat-lbl { font-size:.72rem; color:var(--gray); }

/* Action link */
.action-link { color:var(--orange); font-weight:600; cursor:pointer; font-size:.82rem; }
.action-link:hover { text-decoration:underline; }

/* Section divider */
.divider { height:1px; background:var(--border); margin:1rem 0; }

/* Info rows (2-col key-value) */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.5rem; }
.info-row { display:flex; flex-direction:column; }
.info-row .info-label { font-size:.72rem; font-weight:700; color:var(--gray); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.1rem; }
.info-row .info-value { font-size:.88rem; color:var(--navy); font-weight:500; }

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  .grid-3   { grid-template-columns:1fr 1fr; }
  .plan-cards { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:900px) {
  :root { --sidebar-w:52px; }
  .sidebar .sidebar-nav span,
  .sidebar .sidebar-user .user-info,
  .sidebar .sidebar-logo span,
  .sidebar .nav-section-title,
  .sidebar .logout-btn span { display:none; }
  .sidebar .sidebar-logo { justify-content:center; padding:.9rem; }
  .sidebar .nav-item { justify-content:center; padding:.7rem .8rem; margin:.05rem .25rem; }
  .sidebar .sidebar-user { justify-content:center; padding:.7rem; }
}
@media(max-width:768px) {
  .login-page { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .login-container { padding:2rem 1.5rem; max-width:none; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .page-header { flex-direction:column; align-items:flex-start; gap:.6rem; }
  .command-bar { overflow-x:auto; }
  .topbar-company { display:none; }
}