/* ============================================================
   BASE.CSS — Variables, reset, layout, composants globaux
   ============================================================ */

/* ── Variables ── */
:root {
  --bg:           #0d0f14;
  --panel:        #13161e;
  --panel-border: #1e2330;
  --sidebar-bg:   #0a0c10;
  --sidebar-w:    230px;
  --accent:       #5b8aff;
  --accent-dim:   #2a3d6e;
  --accent-glow:  rgba(91,138,255,0.15);
  --text:         #c8cdd8;
  --text-muted:   #545b70;
  --text-bright:  #eef0f5;
  --warn:         #f5a623;
  --font-ui:      'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
  --transition:   0.18s cubic-bezier(.4,0,.2,1);
}

body.light {
  --bg:           #f0f2f7;
  --panel:        #ffffff;
  --panel-border: #dde1ec;
  --sidebar-bg:   #1a1f2e;
  --text:         #2d3348;
  --text-muted:   #8a91a8;
  --text-bright:  #0d1120;
  --accent-glow:  rgba(91,138,255,0.08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
  transition: background var(--transition), color var(--transition);
}

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: 1px solid #ffffff08;
  transition: width var(--transition);
  overflow: hidden;
  z-index: 10;
}
.sidebar.collapsed { width: 56px; }

.sidebar-header {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #ffffff08;
  min-height: 60px;
}
.sidebar-logo {
  width: 28px; height: 28px;
  background: var(--accent);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.sidebar-title {
  font-size: 13px; font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.sidebar.collapsed .sidebar-title { opacity: 0; pointer-events: none; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: 12px 8px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-section { margin-bottom: 20px; }

.nav-section-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 8px 6px;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.sidebar.collapsed .nav-section-label { opacity: 0; }

.nav-link {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 2px;
  font-size: 13px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
  position: relative;
}
.nav-link:hover { background: #ffffff0a; color: var(--text-bright); }
.nav-link.active { background: var(--accent-glow); color: var(--accent); }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px; background: var(--accent); border-radius: 2px;
}

.nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; opacity: 0.7;
}
.nav-link:hover .nav-icon,
.nav-link.active .nav-icon { opacity: 1; }

.nav-label { transition: opacity var(--transition); }
.sidebar.collapsed .nav-label { opacity: 0; }

.nav-badge {
  margin-left: auto;
  font-size: 9px; font-family: var(--font-mono);
  padding: 1px 5px; border-radius: 10px;
  transition: opacity var(--transition);
}
.sidebar.collapsed .nav-badge { opacity: 0; }
.nav-badge.warn { background: rgba(245,166,35,0.15); color: var(--warn); }

.sidebar-footer {
  padding: 12px 8px;
  border-top: 1px solid #ffffff08;
}
.sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition);
}
.sidebar-user:hover { background: #ffffff0a; }
.user-avatar {
  width: 28px; height: 28px;
  background: var(--accent-dim); border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--accent); font-weight: 600;
}
.user-info { overflow: hidden; transition: opacity var(--transition); }
.sidebar.collapsed .user-info { opacity: 0; }
.user-name { font-size: 12px; color: var(--text-bright); font-weight: 600; white-space: nowrap; }
.user-role { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }

/* ── Layout principal ── */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 60px;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0; gap: 12px;
}
.topbar-left  { display: flex; align-items: center; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.topbar-breadcrumb {
  font-size: 12px; color: var(--text-muted);
  font-family: var(--font-mono);
}
.topbar-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.topbar-breadcrumb a:hover { color: var(--text-bright); }

.content-area {
  flex: 1; overflow-y: auto; padding: 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border) transparent;
}

/* ── Boutons ── */
.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--panel-border);
  background: transparent; color: var(--text-muted);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration:none;
}

.icon-btn:hover {
  background: var(--accent-glow); color: var(--accent);
  border-color: var(--accent-dim);
}

.icon-btn-group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 8px; height: 32px;
  border: 1px solid var(--panel-border);
  background: transparent; color: var(--text-muted);
  border-radius: 6px; cursor: pointer;
  font-size: 14px; text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none
}
.icon-btn-group:hover {
  background: var(--accent-glow); color: var(--accent);
  border-color: var(--accent-dim);
}

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 6px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  cursor: pointer; letter-spacing: 0.03em;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition);
}

.btn:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-ghost {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--panel-border);
}
.btn-ghost:hover { color: var(--text-bright); border-color: var(--text-muted); opacity: 1; transform: none; }

.btn-danger {
  background: rgba(255,107,107,0.1); color: #ff6b6b;
  border: 1px solid rgba(255,107,107,0.3);
}
.btn-danger:hover { background: rgba(255,107,107,0.2); border-color: rgba(255,107,107,0.6); opacity: 1; transform: none; }

.btn-danger-icon { color: #ff6b6b; border-color: rgba(255,107,107,0.2); }
.btn-danger-icon:hover {
  background: rgba(255,107,107,0.08);
  border-color: rgba(255,107,107,0.5); color: #ff6b6b;
}

/* ── Page header ── */
.page-header { margin-bottom: 24px; }
.page-title  { font-size: 20px; font-weight: 700; color: var(--text-bright); margin-bottom: 4px; }
.page-subtitle,
.page-count  { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }


/* ── User menu dropdown ── */
.sidebar-footer { position: relative; }

.user-menu {
  position: absolute;
  bottom: calc(100% + 6px); left: 8px; right: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px; padding: 4px;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 50;
}
.user-menu.open { display: block; }

.user-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px; color: var(--text-muted);
  text-decoration: none; background: none; border: none;
  cursor: pointer; font-family: var(--font-ui);
  transition: background var(--transition), color var(--transition);
  text-align: left;
}
.user-menu-item:hover { background: #ffffff08; color: var(--text-bright); }
.user-menu-logout { color: #ff6b6b; }
.user-menu-logout:hover { background: rgba(255,107,107,0.08); color: #ff6b6b; }