/* =========================================================
   THEME "ODOO 19" — Variables globales
   ========================================================= */
:root{
  /* Palette principale Odoo 19 */
  --odoo-primary: #714B67;        /* violet/prune signature Odoo */
  --odoo-primary-dark: #5B3A54;
  --odoo-primary-light: #8F6584;
  --odoo-accent: #00A09D;         /* teal utilisé sur les CTA */
  --odoo-accent-dark: #00817E;

  --odoo-bg: #F7F7FA;             /* fond général très clair */
  --odoo-surface: #FFFFFF;        /* cartes / panneaux */
  --odoo-border: #E4E4EC;
  --odoo-text: #2B2B33;
  --odoo-text-muted: #7C7B8A;

  --odoo-success: #28A745;
  --odoo-warning: #F7C948;
  --odoo-danger: #E15554;
  --odoo-info: #3B82F6;

  --odoo-radius-sm: 6px;
  --odoo-radius-md: 10px;
  --odoo-radius-lg: 16px;

  --odoo-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --odoo-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --odoo-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  --odoo-font: "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
  --odoo-transition: all 0.18s ease-in-out;
}

/* =========================================================
   BASE
   ========================================================= */
html, body{
  background-color: var(--odoo-bg) !important;
  color: var(--odoo-text) !important;
  font-family: var(--odoo-font) !important;
  font-size: 14px;
  line-height: 1.5;
}

a{
  color: var(--odoo-primary);
  text-decoration: none;
  transition: var(--odoo-transition);
}
a:hover{
  color: var(--odoo-accent-dark);
}

h1, h2, h3, h4, h5, h6{
  color: var(--odoo-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* =========================================================
   TOPBAR / NAVBAR — style barre Odoo (violet foncé)
   ========================================================= */
.navbar,
.topbar,
#header,
.main-header{
  background: linear-gradient(180deg, var(--odoo-primary) 0%, var(--odoo-primary-dark) 100%) !important;
  color: #fff !important;
  box-shadow: var(--odoo-shadow-md);
  border: none !important;
}

.navbar a,
.topbar a,
#header a{
  color: rgba(255,255,255,0.92) !important;
}
.navbar a:hover,
.topbar a:hover{
  color: #fff !important;
}

.navbar .brand,
.topbar .brand,
.logo{
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* =========================================================
   SIDEBAR / MENU LATÉRAL
   ========================================================= */
.sidebar,
.o-sidebar,
#sidebar{
  background-color: var(--odoo-surface) !important;
  border-right: 1px solid var(--odoo-border);
}

.sidebar a,
.o-sidebar a,
#sidebar a,
.menu-item{
  color: var(--odoo-text) !important;
  border-radius: var(--odoo-radius-sm);
  padding: 8px 12px;
  display: block;
  transition: var(--odoo-transition);
}

.sidebar a:hover,
.o-sidebar a:hover,
#sidebar a:hover,
.menu-item:hover{
  background-color: rgba(113, 75, 103, 0.08) !important;
  color: var(--odoo-primary) !important;
}

.sidebar a.active,
.menu-item.active,
.menu-item.selected{
  background-color: rgba(113, 75, 103, 0.12) !important;
  color: var(--odoo-primary) !important;
  font-weight: 600;
  border-left: 3px solid var(--odoo-primary);
}

/* =========================================================
   CARDS / PANELS
   ========================================================= */
.card,
.panel,
.box,
.o-card{
  background-color: var(--odoo-surface) !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: var(--odoo-radius-md) !important;
  box-shadow: var(--odoo-shadow-sm) !important;
  transition: var(--odoo-transition);
}
.card:hover,
.o-card:hover{
  box-shadow: var(--odoo-shadow-md) !important;
}

.card-header,
.panel-header,
.box-header{
  background-color: transparent !important;
  border-bottom: 1px solid var(--odoo-border) !important;
  font-weight: 600;
  padding: 14px 18px;
}

.card-body,
.panel-body,
.box-body{
  padding: 18px;
}

/* =========================================================
   BOUTONS — style pilule/arrondi Odoo
   ========================================================= */
button,
.btn,
input[type="submit"],
input[type="button"]{
  font-family: var(--odoo-font);
  font-weight: 500;
  border-radius: var(--odoo-radius-sm) !important;
  padding: 8px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--odoo-transition);
}

.btn-primary,
.btn.primary,
button.primary{
  background-color: var(--odoo-primary) !important;
  border-color: var(--odoo-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn.primary:hover{
  background-color: var(--odoo-primary-dark) !important;
  border-color: var(--odoo-primary-dark) !important;
}

.btn-secondary,
.btn.secondary{
  background-color: var(--odoo-surface) !important;
  border-color: var(--odoo-border) !important;
  color: var(--odoo-text) !important;
}
.btn-secondary:hover{
  border-color: var(--odoo-primary) !important;
  color: var(--odoo-primary) !important;
}

.btn-accent,
.btn.success,
.btn-success{
  background-color: var(--odoo-accent) !important;
  border-color: var(--odoo-accent) !important;
  color: #fff !important;
}
.btn-accent:hover,
.btn-success:hover{
  background-color: var(--odoo-accent-dark) !important;
  border-color: var(--odoo-accent-dark) !important;
}

.btn-danger{
  background-color: var(--odoo-danger) !important;
  border-color: var(--odoo-danger) !important;
  color: #fff !important;
}

/* =========================================================
   FORMULAIRES
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
textarea,
select{
  background-color: var(--odoo-surface);
  border: 1px solid var(--odoo-border);
  border-radius: var(--odoo-radius-sm);
  padding: 8px 12px;
  color: var(--odoo-text);
  transition: var(--odoo-transition);
  font-family: var(--odoo-font);
}

input:focus,
textarea:focus,
select:focus{
  outline: none;
  border-color: var(--odoo-primary);
  box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.15);
}

label{
  font-weight: 500;
  color: var(--odoo-text-muted);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* =========================================================
   TABLEAUX — style liste Odoo (lignes fines, hover discret)
   ========================================================= */
table{
  width: 100%;
  border-collapse: collapse;
  background-color: var(--odoo-surface);
  border-radius: var(--odoo-radius-md);
  overflow: hidden;
}

table thead th{
  background-color: #FAFAFC;
  color: var(--odoo-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--odoo-border);
  text-align: left;
}

table tbody td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--odoo-border);
  color: var(--odoo-text);
}

table tbody tr{
  transition: var(--odoo-transition);
}
table tbody tr:hover{
  background-color: rgba(113, 75, 103, 0.04);
}

/* =========================================================
   BADGES / STATUTS
   ========================================================= */
.badge,
.status,
.tag{
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.badge-success, .status-success{ background: rgba(40,167,69,0.12); color: var(--odoo-success); }
.badge-warning, .status-warning{ background: rgba(247,201,72,0.18); color: #8a6d00; }
.badge-danger,  .status-danger { background: rgba(225,85,84,0.12); color: var(--odoo-danger); }
.badge-info,    .status-info   { background: rgba(59,130,246,0.12); color: var(--odoo-info); }
.badge-default, .status-default{ background: rgba(113,75,103,0.12); color: var(--odoo-primary); }

/* =========================================================
   MODALES / POPUPS
   ========================================================= */
.modal,
.o-modal,
.popup{
  background-color: var(--odoo-surface) !important;
  border-radius: var(--odoo-radius-lg) !important;
  box-shadow: var(--odoo-shadow-lg) !important;
  border: none !important;
}

.modal-header,
.o-modal-header{
  border-bottom: 1px solid var(--odoo-border);
  padding: 16px 20px;
  font-weight: 600;
}

.modal-footer,
.o-modal-footer{
  border-top: 1px solid var(--odoo-border);
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modal-backdrop,
.overlay{
  background-color: rgba(43, 43, 51, 0.45) !important;
  backdrop-filter: blur(2px);
}

/* =========================================================
   SCROLLBAR (esthétique fine, comme Odoo)
   ========================================================= */
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track{
  background: transparent;
}
::-webkit-scrollbar-thumb{
  background-color: rgba(113, 75, 103, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
  background-color: rgba(113, 75, 103, 0.5);
}

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb{
  background: transparent;
  padding: 10px 0;
  font-size: 13px;
  color: var(--odoo-text-muted);
}
.breadcrumb a{
  color: var(--odoo-text-muted);
}
.breadcrumb a:hover{
  color: var(--odoo-primary);
}

/* =========================================================
   LOADER / SPINNER thème Odoo (utilisé par simpy.js.php)
   ========================================================= */
.odoo-loader{
  border: 3px solid rgba(113, 75, 103, 0.15);
  border-top-color: var(--odoo-primary);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: odoo-spin 0.7s linear infinite;
}
@keyframes odoo-spin{
  to{ transform: rotate(360deg); }
}

/* =========================================================
   TOASTS / NOTIFICATIONS (générées par simpy.js.php)
   ========================================================= */
.odoo-toast-container{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.odoo-toast{
  min-width: 260px;
  max-width: 360px;
  background: var(--odoo-surface);
  border-left: 4px solid var(--odoo-primary);
  border-radius: var(--odoo-radius-sm);
  box-shadow: var(--odoo-shadow-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--odoo-text);
  opacity: 0;
  transform: translateX(20px);
  animation: odoo-toast-in 0.25s ease forwards;
}
.odoo-toast.success{ border-left-color: var(--odoo-success); }
.odoo-toast.warning{ border-left-color: var(--odoo-warning); }
.odoo-toast.danger{ border-left-color: var(--odoo-danger); }
.odoo-toast.info{ border-left-color: var(--odoo-info); }

@keyframes odoo-toast-in{
  to{ opacity: 1; transform: translateX(0); }
}
.odoo-toast.hide{
  animation: odoo-toast-out 0.25s ease forwards;
}
@keyframes odoo-toast-out{
  to{ opacity: 0; transform: translateX(20px); }
}

/* =========================================================================
   DOLIBARR — MENU DU HAUT (barre d'applications "tmenu")
   Cible les vraies classes générées par Dolibarr (thème eldy, v19 à v24) :
   table.tmenu > tr.tmenu > td.tmenu > a.tmenu / a.tmenusel
   ========================================================================= */
#tmenu_tooltip,
.tmenudiv{
  background: linear-gradient(180deg, var(--odoo-primary) 0%, var(--odoo-primary-dark) 100%) !important;
  box-shadow: var(--odoo-shadow-md);
  border: none !important;
}

table.tmenu{
  width: 100%;
  border-collapse: collapse;
  background: transparent !important;
}
tr.tmenu, td.tmenu{
  background: transparent !important;
  border: none !important;
  vertical-align: middle;
}

a.tmenu,
a.tmenusel{
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px !important;
  margin: 6px 3px;
  border-radius: 999px !important;
  transition: var(--odoo-transition);
  text-decoration: none !important;
  white-space: nowrap;
}
a.tmenu:hover{
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}
a.tmenusel{
  background: rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-weight: 600;
}

.mainmenu,
.topmenuimage{
  color: inherit !important;
  font-size: 15px;
}

/* Icônes top-right : recherche / ajout rapide / favoris / profil */
#topmenu-global-search-dropdown .dropdown-toggle,
#topmenu-quickadd-dropdown .dropdown-toggle,
#topmenu-bookmark-dropdown .dropdown-toggle,
#topmenu-login-dropdown .dropdown-toggle,
.login_block a{
  color: rgba(255,255,255,0.9) !important;
  border-radius: 50% !important;
  width: 34px;
  height: 34px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: var(--odoo-transition);
}
#topmenu-global-search-dropdown .dropdown-toggle:hover,
#topmenu-quickadd-dropdown .dropdown-toggle:hover,
#topmenu-bookmark-dropdown .dropdown-toggle:hover,
#topmenu-login-dropdown .dropdown-toggle:hover{
  background: rgba(255,255,255,0.15) !important;
}

.dropdown-menu{
  background: var(--odoo-surface) !important;
  border: 1px solid var(--odoo-border) !important;
  border-radius: var(--odoo-radius-md) !important;
  box-shadow: var(--odoo-shadow-lg) !important;
  padding: 6px !important;
}
.dropdown-item{
  border-radius: var(--odoo-radius-sm) !important;
  padding: 8px 12px !important;
  color: var(--odoo-text) !important;
  transition: var(--odoo-transition);
}
.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:focus{
  background: rgba(113, 75, 103, 0.08) !important;
  color: var(--odoo-primary) !important;
}

.login_block{
  background: transparent !important;
  border: none !important;
}

/* Corrige les photos de profil qui s'affichent en taille native
   (bug visible : avatar énorme qui déborde de la barre du haut) */
.login_block img,
#topmenu-login-dropdown img,
.dropdown-menu img,
.photo,
.photouserphoto,
.userphoto,
.userimg img{
  width: 34px !important;
  height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* Le panneau qui contient la photo + infos utilisateur au clic sur l'avatar */
#topmenu-login-dropdown .dropdown-menu{
  min-width: 220px;
  max-width: 280px;
}
#topmenu-login-dropdown .dropdown-menu .photo,
#topmenu-login-dropdown .dropdown-menu .photouserphoto{
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
}

/* =========================================================================
   DOLIBARR — MENU DE GAUCHE ("vmenu") — style panneau Odoo 19
   Cible : #id-left, .side-nav, .blockvmenu, a.vmenu, a.vsmenu
   ========================================================================= */
#id-container{
  background-color: var(--odoo-bg) !important;
}

#id-left,
.side-nav{
  background-color: var(--odoo-surface) !important;
  border-right: 1px solid var(--odoo-border) !important;
  padding-top: 8px;
}

.blockvmenu{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 10px !important;
  margin-bottom: 2px !important;
}

.blockvmenu .menu_titre{
  color: var(--odoo-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  padding: 14px 8px 4px !important;
}

a.vmenu,
span.vmenudisabled{
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--odoo-text) !important;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 10px !important;
  border-radius: var(--odoo-radius-sm) !important;
  transition: var(--odoo-transition);
  margin: 1px 0;
}
a.vmenu:hover{
  background: rgba(113, 75, 103, 0.08) !important;
  color: var(--odoo-primary) !important;
}

a.vsmenu,
span.vsmenudisabled{
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--odoo-text-muted) !important;
  font-size: 13px;
  padding: 6px 10px 6px 26px !important;
  border-radius: var(--odoo-radius-sm) !important;
  transition: var(--odoo-transition);
}
a.vsmenu:hover{
  background: rgba(113, 75, 103, 0.06) !important;
  color: var(--odoo-primary) !important;
}

a.vmenu i, a.vsmenu i,
a.vmenu .fas, a.vsmenu .fas,
a.vmenu .fa,  a.vsmenu .fa{
  color: inherit !important;
  width: 16px;
  text-align: center;
}

/* =========================================================================
   CORRECTIF — Dolibarr utilise des <table> en interne pour la mise en page
   du menu gauche et du panneau utilisateur (pas pour des données). Notre
   style "tableau de données" (padding généreux, fond, majuscules...) plus
   haut dans ce fichier s'y appliquait par erreur, causant :
   - un espacement excessif entre les lignes du menu gauche
   - un panneau utilisateur (haut droit) à la mise en page cassée
   On neutralise donc notre style de tableau dans ces zones précises.
   ========================================================================= */
#id-left table, .side-nav table, .blockvmenu table,
.dropdown-menu table, .login_block table,
#topmenu-login-dropdown table{
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  width: auto;
}
#id-left table td, .side-nav table td, .blockvmenu table td,
.dropdown-menu table td, .login_block table td,
#topmenu-login-dropdown table td,
#id-left table th, .side-nav table th, .blockvmenu table th{
  background: transparent !important;
  border: none !important;
  padding: 2px 4px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}

/* Infobulle au survol pour les icônes du menu du haut (mode icônes seules) :
   Dolibarr pose déjà un attribut title="..." sur chaque lien, on l'affiche
   sous forme de bulle au survol plutôt que le titre natif du navigateur */
a.tmenu, a.tmenusel{
  position: relative;
}
a.tmenu::after, a.tmenusel::after{
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--odoo-primary-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 2000;
  margin-top: 6px;
  box-shadow: var(--odoo-shadow-md);
}
a.tmenu:hover::after, a.tmenusel:hover::after{
  opacity: 1;
  visibility: visible;
}

/* Les libellés du menu gauche restent toujours visibles dans le tiroir
   mobile (pas de mode icônes seules ici, la place ne manque pas) */
body.odoo-sidebar-open .hideonsmartphone,
body.odoo-sidebar-open a.vmenu span,
body.odoo-sidebar-open a.vsmenu span{
  display: inline !important;
}

/* =========================================================================
   RESPONSIVE — menu Dolibarr façon Odoo 19 mobile
   - barre d'apps du haut : défilement horizontal (comme Odoo sur mobile)
   - menu de gauche : tiroir ("drawer") ouvert via le bouton hamburger
     injecté par simpy.js.php (classe .odoo-menu-toggle)
   ========================================================================= */
.odoo-menu-toggle{
  display: none;
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1060;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--odoo-radius-sm);
  background: var(--odoo-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--odoo-shadow-md);
  transition: var(--odoo-transition);
}
.odoo-menu-toggle:hover{
  background: var(--odoo-primary-dark);
}

.odoo-menu-backdrop{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(43,43,51,0.45);
  backdrop-filter: blur(2px);
  z-index: 1040;
}
.odoo-menu-backdrop.show{
  display: block;
}

@media (max-width: 992px){
  .odoo-menu-toggle{
    display: inline-flex;
  }

  /* Barre d'apps du haut : on laisse Dolibarr gérer nativement son propre
     retour à la ligne des icônes (il le fait déjà très bien tout seul) ;
     on se contente ici de garder juste la coloration/le style */
  table.tmenu{
    max-width: 100%;
  }

  /* Menu de gauche : tiroir superposé */
  #id-left,
  .side-nav{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 82vw;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1050;
    box-shadow: var(--odoo-shadow-lg);
  }
  body.odoo-sidebar-open #id-left,
  body.odoo-sidebar-open .side-nav{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0);
  }

  #id-right{
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.odoo-sidebar-open{
    overflow: hidden;
  }
}

/* =========================================================
   RESPONSIVE (générique — utile hors Dolibarr / éléments custom)
   ========================================================= */
@media (max-width: 768px){
  .sidebar,
  .o-sidebar,
  #sidebar{
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    z-index: 1000;
    transition: transform 0.2s ease;
  }
  .sidebar.open,
  .o-sidebar.open,
  #sidebar.open{
    transform: translateX(0);
  }
}