/*
 * houyoux.css — Design System commun Houyoux Constructions
 * Version : 1.0.0
 * Usage   : <link rel="stylesheet" href="https://it.houyoux.eu/public/houyoux.css">
 * Dépend  : Tabler Icons, DM Sans, DM Mono (voir imports ci-dessous)
 *
 * Apps utilisant ce fichier :
 *   - it.houyoux.eu        (App IT)
 *   - signature.houyoux.eu (App Signature)
 *   - sst.houyoux.eu       (App Sous-traitants)
 *   - transfer.houyoux.eu  (App Transfer)
 *   - pointage.houyoux.eu  (App Pointage)
 */

/* ================================================================
   IMPORTS EXTERNES
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css');

/* ================================================================
   TOKENS — VARIABLES CSS
   ================================================================ */
:root {
  /* Couleurs principales */
  --primary:       #1B4F8A;
  --primary-dark:  #0F2F52;
  --primary-light: #EBF2FA;
  --primary-mid:   #2E75B6;

  /* Accent */
  --accent:        #E8A838;
  --accent-light:  #FFF3D6;

  /* Sémantique */
  --success:       #1E6B3A;
  --success-light: #D5F0E0;
  --danger:        #C00000;
  --danger-light:  #FFE0E0;
  --warning:       #B45309;
  --warning-light: #FEF3C7;
  --info:          #1565C0;
  --info-light:    #E3F2FD;

  /* Gris */
  --gray-900: #1A1A2E;
  --gray-700: #404040;
  --gray-500: #666;
  --gray-400: #999;
  --gray-300: #CCC;
  --gray-100: #F4F6F9;
  --gray-50:  #FAFBFC;
  --white:    #FFF;

  /* Layout */
  --sidebar-w: 260px;
  --topbar-h:  60px;

  /* Rayon */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  /* Ombres */
  --shadow:    0 2px 12px rgba(27,79,138,.10);
  --shadow-lg: 0 8px 32px rgba(27,79,138,.15);

  /* Typographie */
  --font:      "DM Sans", sans-serif;
  --font-mono: "DM Mono", monospace;

  /* Transition */
  --t: all .18s ease;
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; font-family: var(--font); background: var(--gray-100); color: var(--gray-900); font-size: 14px; }
button { font-family: var(--font); cursor: pointer; border: none; }
input, select, textarea { font-family: var(--font); }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ================================================================
   AUTH SCREEN
   ================================================================ */
#auth-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-mid) 100%);
  z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
}
.auth-card {
  background: var(--white); border-radius: 20px; padding: 48px 40px;
  width: 420px; max-width: 95vw;
  box-shadow: 0 24px 60px rgba(0,0,0,.25); text-align: center;
}
.auth-logo {
  width: 72px; height: 72px; background: var(--primary);
  border-radius: 18px; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 24px; overflow: hidden;
}
.auth-logo img { width: 48px; height: 48px; object-fit: contain; filter: brightness(0) invert(1); }
.auth-title   { font-size: 24px; font-weight: 700; color: var(--primary-dark); margin-bottom: 6px; }
.auth-sub     { font-size: 14px; color: var(--gray-500); margin-bottom: 32px; }
.auth-company { font-size: 11px; color: var(--gray-300); margin-bottom: 20px; letter-spacing: .06em; text-transform: uppercase; }
.auth-footer  { margin-top: 24px; font-size: 11px; color: var(--gray-300); }
#auth-error   { background: var(--danger-light); color: var(--danger); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-top: 16px; display: none; text-align: left; }
#auth-status  { font-size: 12px; color: var(--gray-500); margin-top: 12px; min-height: 18px; }

.btn-ms {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--primary); color: var(--white); border-radius: var(--radius);
  padding: 14px 24px; font-size: 15px; font-weight: 600;
  width: 100%; transition: var(--t); box-shadow: 0 4px 16px rgba(27,79,138,.3);
}
.btn-ms:hover { background: var(--primary-dark); transform: translateY(-1px); }

/* ================================================================
   LOADING SCREEN
   ================================================================ */
#loading-screen {
  display: none; position: fixed; inset: 0; z-index: 9998;
  background: var(--gray-100); flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
}
.spinner {
  width: 40px; height: 40px; border: 3px solid var(--gray-300);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 14px; color: var(--gray-500); }

/* ================================================================
   TOPBAR
   ================================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h); background: var(--primary-dark);
  display: flex; align-items: center; padding: 0 20px 0 0;
  z-index: 100; box-shadow: var(--shadow);
}
.topbar-brand {
  width: var(--sidebar-w); display: flex; align-items: center;
  gap: 12px; padding: 0 20px; flex-shrink: 0;
}
.brand-icon {
  width: 36px; height: 36px; background: var(--accent);
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; color: var(--white);
  flex-shrink: 0; overflow: hidden;
}
.brand-icon img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); }
.brand-name { font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.2; }
.brand-sub  { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em; }

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border-radius: var(--radius);
  padding: 8px 14px; flex: 1; max-width: 420px; margin: 0 20px;
}
.topbar-search i                  { color: rgba(255,255,255,.5); font-size: 16px; }
.topbar-search input              { background: none; border: none; outline: none; color: var(--white); font-size: 14px; width: 100%; }
.topbar-search input::placeholder { color: rgba(255,255,255,.4); }

.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topbar-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7); background: none; font-size: 18px;
  transition: var(--t); position: relative;
}
.topbar-btn:hover { background: rgba(255,255,255,.15); color: var(--white); }

.badge-notif {
  position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; border: 2px solid var(--primary-dark);
}
.badge-notif.red { background: var(--danger); }

.topbar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: var(--radius);
  cursor: pointer; transition: var(--t); margin-left: 8px;
}
.topbar-user:hover { background: rgba(255,255,255,.1); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--white); flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; color: var(--white); }
.user-role { font-size: 10px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .04em; }

/* ================================================================
   USER DROPDOWN
   ================================================================ */
.udrop {
  position: absolute; top: calc(var(--topbar-h) + 4px); right: 12px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); width: 220px; z-index: 200;
  border: 1px solid var(--gray-100); display: none;
}
.udrop.open { display: block; }
.udrop-head         { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); }
.udrop-name         { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.udrop-email        { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.udrop-role         { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; background: var(--primary-light); color: var(--primary); border-radius: 20px; padding: 2px 8px; font-size: 10px; font-weight: 600; }
.udrop-item         { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--gray-700); cursor: pointer; transition: var(--t); }
.udrop-item:hover   { background: var(--gray-50); color: var(--primary); }
.udrop-item.danger  { color: var(--danger); }
.udrop-item.danger:hover { background: var(--danger-light); }
.udrop-divider      { height: 1px; background: var(--gray-100); }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  position: fixed; left: 0; top: var(--topbar-h); bottom: 0;
  width: var(--sidebar-w); background: var(--white);
  border-right: 1px solid rgba(27,79,138,.1); overflow-y: auto;
  z-index: 50; padding: 16px 12px 24px;
  scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent;
}
.sidebar-label {
  font-size: 10px; font-weight: 600; color: var(--gray-300);
  text-transform: uppercase; letter-spacing: .08em; padding: 8px 8px 4px; margin-top: 8px;
}
.sidebar-label.collapsible         { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
.sidebar-label.collapsible:hover   { color: var(--gray-500); }
.sidebar-label.collapsible .chev  { transition: transform .15s; font-size: 14px; }
.sidebar-group.collapsed .chev    { transform: rotate(-90deg); }
.sidebar-group.collapsed .nav-item { display: none; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--t);
  color: var(--gray-700); font-size: 13px; font-weight: 500; position: relative;
}
.nav-item:hover         { background: var(--primary-light); color: var(--primary); }
.nav-item.active        { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%;
  transform: translateY(-50%); width: 3px; height: 20px;
  background: var(--primary); border-radius: 0 3px 3px 0;
}
.nav-item i  { font-size: 17px; flex-shrink: 0; }
.nav-badge   { margin-left: auto; background: var(--accent); color: var(--white); font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center; }
.nav-badge.red   { background: var(--danger); }
.nav-badge.green { background: var(--success); }
.sidebar-divider { height: 1px; background: var(--gray-100); margin: 8px 0; }

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main {
  margin-left: var(--sidebar-w); margin-top: var(--topbar-h);
  min-height: calc(100vh - var(--topbar-h));
  padding: 24px; background: var(--gray-100);
}

/* ================================================================
   PAGE HEADER
   ================================================================ */
.page-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-title   { font-size: 20px; font-weight: 700; color: var(--gray-900); }
.page-sub     { font-size: 13px; color: var(--gray-500); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn           { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; transition: var(--t); cursor: pointer; border: none; }
.btn-primary   { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost     { background: var(--white); color: var(--gray-700); border: 1.5px solid var(--gray-300); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger    { background: var(--danger); color: var(--white); }
.btn-danger:hover { background: #a00000; }
.btn-success   { background: var(--success); color: var(--white); }
.btn-success:hover { background: #155229; }
.btn-warning   { background: var(--accent); color: var(--white); }
.btn-warning:hover { background: #c98920; }
.btn-sm        { padding: 5px 10px; font-size: 12px; }
.btn-lg        { padding: 12px 24px; font-size: 15px; }
.btn-icon      { width: 32px; height: 32px; padding: 0; justify-content: center; flex-shrink: 0; }
.btn:disabled  { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ================================================================
   CARDS
   ================================================================ */
.card         { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-100); }
.card-title   { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.card-sub     { font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* ================================================================
   STAT CARDS
   ================================================================ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card  { background: var(--white); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; transition: var(--t); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-icon  { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.stat-icon.blue   { background: var(--primary-light); color: var(--primary); }
.stat-icon.green  { background: var(--success-light); color: var(--success); }
.stat-icon.orange { background: var(--accent-light);  color: var(--accent);  }
.stat-icon.red    { background: var(--danger-light);  color: var(--danger);  }
.stat-icon.gray   { background: var(--gray-100);      color: var(--gray-500);}
.stat-icon.info   { background: var(--info-light);    color: var(--info);    }
.stat-val   { font-size: 28px; font-weight: 800; color: var(--gray-900); line-height: 1; }
.stat-lbl   { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.stat-trend { font-size: 11px; font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 3px; }
.stat-trend.up   { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* ================================================================
   BADGES
   ================================================================ */
.badge        { display: inline-flex; align-items: center; gap: 4px; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.badge-blue   { background: var(--primary-light); color: var(--primary); }
.badge-green  { background: var(--success-light); color: var(--success); }
.badge-orange { background: var(--accent-light);  color: var(--warning); }
.badge-red    { background: var(--danger-light);  color: var(--danger);  }
.badge-gray   { background: var(--gray-100);      color: var(--gray-500);}
.badge-info   { background: var(--info-light);    color: var(--info);    }

/* ================================================================
   STATUS PILLS
   ================================================================ */
.status            { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status::before    { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.s-nouveau         { background: #EBF2FA; color: #1B4F8A; }
.s-en-cours        { background: var(--accent-light);   color: var(--warning); }
.s-en-attente      { background: var(--gray-100);       color: var(--gray-500); }
.s-resolu          { background: var(--success-light);  color: var(--success); }
.s-ferme           { background: var(--gray-100);       color: var(--gray-300); }
.s-signe           { background: var(--success-light);  color: var(--success); }
.s-expire          { background: var(--danger-light);   color: var(--danger); }
.s-refuse          { background: var(--danger-light);   color: var(--danger); }
.s-brouillon       { background: var(--gray-100);       color: var(--gray-500); }
.s-validation      { background: var(--info-light);     color: var(--info); }

/* ================================================================
   TABLES
   ================================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
table       { width: 100%; border-collapse: collapse; background: var(--white); }
thead tr    { background: var(--primary-dark); }
thead th    { padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
tbody tr    { border-bottom: 1px solid var(--gray-100); transition: var(--t); cursor: pointer; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--primary-light); }
tbody td    { padding: 12px 16px; font-size: 13px; color: var(--gray-700); vertical-align: middle; }
.td-title   { font-weight: 600; color: var(--gray-900); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-id      { font-family: var(--font-mono); font-size: 11px; color: var(--primary); font-weight: 600; background: var(--primary-light); padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.td-mono    { font-family: var(--font-mono); font-size: 12px; }

/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-full   { grid-column: 1/-1; }
.form-group  { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 11px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--gray-300); border-radius: var(--radius);
  padding: 10px 13px; font-size: 13px; color: var(--gray-900);
  background: var(--gray-50); transition: var(--t);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--primary);
  background: var(--white); box-shadow: 0 0 0 3px rgba(27,79,138,.08);
}
.form-group textarea          { resize: vertical; min-height: 80px; }
.form-group.required label::after { content: " *"; color: var(--danger); }
.field-hint { font-size: 11px; color: var(--gray-500); margin-top: 3px; }

/* Toggle switch */
.toggle-wrap  { display: flex; align-items: center; gap: 10px; }
.toggle       { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--gray-300);
  border-radius: 22px; cursor: pointer; transition: var(--t);
}
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: var(--t);
}
.toggle input:checked + .toggle-slider              { background: var(--primary); }
.toggle input:checked + .toggle-slider::before      { transform: translateX(18px); }
.toggle-label { font-size: 13px; color: var(--gray-700); }

/* Checkbox & radio custom */
.check-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 6px 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--t);
}
.check-item:hover  { background: var(--gray-50); }
.check-item input  { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: var(--primary); }
.check-item.checked { background: var(--primary-light); }
.check-item.checked .check-label { color: var(--primary); }
.check-label { color: var(--gray-700); }

/* ================================================================
   MODAL
   ================================================================ */
.modal-bg {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 500;
  align-items: flex-start; justify-content: center;
  padding: 60px 16px 16px; overflow-y: auto;
}
.modal-bg.open      { display: flex; }
.modal              { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: modalIn .2s ease; }
.modal-xl           { max-width: 820px; }
.modal-sm           { max-width: 440px; }
@keyframes modalIn  { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.modal-header       { padding: 20px 24px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: space-between; }
.modal-title        { font-size: 16px; font-weight: 700; color: var(--gray-900); }
.modal-close        { width: 32px; height: 32px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--gray-500); background: none; font-size: 18px; transition: var(--t); }
.modal-close:hover  { background: var(--gray-100); color: var(--gray-900); }
.modal-body         { padding: 24px; }
.modal-footer       { padding: 16px 24px; border-top: 1px solid var(--gray-100); display: flex; justify-content: flex-end; gap: 10px; }
.modal-form-grid    { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-form-section { background: var(--gray-50); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.modal-form-section-title { font-size: 10px; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

/* ================================================================
   ALERTS
   ================================================================ */
.alert         { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px; font-size: 13px; }
.alert-info    { background: var(--info-light);    color: var(--info);    border-left: 3px solid var(--info); }
.alert-success { background: var(--success-light); color: var(--success); border-left: 3px solid var(--success); }
.alert-warning { background: var(--warning-light); color: var(--warning); border-left: 3px solid var(--warning); }
.alert-danger  { background: var(--danger-light);  color: var(--danger);  border-left: 3px solid var(--danger); }
.alert i       { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */
#toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--white); border-radius: var(--radius); padding: 12px 16px;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px;
  font-size: 13px; min-width: 280px; max-width: 360px;
  animation: toastIn .25s ease; border-left: 4px solid var(--primary);
}
.toast.success { border-color: var(--success); }
.toast.danger  { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
.toast.info    { border-color: var(--info); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ================================================================
   SEARCH BAR
   ================================================================ */
.search-bar { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid var(--gray-300); border-radius: var(--radius); padding: 8px 13px; transition: var(--t); }
.search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(27,79,138,.08); }
.search-bar i                   { color: var(--gray-300); font-size: 16px; }
.search-bar input               { border: none; background: none; outline: none; font-size: 13px; color: var(--gray-900); flex: 1; }
.search-bar input::placeholder  { color: var(--gray-300); }

/* ================================================================
   FILTER BUTTONS
   ================================================================ */
.filters    { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.filter-btn { padding: 6px 13px; border-radius: 20px; border: 1.5px solid var(--gray-300); background: var(--white); font-size: 12px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: var(--t); }
.filter-btn:hover  { border-color: var(--primary); color: var(--primary); }
.filter-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* ================================================================
   AVATAR
   ================================================================ */
.avatar       { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--white); flex-shrink: 0; }
.avatar-sm    { width: 26px; height: 26px; font-size: 9px; }
.avatar-lg    { width: 44px; height: 44px; font-size: 15px; }
.avatar-stack { display: flex; }
.avatar-stack .avatar             { border: 2px solid var(--white); margin-left: -8px; }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* ================================================================
   TABS
   ================================================================ */
.tabs       { display: flex; gap: 2px; border-bottom: 2px solid var(--gray-100); margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn    { padding: 8px 14px; border: none; background: none; font-size: 13px; font-weight: 600; color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--t); }
.tab-btn:hover  { color: var(--primary); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel      { display: none; }
.tab-panel.active { display: block; }

/* ================================================================
   PROGRESS BAR
   ================================================================ */
.progress        { height: 6px; background: var(--gray-100); border-radius: 3px; overflow: hidden; }
.progress-bar    { height: 100%; background: var(--primary); border-radius: 3px; transition: width .4s ease; }
.progress-bar.green  { background: var(--success); }
.progress-bar.orange { background: var(--accent); }
.progress-bar.red    { background: var(--danger); }

/* ================================================================
   TIMELINE
   ================================================================ */
.timeline       { padding: 0 0 0 8px; }
.timeline-item  { display: flex; gap: 12px; padding: 8px 0 8px 16px; border-left: 2px solid var(--gray-100); position: relative; }
.timeline-item::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); position: absolute; left: -5px; top: 14px; border: 2px solid var(--white); }
.timeline-date  { font-size: 10px; color: var(--gray-300); white-space: nowrap; min-width: 80px; padding-top: 2px; }
.timeline-text  { font-size: 12px; color: var(--gray-700); flex: 1; }
.timeline-item.success::before { background: var(--success); }
.timeline-item.danger::before  { background: var(--danger); }
.timeline-item.warning::before { background: var(--accent); }
.timeline-item.muted::before   { background: var(--gray-300); }

/* ================================================================
   UPLOAD AREA
   ================================================================ */
.upload-area        { border: 2px dashed var(--gray-300); border-radius: var(--radius); padding: 24px; text-align: center; transition: var(--t); cursor: pointer; background: var(--gray-50); }
.upload-area:hover,
.upload-area.drag   { border-color: var(--primary); background: var(--primary-light); }
.upload-area i      { font-size: 32px; color: var(--gray-300); margin-bottom: 8px; display: block; }
.upload-area p      { font-size: 13px; color: var(--gray-500); }
.upload-area strong { color: var(--primary); }
.upload-preview     { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.empty     { text-align: center; padding: 48px 24px; color: var(--gray-500); }
.empty i   { font-size: 48px; margin-bottom: 12px; opacity: .3; display: block; }
.empty h3  { font-size: 16px; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.empty p   { font-size: 13px; }

/* ================================================================
   QUICK ACTIONS GRID
   ================================================================ */
.quick-actions  { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
.quick-action   { background: var(--white); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow); cursor: pointer; transition: var(--t); text-align: center; border: 2px solid transparent; }
.quick-action:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.quick-action i    { font-size: 28px; color: var(--primary); margin-bottom: 8px; display: block; }
.quick-action span { font-size: 12px; font-weight: 600; color: var(--gray-700); }

/* ================================================================
   ROLE BANNER
   ================================================================ */
.role-banner    { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); color: var(--white); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 24px; }
.role-banner i  { font-size: 24px; opacity: .8; }
.role-banner h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.role-banner p  { font-size: 12px; opacity: .7; }

/* ================================================================
   AUTOCOMPLETE
   ================================================================ */
.ac-list    { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; background: var(--white); border: 1.5px solid var(--gray-300); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; margin-top: 2px; }
.ac-item    { padding: 8px 12px; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.ac-item:hover, .ac-item.ac-active { background: var(--gray-100); }
.ac-item .ac-sub { font-size: 11px; color: var(--gray-500); }
.ac-empty   { padding: 10px 12px; font-size: 12px; color: var(--gray-400); }

/* ================================================================
   STEPPER (workflow multi-étapes)
   ================================================================ */
.stepper        { display: flex; align-items: center; margin-bottom: 2rem; }
.step-item      { display: flex; align-items: center; gap: 8px; flex: 1; }
.step-num       { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gray-300); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--gray-500); background: var(--white); flex-shrink: 0; transition: var(--t); }
.step-num.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.step-num.done   { background: var(--success); color: var(--white); border-color: var(--success); }
.step-label      { font-size: 12px; color: var(--gray-500); white-space: nowrap; }
.step-label.active { color: var(--gray-900); font-weight: 600; }
.step-connector  { flex: 1; height: 1px; background: var(--gray-300); margin: 0 6px; }
.step-connector.done { background: var(--success); }

/* ================================================================
   GLOBAL SEARCH RESULTS
   ================================================================ */
.gs-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-100); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); max-height: 60vh; overflow-y: auto; z-index: 2000; padding: 6px; }
.gs-cat     { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--gray-500); padding: 8px 10px 4px; letter-spacing: .04em; }
.gs-item    { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--gray-700); font-size: 13px; }
.gs-item:hover { background: var(--gray-100); }
.gs-item i  { color: var(--primary); font-size: 16px; flex-shrink: 0; }
.gs-item .gs-sub { color: var(--gray-500); font-size: 11px; }
.gs-empty   { padding: 14px; text-align: center; color: var(--gray-500); font-size: 13px; }

/* ================================================================
   ANNOUNCE BANNER
   ================================================================ */
.announce-bar       { background: linear-gradient(135deg, var(--primary), var(--primary-mid)); color: var(--white); border-radius: var(--radius-lg); padding: 14px 20px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.announce-bar i     { font-size: 20px; opacity: .8; flex-shrink: 0; }
.announce-text      { font-size: 13px; flex: 1; }
.announce-text strong { display: block; font-size: 14px; margin-bottom: 2px; }
.announce-close     { background: none; color: rgba(255,255,255,.7); font-size: 18px; transition: var(--t); }
.announce-close:hover { color: var(--white); }

/* ================================================================
   PAGES
   ================================================================ */
.page        { display: none; }
.page.active { display: block; }

/* ================================================================
   UTILITIES
   ================================================================ */
.text-primary   { color: var(--primary); }
.text-success   { color: var(--success); }
.text-danger    { color: var(--danger); }
.text-warning   { color: var(--warning); }
.text-muted     { color: var(--gray-500); }
.text-mono      { font-family: var(--font-mono); }
.text-sm        { font-size: 12px; }
.text-xs        { font-size: 11px; }
.fw-600         { font-weight: 600; }
.fw-700         { font-weight: 700; }
.mb-0           { margin-bottom: 0; }
.mb-8           { margin-bottom: 8px; }
.mb-16          { margin-bottom: 16px; }
.mb-24          { margin-bottom: 24px; }
.mt-8           { margin-top: 8px; }
.mt-16          { margin-top: 16px; }
.gap-8          { gap: 8px; }
.flex           { display: flex; }
.flex-center    { display: flex; align-items: center; }
.flex-between   { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap      { flex-wrap: wrap; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .sidebar              { transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.open         { transform: none; }
  .main                 { margin-left: 0; }
  .topbar-brand         { width: auto; }
  .topbar-search        { display: none; }
  .form-grid,
  .form-grid-3          { grid-template-columns: 1fr; }
  .stats-grid           { grid-template-columns: 1fr 1fr; }
  .modal-form-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats-grid   { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .stepper .step-label { display: none; }
}