/* =======================================================
   GENCONTACT — Agence 360 — Style épuré "Agency"
   Palette officielle GenContact :
     --gc-primary : #433f3c  (principale / anthracite)
     --gc-web     : #344c81  (pôle Web)
     --gc-print   : #e23383  (pôle Print / Impression)
     --gc-mkt     : #a8bf4b  (pôle Marketing)
   ======================================================= */

:root {
    --gc-primary:   #433f3c;
    --gc-primary-2: #5a5551;
    --gc-web:       #344c81;
    --gc-print:     #e23383;
    --gc-mkt:       #a8bf4b;
    --gc-muted:     #6c757d;
    --gc-bg:        #efefef;
    --gc-border:    #e6e3df;

    /* Alias historiques */
    --a360-primary: var(--gc-primary);
    --a360-accent:  var(--gc-print);
    --a360-muted:   var(--gc-muted);
    --a360-bg:      var(--gc-bg);
    --a360-border:  var(--gc-border);
}

body {
    background: var(--gc-bg) !important;
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    color: #212529;
}

/* ---------- Navbar ---------- */
.navbar.bg-dark,
.navbar.bg-gc-primary {
    background: var(--gc-primary) !important;
}
.navbar-brand { letter-spacing: .5px; }
.navbar-brand img.logo-gc {
    height: 34px;
    width: auto;
    margin-right: .5rem;
    display: inline-block;
    vertical-align: middle;
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--gc-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(67, 63, 60, .05);
}
.card-header {
    background: #fff;
    border-bottom: 1px solid var(--gc-border);
    font-weight: 600;
}

/* ---------- Boutons ---------- */
.btn-primary {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--gc-primary-2);
    border-color: var(--gc-primary-2);
}
.btn-outline-primary {
    color: var(--gc-primary);
    border-color: var(--gc-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--gc-primary);
    border-color: var(--gc-primary);
    color: #fff;
}
.btn-accent, .btn-print {
    background: var(--gc-print);
    border-color: var(--gc-print);
    color: #fff;
}
.btn-accent:hover, .btn-print:hover { background:#c72873; border-color:#c72873; color:#fff; }
.btn-web {
    background: var(--gc-web);
    border-color: var(--gc-web);
    color:#fff;
}
.btn-web:hover { background:#2a3f6d; border-color:#2a3f6d; color:#fff; }
.btn-mkt {
    background: var(--gc-mkt);
    border-color: var(--gc-mkt);
    color:#fff;
}
.btn-mkt:hover { background:#94aa3e; border-color:#94aa3e; color:#fff; }

/* Outline variantes couleurs agence (portail client — barre accordéon) */
.btn-outline-gc-web {
    color: var(--gc-web); border-color: var(--gc-web);
}
.btn-outline-gc-web:hover   { background: var(--gc-web);   border-color: var(--gc-web);   color:#fff; }
.btn-outline-gc-print {
    color: var(--gc-print); border-color: var(--gc-print);
}
.btn-outline-gc-print:hover { background: var(--gc-print); border-color: var(--gc-print); color:#fff; }
.btn-outline-gc-mkt {
    color: #6e7d2a; border-color: var(--gc-mkt);
}
.btn-outline-gc-mkt:hover   { background: var(--gc-mkt);   border-color: var(--gc-mkt);   color:#2a3a10; }

/* Bordure colorée utilitaire */
.border-gc-web   { border-color: var(--gc-web)   !important; }
.border-gc-print { border-color: var(--gc-print) !important; }
.border-gc-mkt   { border-color: var(--gc-mkt)   !important; }

/* ---------- Badges de pôle (dans les tableaux) ---------- */
.pole-badge {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: .35em .7em;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
}
.pole-badge.pole-Web       { background: var(--gc-web); }
.pole-badge.pole-Print     { background: var(--gc-print); }
.pole-badge.pole-Marketing { background: var(--gc-mkt); color:#2a3a10; }
.pole-badge.pole-Textile   { background: #0891b2; }

/* ---------- Badges de statut ---------- */
.status-badge {
    font-size: .75rem;
    font-weight: 600;
    padding: .35em .7em;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.status-A-faire                { background:#eceff1; color:#455a64; }
.status-Maquettage             { background:#fff3cd; color:#856404; }
.status-Attente-Validation     { background:#cce5ff; color:#004085; }
.status-En-cours-de-production { background:#e2d9f3; color:#4a148c; }
.status-Livraison              { background:#d1ecf1; color:#0c5460; }
.status-Termine                { background:#d4edda; color:#155724; }

/* ---------- Rôles utilisateurs ---------- */
.role-badge {
    font-size: .72rem;
    padding: .3em .65em;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .4px;
}
.role-admin   { background:#433f3c; color:#fff; }
.role-manager { background:#6f42c1; color:#fff; }
.role-staff   { background:#344c81; color:#fff; }
.role-client  { background:#a8bf4b; color:#2a3a10; }

/* ---------- Stepper ---------- */
.stepper { gap: 6px; }
.stepper .step {
    text-align: center;
    flex: 1 1 0;
    min-width: 90px;
}
.stepper .step-bubble {
    width: 38px;
    height: 38px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--gc-muted);
    transition: all .2s ease;
}
.stepper .step-label {
    font-size: .75rem;
    color: var(--gc-muted);
    font-weight: 500;
}
.stepper .step-connector {
    flex: 1 1 auto;
    height: 3px;
    background: var(--gc-border);
    max-width: 60px;
    border-radius: 2px;
    margin-top: -22px;
}
.stepper .step-done .step-bubble {
    background: var(--gc-mkt);
    color:#fff;
    border-color: var(--gc-mkt);
}
.stepper .step-done .step-label { color: var(--gc-mkt); }
.stepper .step-connector.done   { background: var(--gc-mkt); }
.stepper .step-current .step-bubble {
    background: var(--gc-print);
    color:#fff;
    border-color: var(--gc-print);
    box-shadow: 0 0 0 4px rgba(226,51,131,.18);
}
.stepper .step-current .step-label {
    color: var(--gc-print);
    font-weight: 600;
}

/* ---------- Progression projet (barre) ---------- */
.progress-agency {
    height: 10px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}
.progress-agency > div {
    height: 100%;
    background: linear-gradient(90deg, var(--gc-web), var(--gc-print) 55%, var(--gc-mkt));
    transition: width .4s ease;
}

/* ---------- Login ---------- */
.login-wrapper {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    max-width: 440px;
    width: 100%;
}
.login-logo {
    display: block;
    margin: 0 auto 1.2rem;
    max-width: 240px;
    height: auto;
}

/* ---------- Liens ---------- */
a { color: var(--gc-web); }
a:hover { color: var(--gc-print); }

/* ---------- Utilitaires couleurs ---------- */
.bg-gc-primary { background-color: var(--gc-primary) !important; color:#fff; }
.bg-gc-web     { background-color: var(--gc-web)     !important; color:#fff; }
.bg-gc-print   { background-color: var(--gc-print)   !important; color:#fff; }
.bg-gc-mkt     { background-color: var(--gc-mkt)     !important; color:#2a3a10; }
.text-gc-primary { color: var(--gc-primary) !important; }
.text-gc-web     { color: var(--gc-web)     !important; }
.text-gc-print   { color: var(--gc-print)   !important; }
.text-gc-mkt     { color: var(--gc-mkt)     !important; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; }
.table thead th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--gc-muted);
    border-bottom: 2px solid var(--gc-border);
}
.table-hover tbody tr:hover { background-color: rgba(67,63,60,.03); }

/* ---------- Formulaires ---------- */
.form-control:focus, .form-select:focus {
    border-color: var(--gc-print);
    box-shadow: 0 0 0 .2rem rgba(226,51,131,.15);
}

/* ---------- Dropzone upload ---------- */
.dropzone-zone {
    border: 2px dashed var(--gc-border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    color: var(--gc-muted);
    transition: border-color .2s, background .2s;
    cursor: pointer;
}
.dropzone-zone.drag-over,
.dropzone-zone:hover {
    border-color: var(--gc-print);
    background: rgba(226,51,131,.04);
}
.dropzone-zone i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* ---------- Stat cards (dashboard staff) ---------- */
.stat-card {
    border-left: 4px solid var(--gc-border);
    border-radius: 10px;
    background: #fff;
    padding: 1rem 1.25rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(67,63,60,.09); }
.stat-card.sc-web   { border-color: var(--gc-web); }
.stat-card.sc-print { border-color: var(--gc-print); }
.stat-card.sc-mkt   { border-color: var(--gc-mkt); }
.stat-card .stat-val { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .stat-lbl { font-size: .8rem; color: var(--gc-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Kanban / file list ---------- */
.bat-item {
    background: #fff;
    border: 1px solid var(--gc-border);
    border-radius: 8px;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    transition: box-shadow .15s;
}
.bat-item:hover { box-shadow: 0 2px 8px rgba(67,63,60,.08); }
.bat-item .bat-name { font-weight: 500; font-size: .9rem; min-width: 0; word-break: break-word; }
.bat-item .bat-date { font-size: .78rem; color: var(--gc-muted); }

/* ---------- Notification toast stack ---------- */
.toast-stack {
    position: fixed;
    top: 76px;
    right: 18px;
    z-index: 1090;
    min-width: min(300px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
}

/* ---------- Echéance dépassée ---------- */
.overdue { color: #dc3545 !important; font-weight: 600; }

/* ---------- Responsive table wrapper ---------- */
.table-responsive { border-radius: 10px; overflow: hidden; }

/* ---------- Sidebar filter panel ---------- */
.filter-panel {
    background: #fff;
    border: 1px solid var(--gc-border);
    border-radius: 12px;
    padding: 1.25rem;
}
.filter-panel .form-label { font-size: .82rem; font-weight: 600; color: var(--gc-primary); }

/* ---------- Animations ---------- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card, .stat-card { animation: fadeInUp .25s ease both; }
.card:nth-child(2) { animation-delay: .05s; }
.card:nth-child(3) { animation-delay: .1s; }
.card:nth-child(4) { animation-delay: .15s; }

/* ---------- Print-friendly ---------- */
@media print {
    .navbar, .filter-panel, .btn, footer { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}

/* ---------- Accordion tâches (dashboard & task-manager) ---------- */
.accordion-item {
    border: 1px solid var(--gc-border);
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: .6rem;
}
/* Accordion-header avec boutons docs en dehors du toggle (portail client) */
.accordion-header {
    display: flex;
    align-items: stretch;
}
.accordion-button {
    background: #fff;
    color: var(--gc-primary);
    font-weight: 600;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
}
.accordion-button:not(.collapsed) {
    background: #f9f7f5;
    color: var(--gc-primary);
    box-shadow: none;
    border-bottom: 1px solid var(--gc-border);
}
.accordion-button::after {
    flex-shrink: 0;
    margin-left: .5rem;
}
.accordion-button:focus { box-shadow: none; }

/* Mini progress dans l'en-tête accordion */
.acc-progress {
    width: 110px;
    height: 8px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
    flex-shrink: 0;
}
.acc-progress > div {
    height: 100%;
    background: linear-gradient(90deg, var(--gc-web), var(--gc-print) 60%, var(--gc-mkt));
    transition: width .8s cubic-bezier(.25,.8,.25,1);
}

/* Table dans accordion — sans border-radius */
.accordion-body .table { margin-bottom: 0; }
.accordion-body .table thead th {
    background: #faf9f8;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gc-muted);
    border-bottom: 1px solid var(--gc-border);
    padding: .55rem .75rem;
}
.accordion-body .table td { padding: .6rem .75rem; vertical-align: middle; }
.accordion-body .table tr:last-child td { border-bottom: none; }

/* Tom Select — cohérence avec la charte */
.ts-wrapper.single .ts-control,
.ts-wrapper .ts-control {
    border-color: var(--gc-border);
    border-radius: .375rem;
    font-size: .9rem;
    min-height: 38px;
}
.ts-wrapper.focus .ts-control { border-color: var(--gc-print); box-shadow: 0 0 0 .2rem rgba(226,51,131,.15); }
.ts-dropdown .active  { background: rgba(226,51,131,.08); color: var(--gc-primary); }
.ts-dropdown .selected { background: rgba(226,51,131,.14); }
.no-results { padding: .5rem 1rem; color: var(--gc-muted); font-size: .88rem; }

/* Autocomplete datalist inputs (filtres) */
.filter-input-ac { position: relative; }

/* ── Drag & Drop zones ───────────────────────────────────────── */
.dz-zone {
    border: 2px dashed var(--gc-border);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    user-select: none;
}
.dz-zone:hover {
    border-color: var(--gc-web);
    background: rgba(52,76,129,.05);
}
.dz-zone.dz-over {
    border-color: var(--gc-print);
    background: rgba(226,51,131,.06);
    border-style: solid;
}
.dz-zone.dz-has-file {
    border-color: #28a745;
    border-style: solid;
    background: rgba(40,167,69,.05);
}
.dz-zone .dz-icon { font-size: 2rem; color: var(--gc-web); transition: transform .2s; }
.dz-zone.dz-over  .dz-icon { transform: translateY(-4px); color: var(--gc-print); }
.dz-zone.dz-has-file .dz-icon { color: #28a745; }
.dz-filename {
    font-size: .8rem;
    font-weight: 600;
    color: #28a745;
    word-break: break-all;
    margin-top: .25rem;
}

/* =======================================================
   RESPONSIVE MOBILE (< 576px)
======================================================= */
@media (max-width: 575px) {

    /* Padding principal réduit */
    main.container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }

    /* Stepper : étapes compactes */
    .stepper .step        { min-width: 52px; }
    .stepper .step-label  { font-size: .62rem; }
    .stepper .step-connector { max-width: 20px; }
    .stepper .step-bubble { width: 30px; height: 30px; font-size: .8rem; }

    /* Wrapper stepper scrollable en dernier recours */
    .stepper { overflow-x: auto; padding-bottom: 4px; }

    /* Barre de progression accordéon réduite */
    .acc-progress { width: 60px; }

    /* En-tête accordéon : titre sur ligne, boutons docs en dessous */
    .accordion-header .d-flex.align-items-center.gap-1.px-2.border-start {
        border-start: none !important;
        border-top: 1px solid var(--gc-border);
        width: 100%;
        padding: .4rem .75rem;
        flex-wrap: wrap;
    }

    /* Boutons d'action dans les tableaux : taille tactile minimum */
    .btn-sm { min-height: 34px; }

    /* Masquer colonnes secondaires tableaux sur mobile */
    .d-none-mobile { display: none !important; }

    /* Inputs largeur fixe dans dashboard stats */
    input[style*="width:150px"] { width: 100% !important; }
}