/* assets/css/luna-skin.css */

/* ===== Base / fond global ===== */
:root{
  --luna-bg: #f4f6fb;          /* fond principal */
  --luna-surface: #ffffff;     /* surfaces (cards, panels) */
  --luna-border: rgba(15, 23, 42, .10);
  --luna-border-soft: rgba(15, 23, 42, .06);
  --luna-text: #0f172a;
  --luna-muted: #64748b;

  /* ton accent actuel (orange) */
  --luna-accent: #eb8a17;
  --luna-accent-soft: rgba(235, 138, 23, .12);

  /* ombres (elevation) */
  --luna-shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
  --luna-shadow-md: 0 12px 30px rgba(15, 23, 42, .10);
}

body{
  background: var(--luna-bg);
  color: var(--luna-text);
}

/* ===== Header un peu plus “séparé” ===== */
.header{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--luna-border-soft);
}

/* ===== Contenu ===== */
.page-wrapper .content{
  padding-top: 20px;
}

/* ===== Cards : plus de profondeur / moins de bordures hard ===== */
.card,
.supplier-hero,
.tab-content.border{
  background: var(--luna-surface);
  border-color: var(--luna-border-soft) !important;
  box-shadow: var(--luna-shadow-sm);
}

.card:hover{
  box-shadow: var(--luna-shadow-md);
  transition: box-shadow .2s ease;
}

/* ===== Titres / textes secondaires ===== */
.page-header h3.page-title{
  letter-spacing: .2px;
}

.text-muted,
.muted{
  color: var(--luna-muted) !important;
}

/* ===== Tabs : plus modernes ===== */
.nav-tabs{
  border-bottom: 1px solid var(--luna-border-soft);
}

.nav-tabs .nav-link{
  border: 0;
  color: var(--luna-muted);
  font-weight: 700;
  padding: .65rem 1rem;
  border-radius: 10px 10px 0 0;
}

.nav-tabs .nav-link:hover{
  color: var(--luna-text);
  background: rgba(15,23,42,.04);
}

.nav-tabs .nav-link.active{
  color: var(--luna-text);
  background: var(--luna-surface);
  box-shadow: 0 -10px 24px rgba(15,23,42,.08);
  position: relative;
}

.nav-tabs .nav-link.active::after{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--luna-accent);
}

/* ===== Tables : lisibilité + hover ===== */
.table{
  --bs-table-bg: transparent;
}

.table thead th{
  background: rgba(15,23,42,.03);
  border-bottom: 1px solid var(--luna-border-soft) !important;
  color: #0b1220;
  font-weight: 700;
}

.table tbody td{
  border-color: rgba(15,23,42,.06) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *{
  background: rgba(15,23,42,.015);
}

.table tbody tr:hover > *{
  background: rgba(235, 138, 23, .06) !important;
}

/* ===== Boutons : cohérence (accent orange) ===== */
/* Important : ton thème a plusieurs définitions de .btn-primary (orange vs #00918E).
   Ici on force le "primary" sur l'accent Luna. */
.btn-primary{
  background: var(--luna-accent) !important;
  border-color: var(--luna-accent) !important;
}
.btn-primary:hover{
  filter: brightness(.92);
}

.btn-outline-primary{
  border-color: var(--luna-accent) !important;
  color: var(--luna-accent) !important;
}
.btn-outline-primary:hover{
  background: var(--luna-accent) !important;
  color: #fff !important;
}

/* ===== Petits détails : inputs plus nets ===== */
.form-control, .form-select{
  border-color: rgba(15,23,42,.10);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(235,138,23,.45);
  box-shadow: 0 0 0 .2rem rgba(235,138,23,.12);
}

/* =========================
   LUNA SKIN V2 (plus premium)
   ========================= */

/* 1) Layout : plus de respiration, meilleure hiérarchie */
.page-header{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  margin-bottom: 16px;
}

.page-title{
  font-weight: 900 !important;
}

/* 2) Sidebar : version "contraste soft" (pas full dark) */
.sidebar{
  background: #ffffff;
  border-right: 1px solid rgba(15,23,42,.08);
}

#sidebar-menu .menu a,
#sidebar-menu .submenu > a{
  border-radius: 10px;
  margin: 4px 10px;
  padding: 10px 12px;
}

#sidebar-menu .menu a:hover,
#sidebar-menu .submenu > a:hover{
  background: rgba(235,138,23,.10);
}

#sidebar-menu .menu a.active,
#sidebar-menu li.active > a{
  background: rgba(235,138,23,.14) !important;
  color: #0f172a !important;
  border: 1px solid rgba(235,138,23,.30);
}

#sidebar-menu .menu a.active i,
#sidebar-menu li.active > a i{
  color: var(--luna-accent) !important;
}

/* Profil en haut sidebar : le rendre plus "carte" */
.clinicdropdown > a{
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  margin: 12px 10px 8px;
  padding: 12px;
}

/* 3) Header : icônes plus propres */
.header .btn.btn-header-list,
.header .btn.btn-help,
.header .btn.btn-chart-pie{
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.75);
}
.header .btn.btn-header-list:hover,
.header .btn.btn-help:hover,
.header .btn.btn-chart-pie:hover{
  border-color: rgba(235,138,23,.35);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

/* 4) HERO fournisseur : plus premium, moins "bloc blanc" */
.supplier-hero{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 18px 50px rgba(15,23,42,.10);
}
.supplier-hero .badge{
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
}

/* 5) Badges : uniformiser (moins "Bootstrap brut") */
.badge.bg-success{ background: rgba(34,197,94,.14) !important; color: #166534 !important; border: 1px solid rgba(34,197,94,.35) !important; }
.badge.bg-warning{ background: rgba(245,158,11,.18) !important; color: #7c2d12 !important; border: 1px solid rgba(245,158,11,.35) !important; }
.badge.bg-primary{ background: rgba(235,138,23,.16) !important; color: #9a4c00 !important; border: 1px solid rgba(235,138,23,.35) !important; }
.badge.bg-secondary{ background: rgba(100,116,139,.14) !important; color: #334155 !important; border: 1px solid rgba(100,116,139,.30) !important; }

/* 6) Tabs : style plus “pill” + highlight accent */
.nav-tabs{
  padding: 6px;
  background: rgba(15,23,42,.03);
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.06);
}
.nav-tabs .nav-link{
  border-radius: 12px !important;
}
.nav-tabs .nav-link.active{
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
}
.nav-tabs .nav-link.active::after{
  display:none; /* on passe sur style pill + shadow */
}

/* 7) Zone tab-content : fond légèrement teinté + bordure douce */
.tab-content.border{
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
}

/* 8) Inputs : plus "UI moderne" */
.form-control, .form-select{
  border-radius: 12px;
  padding-top: .55rem;
  padding-bottom: .55rem;
}
/* =========================
   HEADER premium (Luna)
   ========================= */

.header{
  position: sticky;   /* optionnel mais très agréable */
  top: 0;
  z-index: 1040;
  height: 64px;       /* ajuste si besoin */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* zone logo */
.header-left{
  border-right: 1px solid rgba(15,23,42,.06);
}

/* bouton collapse sidebar */
#toggle_btn{
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
#toggle_btn:hover{
  border-color: rgba(235,138,23,.35);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

/* boutons header (grid, help, chart…) */
.header .btn.btn-header-list,
.header .btn.btn-help,
.header .btn.btn-chart-pie{
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
.header .btn.btn-header-list:hover,
.header .btn.btn-help:hover,
.header .btn.btn-chart-pie:hover{
  border-color: rgba(235,138,23,.35);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

/* badges notifications / email */
.header .nav-item-box .badge{
  box-shadow: 0 10px 16px rgba(15,23,42,.14);
  font-weight: 800;
}

/* dropdown menus : plus clean */
.dropdown-menu{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 50px rgba(15,23,42,.16);
}

/* optionnel : densité des icônes à droite */
.header-user .nav > li > a,
.header-user .nav > li > .nav-link{
  border-radius: 12px;
}

/* =========================
   HEADER premium (Luna)
   ========================= */

.header{
  position: sticky;   /* optionnel mais très agréable */
  top: 0;
  z-index: 1040;
  height: 64px;       /* ajuste si besoin */
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* zone logo */
.header-left{
  border-right: 1px solid rgba(15,23,42,.06);
}

/* bouton collapse sidebar */
#toggle_btn{
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
#toggle_btn:hover{
  border-color: rgba(235,138,23,.35);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

/* boutons header (grid, help, chart…) */
.header .btn.btn-header-list,
.header .btn.btn-help,
.header .btn.btn-chart-pie{
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
}
.header .btn.btn-header-list:hover,
.header .btn.btn-help:hover,
.header .btn.btn-chart-pie:hover{
  border-color: rgba(235,138,23,.35);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
}

/* badges notifications / email */
.header .nav-item-box .badge{
  box-shadow: 0 10px 16px rgba(15,23,42,.14);
  font-weight: 800;
}

/* dropdown menus : plus clean */
.dropdown-menu{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 50px rgba(15,23,42,.16);
}

/* optionnel : densité des icônes à droite */
.header-user .nav > li > a,
.header-user .nav > li > .nav-link{
  border-radius: 12px;
}

/* =========================
   SIDEBAR premium - Variante A (claire)
   ========================= */

.sidebar{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border-right: 1px solid rgba(15,23,42,.08);
}

/* bloc profil */
.clinicdropdown > a{
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 14px;
  margin: 12px 12px 10px;
  padding: 12px;
}

/* liens */
#sidebar-menu .menu a,
#sidebar-menu .submenu > a,
#sidebar-menu .submenu ul li a{
  border-radius: 12px;
  margin: 4px 10px;
  padding: 10px 12px;
}

/* hover */
#sidebar-menu .menu a:hover,
#sidebar-menu .submenu > a:hover,
#sidebar-menu .submenu ul li a:hover{
  background: rgba(235,138,23,.10);
}

/* actif (selon ton thème, ça peut être .active sur li ou sur a) */
#sidebar-menu li.active > a,
#sidebar-menu a.active{
  background: rgba(235,138,23,.16) !important;
  border: 1px solid rgba(235,138,23,.30);
  color: #0f172a !important;
  font-weight: 800;
}

#sidebar-menu li.active > a i,
#sidebar-menu a.active i{
  color: var(--luna-accent) !important;
}

/* flèche submenu */
#sidebar-menu .menu-arrow{
  opacity: .7;
}