/* ============================================================
   Bot Patient — Thème back-office clinique (premium SaaS)
   Inspiré du mockup MedDental. Accent teal cohérent avec le widget.
   Ce fichier restyle aussi les éléments Bootstrap existants
   (.card, .table, .btn, .badge, form-control) : les pages actuelles
   héritent du look sans réécriture.
   ============================================================ */
:root {
    --c-teal:#0e7c86; --c-teal-d:#0a5f77; --c-teal-l:#e6f3f4;
    --c-side-1:#12242d; --c-side-2:#0b181e;
    --c-side-text:#9fb4bf; --c-side-hover:#16303b;
    --c-bg:#f4f7f8; --c-card:#ffffff; --c-line:#e9eef1;
    --c-ink:#1f2b31; --c-muted:#6b7a83;
    --c-amber-bg:#fff4e0; --c-amber:#a8701a;
    --c-green-bg:#e6f4ec; --c-green:#1e9e5a;
    --c-blue-bg:#e7f0fb;  --c-blue:#2f6fb0;
    --c-shadow:0 1px 3px rgba(16,34,43,.06), 0 1px 2px rgba(16,34,43,.04);
}

/* ---------- Shell ---------- */
.clinic-shell{display:flex;min-height:100vh;background:var(--c-bg);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--c-ink);}
.clinic-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.clinic-content{padding:26px 32px;max-width:1400px;width:100%;}

/* ---------- Sidebar ---------- */
.clinic-side{width:252px;flex-shrink:0;background:linear-gradient(180deg,var(--c-side-1),var(--c-side-2));
    color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.clinic-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 22px;}
.clinic-brand-logo{width:38px;height:38px;border-radius:10px;background:rgba(14,124,134,.18);
    display:flex;align-items:center;justify-content:center;color:#3fd0d8;}
.clinic-brand-logo svg{width:22px;height:22px;}
.clinic-brand-name{font-weight:700;font-size:1.02rem;line-height:1.1;}
.clinic-brand-sub{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-side-text);}
.clinic-nav{display:flex;flex-direction:column;gap:3px;padding:6px 12px;flex:1;}
.clinic-nav-link{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;
    color:var(--c-side-text);text-decoration:none;font-size:.94rem;font-weight:500;transition:.15s;}
.clinic-nav-link svg{width:19px;height:19px;flex-shrink:0;}
.clinic-nav-link:hover{background:var(--c-side-hover);color:#fff;}
.clinic-nav-link.active{background:var(--c-teal);color:#fff;box-shadow:0 4px 14px rgba(14,124,134,.35);}
.clinic-side-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.06);}
.clinic-side-foot .help-btn{display:flex;align-items:center;justify-content:center;gap:8px;
    background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:11px;
    padding:10px 12px;text-decoration:none;font-weight:600;font-size:.9rem;margin-bottom:12px;transition:.15s;}
.clinic-side-foot .help-btn:hover{background:var(--c-teal);border-color:var(--c-teal);color:#fff;}
.clinic-side-foot .help-btn svg{width:18px;height:18px;flex-shrink:0;}
.clinic-help{font-size:.82rem;color:var(--c-side-text);line-height:1.4;}
.clinic-help span{color:#cfe0e6;}

/* ---------- Top bar ---------- */
.clinic-top{height:64px;background:#fff;border-bottom:1px solid var(--c-line);
    display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20;}
.clinic-burger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--c-ink);}
.clinic-top-spacer{flex:1;}
.clinic-user{display:flex;align-items:center;gap:10px;}
.clinic-avatar{width:36px;height:36px;border-radius:50%;background:var(--c-teal);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:700;}
.clinic-user-name{font-weight:600;font-size:.92rem;}
.clinic-logout{margin:0;}
.clinic-logout button{background:none;border:1px solid var(--c-line);border-radius:9px;width:34px;height:34px;
    cursor:pointer;color:var(--c-muted);font-size:1rem;}
.clinic-logout button:hover{background:var(--c-bg);color:var(--c-ink);}

/* ---------- Page heading ---------- */
.clinic-content h1{font-size:1.5rem;font-weight:700;margin:0 0 4px;}
.clinic-content > p:first-of-type, .clinic-lead{color:var(--c-muted);margin-bottom:22px;}
.clinic-content h2, .clinic-content .h5{font-weight:700;}

/* ---------- Stat tiles ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-bottom:24px;}
.stat{background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;padding:18px 20px;
    box-shadow:var(--c-shadow);position:relative;}
.stat .stat-label{color:var(--c-muted);font-size:.86rem;}
.stat .stat-value{font-size:1.9rem;font-weight:700;margin-top:6px;line-height:1;}
.stat .stat-delta{font-size:.8rem;margin-top:8px;color:var(--c-green);}
.stat .stat-ico{position:absolute;top:18px;right:18px;color:var(--c-teal);opacity:.85;}
.stat .stat-ico svg{width:26px;height:26px;}
.stat.featured{background:linear-gradient(135deg,var(--c-teal),var(--c-teal-d));color:#fff;border:none;}
.stat.featured .stat-label,.stat.featured .stat-delta{color:rgba(255,255,255,.85);}
.stat.featured .stat-ico{color:#fff;opacity:.9;}

/* ---------- Cards ---------- */
.panel, .card{background:var(--c-card);border:1px solid var(--c-line) !important;border-radius:16px;
    box-shadow:var(--c-shadow);}
.panel{padding:20px 22px;margin-bottom:20px;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.panel-head h2,.panel-head h3{font-size:1.05rem;font-weight:700;margin:0;}
.panel-head a{font-size:.85rem;color:var(--c-teal);text-decoration:none;font-weight:600;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:980px){.grid-2{grid-template-columns:1fr;}}

/* ---------- Tables ---------- */
.clinic-content .table{border-collapse:separate;border-spacing:0;background:#fff;border-radius:14px;
    overflow:hidden;box-shadow:var(--c-shadow);border:1px solid var(--c-line);}
.clinic-content .table thead th{background:#fafcfc;color:var(--c-muted);font-weight:600;font-size:.82rem;
    text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--c-line);padding:12px 14px;}
.clinic-content .table td{padding:12px 14px;border-top:1px solid var(--c-line);vertical-align:middle;}
.clinic-content .table tbody tr:first-child td{border-top:none;}
.clinic-content .table tbody tr:hover{background:#f7fbfb;}
.clinic-content .table.table-striped tbody tr:nth-child(odd){background:#fbfdfd;}

/* ---------- Buttons ---------- */
.clinic-content .btn{
    border-radius:11px;font-weight:600;padding:9px 18px;border:1px solid transparent;line-height:1.25;
    transition:transform .04s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.clinic-content .btn:active{transform:translateY(1px);}
.clinic-content .btn:focus,.clinic-content .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(14,124,134,.18);}

.clinic-content .btn-primary{background:var(--c-teal);border-color:var(--c-teal);color:#fff;
    box-shadow:0 1px 2px rgba(14,124,134,.25);}
.clinic-content .btn-primary:hover{background:var(--c-teal-d);border-color:var(--c-teal-d);color:#fff;
    box-shadow:0 4px 12px rgba(14,124,134,.30);}

.clinic-content .btn-secondary{background:#fff;border-color:var(--c-line);color:var(--c-ink);}
.clinic-content .btn-secondary:hover{background:#fff;border-color:var(--c-teal);color:var(--c-teal);}

.clinic-content .btn-outline-primary{background:#fff;color:var(--c-teal);border-color:var(--c-teal);}
.clinic-content .btn-outline-primary:hover{background:var(--c-teal);border-color:var(--c-teal);color:#fff;}

.clinic-content .btn-outline-secondary{background:#fff;color:var(--c-muted);border-color:var(--c-line);}
.clinic-content .btn-outline-secondary:hover{background:var(--c-bg);color:var(--c-ink);border-color:#cfd8dc;}

.clinic-content .btn-outline-danger{background:#fff;color:#c0392b;border-color:#e6b0aa;}
.clinic-content .btn-outline-danger:hover{background:#c0392b;border-color:#c0392b;color:#fff;}

.clinic-content .btn-sm{padding:5px 11px;border-radius:9px;font-size:.85rem;font-weight:600;}

.btn-teal{display:inline-block;background:var(--c-teal);color:#fff;border:none;border-radius:11px;
    padding:9px 18px;font-weight:600;text-decoration:none;cursor:pointer;
    transition:background .15s ease, box-shadow .15s ease;}
.btn-teal:hover{background:var(--c-teal-d);color:#fff;box-shadow:0 4px 12px rgba(14,124,134,.30);}

/* ---------- Forms ---------- */
.clinic-content .form-control,.clinic-content .form-select{border-radius:11px;border-color:#d9e1e5;padding:10px 13px;}
.clinic-content .form-control:focus,.clinic-content .form-select:focus{border-color:var(--c-teal);
    box-shadow:0 0 0 3px rgba(14,124,134,.12);}
.clinic-content .form-label{font-weight:600;font-size:.88rem;color:#3a474e;}

/* ---------- Badges (statuts) ---------- */
.clinic-content .badge{border-radius:20px;font-weight:600;padding:5px 11px;font-size:.76rem;}
.clinic-content .badge.bg-secondary{background:var(--c-bg) !important;color:var(--c-muted) !important;}
.clinic-content .badge.bg-dark{background:#e5edf0 !important;color:#3a474e !important;}
.clinic-content .badge.bg-info{background:var(--c-blue-bg) !important;color:var(--c-blue) !important;}
.pill{display:inline-block;border-radius:20px;padding:5px 11px;font-size:.78rem;font-weight:600;}
.pill-new{background:var(--c-teal-l);color:var(--c-teal-d);}
.pill-warn{background:var(--c-amber-bg);color:var(--c-amber);}
.pill-ok{background:var(--c-green-bg);color:var(--c-green);}
.pill-muted{background:var(--c-bg);color:var(--c-muted);}

/* ---------- Lists (leads récents) ---------- */
.rowlist{display:flex;flex-direction:column;}
.rowlist .item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--c-line);text-decoration:none;color:inherit;}
.rowlist .item:first-child{border-top:none;}
.rowlist .item:hover{background:#f7fbfb;border-radius:10px;}
.rowlist .av{width:38px;height:38px;border-radius:50%;background:var(--c-teal-l);color:var(--c-teal-d);
    display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.rowlist .main{flex:1;min-width:0;}
.rowlist .main .t{font-weight:600;}
.rowlist .main .s{font-size:.83rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rowlist .when{font-size:.78rem;color:var(--c-muted);white-space:nowrap;}

/* ---------- Progress (addons) ---------- */
.prog{height:8px;background:#eef2f4;border-radius:20px;overflow:hidden;margin-top:6px;}
.prog > span{display:block;height:100%;background:var(--c-teal);border-radius:20px;}

.empty{color:var(--c-muted);padding:22px 4px;text-align:center;}

/* ---------- Responsive ---------- */
@media(max-width:820px){
    .clinic-side{position:fixed;left:-260px;z-index:40;transition:left .2s;}
    .clinic-shell.open .clinic-side{left:0;box-shadow:0 0 40px rgba(0,0,0,.3);}
    .clinic-burger{display:block;}
    .clinic-content{padding:20px 16px;}
}

/* ---------- RTL (hébreu, arabe) ---------- */
/* dir="rtl" sur .clinic-shell : flex + texte s'inversent automatiquement.
   On corrige seulement ce que la direction ne gère pas tout seul. */
[dir="rtl"] .stat .stat-ico{right:auto;left:18px;}
[dir="rtl"] .me-3{margin-right:0 !important;margin-left:1rem !important;}
[dir="rtl"] .ms-2{margin-left:0 !important;margin-right:.5rem !important;}
@media(max-width:820px){
    [dir="rtl"] .clinic-side{left:auto;right:-260px;}
    [dir="rtl"].clinic-shell.open .clinic-side{right:0;left:auto;}
}

/* ---------- Liens d'action dans les tableaux → boutons ---------- */
.clinic-content table a{
    display:inline-block;padding:6px 13px;border:1px solid var(--c-teal);color:var(--c-teal);
    border-radius:9px;font-weight:600;font-size:.85rem;text-decoration:none;line-height:1.2;white-space:nowrap;
}
.clinic-content table a:hover{background:var(--c-teal);color:#fff;}

/* Liens de retour « ← … » seuls dans un <p> → bouton discret */
.clinic-content > p > a:only-child{
    display:inline-block;padding:7px 14px;border:1px solid var(--c-line);border-radius:10px;
    color:var(--c-ink);text-decoration:none;font-weight:600;font-size:.9rem;
}
.clinic-content > p > a:only-child:hover{background:#fff;border-color:var(--c-teal);color:var(--c-teal);}

/* ============================================================================
   SKIN « CHARTE DENTALMASTER 2026 » — BACK-OFFICE COMPLET (20/08/2026)
   Couvre l'espace CLINIQUE **et** le SUPER ADMIN : les deux layouts partagent
   .clinic-shell, donc ce seul bloc habille tous les écrans d'un coup.
   Bloc AJOUTÉ EN FIN de fichier : la cascade gagne, l'ancien thème teal reste
   intact au-dessus. ROLLBACK = supprimer ce bloc, rien d'autre.
   Palette : graphite #180B04 · clair #F6F5F3 · cuivre #FF7A45 (sur SOMBRE)
   / #B23F12 (sur CLAIR). INTERDITS : blanc sur #FF7A45, #FF7A45 sur fond clair.
   ============================================================================ */
:root{
    --c-teal:#B23F12; --c-teal-d:#8E3210; --c-teal-l:#F8E9E1;   /* accents cuivre */
    --c-side-1:#241209; --c-side-2:#140903;                     /* barre latérale graphite */
    --c-side-text:#C6B3A6; --c-side-hover:#31190D;
    --c-bg:#F6F5F3; --c-card:#FFFFFF; --c-line:#EAE3DD;         /* fond clair de la charte */
    --c-ink:#180B04; --c-muted:#7A695E;
}

/* Titres en Syne (chargée par public-design-system.css, présent sur toutes les pages). */
.clinic-content h1,.clinic-content h2,.clinic-brand-name,.panel-head h2{
    font-family:"Syne","Manrope",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;
}

/* Marque : dent cuivre VIF sur la barre sombre (autorisé sur fond sombre). */
.clinic-brand-logo{background:rgba(255,122,69,.16);color:#FF7A45;}

/* Menu actif + halos : cuivre au lieu du teal. */
.clinic-nav-link.active{background:#B23F12;color:#F6F5F3;box-shadow:0 4px 14px rgba(178,63,18,.38);}
.clinic-side-foot .help-btn:hover{background:#B23F12;border-color:#B23F12;color:#F6F5F3;}
.clinic-content .btn:focus,.clinic-content .btn:focus-visible{box-shadow:0 0 0 3px rgba(178,63,18,.20);}

/* Boutons pleins : cuivre FONCÉ + texte clair (jamais blanc sur cuivre vif). */
.clinic-content .btn-primary,.btn-teal{background:#B23F12;border-color:#B23F12;color:#F6F5F3;}
.clinic-content .btn-primary:hover,.btn-teal:hover{background:#8E3210;border-color:#8E3210;color:#F6F5F3;box-shadow:0 4px 12px rgba(178,63,18,.30);}
.clinic-content .btn-outline-primary{color:#B23F12;border-color:#B23F12;}
.clinic-content .btn-outline-primary:hover{background:#B23F12;color:#F6F5F3;}

/* Champs : focus cuivre foncé (contraste AA sur fond clair). */
.clinic-content .form-control:focus,.clinic-content .form-select:focus{
    border-color:#B23F12;box-shadow:0 0 0 3px rgba(178,63,18,.14);
}
/* Liens de contenu : cuivre foncé (le vif est interdit sur clair). */
.clinic-content a{color:#B23F12;}

/* ============================================================
   Boîte de réception (2 volets) — /clinic/inbox
   Vue alternative à /clinic/leads : la liste reste visible pendant
   qu'on lit le détail. La recherche avancée reste sur /clinic/leads.
   ============================================================ */
.inbox{display:grid;grid-template-columns:370px minmax(0,1fr);
    border:1px solid var(--c-line);border-radius:14px;background:var(--c-card);
    box-shadow:var(--c-shadow);overflow:hidden;height:calc(100vh - 210px);min-height:520px;}
.inbox-list{display:flex;flex-direction:column;min-height:0;border-inline-end:1px solid var(--c-line);}
.inbox-head{padding:12px 14px;border-bottom:1px solid var(--c-line);}
.inbox-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.inbox-chip{border:1px solid var(--c-line);background:var(--c-card);color:var(--c-muted);
    border-radius:20px;padding:4px 11px;font-size:.78rem;font-weight:600;cursor:pointer;}
.inbox-chip:hover{color:var(--c-ink);}
.inbox-chip.on{background:var(--c-teal);border-color:var(--c-teal);color:#fff;}
.inbox-scroll{overflow-y:auto;flex:1;min-height:0;}
.inbox-item{display:grid;grid-template-columns:4px 1fr;width:100%;text-align:start;font:inherit;color:inherit;
    background:none;border:0;border-bottom:1px solid var(--c-line);padding:0;cursor:pointer;}
.inbox-item:hover .ii{background:rgba(0,0,0,.025);}
.inbox-item.sel .ii{background:var(--c-teal-l);}
.inbox-item.sel .ib{background:var(--c-teal);}
.inbox-item .ib{background:transparent;}
.inbox-item .ii{padding:11px 13px;min-width:0;}
.ii-top{display:flex;align-items:baseline;gap:8px;}
.ii-name{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inbox-item.unread .ii-name{font-weight:800;}
.ii-when{font-size:.75rem;color:var(--c-muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.ii-motif{margin-top:2px;font-size:.84rem;color:var(--c-muted);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ii-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;}
.inbox-read{overflow-y:auto;min-height:0;background:var(--c-bg);}
.inbox-read-head{background:var(--c-card);border-bottom:1px solid var(--c-line);
    padding:16px 20px;position:sticky;top:0;z-index:5;}
.inbox-av{width:42px;height:42px;border-radius:50%;background:var(--c-teal-l);color:var(--c-teal-d);
    display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.inbox-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;}
.inbox-body{padding:16px 20px 30px;display:flex;flex-direction:column;gap:12px;}
.inbox-body .panel{margin-bottom:0;}
.conv-b{display:flex;flex-direction:column;gap:8px;}
.msgb{max-width:76%;padding:9px 12px;border-radius:13px;font-size:.9rem;}
.msgb .who{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;opacity:.6;margin-bottom:3px;}
.msgb.bot{background:var(--c-bg);border:1px solid var(--c-line);align-self:flex-start;border-end-start-radius:4px;}
.msgb.pat{background:var(--c-teal-l);border:1px solid var(--c-line);align-self:flex-end;border-end-end-radius:4px;}
@media(max-width:980px){
    .inbox{grid-template-columns:1fr;height:auto;}
    .inbox-list{border-inline-end:0;border-bottom:1px solid var(--c-line);max-height:46vh;}
    .inbox-read-head{position:static;}
}

/* Bouton « Bloquer / Archiver » en rouge — partagé par /clinic/leads et /clinic/inbox. */
.clinic-content .lead-archive{color:#b3261e !important;border-color:#e7c4c1 !important;}
.clinic-content .lead-archive:hover{background:#b3261e !important;color:#fff !important;border-color:#b3261e !important;}

/* En-tete de panneau « conversation » : le bouton de traduction reste A COTE du titre.
   Sans cette regle, .panel-head (justify-content:space-between) l'envoie au bord oppose
   du panneau — en RTL il se retrouve seul a l'autre bout, loin de la conversation. */
.panel-head.conv-head{justify-content:flex-start;gap:14px;flex-wrap:wrap;}
.panel-head.conv-head .btn{flex:0 0 auto;}