/* ==========================================================================
   Dropline (Dronelis) — thème CSS prêt à l'emploi (sans framework)
   Variables + composants de base : boutons, champs, blocs, badges, tableaux,
   infobulles. À inclure tel quel, puis utiliser les classes .dp-*
   ========================================================================== */
:root {
  --dp-brand: #061b38;        /* bleu nuit */
  --dp-brand-light: #1a3a66;
  --dp-cyan: #00adff;         /* turquoise */
  --dp-cyan-soft: #8fdcff;
  --dp-orange: #fe1300;       /* rouge-orange Dronelis */
  --dp-orange-hover: #d61000;
  --dp-dark: #1e2022;
  --dp-text: #1e293b;
  --dp-muted: #64748b;
  --dp-faint: #94a3b8;
  --dp-border: #cbd5e1;
  --dp-border-soft: #e2e8f0;
  --dp-bg: #ffffff;
  --dp-bg-subtle: #f8fafc;
  --dp-bg-column: #f1f2f4;
  --dp-info: #e3f5ff;
  --dp-success: #16a34a;
  --dp-warning: #f59e0b;
  --dp-danger: #dc2626;
  --dp-radius: 5px;           /* contrôles */
  --dp-radius-block: 0;       /* blocs carrés */
  --dp-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
html, body { margin: 0; font-family: var(--dp-font); font-size: 14px; color: var(--dp-text); background: var(--dp-bg); }
button, input, select, textarea { font: inherit; border-radius: var(--dp-radius); }

/* Boutons */
.dp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6.6px 13.2px; font-size: 14px; font-weight: 500; border: 1px solid transparent; border-radius: var(--dp-radius); cursor: pointer; transition: background .15s; }
.dp-btn:disabled { opacity: .5; cursor: not-allowed; }
.dp-btn-primary { background: var(--dp-brand); color: #fff; }
.dp-btn-primary:hover { background: var(--dp-brand-light); }
.dp-btn-secondary { background: #fff; color: #334155; border-color: var(--dp-border); }
.dp-btn-secondary:hover { background: var(--dp-bg-subtle); }
.dp-btn-ghost { background: transparent; color: #475569; }
.dp-btn-ghost:hover { background: #f1f5f9; }
.dp-btn-accent { background: var(--dp-orange); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.dp-btn-accent:hover { background: var(--dp-orange-hover); }
.dp-btn-danger { background: var(--dp-danger); color: #fff; }
.dp-btn-success { background: #059669; color: #fff; }
.dp-btn-sm { padding: 4.4px 8.8px; font-size: 12px; }

/* Champs */
.dp-label { display: block; font-size: 13px; font-weight: 500; color: #475569; margin-bottom: 4px; }
.dp-input { width: 100%; box-sizing: border-box; padding: 8.8px 13.2px; font-size: 14px; color: var(--dp-text); background: #fff; border: 1px solid var(--dp-border); border-radius: var(--dp-radius); outline: none; transition: border-color .15s, box-shadow .15s; }
.dp-input::placeholder { color: var(--dp-faint); }
.dp-input:hover { border-color: #94a3b8; }
.dp-input:focus { border-color: var(--dp-cyan); box-shadow: 0 0 0 3px rgb(0 173 255 / .4); }
@media (max-width: 767px) { .dp-input { font-size: 16px; } }

/* Blocs */
.dp-card { background: #fff; border: 1px solid rgb(226 232 240 / .8); border-radius: var(--dp-radius-block); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.dp-card-title { font-size: 15px; font-weight: 700; color: var(--dp-text); }
.dp-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--dp-faint); }
.dp-info { background: var(--dp-info); border: 1px solid #bae6fd; padding: 10px 16px; font-weight: 600; color: var(--dp-brand); }

/* Badges & pastilles */
.dp-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 2.2px 8.8px; font-size: 12px; font-weight: 500; }
.dp-badge-open { background: #e0f2fe; color: #0369a1; }
.dp-badge-won { background: #dcfce7; color: #166534; }
.dp-badge-lost { background: #fee2e2; color: #991b1b; }
.dp-label-tag { display: inline-flex; align-items: center; border-radius: 3px; padding: 2px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; }
.dp-counter { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9999px; background: var(--dp-orange); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.dp-avatar { width: 24px; height: 24px; border-radius: 9999px; background: rgb(0 173 255 / .25); color: var(--dp-dark); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

/* Tableaux */
.dp-table { width: 100%; border-collapse: collapse; }
.dp-th { text-align: left; font-size: 13px; font-weight: 600; color: var(--dp-text); padding: 8.8px 13.2px; background: #fff; border-bottom: 1px solid var(--dp-border-soft); border-right: 1px solid var(--dp-border-soft); white-space: nowrap; }
.dp-td { padding: 8.8px 13.2px; font-size: 14px; border-bottom: 1px solid #f1f5f9; border-right: 1px solid #f1f5f9; vertical-align: top; }
.dp-th:last-child, .dp-td:last-child { border-right: 0; }

/* Infobulle */
[data-tip] { position: relative; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); background: var(--dp-brand); color: #fff; font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 5px; white-space: pre; z-index: 70; box-shadow: 0 4px 12px rgba(6,27,56,.25); }

/* Navigation : rail bleu nuit + sous-menu blanc + barre haute */
.dp-rail { width: 64px; background: var(--dp-brand); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; }
.dp-rail-item { width: 46px; height: 46px; border-radius: var(--dp-radius); color: #fff; display: flex; align-items: center; justify-content: center; }
.dp-rail-item:hover { background: rgb(255 255 255 / .1); }
.dp-rail-item.active { background: var(--dp-cyan); }
.dp-submenu { width: 256px; background: #fff; border-right: 1px solid var(--dp-border-soft); padding: 12px 8px; }
.dp-submenu-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--dp-radius); font-size: 15px; color: #334155; }
.dp-submenu-item.active { font-weight: 700; color: var(--dp-brand); }
.dp-topbar { height: 56px; background: #fff; border-bottom: 1px solid var(--dp-border-soft); display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.dp-search { flex: 1; max-width: 440px; border: 1px solid var(--dp-border); border-radius: 9999px; padding: 8px 16px 8px 36px; }

/* Kanban */
.dp-column { background: var(--dp-bg-column); width: 160px; }
.dp-tile { background: #fff; border: 1px solid var(--dp-border-soft); border-top: 4px solid var(--dp-warning); padding: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.dp-tile-title { font-weight: 700; color: #26282b; }