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

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --md-green:        #4CAF50;
  --md-green-dark:   #388E3C;
  --md-green-light:  #C8E6C9;
  --md-orange:       #FF9800;
  --md-orange-dark:  #F57C00;
  --md-orange-light: #FFE0B2;
  --md-blue:         #2196F3;
  --md-purple:       #9C27B0;
  --md-red:          #F44336;
  --md-bg:           #F5F5F5;
  --md-card:         #FFFFFF;
  --md-text:         #212121;
  --md-text-secondary:#757575;
  --md-border:       #E0E0E0;
  --md-divider:      #EEEEEE;
  --md-shadow:       0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --md-shadow-lg:    0 4px 16px rgba(0,0,0,0.10);
  --md-radius:       12px;
  --topbar-height:   64px;
  --bottomnav-height:64px;
}

body { font-family:'Roboto',sans-serif; background:var(--md-bg); overflow-x:hidden; color:var(--md-text); -webkit-tap-highlight-color:transparent; }

/* ═══════════════════════════════════════════════════════════
   TOPBAR — Material 3 TopAppBar (Android)
   ═══════════════════════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--topbar-height);
  background:linear-gradient(90deg,#1a3a5c 0%,#2d6a4f 60%,#3a7d44 100%);
  display:flex; align-items:center; padding:0 16px; gap:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.topbar-brand {
  display:flex; align-items:center; gap:8px; text-decoration:none;
}
.topbar-brand .brand-icon { width:36px; height:36px; background:rgba(255,255,255,0.15); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.topbar-brand .brand-icon img { width:26px; height:26px; object-fit:contain; }
.topbar-brand span { font-size:22px; font-weight:700; color:#fff; letter-spacing:0; }
.topbar-search { flex:1; max-width:360px; position:relative; display:none; }
.topbar-search.visible { display:block; }
.topbar-search input { width:100%; padding:8px 14px 8px 38px; border:none; border-radius:24px; background:rgba(255,255,255,0.92); font-size:14px; color:#333; outline:none; font-family:'Roboto',sans-serif; }
.topbar-search > i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#888; font-size:14px; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:4px; }
.topbar-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85); text-decoration:none; border-radius:50%; transition:background 0.15s; font-size:20px; position:relative; cursor:pointer; }
.topbar-icon:active { background:rgba(255,255,255,0.2); }
.topbar-user { display:flex; align-items:center; gap:8px; cursor:pointer; padding:2px 8px 2px 2px; border-radius:24px; transition:background 0.15s; }
.topbar-user:active { background:rgba(255,255,255,0.15); }
.topbar-user img { width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); }
.topbar-user-info { display:none; }

/* ═══════════════════════════════════════════════════════════
   TILE GRID DRAWER (navigation en grille damier)
   ═══════════════════════════════════════════════════════════ */
.tile-drawer {
  position:fixed; left:0; top:var(--topbar-height); width:320px; height:calc(100vh - var(--topbar-height) - var(--bottomnav-height));
  background:#fff; z-index:999; overflow-y:auto;
  transform:translateX(-100%); transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow:none;
}
.tile-drawer.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.25); }
.tile-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; }
.tile-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:16px 8px; border-radius:14px; background:#F5F5F5; text-decoration:none;
  color:var(--md-text); font-size:11px; font-weight:500; text-align:center;
  transition:background 0.15s, transform 0.1s;
  min-height:80px;
}
.tile-item i { font-size:24px; color:var(--t-clr,#757575); }
.tile-item:active { transform:scale(0.95); background:#E0E0E0; }
.tile-item.active { background:color-mix(in srgb, var(--t-clr,#757575) 12%, #fff); border:1px solid color-mix(in srgb, var(--t-clr,#757575) 30%, transparent); }
.tile-overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,0.40); z-index:998; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.tile-overlay.open { opacity:1; pointer-events:all; }

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT (full width, no sidebar offset)
   ═══════════════════════════════════════════════════════════ */
.main { margin-top:var(--topbar-height); padding:20px 16px; min-height:calc(100vh - var(--topbar-height) - var(--bottomnav-height)); padding-bottom:calc(var(--bottomnav-height) + 20px); }
.page-title { font-size:22px; font-weight:600; color:var(--md-text); display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.page-subtitle { font-size:13px; color:var(--md-text-secondary); margin-top:-16px; margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAVIGATION (always visible, Material 3)
   ═══════════════════════════════════════════════════════════ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; height:var(--bottomnav-height);
  background:#fff; display:flex; justify-content:space-around; align-items:center;
  z-index:1000; box-shadow:0 -2px 8px rgba(0,0,0,0.12);
  padding:0 4px;
}
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--md-text-secondary); text-decoration:none; font-size:11px; font-weight:500;
  transition:color 0.15s; padding:6px 10px; border-radius:8px; min-width:56px;
  position:relative;
}
.bottom-nav-item i { font-size:24px; transition:color 0.15s; }
.bottom-nav-item.active { color:var(--md-green); }
.bottom-nav-item.active i { color:var(--md-green); }
.bottom-nav-item:active { background:var(--md-green-light); }
.bottom-nav-home {
  background:var(--md-green); width:48px; height:36px; border-radius:30px;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px;
  transform:translateY(-4px); box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════════════════════════
   CARDS (Android-style, no hover effects)
   ═══════════════════════════════════════════════════════════ */
.card { background:var(--md-card); border-radius:var(--md-radius); box-shadow:var(--md-shadow); padding:20px; }
.card-title { font-size:16px; font-weight:600; color:var(--md-text); display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--md-divider); }

.md-card { background:var(--md-card); border-radius:var(--md-radius); box-shadow:var(--md-shadow); padding:16px; margin-bottom:12px; }
.md-card-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.md-card-header-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.md-card-title { font-size:16px; font-weight:600; color:var(--md-text); }
.md-card-subtitle { font-size:13px; color:var(--md-text-secondary); }
.md-card-body { font-size:14px; color:var(--md-text); line-height:1.5; }
.md-card-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════
   STATS GRID (Android)
   ═══════════════════════════════════════════════════════════ */
.stats-grid { display:grid; gap:12px; margin-bottom:20px; }
.stat-card { background:var(--md-card); border-radius:var(--md-radius); box-shadow:var(--md-shadow); padding:16px 18px; }
.stat-card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.stat-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.stat-card-label { font-size:13px; color:var(--md-text-secondary); font-weight:400; }
.stat-card-value { font-size:28px; font-weight:700; line-height:1; margin-bottom:4px; color:var(--md-text); }
.stat-card-footer { font-size:12px; color:var(--md-text-secondary); display:flex; align-items:center; gap:6px; }

/* ═══════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON (exact Android)
   ═══════════════════════════════════════════════════════════ */
.fab {
  position:fixed; bottom:calc(var(--bottomnav-height) + 16px); right:16px;
  width:56px; height:56px; border-radius:16px;
  background:var(--md-green); color:#fff; border:none; font-size:24px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(76,175,80,0.4); cursor:pointer;
  transition:box-shadow 0.2s; z-index:900; text-decoration:none;
}
.fab:active { box-shadow:0 2px 8px rgba(76,175,80,0.3); }

/* ═══════════════════════════════════════════════════════════
   FILTER CHIPS (Android)
   ═══════════════════════════════════════════════════════════ */
.chip-group { display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; margin-bottom:16px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.chip-group::-webkit-scrollbar { height:3px; }
.chip-group::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
.chip {
  padding:6px 14px; border-radius:20px; font-size:13px; font-weight:500; white-space:nowrap;
  border:1px solid var(--md-border); background:var(--md-card); color:var(--md-text-secondary);
  cursor:pointer; transition:background 0.15s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; user-select:none;
}
.chip:active { background:#E0E0E0; }
.chip.active { background:var(--md-green-light); border-color:var(--md-green); color:var(--md-green-dark); font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS (Material 3)
   ═══════════════════════════════════════════════════════════ */
.btn { padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; transition:box-shadow 0.15s; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-family:'Roboto',sans-serif; }
.btn:active { box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.btn-primary { background:var(--md-green); color:#fff; }
.btn-outline  { background:#fff; border:2px solid var(--md-border); color:var(--md-text-secondary); }
.btn-outline:active { border-color:var(--md-green); color:var(--md-green); }
.btn-danger  { background:var(--md-red); color:#fff; }
.btn-sm { padding:6px 12px; font-size:12px; }

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:500; }
.badge-green  { background:#E8F5E9; color:#2E7D32; }
.badge-orange { background:#FFF3E0; color:#E65100; }
.badge-blue   { background:#E3F2FD; color:#1565C0; }
.badge-red    { background:#FFEBEE; color:#C62828; }
.badge-purple { background:#F3E5F5; color:#6A1B9A; }

/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR (Android)
   ═══════════════════════════════════════════════════════════ */
.progress-bar { width:100%; height:6px; background:var(--md-border); border-radius:3px; overflow:hidden; margin:8px 0; }
.progress-fill { height:100%; border-radius:3px; transition:width 0.3s; }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--md-text-secondary); }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:12px 14px; border:2px solid var(--md-border); border-radius:10px; font-size:16px; color:var(--md-text); outline:none; transition:border-color 0.15s; font-family:'Roboto',sans-serif; background:#fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--md-green); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-inline { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.empty { text-align:center; padding:48px 20px; color:var(--md-text-secondary); }
.empty i { font-size:56px; margin-bottom:16px; display:block; color:var(--md-border); }
.empty h3 { font-size:16px; font-weight:500; color:var(--md-text-secondary); margin-bottom:4px; }
.empty p { font-size:14px; }

/* ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */
.alert { padding:14px 18px; border-radius:10px; font-size:14px; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.alert-success { background:#E8F5E9; color:#2E7D32; border:1px solid #C8E6C9; }
.alert-error   { background:#FFEBEE; color:#C62828; border:1px solid #FFCDD2; }
.alert-info    { background:#E3F2FD; color:#1565C0; border:1px solid #BBDEFB; }

/* ═══════════════════════════════════════════════════════════
   DOT PULSE
   ═══════════════════════════════════════════════════════════ */
.dot-pulse { display:inline-block; width:8px; height:8px; border-radius:50%; background:#4CAF50; animation:pulse 1.8s ease-in-out infinite; margin-right:4px; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* ═══════════════════════════════════════════════════════════
   SEARCH DROPDOWN
   ═══════════════════════════════════════════════════════════ */
.search-dropdown { position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.18); z-index:2000; display:none; max-height:360px; overflow-y:auto; }
.search-dropdown.show { display:block; }
.search-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; border-bottom:1px solid var(--md-divider); transition:background 0.15s; }
.search-item:last-child { border-bottom:none; }
.search-item:active { background:#F5F5F5; }
.search-item-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.search-item-title { font-size:14px; font-weight:500; color:var(--md-text); }
.search-item-sub { font-size:12px; color:var(--md-text-secondary); }
.search-empty { padding:20px; text-align:center; color:var(--md-text-secondary); font-size:13px; }

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination { display:flex; gap:6px; justify-content:center; margin-top:24px; flex-wrap:wrap; }
.pagination a, .pagination span { padding:8px 14px; border-radius:8px; font-size:13px; font-weight:500; text-decoration:none; border:2px solid var(--md-border); color:var(--md-text-secondary); background:#fff; transition:all 0.15s; }
.pagination a:active { border-color:var(--md-green); color:var(--md-green); }
.pagination .current { background:var(--md-green); color:#fff; border-color:var(--md-green); }

/* ═══════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════ */
.tabs { display:flex; gap:8px; margin-bottom:20px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.tabs::-webkit-scrollbar { height:3px; }
.tabs::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
.tab { padding:10px 20px; border-radius:8px; text-decoration:none; font-weight:600; font-size:13px; border:2px solid var(--md-border); color:var(--md-text-secondary); transition:background 0.15s; white-space:nowrap; flex-shrink:0; }
.tab:active { background:#E0E0E0; }
.tab.active { background:var(--md-green); color:#fff; border-color:var(--md-green); }
.tab.active.purple { background:var(--md-purple); color:#fff; border-color:var(--md-purple); }

/* ═══════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════ */
.filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; align-items:flex-end; }
.fg label { display:block; font-size:11px; font-weight:600; color:var(--md-text-secondary); margin-bottom:4px; text-transform:uppercase; }
.fg input, .fg select { padding:9px 12px; border:2px solid var(--md-border); border-radius:8px; font-size:14px; font-family:inherit; outline:none; }

/* ═══════════════════════════════════════════════════════════
   GRID HELPERS
   ═══════════════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }

/* ═══════════════════════════════════════════════════════════
   STAT ROW (Android stats mini-cards)
   ═══════════════════════════════════════════════════════════ */
.stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px; }
.stat-item { background:var(--md-card); border-radius:var(--md-radius); padding:14px; text-align:center; box-shadow:var(--md-shadow); }
.stat-value { font-size:24px; font-weight:700; line-height:1.2; }
.stat-label { font-size:12px; color:var(--md-text-secondary); margin-top:4px; }

/* ═══════════════════════════════════════════════════════════
   TABLE (minimal, only when needed)
   ═══════════════════════════════════════════════════════════ */
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; min-width:500px; }
.data-table th { text-align:left; padding:10px 12px; font-size:12px; font-weight:500; color:var(--md-text-secondary); border-bottom:2px solid var(--md-divider); }
.data-table td { padding:12px; font-size:14px; color:var(--md-text); border-bottom:1px solid var(--md-divider); vertical-align:middle; }
.data-table tr:active td { background:#F5F5F5; }

/* ═══════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════ */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.page-header .page-title { margin-bottom:0; }

/* ═══════════════════════════════════════════════════════════
   HAMBURGER
   ═══════════════════════════════════════════════════════════ */
.hamburger { display:block; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; padding:4px; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.hamburger:active { background:rgba(255,255,255,0.2); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(min-width:768px) {
  .hamburger { display:flex !important; }
  .topbar-search { display:block; }
  .topbar-user-info { display:block; }
  .topbar-user { background:rgba(255,255,255,0.08); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .main { padding:24px; }
}

@media(min-width:1024px) {
  .stats-grid { grid-template-columns:repeat(4,1fr); }
  .main { padding:28px; max-width:1200px; margin-left:auto; margin-right:auto; }
}

@media(min-width:1200px) {
  .stats-grid { grid-template-columns:repeat(4,1fr); }
}

/* Mobile adjustments */
@media(max-width:767px) {
  .topbar-search { display:none; }
  .topbar-icon { width:36px; height:36px; font-size:18px; }
  .topbar-brand span { font-size:18px; }
  .topbar { padding:0 8px; gap:4px; }
  .main { padding:12px; padding-bottom:calc(var(--bottomnav-height) + 12px); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-card-value { font-size:24px; }
  .page-title { font-size:20px; }
  .form-row { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
  .fab { bottom:calc(var(--bottomnav-height) + 12px); right:12px; width:52px; height:52px; font-size:22px; border-radius:14px; }
  .card { padding:14px; }
}

@media(max-width:480px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .stat-card { padding:12px; }
  .stat-card-value { font-size:20px; }
  .stat-card-icon { width:36px; height:36px; font-size:16px; }
}

/* ═══════════════════════════════════════════════════════════
   MODAL — générique pour les pages de gestion
   ═══════════════════════════════════════════════════════════ */
.modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.5); z-index:9999;
  align-items:center; justify-content:center; padding:24px;
  animation:fadeIn 0.2s;
}
.modal.active { display:flex; }
.modal-content {
  background:#fff; border-radius:12px; width:100%; max-width:480px;
  box-shadow:0 20px 48px rgba(0,0,0,0.3);
  padding:24px; max-height:90vh; overflow-y:auto;
  animation:slideUp 0.25s ease-out;
}
.modal-header {
  display:flex; align-items:center; gap:8px; margin-bottom:20px;
}
.modal-header h2 { font-size:18px; font-weight:700; flex:1; margin:0; }
.close-modal {
  width:32px; height:32px; border-radius:50%; border:none; background:#f5f5f5;
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#999;
}
.close-modal:active { background:#e0e0e0; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }