/* ========================================================================
   GELNIKA V3.16.267 — REFONTE UI BASEE SUR L'ARCHIVE GELNIKA FOURNIE
   Référence visuelle : gelnika/assets/app.css + src/input.css du projet fourni.
   Objectif : interface métier nette, légère, responsive et interactive.
   IMPORTANT : aucune couleur fonctionnelle GELNIKA n'est remplacée.
   ======================================================================== */
:root{
  --g267-bg:#f9fafb;
  --g267-card:#ffffff;
  --g267-text:#1f2937;
  --g267-muted:#6b7280;
  --g267-border:#e5e7eb;
  --g267-border-strong:#d1d5db;
  --g267-soft:#f3f4f6;
  --g267-red:#e33434;
  --g267-radius:10px;
  --g267-shadow:0 2px 6px rgba(0,0,0,.08);
  --g267-shadow-hover:0 8px 22px rgba(17,24,39,.10);
  --g267-focus:0 0 0 3px rgba(227,52,52,.12);
}

html,body{background:var(--g267-bg)!important;color:var(--g267-text)!important}
html body,html body button,html body input,html body select,html body textarea{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
}
html body .frinet-v281-shell{min-height:100vh!important;background:var(--g267-bg)!important}
html body .frinet-v281-content{max-width:1500px!important;margin:0 auto!important;padding:20px 18px 42px!important;color:var(--g267-text)!important}

/* TOPBAR — reprise de la logique .topbar du projet GELNIKA fourni. */
html body .frinet-v281-top{
  position:sticky!important;top:0!important;z-index:900!important;
  min-height:64px!important;padding:9px 16px!important;
  background:rgba(255,255,255,.98)!important;
  border:0!important;border-bottom:1px solid var(--g267-border)!important;
  box-shadow:0 2px 6px rgba(0,0,0,.06)!important;
  backdrop-filter:blur(6px)!important;
}
html body .frinet-v281-brand{font-weight:700!important;color:var(--g267-text)!important}
html body .plane-primary-tabs-v223{
  display:flex!important;align-items:center!important;gap:4px!important;
  padding:3px!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
html body .plane-primary-tabs-v223>.plane-primary-tab-v223,
html body .plane-primary-tabs-v223>details>summary{
  min-height:40px!important;padding:8px 12px!important;border-radius:9px!important;
  border:1px solid transparent!important;background:transparent!important;color:#374151!important;
  box-shadow:none!important;font-weight:650!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .10s ease!important;
}
html body .plane-primary-tabs-v223>.plane-primary-tab-v223:hover,
html body .plane-primary-tabs-v223>details>summary:hover{
  background:var(--g267-soft)!important;border-color:var(--g267-border)!important;transform:translateY(-1px)!important;
}
html body .plane-primary-tabs-v223>.plane-primary-tab-v223.active,
html body .plane-primary-tabs-v223>details.active>summary,
html body .plane-primary-tabs-v223>.plane-primary-new-v223{
  background:var(--g267-red)!important;border-color:var(--g267-red)!important;color:#fff!important;
  box-shadow:0 2px 5px rgba(227,52,52,.20)!important;
}

/* Menus déroulants — blanc, rayon 10, ombre légère comme le projet source. */
html body :is(.g31521-tools-menu,.plane-client-dd-menu-v291,.g316261-tech-menu){
  padding:6px!important;background:#fff!important;border:1px solid var(--g267-border)!important;
  border-radius:10px!important;box-shadow:0 10px 28px rgba(17,24,39,.14)!important;overflow:hidden!important;
}
html body :is(.g31521-tools-menu,.plane-client-dd-menu-v291,.g316261-tech-menu) a{
  margin:1px 0!important;padding:9px 11px!important;border-radius:8px!important;border:1px solid transparent!important;
  transition:background .16s ease,color .16s ease,transform .10s ease!important;
}
html body :is(.g31521-tools-menu,.plane-client-dd-menu-v291,.g316261-tech-menu) a:hover{
  background:#f3f4f6!important;border-color:#e5e7eb!important;transform:translateX(2px)!important;
}

/* CARTES / PANELS — même principe que .card dans app.css fourni. */
html body .frinet-v281-content :is(
  .fv28c,.g15-box,.g15-card,.ca220-box,.ca220-card,.g132-card,.g168,.ct220-card,
  .p206-panel,.p206-date,.pm313-panel,.pm313-admin-card,.pm222-progress,.pm222-filters,
  .g316261-it-panel,.g316261-it-card,.g171-card,.g176-card,.g226-card,.gpp-card,.g81-card,.g83-card
){
  background:var(--g267-card)!important;border:1px solid var(--g267-border)!important;
  border-radius:var(--g267-radius)!important;box-shadow:var(--g267-shadow)!important;
}
html body .frinet-v281-content :is(.fv28c,.g15-box,.g15-card,.ca220-box,.g132-card,.g168,.ct220-card,.p206-panel,.g316261-it-panel,.g171-card,.g176-card,.gpp-card)::before,
html body .frinet-v281-content :is(.fv28c,.g15-box,.g15-card,.ca220-box,.g132-card,.g168,.ct220-card,.p206-panel,.g316261-it-panel,.g171-card,.g176-card,.gpp-card)::after{
  display:none!important;content:none!important;
}
html body .frinet-v281-content :is(.g15-card,.g132-card,.g316261-it-card,.p206-card){
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease!important;
}
html body .frinet-v281-content :is(.g15-card,.g132-card,.g316261-it-card,.p206-card):hover{
  transform:translateY(-1px)!important;box-shadow:var(--g267-shadow-hover)!important;border-color:#d8dde5!important;
}

/* Dashboard : cartes indépendantes, simples et lisibles. */
html body .p206-cards{display:grid!important;gap:12px!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
html body .p206-card{
  background:#fff!important;border:1px solid var(--g267-border)!important;border-radius:10px!important;
  padding:16px!important;box-shadow:var(--g267-shadow)!important;position:relative!important;overflow:hidden!important;
}
html body .p206-card::before,html body .p206-card::after{display:none!important;content:none!important}
html body .p206-num{color:#111827!important;letter-spacing:-.03em!important}
html body .p206-dashboard-accordion{background:#fff!important;border:1px solid var(--g267-border)!important;border-radius:10px!important;box-shadow:var(--g267-shadow)!important}
html body .p206-dashboard-accordion>summary{background:#fff!important;border-radius:10px!important}
html body .p206-dashboard-accordion[open]>summary{border-bottom:1px solid var(--g267-border)!important;border-radius:10px 10px 0 0!important}

/* TABLES — directement calquées sur la logique .table du projet fourni. */
html body .frinet-v281-content table{
  width:100%!important;background:#fff!important;border:1px solid var(--g267-border)!important;
  border-radius:10px!important;border-collapse:separate!important;border-spacing:0!important;
  overflow:hidden!important;box-shadow:var(--g267-shadow)!important;
}
html body .frinet-v281-content table thead th{
  background:#f3f4f6!important;color:#374151!important;border-bottom:1px solid var(--g267-border)!important;
  padding:10px 12px!important;font-size:11px!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important;
}
html body .frinet-v281-content table td{padding:10px 12px!important;border-bottom:1px solid #eef0f3!important;vertical-align:middle!important}
html body .frinet-v281-content table tbody tr{transition:background .14s ease!important}
html body .frinet-v281-content table tbody tr:hover{background:#f9fafb!important}
html body .frinet-v281-content table tbody tr:last-child td{border-bottom:0!important}

/* FORMULAIRES — app.css fourni : bordure fine, rayon 10, focus propre. */
html body .frinet-v281-content :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  background:#fff!important;color:var(--g267-text)!important;border:1px solid var(--g267-border-strong)!important;
  border-radius:10px!important;padding:.60rem .72rem!important;box-shadow:none!important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
html body .frinet-v281-content :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{
  outline:none!important;border-color:var(--g267-red)!important;box-shadow:var(--g267-focus)!important;
}
html body .frinet-v281-content label{color:#374151!important;font-weight:600!important}

/* BOUTONS — forme/interactivité du projet fourni. PAS de recoloration forcée. */
html body .frinet-v281-content :is(
  button,.button,.frinet-btn,.fv28b,.g15-btn,.ci220-btn,.ci220-card-btn,.ct220-btn,.g132-save,.g168-add,
  .g171-actions button,.g316261-btn,.g316258-mini,.pm313-btn,.pm222-chip,.pm222-open,.plane-v290-actions a,
  .plane-v290-actions button,.plane-v290-periods a,.plane-v290-periods button,.gpp-btn
){
  border-radius:10px!important;font-weight:650!important;letter-spacing:0!important;
  box-shadow:0 1px 3px rgba(0,0,0,.10)!important;text-shadow:none!important;
  transition:filter .18s ease,transform .10s ease,box-shadow .18s ease!important;
}
html body .frinet-v281-content :is(
  button,.button,.frinet-btn,.fv28b,.g15-btn,.ci220-btn,.ci220-card-btn,.ct220-btn,.g132-save,.g168-add,
  .g171-actions button,.g316261-btn,.g316258-mini,.pm313-btn,.pm222-chip,.pm222-open,.plane-v290-actions a,
  .plane-v290-actions button,.plane-v290-periods a,.plane-v290-periods button,.gpp-btn
):hover{
  transform:translateY(-1px)!important;filter:brightness(.97)!important;box-shadow:0 4px 10px rgba(0,0,0,.12)!important;
}
html body .frinet-v281-content :is(
  button,.button,.frinet-btn,.fv28b,.g15-btn,.ci220-btn,.ci220-card-btn,.ct220-btn,.g132-save,.g168-add,
  .g171-actions button,.g316261-btn,.g316258-mini,.pm313-btn,.pm222-chip,.pm222-open,.plane-v290-actions a,
  .plane-v290-actions button,.plane-v290-periods a,.plane-v290-periods button,.gpp-btn
):active{transform:translateY(0)!important;box-shadow:0 1px 2px rgba(0,0,0,.09)!important}

/* Boutons période : visuel propre, couleur active GELNIKA inchangée. */
html body .frinet-v281-content .plane-v290-periods{display:flex!important;gap:8px!important;flex-wrap:wrap!important;margin:12px 0 16px!important}
html body .frinet-v281-content .plane-v290-periods :is(a,button){
  min-height:42px!important;padding:8px 15px!important;background:#fff!important;color:#374151!important;
  border:1px solid var(--g267-border-strong)!important;text-decoration:none!important;
}
html body .frinet-v281-content .plane-v290-periods :is(a,button).active,
html body .frinet-v281-content .plane-v290-periods :is(a,button).on{
  background:var(--g267-red)!important;border-color:var(--g267-red)!important;color:#fff!important;
}

/* COULEURS METIER — protection absolue. */
html body [data-gelnika-tone="green"],
html body :is(button,a,input[type="submit"],input[type="button"]).gelnika-semantic-green,
html body .frinet-v281-content :is(button,a,input[type="submit"],input[type="button"]).green,
html body .g15-btn.green,html body .g316261-btn.green,html body .pm313-btn.green,html body .gpp-btn.green,
html body .pt-map,html body .pt-wa,html body .pt-v258-arrive,html body .pt-v260-send,
html body [style*="#16804c"],html body [style*="#15803d"],html body [style*="#177a4b"],
html body [style*="#168a4b"],html body [style*="#168a4a"],html body [style*="#209a63"],html body [style*="#25D366"],html body [style*="#25d366"]{
  background-color:var(--gelnika-semantic-bg,#16804c)!important;background-image:none!important;
  border-color:var(--gelnika-semantic-bg,#16804c)!important;color:#fff!important;
}
html body [data-gelnika-tone="orange"],html body .gelnika-semantic-orange{
  background-color:var(--gelnika-semantic-bg,#d97706)!important;background-image:none!important;border-color:var(--gelnika-semantic-bg,#d97706)!important;color:#fff!important;
}
html body [data-gelnika-tone="blue"],html body .gelnika-semantic-blue{
  background-color:var(--gelnika-semantic-bg,#1e63a5)!important;background-image:none!important;border-color:var(--gelnika-semantic-bg,#1e63a5)!important;color:#fff!important;
}
html body [data-gelnika-tone="gray"],html body .gelnika-semantic-gray{
  background-color:var(--gelnika-semantic-bg,#6b7280)!important;background-image:none!important;border-color:var(--gelnika-semantic-bg,#6b7280)!important;color:#fff!important;
}

/* MESSAGERIE — les états métier restent strictement visibles. */
html body .frinet-v281-content .ci220-card{border-radius:10px!important;box-shadow:var(--g267-shadow)!important;transition:transform .14s ease,box-shadow .18s ease!important}
html body .frinet-v281-content .ci220-card::before,html body .frinet-v281-content .ci220-card::after{display:none!important;content:none!important}
html body .frinet-v281-content .ci220-card.traffic-green{background:#ecfdf3!important;border:1px solid #22c55e!important;border-left:6px solid #22c55e!important}
html body .frinet-v281-content .ci220-card.traffic-orange{background:#fff7ed!important;border:1px solid #f59e0b!important;border-left:6px solid #f59e0b!important}
html body .frinet-v281-content .ci220-card.traffic-red{background:#fff1f2!important;border:1px solid #ef4444!important;border-left:6px solid #ef4444!important}
html body .frinet-v281-content .ci220-card:hover{transform:translateY(-1px)!important;box-shadow:var(--g267-shadow-hover)!important}
html body .frinet-v281-content .ci220-card.unread{box-shadow:0 0 0 2px rgba(37,211,102,.16),var(--g267-shadow)!important}

/* Details / accordéons : séparation nette, interactions discrètes. */
html body .frinet-v281-content details{border-radius:10px!important}
html body .frinet-v281-content details>summary{cursor:pointer!important;transition:background .15s ease,color .15s ease!important}
html body .frinet-v281-content details>summary:hover{background-color:#f9fafb!important}
html body .frinet-v281-content details[open]>summary{font-weight:700!important}

/* TECH — même langage graphique sans changer les boutons/couleurs terrain. */
html body .pt{background:var(--g267-bg)!important;color:var(--g267-text)!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important}
html body .pt :is(.pt-card,.pt-section,.pt-v31692-panel,.pt-v31692-hub,.pt-head,.pt-card-v215){
  border-radius:10px!important;border-color:var(--g267-border)!important;box-shadow:var(--g267-shadow)!important;
}
html body .pt :is(.pt-btn,.pt-bt,.pt-v31692-tab,button,a.pt-bt){
  border-radius:10px!important;box-shadow:0 1px 3px rgba(0,0,0,.10)!important;transition:transform .10s ease,box-shadow .18s ease,filter .18s ease!important;
}
html body .pt :is(.pt-btn,.pt-bt,.pt-v31692-tab,button,a.pt-bt):hover{transform:translateY(-1px)!important;box-shadow:0 4px 10px rgba(0,0,0,.12)!important}
html body .pt :is(input,select,textarea){border-radius:10px!important;border-color:var(--g267-border-strong)!important;box-shadow:none!important}
html body .pt :is(input,select,textarea):focus{outline:0!important;border-color:var(--g267-red)!important;box-shadow:var(--g267-focus)!important}

/* MOBILE / TABLETTE — inspiré du navbarCollapse fourni : interface compacte et fluide. */
@media(max-width:960px){
  html body .frinet-v281-content{padding:12px 10px 32px!important}
  html body .frinet-v281-top{padding:8px 10px!important;min-height:58px!important}
  html body .plane-primary-tabs-v223{width:100%!important;overflow-x:auto!important;overflow-y:visible!important;scrollbar-width:none!important;padding:3px 0!important;gap:4px!important}
  html body .plane-primary-tabs-v223::-webkit-scrollbar{display:none!important}
  html body .plane-primary-tabs-v223>.plane-primary-tab-v223,
  html body .plane-primary-tabs-v223>details>summary{white-space:nowrap!important;min-height:38px!important;padding:7px 10px!important;font-size:12px!important}
  html body .frinet-v281-content :is(.fv28c,.g15-box,.g15-card,.ca220-box,.g132-card,.g168,.ct220-card,.g316261-it-panel,.g316261-it-card){border-radius:10px!important}
  html body .frinet-v281-content table{display:table!important;min-width:680px!important}
  html body .frinet-v281-content :is(.table-wrap,.g132-scroll,.g15-list,.ct220-grid){max-width:100%!important}
  html body .frinet-v281-content :is(button,.button,.frinet-btn,.fv28b,.g15-btn,.ci220-btn,.ct220-btn,.g132-save,.g168-add,.g316261-btn,.pm313-btn,.gpp-btn){min-height:40px!important}
}
@media(max-width:600px){
  html body .frinet-v281-content{padding:9px 7px 28px!important}
  html body .frinet-v281-top{box-shadow:0 2px 6px rgba(0,0,0,.06)!important}
  html body .p206-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body .p206-card{padding:12px!important}
  html body .frinet-v281-content .plane-v290-periods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  html body .frinet-v281-content .plane-v290-periods :is(a,button){width:100%!important;min-width:0!important;justify-content:center!important;padding:7px 8px!important}
  html body .frinet-v281-content :is(.g15-grid,.g316261-kpis){gap:8px!important}
  html body .frinet-v281-content .ci220-card{border-left-width:5px!important}
}

/* Réduction des mouvements si l'utilisateur le demande. */
@media(prefers-reduced-motion:reduce){
  html body *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}