/* ═══════════════════════════════════════════════════════════════
   AMRW DEV — Espace interne de dispatch des tâches
   Palette violette pour différencier visuellement du Support client
   ═══════════════════════════════════════════════════════════════ */

:root {
    --dev-500: #7c3aed;
    --dev-400: #8b5cf6;
    --dev-300: #a78bfa;
}

/* ── Bouton DEV ── */
.btn-dev {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);
    color: #fff; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .3s ease;
    box-shadow: 0 4px 15px rgba(109, 40, 217, .3);
}
.btn-dev:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(109, 40, 217, .45); }
.btn-dev:active { transform: translateY(0); }
.btn-dev:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Layout ── */
.dev-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 40;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(13, 20, 32, .96) 0%, rgba(10, 16, 25, .98) 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(20px);
    transition: transform .3s ease;
}
.dev-main { margin-left: 264px; min-height: 100vh; }
.dev-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: .75rem;
    padding: .875rem 1.25rem;
    background: rgba(10, 16, 25, .85);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    backdrop-filter: blur(16px);
}
@media (max-width: 1023px) {
    .dev-sidebar { transform: translateX(-100%); }
    .dev-sidebar.open { transform: translateX(0); }
    .dev-main { margin-left: 0; }
}

/* ── Navigation ── */
.dev-nav-item {
    width: 100%; display: flex; align-items: center; gap: .75rem;
    padding: .625rem .875rem; border-radius: .75rem;
    font-size: .8125rem; font-weight: 600; color: #94a3b8;
    background: transparent; border: 1px solid transparent; cursor: pointer;
    transition: all .2s ease; text-align: left;
}
.dev-nav-item i { width: 1.125rem; text-align: center; font-size: .875rem; }
.dev-nav-item:hover { background: rgba(255, 255, 255, .04); color: #e2e8f0; }
.dev-nav-item.active {
    background: linear-gradient(90deg, rgba(124, 58, 237, .18), rgba(124, 58, 237, .04));
    border-color: rgba(139, 92, 246, .28); color: #c4b5fd;
}
.dev-nav-badge {
    margin-left: auto; font-size: .625rem; font-weight: 800;
    background: rgba(139, 92, 246, .18); color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, .25);
    padding: .0625rem .375rem; border-radius: 9999px; min-width: 1.25rem; text-align: center;
}

/* ── Labels & chips ── */
.dev-label {
    display: block; font-size: .625rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: .375rem;
}
.dev-chip {
    font-size: .6875rem; font-weight: 600; color: #94a3b8;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
    padding: .3125rem .625rem; border-radius: 9999px; cursor: pointer; transition: all .2s ease;
}
.dev-chip:hover { color: #c4b5fd; border-color: rgba(139, 92, 246, .35); background: rgba(124, 58, 237, .1); }
.dev-chip.active { color: #c4b5fd; border-color: rgba(139, 92, 246, .5); background: rgba(124, 58, 237, .18); }
.dev-chip-reset:hover { color: #fca5a5; border-color: rgba(239, 68, 68, .35); background: rgba(239, 68, 68, .1); }

/* ── Table ── */
.dev-table { border-collapse: collapse; min-width: 900px; table-layout: fixed; }
/* Largeurs de colonnes : ID / Type / Sujet / Priorité / Statut / Demandeur / Assigné / Date / Actions */
.dev-table th:nth-child(1), .dev-table td:nth-child(1) { width: 78px; }
.dev-table th:nth-child(2), .dev-table td:nth-child(2) { width: 116px; }
.dev-table th:nth-child(3), .dev-table td:nth-child(3) { width: auto; min-width: 200px; }
.dev-table th:nth-child(4), .dev-table td:nth-child(4) { width: 96px; }
.dev-table th:nth-child(5), .dev-table td:nth-child(5) { width: 108px; }
.dev-table th:nth-child(6), .dev-table td:nth-child(6) { width: 104px; }
.dev-table th:nth-child(7), .dev-table td:nth-child(7) { width: 152px; }
.dev-table th:nth-child(8), .dev-table td:nth-child(8) { width: 88px; }
.dev-table th:nth-child(9), .dev-table td:nth-child(9) { width: 108px; }
.dev-table td:nth-child(6) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-table thead tr { background: rgba(17, 27, 41, .9); }
.dev-table th {
    padding: .875rem .75rem; text-align: left;
    font-size: .625rem; font-weight: 800; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .09em; white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dev-table th i { opacity: .4; margin-left: .25rem; font-size: .625rem; }
.dev-sortable { cursor: pointer; user-select: none; transition: color .2s ease; }
.dev-sortable:hover { color: #c4b5fd; }
.dev-sortable:hover i { opacity: .8; }
.dev-table td {
    padding: .8125rem .75rem; font-size: .75rem; color: #cbd5e1; vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.dev-table tbody tr { transition: background .18s ease; cursor: pointer; }
.dev-table tbody tr:hover { background: rgba(124, 58, 237, .06); }
.dev-ref { font-family: 'JetBrains Mono', monospace; font-size: .6875rem; font-weight: 600; color: #a78bfa; }

/* ── Badges statut interne ── */
.dev-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .1875rem .5rem; border-radius: 9999px;
    font-size: .625rem; font-weight: 700; white-space: nowrap;
}
.dev-st-backlog   { background: rgba(100,116,139,.14); color: #94a3b8; border: 1px solid rgba(100,116,139,.22); }
.dev-st-todo      { background: rgba(56,189,248,.12);  color: #7dd3fc; border: 1px solid rgba(56,189,248,.22); }
.dev-st-doing     { background: rgba(251,191,36,.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,.22); }
.dev-st-review    { background: rgba(168,85,247,.12);  color: #c4b5fd; border: 1px solid rgba(168,85,247,.22); }
.dev-st-blocked   { background: rgba(239,68,68,.12);   color: #f87171; border: 1px solid rgba(239,68,68,.22); }
.dev-st-done      { background: rgba(52,211,153,.12);  color: #34d399; border: 1px solid rgba(52,211,153,.22); }
.dev-st-cancelled { background: rgba(107,114,128,.12); color: #9ca3af; border: 1px solid rgba(107,114,128,.2); }

/* Membre inactif — rouge explicite */
.dev-st-inactive { background: rgba(239,68,68,.14); color: #f87171; border: 1px solid rgba(239,68,68,.3); }

.dev-pr-critique { background: rgba(239,68,68,.15);  color: #f87171; border: 1px solid rgba(239,68,68,.22); }
.dev-pr-haute    { background: rgba(251,146,60,.15); color: #fb923c; border: 1px solid rgba(251,146,60,.22); }
.dev-pr-moyenne  { background: rgba(250,204,21,.15); color: #fbbf24; border: 1px solid rgba(250,204,21,.22); }
.dev-pr-basse    { background: rgba(52,211,153,.15); color: #34d399; border: 1px solid rgba(52,211,153,.22); }

.dev-type-badge {
    display: inline-flex; align-items: center; gap: .3125rem;
    font-size: .6875rem; font-weight: 600; color: #cbd5e1;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    padding: .1875rem .5rem; border-radius: .5rem; white-space: nowrap;
}

/* ── Avatar ── */
.dev-avatar {
    width: 1.625rem; height: 1.625rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .5625rem; font-weight: 800; color: #fff; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.14);
}
.dev-avatar-none {
    background: rgba(255,255,255,.05); color: #64748b;
    border: 1px dashed rgba(255,255,255,.18);
}

/* ── Assign inline select ── */
.dev-assign-select {
    background: rgba(17,27,41,.7); border: 1px solid rgba(255,255,255,.08);
    color: #cbd5e1; font-size: .6875rem; border-radius: .5rem;
    padding: .25rem 1.35rem .25rem .4375rem; cursor: pointer; max-width: 116px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .125rem center; background-repeat: no-repeat; background-size: 1.15em;
}
.dev-assign-select:focus { outline: none; border-color: rgba(139,92,246,.5); }

/* ── Actions ── */
.dev-icon-btn {
    width: 1.75rem; height: 1.75rem; border-radius: .5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    color: #94a3b8; font-size: .6875rem; cursor: pointer; transition: all .2s ease;
}
.dev-icon-btn:hover { color: #c4b5fd; border-color: rgba(139,92,246,.35); background: rgba(124,58,237,.12); }
.dev-icon-btn.danger:hover { color: #fca5a5; border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }

/* ── Kanban ── */
.dev-board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
    gap: .5rem; overflow-x: auto; padding-bottom: .75rem; align-items: start;
}
.dev-col {
    background: linear-gradient(180deg, rgba(17,27,41,.7), rgba(14,22,33,.85));
    border: 1px solid rgba(255,255,255,.06); border-radius: 1rem;
    display: flex; flex-direction: column; min-height: 160px;
}
.dev-col.drag-over { border-color: rgba(139,92,246,.5); background: rgba(124,58,237,.08); }
.dev-col-head {
    display: flex; align-items: center; gap: .5rem;
    padding: .75rem .875rem; border-bottom: 1px solid rgba(255,255,255,.05);
}
.dev-col-body { padding: .625rem; display: flex; flex-direction: column; gap: .5rem; min-height: 80px; }
.dev-card {
    background: rgba(10,16,25,.75); border: 1px solid rgba(255,255,255,.07);
    border-radius: .75rem; padding: .75rem; cursor: grab; transition: all .2s ease;
}
.dev-card:hover { border-color: rgba(139,92,246,.3); transform: translateY(-1px); }
.dev-card.dragging { opacity: .45; }
.dev-card-bar { height: 3px; border-radius: 9999px; background: rgba(255,255,255,.07); overflow: hidden; }
.dev-card-bar span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #a78bfa); }

/* ── Modales ── */
.dev-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dev-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 7, 14, .78); backdrop-filter: blur(4px); }
.dev-modal-panel {
    position: relative; z-index: 1; width: 100%; max-width: 720px; max-height: 92vh;
    display: flex; flex-direction: column;
    background: linear-gradient(135deg, rgba(19,29,44,.98), rgba(12,19,29,.99));
    border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem;
    box-shadow: 0 24px 70px rgba(0,0,0,.6);
    animation: devPop .22s ease;
}
.dev-modal-sm { max-width: 400px; }
.dev-drawer {
    position: relative; z-index: 1; margin-left: auto; width: 100%; max-width: 560px; height: 100%;
    background: linear-gradient(160deg, rgba(19,29,44,.98), rgba(12,19,29,.99));
    border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem;
    box-shadow: -24px 0 70px rgba(0,0,0,.6);
    animation: devSlide .25s ease;
}
@keyframes devPop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes devSlide { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ── Range ── */
.dev-range { -webkit-appearance: none; appearance: none; height: 5px; border-radius: 9999px; background: rgba(255,255,255,.08); outline: none; }
.dev-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
    background: #8b5cf6; border: 2px solid #0a1019; cursor: pointer; box-shadow: 0 0 0 3px rgba(139,92,246,.22);
}
.dev-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #8b5cf6; border: 2px solid #0a1019; cursor: pointer; }

/* ── Progress bar ── */
.dev-progress { height: 5px; border-radius: 9999px; background: rgba(255,255,255,.07); overflow: hidden; }
.dev-progress span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #a78bfa); transition: width .3s ease; }

/* ── Toast ── */
.dev-toast {
    display: flex; align-items: center; gap: .625rem;
    padding: .75rem 1rem; border-radius: .75rem; font-size: .75rem; font-weight: 600;
    background: rgba(19,29,44,.97); border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: devPop .2s ease; min-width: 240px;
}
.dev-toast.ok { border-color: rgba(52,211,153,.35); color: #6ee7b7; }
.dev-toast.err { border-color: rgba(239,68,68,.35); color: #fca5a5; }
.dev-toast.info { border-color: rgba(139,92,246,.35); color: #c4b5fd; }

/* ── Divers ── */
.dev-late { color: #fb923c; font-weight: 700; }
.dev-empty { padding: 3rem 1rem; text-align: center; color: #64748b; font-size: .8125rem; }
.dev-tag { font-size: .5625rem; font-weight: 700; padding: .0625rem .375rem; border-radius: .375rem;
    background: rgba(139,92,246,.12); color: #c4b5fd; border: 1px solid rgba(139,92,246,.2); }

/* Badge « issue d'un ticket client » (pont sens unique) */
.dev-origin-badge {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .5625rem; font-weight: 700; padding: .0625rem .375rem; border-radius: .375rem;
    background: rgba(33,150,243,.12); color: #64b5f6; border: 1px solid rgba(33,150,243,.25);
}