/* NASORA CRM — Human UI layer
   Objectif : rendre chaque écran plus chaleureux, clair et immédiatement compréhensible.
   Couche visuelle uniquement : aucune modification de la logique métier.
*/
:root{
  --ns-human-green:#17643f;
  --ns-human-green-dark:#0f3f2a;
  --ns-human-green-light:#eaf5ef;
  --ns-human-ink:#17231c;
  --ns-human-muted:#66736b;
  --ns-human-border:#e1e8e3;
  --ns-human-surface:#ffffff;
  --ns-human-bg:#f7faf8;
  --ns-human-radius:14px;
  --ns-human-shadow:0 8px 26px rgba(18,42,29,.06);
}

body{background:var(--ns-human-bg)!important;color:var(--ns-human-ink)!important;line-height:1.5;}
main.container{padding-top:22px;padding-bottom:28px;}
h1,h2,h3,h4{font-weight:700;}
h1{font-size:clamp(1.45rem,2.4vw,2rem);}
h2{font-size:clamp(1.15rem,1.8vw,1.45rem);}
p{color:inherit;}
.page-title,.section-title{margin-bottom:6px;}
.page-subtitle,.section-subtitle,.subtitle,.muted{color:var(--ns-human-muted);}

.card,.panel,.dashboard-card,.kpi-card,.chart-card,.summary-card,.crm-surface,.data-card,.page-hero,.crm-page-hero,.filter-form{
  border:1px solid var(--ns-human-border)!important;
  border-radius:var(--ns-human-radius)!important;
  box-shadow:var(--ns-human-shadow)!important;
  background:var(--ns-human-surface)!important;
}

.kpi-card{padding:18px!important;}
.kpi-card .kpi-value,.kpi-card .value,.kpi-card strong{letter-spacing:-.025em;}
.kpi-card .kpi-label,.kpi-card .label{color:var(--ns-human-muted);font-weight:600;}

form label{display:block;margin-bottom:5px;}
input:not([type="hidden"]),select,textarea{font-size:.94rem!important;}
input::placeholder,textarea::placeholder{color:#98a49d;}
button,.btn,.btn-submit{font-weight:650!important;min-height:40px;}
.btn-primary,.btn-success,.btn-submit,[class*="btn-primary"]{background:var(--ns-human-green)!important;border-color:var(--ns-human-green)!important;}
.btn-primary:hover,.btn-success:hover,.btn-submit:hover,[class*="btn-primary"]:hover{background:var(--ns-human-green-dark)!important;border-color:var(--ns-human-green-dark)!important;}
.btn-secondary,.btn-light,.btn-outline-secondary{background:#fff!important;color:#344239!important;border-color:#cfdad3!important;}

/* =========================================================
   TABLEAUX — système visuel commun à tout le CRM
   ========================================================= */
.table-responsive,
.table-wrapper,
.table-container,
.data-table-wrapper,
.responsive-table-wrapper,
.crm-table-card,
.responsive-table,
.panel:has(table),
.crm-surface:has(table),
.card:has(table),
.dashboard-card:has(table){
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#b7c7bd transparent;
}

.table-responsive::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.table-container::-webkit-scrollbar,
.data-table-wrapper::-webkit-scrollbar,
.responsive-table-wrapper::-webkit-scrollbar,
.crm-table-card::-webkit-scrollbar,
.responsive-table::-webkit-scrollbar,
.panel:has(table)::-webkit-scrollbar,
.crm-surface:has(table)::-webkit-scrollbar,
.card:has(table)::-webkit-scrollbar,
.dashboard-card:has(table)::-webkit-scrollbar{height:8px;}

.table-responsive::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb,
.data-table-wrapper::-webkit-scrollbar-thumb,
.responsive-table-wrapper::-webkit-scrollbar-thumb,
.crm-table-card::-webkit-scrollbar-thumb,
.responsive-table::-webkit-scrollbar-thumb,
.panel:has(table)::-webkit-scrollbar-thumb,
.crm-surface:has(table)::-webkit-scrollbar-thumb,
.card:has(table)::-webkit-scrollbar-thumb,
.dashboard-card:has(table)::-webkit-scrollbar-thumb{
  background:#b7c7bd;
  border-radius:999px;
}

/* Table directe ou table placée dans un conteneur : largeur réelle conservée. */
table.responsive-table,
table.data-table,
.responsive-table > table,
.responsive-table table,
.table-responsive table,
.table-wrapper table,
.table-container table,
.crm-table-card table,
.panel:has(table) > table,
.crm-surface:has(table) > table,
.card:has(table) > table,
.dashboard-card:has(table) > table{
  width:max-content;
  min-width:100%;
  max-width:none;
  border-collapse:separate!important;
  border-spacing:0;
  margin:0!important;
  background:var(--ns-human-surface);
  border:1px solid var(--ns-human-border);
  border-radius:12px;
  box-shadow:0 3px 14px rgba(18,42,29,.05);
  overflow:visible;
}

/* Cellules : le contenu revient à la ligne au lieu de sortir de l'écran. */
.responsive-table th,
.responsive-table td,
.data-table th,
.data-table td,
.responsive-table table th,
.responsive-table table td,
.table-responsive table th,
.table-responsive table td,
.table-wrapper table th,
.table-wrapper table td,
.table-container table th,
.table-container table td,
.crm-table-card table th,
.crm-table-card table td,
.panel:has(table) table th,
.panel:has(table) table td,
.crm-surface:has(table) table th,
.crm-surface:has(table) table td,
.card:has(table) table th,
.card:has(table) table td,
.dashboard-card:has(table) table th,
.dashboard-card:has(table) table td{
  padding:13px 15px;
  border-bottom:1px solid var(--ns-human-border);
  vertical-align:middle;
  text-align:left;
  font-size:.86rem;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:normal;
}

.responsive-table thead th,
.data-table thead th,
.responsive-table table thead th,
.table-responsive table thead th,
.table-wrapper table thead th,
.table-container table thead th,
.crm-table-card table thead th,
.panel:has(table) table thead th,
.crm-surface:has(table) table thead th,
.card:has(table) table thead th,
.dashboard-card:has(table) table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#f0f6f2!important;
  color:#24563d!important;
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.055em!important;
  text-transform:uppercase;
  white-space:nowrap;
  border-bottom:2px solid #d5e1da;
}

.responsive-table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.responsive-table table tbody tr:last-child td,
.table-responsive table tbody tr:last-child td,
.table-wrapper table tbody tr:last-child td,
.table-container table tbody tr:last-child td,
.crm-table-card table tbody tr:last-child td,
.panel:has(table) table tbody tr:last-child td,
.crm-surface:has(table) table tbody tr:last-child td,
.card:has(table) table tbody tr:last-child td,
.dashboard-card:has(table) table tbody tr:last-child td{border-bottom:0;}

.responsive-table tbody tr:hover td,
.data-table tbody tr:hover td,
.responsive-table table tbody tr:hover td,
.table-responsive table tbody tr:hover td,
.table-wrapper table tbody tr:hover td,
.table-container table tbody tr:hover td,
.crm-table-card table tbody tr:hover td,
.panel:has(table) table tbody tr:hover td,
.crm-surface:has(table) table tbody tr:hover td,
.card:has(table) table tbody tr:hover td,
.dashboard-card:has(table) table tbody tr:hover td{background:#f5faf7!important;}

.responsive-table td,
.data-table td,
.responsive-table table td,
.table-responsive table td,
.table-wrapper table td,
.table-container table td,
.crm-table-card table td,
.panel:has(table) table td,
.crm-surface:has(table) table td,
.card:has(table) table td,
.dashboard-card:has(table) table td{max-width:360px;}

.responsive-table td:first-child,
.data-table td:first-child,
.responsive-table table td:first-child,
.table-responsive table td:first-child,
.table-wrapper table td:first-child,
.table-container table td:first-child,
.crm-table-card table td:first-child,
.panel:has(table) table td:first-child,
.crm-surface:has(table) table td:first-child,
.card:has(table) table td:first-child,
.dashboard-card:has(table) table td:first-child{white-space:nowrap;}

.table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-width:max-content;
  align-items:center;
}
.table-actions form{margin:0;}
.table-actions .btn{white-space:nowrap;}

/* Indication discrète quand un tableau dépasse la largeur disponible. */
.crm-table-card:has(table)::after,
.table-responsive:has(table)::after,
.responsive-table:has(table)::after,
.panel:has(table)::after,
.crm-surface:has(table)::after{
  content:'Faites défiler horizontalement pour voir toutes les colonnes';
  display:block;
  width:max-content;
  margin:7px 0 0 auto;
  padding:3px 8px;
  color:#7a8981;
  font-size:.68rem;
  line-height:1.3;
  pointer-events:none;
}

/* Première colonne fixe sur desktop pour garder le contexte pendant le défilement. */
@media(min-width:901px){
  .responsive-table th:first-child,.responsive-table td:first-child,
  .data-table th:first-child,.data-table td:first-child,
  .responsive-table table th:first-child,.responsive-table table td:first-child,
  .table-responsive table th:first-child,.table-responsive table td:first-child,
  .table-wrapper table th:first-child,.table-wrapper table td:first-child,
  .table-container table th:first-child,.table-container table td:first-child,
  .crm-table-card table th:first-child,.crm-table-card table td:first-child,
  .panel:has(table) table th:first-child,.panel:has(table) table td:first-child,
  .crm-surface:has(table) table th:first-child,.crm-surface:has(table) table td:first-child,
  .card:has(table) table th:first-child,.card:has(table) table td:first-child,
  .dashboard-card:has(table) table th:first-child,.dashboard-card:has(table) table td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--ns-human-surface);
  }
  .responsive-table thead th:first-child,.data-table thead th:first-child,
  .responsive-table table thead th:first-child,.table-responsive table thead th:first-child,
  .table-wrapper table thead th:first-child,.table-container table thead th:first-child,
  .crm-table-card table thead th:first-child,
  .panel:has(table) table thead th:first-child,.crm-surface:has(table) table thead th:first-child,
  .card:has(table) table thead th:first-child,.dashboard-card:has(table) table thead th:first-child{
    z-index:5;
    background:#f0f6f2!important;
  }
}

.prospection-comment,
.prospection-comment-cell,
.long-text,
.cell-text,
.text-cell{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:left;
}

@media(max-width:820px){
  .table-responsive,.table-wrapper,.table-container,.data-table-wrapper,
  .responsive-table-wrapper,.crm-table-card,.responsive-table,
  .panel:has(table),.crm-surface:has(table),.card:has(table),.dashboard-card:has(table){margin-left:0;margin-right:0;}
  .responsive-table th,.responsive-table td,
  .data-table th,.data-table td,
  .responsive-table table th,.responsive-table table td,
  .table-responsive table th,.table-responsive table td,
  .table-wrapper table th,.table-wrapper table td,
  .table-container table th,.table-container table td,
  .crm-table-card table th,.crm-table-card table td,
  .panel:has(table) table th,.panel:has(table) table td,
  .crm-surface:has(table) table th,.crm-surface:has(table) table td,
  .card:has(table) table th,.card:has(table) table td,
  .dashboard-card:has(table) table th,.dashboard-card:has(table) table td{
    padding:11px 12px;
    font-size:.82rem;
  }
  .responsive-table thead th,.data-table thead th,
  .responsive-table table thead th,.table-responsive table thead th{font-size:.68rem!important;}
  .table-actions{flex-direction:column;align-items:stretch;}
  .table-actions .btn{width:100%;text-align:center;}
  .crm-table-card:has(table)::after,.table-responsive:has(table)::after,
  .responsive-table:has(table)::after,.panel:has(table)::after,.crm-surface:has(table)::after{font-size:.64rem;}
  main.container{padding-left:12px!important;padding-right:12px!important;}
  .card,.panel,.dashboard-card,.kpi-card,.chart-card,.summary-card,.crm-surface,.data-card{border-radius:12px!important;}
  .kpi-card{padding:14px!important;}
  .page-title{font-size:1.35rem;}
  button,.btn,.btn-submit{min-height:42px;}
}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(23,100,63,.22)!important;
  outline-offset:2px!important;
  border-color:var(--ns-human-green)!important;
}

.flash{border-radius:12px!important;padding:12px 15px!important;font-weight:600;}
.flash-success{background:#edf8f1!important;color:#145c38!important;border-color:#cce8d6!important;}
.flash-info{background:#eef6fb!important;color:#24536d!important;border-color:#cfe2ef!important;}
.flash-warning{background:#fff8e8!important;color:#76530b!important;border-color:#f0dfad!important;}
.flash-danger,.flash-error{background:#fff1f0!important;color:#8a2f2a!important;border-color:#efcbc7!important;}

.empty-state,.no-data,.empty-message{text-align:center;padding:32px 18px;color:var(--ns-human-muted);}
.empty-state strong,.no-data strong,.empty-message strong{display:block;color:var(--ns-human-ink);font-size:1.05rem;margin-bottom:5px;}

.site-nav{font-size:.88rem;}
.nav-dropdown-trigger,.nav-logout-form button,.site-nav a{font-weight:600;}
footer{color:#7a857e!important;font-size:.82rem;}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;}}


/* ESPACE VISITEUR MÉDICAL — hiérarchie claire et libellés neutres */
.commercial-home-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 26px!important;
  margin-bottom:16px;
  background:linear-gradient(135deg,#eef7f1 0%,#fff 68%)!important;
}
.commercial-home-hero .crm-overline{
  color:var(--ns-human-green)!important;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.12em;
}
.commercial-home-hero h1{
  margin:5px 0 4px!important;
  font-size:clamp(1.45rem,2.3vw,1.9rem)!important;
  letter-spacing:-.025em;
}
.commercial-home-hero .crm-subtitle{
  max-width:680px;
  margin:0!important;
  color:var(--ns-human-muted)!important;
  font-size:.88rem;
}
.commercial-home-hero .btn{
  flex:0 0 auto;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(23,100,63,.12);
}
.commercial-actions{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px!important;
  margin-bottom:18px;
}
.commercial-actions .action-card{
  min-height:76px;
  padding:13px 14px!important;
  border:1px solid var(--ns-human-border)!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(18,42,29,.045)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.commercial-actions .action-card:hover{
  transform:translateY(-2px);
  border-color:#cbdcd1!important;
  box-shadow:0 10px 22px rgba(18,42,29,.08)!important;
}
.commercial-actions .action-card > span{
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center;
  flex:0 0 32px;
  border-radius:9px!important;
  background:var(--ns-human-green-light)!important;
  font-size:.95rem;
}
.commercial-actions .action-card strong{
  display:block;
  color:var(--ns-human-ink)!important;
  font-size:.82rem;
  line-height:1.25;
}
.commercial-actions .action-card small{
  display:block;
  margin-top:3px;
  color:var(--ns-human-muted)!important;
  font-size:.7rem;
  line-height:1.3;
}
.commercial-actions .action-card-highlight{
  background:#f7fbf8!important;
}
@media(max-width:1100px){
  .commercial-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  .commercial-home-hero{align-items:flex-start;flex-direction:column;padding:20px!important;}
  .commercial-home-hero .btn{width:100%;text-align:center;}
  .commercial-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;}
  .commercial-actions .action-card{min-height:70px;padding:11px!important;}
}
@media(max-width:480px){
  .commercial-actions{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){
  .commercial-actions .action-card{transition:none;}
  .commercial-actions .action-card:hover{transform:none;}
}
