/* ==========================================================================
   CRM DAMOTIC - Feuille de style principale
   --------------------------------------------------------------------------
   Charte : marine #1F3A5F, rouge framboise #DC143C, blanc.
   Style  : inspiration Apple (epure, cartes, ombres douces, typo soignee).
   Auteur : DAMOTIC | Version 1.0.0 | 2026-06-06
   ========================================================================== */

/* --- Variables de theme --------------------------------------------------- */
:root {
    --marine:        #1F3A5F;
    --marine-dark:   #162a45;
    --marine-light:  #2c4f7c;
    --framboise:     #DC143C;
    --framboise-dark:#b71030;
    --blanc:         #ffffff;
    --gris-bg:       #f5f6f8;
    --gris-bord:     #e3e6eb;
    --gris-texte:    #5b6470;
    --texte:         #1d2330;
    --texte-doux:    #6b7280;
    --vert:          #2e7d32;
    --ombre:         0 1px 3px rgba(31,58,95,.08), 0 6px 18px rgba(31,58,95,.06);
    --ombre-forte:   0 4px 24px rgba(31,58,95,.16);
    --rayon:         14px;
    --rayon-sm:      9px;
    --transi:        .18s ease;
    --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Base ------------------------------------------------------------------ */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--police);
    color: var(--texte);
    background: var(--gris-bg);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

a { color: var(--marine); text-decoration: none; }
a:hover { color: var(--framboise); }

h1, h2, h3 { color: var(--marine); font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; margin: 0 0 .2rem; }
h2 { font-size: 1.2rem; }

/* --- Barre de navigation -------------------------------------------------- */
.navbar {
    background: var(--marine);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0 1.4rem;
    height: 60px;
    box-shadow: var(--ombre);
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar .brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: .55rem;
    letter-spacing: -.02em;
}
.navbar .brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--framboise); display: inline-block; }
.navbar nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.navbar nav a {
    color: #cdd6e4;
    padding: .5rem .8rem;
    border-radius: var(--rayon-sm);
    font-size: .92rem;
    font-weight: 500;
    transition: var(--transi);
}
.navbar nav a:hover { background: var(--marine-light); color: #fff; }
.navbar nav a.active { background: var(--framboise); color: #fff; }
.navbar .user-zone { display: flex; align-items: center; gap: .7rem; font-size: .88rem; color: #cdd6e4; }
.navbar .user-zone a.logout { color: #fff; border: 1px solid rgba(255,255,255,.3); padding: .35rem .7rem; border-radius: var(--rayon-sm); }
.navbar .user-zone a.logout:hover { background: var(--framboise); border-color: var(--framboise); }

/* --- Conteneur principal -------------------------------------------------- */
.container { max-width: 1180px; margin: 0 auto; padding: 1.8rem 1.4rem 3rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head .subtitle { color: var(--texte-doux); font-size: .92rem; margin: 0; }

/* --- Cartes --------------------------------------------------------------- */
.card {
    background: #fff;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}
.card h2 { margin-top: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* --- Boutons -------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: .45rem;
    border: none; cursor: pointer;
    background: var(--marine); color: #fff;
    padding: .6rem 1.1rem; border-radius: var(--rayon-sm);
    font-size: .92rem; font-weight: 600; font-family: var(--police);
    transition: var(--transi);
    box-shadow: 0 1px 2px rgba(31,58,95,.18);
}
.btn:hover { background: var(--marine-dark); color: #fff; transform: translateY(-1px); }
.btn-primary { background: var(--framboise); }
.btn-primary:hover { background: var(--framboise-dark); }
.btn-ghost { background: #fff; color: var(--marine); border: 1px solid var(--gris-bord); box-shadow: none; }
.btn-ghost:hover { background: var(--gris-bg); color: var(--marine); }
.btn-danger { background: var(--framboise); }
.btn-danger:hover { background: var(--framboise-dark); }
.btn-sm { padding: .38rem .7rem; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }

/* --- Formulaires ---------------------------------------------------------- */
label { display: block; font-size: .82rem; font-weight: 600; color: var(--marine); margin: 0 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], select, textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon-sm);
    font-size: .94rem;
    font-family: var(--police);
    background: #fff;
    color: var(--texte);
    transition: var(--transi);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marine);
    box-shadow: 0 0 0 3px rgba(31,58,95,.12);
}
textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.help { font-size: .78rem; color: var(--texte-doux); margin-top: .25rem; }
.checkbox-line { display: flex; align-items: center; gap: .5rem; }
.checkbox-line input { width: auto; }
.checkbox-line label { margin: 0; }

/* --- Listes deroulantes (max ~24 lignes puis ascenseur) ------------------- */
/* Toute zone qui liste des informations est plafonnee en hauteur ; au-dela,
   un ascenseur vertical apparait pour parcourir le contenu dans le bloc. */
.scroll24 { max-height: 24lh; max-height: 34rem; overflow-y: auto; }

/* --- Tableaux ------------------------------------------------------------- */
.table-wrap { overflow: auto; max-height: 34rem; border-radius: var(--rayon); border: 1px solid var(--gris-bord); }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: .9rem; }
table.data th, table.data td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--gris-bord); }
table.data th { background: var(--gris-bg); color: var(--marine); font-weight: 650; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; z-index: 1; }
table.data tbody tr { transition: var(--transi); }
table.data tbody tr:hover { background: #f9fafc; }
table.data tr:last-child td { border-bottom: none; }

/* --- Badges (positions) --------------------------------------------------- */
.badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    color: #fff;
    background: var(--marine);
    margin: 0 .2rem .2rem 0;
}
.badge-soft { background: var(--gris-bg); color: var(--marine); border: 1px solid var(--gris-bord); }
.pill { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.pill-ok { background: #e6f4ea; color: var(--vert); }
.pill-ko { background: #fde7eb; color: var(--framboise); }

/* --- Messages flash ------------------------------------------------------- */
.flash { padding: .8rem 1.1rem; border-radius: var(--rayon-sm); margin-bottom: 1.1rem; font-size: .92rem; font-weight: 500; }
.flash-success { background: #e6f4ea; color: #1e5e2a; border: 1px solid #bfe3c8; }
.flash-error   { background: #fde7eb; color: #9c0f2a; border: 1px solid #f5c2cd; }
.flash-info    { background: #e8f0fb; color: var(--marine); border: 1px solid #c5d8f2; }

/* --- Avatar --------------------------------------------------------------- */
.avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--marine); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem; object-fit: cover; flex: none;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 88px; height: 88px; font-size: 1.7rem; }

/* --- Page de connexion ---------------------------------------------------- */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--marine) 0%, var(--marine-dark) 100%);
    padding: 1.5rem;
}
.login-card {
    background: #fff; border-radius: 20px; box-shadow: var(--ombre-forte);
    width: 100%; max-width: 400px; padding: 2.4rem 2.2rem;
}
.login-card .logo { text-align: center; margin-bottom: 1.6rem; }
.login-card .logo .name { font-size: 1.5rem; font-weight: 800; color: var(--marine); letter-spacing: -.02em; }
.login-card .logo .name b { color: var(--framboise); }
.login-card .logo .tag { color: var(--texte-doux); font-size: .85rem; margin-top: .2rem; }

/* --- Repeaters (coordonnees multiples) ------------------------------------ */
.repeater-item {
    border: 1px solid var(--gris-bord); border-radius: var(--rayon-sm);
    padding: .9rem; margin-bottom: .7rem; background: var(--gris-bg);
}
.repeater-item .form-row { margin-bottom: 0; }
.row-flex { display: flex; gap: .6rem; align-items: flex-end; }
.row-flex > * { flex: 1; }
.row-flex .btn { flex: none; }

/* --- Carte (Leaflet) ------------------------------------------------------ */
#map { height: 65vh; min-height: 420px; border-radius: var(--rayon); border: 1px solid var(--gris-bord); }
.map-toolbar { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }

/* --- Pagination ----------------------------------------------------------- */
.pagination { display: flex; gap: .35rem; margin-top: 1.2rem; flex-wrap: wrap; max-height: 12rem; overflow-y: auto; }
.pagination a, .pagination span {
    padding: .4rem .75rem; border-radius: var(--rayon-sm);
    border: 1px solid var(--gris-bord); background: #fff; font-size: .88rem;
}
.pagination .current { background: var(--marine); color: #fff; border-color: var(--marine); }

/* --- Pied de page --------------------------------------------------------- */
.footer { text-align: center; color: var(--texte-doux); font-size: .8rem; padding: 1.6rem 1rem 2.4rem; }
.footer b { color: var(--marine); }

/* --- Utilitaires ---------------------------------------------------------- */
.muted { color: var(--texte-doux); }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; gap: 1rem; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.stat { font-size: 2rem; font-weight: 800; color: var(--marine); }
.divider { height: 1px; background: var(--gris-bord); margin: 1.2rem 0; border: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 720px) {
    .navbar { height: auto; flex-wrap: wrap; padding: .7rem 1rem; }
    .navbar nav { order: 3; width: 100%; }
    .page-head { flex-direction: column; align-items: flex-start; }
    .row-flex { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   MODULE TICKETING (Phase 1) - charte DAMOTIC (marine / framboise / blanc)
   ========================================================================== */

/* --- Pastille de statut SLA (vert / orange / rouge) ----------------------- */
.sla-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; vertical-align:middle; box-shadow:0 0 0 2px #fff; }
.sla-vert   { background:var(--vert); }
.sla-orange { background:#e69500; }
.sla-rouge  { background:var(--framboise); }
.sla-neutre { background:#9aa3b2; }
.sla-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; padding:.12rem .55rem; border-radius:999px; background:var(--gris-bg); border:1px solid var(--gris-bord); white-space:nowrap; }

/* --- Badge du bouton TICKET (fiche contact) ------------------------------- */
.ticket-badge { display:inline-flex; align-items:center; justify-content:center; min-width:1.15rem; height:1.15rem; padding:0 .35rem; margin-left:.35rem; border-radius:999px; background:#fff; color:var(--marine); font-size:.72rem; font-weight:700; line-height:1; }
.ticket-badge.retard { background:#fff0f2; color:var(--framboise); box-shadow:0 0 0 1px var(--framboise) inset; }

/* --- Etat (libelle colore) ------------------------------------------------ */
.etat-pill { display:inline-block; font-size:.74rem; font-weight:600; padding:.16rem .55rem; border-radius:999px; color:#fff; }
.etat-ouvert     { background:#1F3A5F; }
.etat-en_cours   { background:#2c6fb3; }
.etat-en_attente { background:#e69500; }
.etat-resolu     { background:#2e7d32; }
.etat-ferme      { background:#6b7280; }

/* --- Kanban (5 colonnes, drag & drop) ------------------------------------- */
.kanban { display:grid; grid-template-columns:repeat(5, minmax(190px,1fr)); gap:.8rem; align-items:start; overflow-x:auto; padding-bottom:.5rem; }
.kanban-col { background:var(--gris-bg); border:1px solid var(--gris-bord); border-radius:var(--rayon-sm); min-height:120px; display:flex; flex-direction:column; }
.kanban-col h3 { margin:0; padding:.6rem .7rem; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--marine); border-bottom:2px solid var(--gris-bord); display:flex; justify-content:space-between; align-items:center; }
.kanban-col h3 .cnt { background:#fff; border:1px solid var(--gris-bord); border-radius:999px; padding:0 .45rem; font-size:.72rem; }
.kanban-col.col-ouvert     h3 { border-bottom-color:#1F3A5F; }
.kanban-col.col-en_cours   h3 { border-bottom-color:#2c6fb3; }
.kanban-col.col-en_attente h3 { border-bottom-color:#e69500; }
.kanban-col.col-resolu     h3 { border-bottom-color:#2e7d32; }
.kanban-col.col-ferme      h3 { border-bottom-color:#6b7280; }
.kanban-list { padding:.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; min-height:60px; }
.kanban-list.drag-over { background:#eef3fb; outline:2px dashed var(--marine-light); outline-offset:-4px; border-radius:var(--rayon-sm); }
.kcard { background:#fff; border:1px solid var(--gris-bord); border-radius:9px; padding:.55rem .6rem; box-shadow:var(--ombre); cursor:grab; font-size:.84rem; }
.kcard:active { cursor:grabbing; }
.kcard.dragging { opacity:.5; }
.kcard .num { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.72rem; color:var(--texte-doux); }
.kcard .suj { font-weight:600; color:var(--marine); margin:.15rem 0; display:block; }
.kcard .meta { display:flex; justify-content:space-between; align-items:center; font-size:.74rem; color:var(--texte-doux); }

/* --- Tableau de bord : grille de blocs ------------------------------------ */
.tk-grid { display:grid; grid-template-columns:2fr 1fr; gap:1rem; align-items:start; }
@media (max-width:900px){ .tk-grid { grid-template-columns:1fr; } .kanban { grid-template-columns:repeat(5, 78vw); } }
.tk-block { background:#fff; border:1px solid var(--gris-bord); border-radius:var(--rayon); box-shadow:var(--ombre); margin-bottom:1rem; }
.tk-block > h2 { margin:0; padding:.7rem 1rem; font-size:.95rem; border-bottom:1px solid var(--gris-bord); display:flex; align-items:center; gap:.5rem; }
.tk-block .tk-body { padding:.9rem 1rem; }

/* --- Timeline (conversation unifiee) -------------------------------------- */
.tl { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; max-height:520px; overflow-y:auto; }
.tl-item { border:1px solid var(--gris-bord); border-radius:10px; padding:.55rem .7rem; background:#fff; }
.tl-item.dir-in  { border-left:3px solid var(--marine); background:#f7f9fc; }
.tl-item.dir-out { border-left:3px solid var(--framboise); }
.tl-item.vis-interne { border-style:dashed; }
.tl-head { display:flex; justify-content:space-between; gap:.5rem; font-size:.74rem; color:var(--texte-doux); margin-bottom:.25rem; }
.tl-body { font-size:.88rem; white-space:pre-wrap; word-break:break-word; }
.tl-body img.thumb { max-width:180px; max-height:160px; border-radius:8px; border:1px solid var(--gris-bord); margin-top:.35rem; display:block; }
.tl-body audio { margin-top:.35rem; width:100%; max-width:320px; }
.tag-interne { background:#fff3cd; color:#7a5b00; border:1px solid #ffe39b; border-radius:999px; padding:.02rem .4rem; font-size:.68rem; }
.tag-client  { background:#e6f4ea; color:#1b5e20; border:1px solid #b6dcc0; border-radius:999px; padding:.02rem .4rem; font-size:.68rem; }

/* --- Dropzone (drag & drop fichier) --------------------------------------- */
.dropzone { border:2px dashed var(--gris-bord); border-radius:10px; padding:.7rem; text-align:center; color:var(--texte-doux); font-size:.82rem; cursor:pointer; transition:var(--transi); }
.dropzone.hl { border-color:var(--marine); background:#eef3fb; color:var(--marine); }

/* --- Onglets documents (Bloc C) ------------------------------------------- */
.tk-tabs { display:flex; flex-wrap:wrap; gap:.3rem; border-bottom:1px solid var(--gris-bord); margin-bottom:.7rem; }
.tk-tab { border:1px solid var(--gris-bord); border-bottom:none; background:var(--gris-bg); color:var(--marine); padding:.35rem .7rem; border-radius:8px 8px 0 0; font-size:.8rem; cursor:pointer; }
.tk-tab.active { background:#fff; font-weight:600; box-shadow:0 -2px 0 var(--framboise) inset; }
.tk-tab .n { background:#fff; border:1px solid var(--gris-bord); border-radius:999px; padding:0 .35rem; font-size:.68rem; margin-left:.3rem; }
.tk-tabpane { display:none; }
.tk-tabpane.active { display:block; }

/* --- Modal (splash document) ---------------------------------------------- */
.tk-modal { position:fixed; inset:0; background:rgba(22,42,69,.55); display:none; align-items:center; justify-content:center; z-index:500; padding:2vh 2vw; }
.tk-modal.open { display:flex; }
.tk-modal-box { background:#fff; border-radius:var(--rayon); width:min(900px,96vw); height:min(90vh,900px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--ombre-forte); }
.tk-modal-head { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; border-bottom:1px solid var(--gris-bord); }
.tk-modal-body { flex:1; overflow:auto; background:var(--gris-bg); }
.tk-modal-body iframe, .tk-modal-body img { width:100%; height:100%; border:0; object-fit:contain; }