/* NASORA CRM — V4 GLOBAL UI
   Harmonisation visuelle globale inspirée du nouveau dashboard.
   Couche visuelle uniquement : aucune logique métier, donnée ou base de données modifiée.
*/

:root{
  --v4-green:#08784f;
  --v4-green-dark:#075d3e;
  --v4-green-deep:#064b34;
  --v4-green-soft:#eaf7f0;
  --v4-green-pale:#f3faf6;
  --v4-ink:#123b2b;
  --v4-text:#29483b;
  --v4-muted:#6b7f75;
  --v4-border:#dcebe3;
  --v4-bg:#f5f9f7;
  --v4-white:#fff;
  --v4-shadow:0 8px 28px rgba(11,61,42,.07);
  --v4-shadow-lg:0 14px 38px rgba(11,61,42,.10);
  --v4-radius:16px;
}

html{background:var(--v4-bg);}
body{
  background:
    radial-gradient(circle at 92% 4%,rgba(17,120,79,.055),transparent 22rem),
    var(--v4-bg)!important;
  color:var(--v4-ink)!important;
  font-family:Inter,Arial,sans-serif!important;
}

/* ---------- EN-TÊTE ---------- */
.site-header{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--v4-border)!important;
  box-shadow:0 2px 14px rgba(11,61,42,.035)!important;
}
.header-inner{
  max-width:1500px!important;
  min-height:72px!important;
  padding:10px 24px!important;
}
.brand{gap:12px!important;}
.brand-logo{
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
  border:1px solid var(--v4-border)!important;
  box-shadow:0 4px 12px rgba(11,61,42,.07)!important;
}
.brand-name{
  color:var(--v4-green-deep)!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}
.brand-tagline{color:var(--v4-muted)!important;}
.header-user{
  margin-left:auto!important;
  padding-left:18px!important;
  border-left:1px solid var(--v4-border)!important;
}
.header-user-role{color:var(--v4-green)!important;}
.header-user-name{font-weight:800!important;color:var(--v4-ink)!important;}

/* ---------- NAVIGATION HORIZONTALE ---------- */
.site-nav{
  background:linear-gradient(90deg,var(--v4-green-deep),var(--v4-green),#0a8256)!important;
  border:0!important;
  box-shadow:0 7px 20px rgba(6,75,52,.14)!important;
}
.site-nav:before{height:0!important;}
.nav-inner{
  max-width:1500px!important;
  min-height:54px!important;
  padding:7px 18px!important;
  gap:4px!important;
}
.site-nav a,.site-nav button{
  min-height:38px!important;
  height:38px!important;
  border-radius:10px!important;
  padding:7px 10px!important;
  font-size:.72rem!important;
  font-weight:700!important;
}
.site-nav a:hover,.site-nav a:focus-visible,
.site-nav button:hover,.site-nav button:focus-visible{
  background:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
.nav-dropdown-trigger[data-active=true],
.nav-home[aria-current=page]{
  background:rgba(255,255,255,.19)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)!important;
}
.nav-dropdown-menu{
  margin-top:5px!important;
  border:1px solid var(--v4-border)!important;
  border-radius:13px!important;
  box-shadow:var(--v4-shadow-lg)!important;
  padding:7px!important;
}
.nav-dropdown-menu a{
  color:var(--v4-text)!important;
  background:transparent!important;
  border-radius:9px!important;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current=page]{
  background:var(--v4-green-soft)!important;
  color:var(--v4-green-deep)!important;
}
.nav-global-search{
  margin-left:auto!important;
  min-width:32px!important;
  width:auto!important;
}
.nav-global-search input{
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
  border-radius:10px!important;
}
.nav-global-search input::placeholder{color:rgba(255,255,255,.72)!important;}
.nav-global-search button{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.nav-logout-form button{
  min-width:0!important;
  padding-inline:11px!important;
  border:1px solid rgba(255,255,255,.55)!important;
  background:rgba(255,255,255,.96)!important;
  color:var(--v4-green-deep)!important;
}

/* ---------- CONTENEUR / PAGES ---------- */
.container{
  max-width:1500px!important;
  padding:24px 22px 42px!important;
}
.container>h1,.container>.page-title{
  color:var(--v4-ink)!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
.crm-page-hero,.page-hero{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--v4-border)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#edf9f2 0%,#fff 65%,#f5faf7 100%)!important;
  box-shadow:var(--v4-shadow)!important;
}
.crm-page-hero:after,.page-hero:after{
  content:""!important;
  position:absolute!important;
  right:-48px!important;
  top:-70px!important;
  width:170px!important;
  height:170px!important;
  border-radius:50%!important;
  background:rgba(30,150,101,.09)!important;
}
.page-title,.section-title,h1,h2,h3,h4{
  color:var(--v4-ink)!important;
}
.crm-overline{
  color:var(--v4-green)!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
}

/* ---------- SURFACES ---------- */
.card,.panel,.dashboard-card,.kpi-card,.chart-card,.summary-card,
.crm-surface,.data-card,.filter-form,.crm-table-card,.responsive-table{
  border-color:var(--v4-border)!important;
  border-radius:var(--v4-radius)!important;
  box-shadow:var(--v4-shadow)!important;
  background:var(--v4-white)!important;
}
.card:hover,.panel:hover,.dashboard-card:hover,.kpi-card:hover,
.chart-card:hover,.summary-card:hover,.crm-surface:hover,.data-card:hover{
  box-shadow:var(--v4-shadow-lg)!important;
}
.section-heading{
  border-bottom-color:#edf3ef!important;
}
.section-heading h2,.section-heading h3{
  font-weight:800!important;
  letter-spacing:-.02em!important;
}

/* ---------- KPI / INDICATEURS ---------- */
.kpi-card{
  position:relative!important;
  overflow:hidden!important;
  padding:17px!important;
}
.kpi-card:after{
  content:""!important;
  position:absolute!important;
  right:-28px!important;
  bottom:-32px!important;
  width:92px!important;
  height:92px!important;
  border-radius:50%!important;
  background:var(--v4-green-soft)!important;
  opacity:.85!important;
}
.kpi-icon,.kpi-body{position:relative!important;z-index:1!important;}
.kpi-value{
  color:var(--v4-ink)!important;
  font-weight:800!important;
  letter-spacing:-.035em!important;
}
.kpi-label,.kpi-sub{color:var(--v4-muted)!important;}
.kpi-icon{
  border-radius:12px!important;
  background:var(--v4-green-soft)!important;
}

/* ---------- BOUTONS / ACTIONS ---------- */
.btn,.btn-submit,button[type=submit],.quick-action,.action-button{
  border-radius:10px!important;
  font-weight:700!important;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease!important;
}
.btn-primary,.btn-success,.btn-submit,
button[type=submit]{
  background:var(--v4-green)!important;
  border-color:var(--v4-green)!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(8,120,79,.16)!important;
}
.btn-primary:hover,.btn-success:hover,.btn-submit:hover,
button[type=submit]:hover{
  background:var(--v4-green-dark)!important;
  border-color:var(--v4-green-dark)!important;
  transform:translateY(-1px)!important;
}
.btn-secondary,.btn-outline{
  background:#fff!important;
  color:var(--v4-green-deep)!important;
  border-color:#cfe1d8!important;
}

/* ---------- FORMULAIRES ---------- */
label{
  color:#40564b!important;
  font-size:.78rem!important;
  font-weight:700!important;
}
input:not([type=hidden]),select,textarea,
.form-input,.form-control{
  min-height:42px!important;
  border:1px solid #cfded6!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--v4-ink)!important;
  box-shadow:none!important;
}
textarea{min-height:100px!important;}
input:not([type=hidden]):focus,select:focus,textarea:focus,
.form-input:focus,.form-control:focus{
  border-color:#56a17d!important;
  box-shadow:0 0 0 3px rgba(8,120,79,.10)!important;
  outline:none!important;
}
.filter-form{
  padding:15px!important;
  background:#fff!important;
}

/* ---------- TABLEAUX ---------- */
.responsive-table,.crm-table-card{
  overflow:hidden!important;
}
table{background:#fff!important;}
thead th{
  background:#f1f7f3!important;
  color:#385247!important;
  border-bottom:1px solid #dbe8e1!important;
  font-size:.72rem!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
}
th,td{
  padding:11px 12px!important;
  border-bottom-color:#edf2ef!important;
}
tbody tr:hover td{background:#f7fbf9!important;}
.badge,.status-badge,.kpi-badge{
  border-radius:999px!important;
  font-weight:700!important;
  padding:.28rem .62rem!important;
}

/* ---------- ALERTES / FLASH ---------- */
.flash{
  border-radius:11px!important;
  box-shadow:0 5px 16px rgba(20,55,40,.06)!important;
}
.alert,.notice,.info-box,.warning-box,.success-box{
  border-radius:12px!important;
}

/* ---------- RECHERCHE / LISTES ---------- */
.crm-search-panel,.search-panel{
  border:1px solid var(--v4-border)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:var(--v4-shadow)!important;
}
.crm-search-result,.search-result{
  border-color:#e5eee9!important;
  border-radius:11px!important;
  background:#fff!important;
}
.crm-search-result:hover,.search-result:hover{
  border-color:#bcd8c9!important;
  background:var(--v4-green-pale)!important;
}

/* ---------- DASHBOARD VISITEUR MÉDICAL ---------- */
.v31-dashboard{
  max-width:1400px!important;
  padding:8px 0 42px!important;
}
.v31-dashboard-heading{
  border-radius:18px!important;
  box-shadow:var(--v4-shadow)!important;
}
.v31-kpi-grid{gap:14px!important;}
.v31-kpi-card{
  border-radius:15px!important;
  box-shadow:var(--v4-shadow)!important;
}
.v31-kpi-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:var(--v4-shadow-lg)!important;
}
.v31-planning-card,.v31-empty-state{
  border-radius:16px!important;
  box-shadow:var(--v4-shadow)!important;
}
.v31-empty-state{
  background:linear-gradient(145deg,#fff,#f6fbf8)!important;
}
.v31-hors-planning-link{
  border-radius:10px!important;
  box-shadow:0 5px 14px rgba(8,120,79,.16)!important;
}

/* ---------- FICHE COMMERCIALE / CLIENT ---------- */
.commercial-sheet{
  max-width:1400px!important;
}
.commercial-sheet .crm-page-hero{
  border-radius:18px!important;
}
.commercial-sheet .summary-card,
.commercial-sheet .chart-card,
.commercial-sheet .crm-table-card{
  border-radius:15px!important;
}
.commercial-sheet .crm-kpi-grid .kpi-card{
  border-radius:15px!important;
}

/* ---------- PLANNING ---------- */
.planning-page,.planning-container,.planning-sheet{
  max-width:1400px!important;
}
.planning-card,.planning-day,.planning-row,.planning-item{
  border-radius:12px!important;
  border-color:var(--v4-border)!important;
}
.planning-day-header,.planning-header{
  background:var(--v4-green-pale)!important;
  color:var(--v4-green-deep)!important;
}

/* ---------- PAGINATION / ACTIONS RAPIDES ---------- */
.pagination,.crm-pagination,.quick-actions{
  gap:8px!important;
}
.pagination a,.crm-pagination a{
  border-radius:9px!important;
}
.quick-action{
  border:1px solid var(--v4-border)!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(20,55,40,.045)!important;
}
.quick-action:hover{
  border-color:#bfd9ca!important;
  background:var(--v4-green-pale)!important;
}

/* ---------- FOOTER ---------- */
footer{
  background:#fff!important;
  border-top:1px solid var(--v4-border)!important;
  color:#6d7e75!important;
}
footer a{color:var(--v4-green)!important;}
.developer-signature strong{color:var(--v4-green-deep)!important;}

/* ---------- MOBILE ---------- */
@media(max-width:1050px){
  .container{padding-left:16px!important;padding-right:16px!important;}
}
@media(max-width:820px){
  .header-inner{min-height:66px!important;padding:9px 14px!important;}
  .brand-logo{width:42px!important;height:42px!important;}
  .brand-tagline{display:none!important;}
  .header-user{display:none!important;}
  .container{padding:16px 12px 32px!important;}
  .site-nav{background:linear-gradient(180deg,var(--v4-green-deep),var(--v4-green))!important;}
  .site-nav .nav-inner{padding:10px 12px!important;}
  .site-nav a,.site-nav button{height:42px!important;min-height:42px!important;border-radius:10px!important;}
  .nav-global-search{width:100%!important;margin:6px 0!important;}
  .nav-global-search input{width:100%!important;opacity:1!important;}
  .nav-global-search button{position:absolute!important;right:18px!important;top:auto!important;}
  .card,.panel,.dashboard-card,.kpi-card,.chart-card,.summary-card,
  .crm-surface,.data-card,.filter-form,.crm-table-card,.responsive-table{
    border-radius:13px!important;
  }
  table{font-size:.82rem!important;}
  th,td{padding:9px!important;}
}
@media(max-width:560px){
  .container{padding-left:9px!important;padding-right:9px!important;}
  .crm-page-hero,.page-hero{border-radius:14px!important;}
  .kpi-card{padding:14px!important;}
  .btn,.btn-submit,button[type=submit]{min-height:40px!important;}
}
@media(prefers-reduced-motion:reduce){
  .btn,.btn-submit,button[type=submit],.quick-action{transition:none!important;}
}