/* ================================================================
   DOLIBARR CLARITY THEME — style.css.php v1.0
   ================================================================ */

/* ─── VARIABLES ─── */
:root {
  --cl-primary:       #2563EB;
  --cl-primary-dark:  #0745cd;
  --cl-primary-light: rgba(37,99,235,.09);
  --cl-bg:            #F0F2F5;
  --cl-surface:       #FFFFFF;
  --cl-surface-alt:   #F6F7F9;
  --cl-border:        #E1E4EA;
  --cl-text:          #111827;
  --cl-text-muted:    #6B7280;
  --cl-text-light:    #9CA3AF;
  --cl-success:       #059669; --cl-success-bg: #ECFDF5;
  --cl-warning:       #D97706; --cl-warning-bg: #FFFBEB;
  --cl-danger:        #DC2626; --cl-danger-bg:  #FEF2F2;
  --cl-info:          #0284C7; --cl-info-bg:    #F0F9FF;
  --cl-radius:        8px;
  --cl-radius-lg:     12px;
  --cl-shadow:        0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.08);
  --cl-shadow-lg:     0 10px 25px rgba(0,0,0,.10),0 4px 10px rgba(0,0,0,.06);
  --cl-sidebar-w:     230px;
  --cl-topbar-h:      50px;
  --cl-touch:         44px;
  --cl-font-size:     14px;
  --cl-font:          -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --cl-trans:         140ms ease;
  --cl-trans-md:      240ms ease;
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing: border-box; }
html { font-size: var(--cl-font-size); -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--cl-font);
  font-size: var(--cl-font-size);
  line-height: 1.5;
  color: var(--cl-text);
  background: var(--cl-bg);
  margin: 0; padding: 0;
}
a { color: var(--cl-primary); }
a:hover { color: var(--cl-primary-dark); text-decoration: none; }

/* ================================================================
   TOPBAR
   ================================================================ */
header#id-top, #id-top {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-border);
  box-shadow: var(--cl-shadow);
  display: flex !important;
  align-items: stretch;
  min-height: var(--cl-topbar-h);
  width: 100%;
}

/* Conteneur menu haut — overflow visible pour mobile */
#tmenu_tooltip.tmenu,
div.tmenu { flex: 1; display: flex; align-items: stretch; min-width: 0; overflow: visible; }
div.tmenudiv { flex: 1; overflow-x: auto; overflow-y: visible; }

ul.tmenu {
  display: flex !important;
  list-style: none !important;
  margin: 0; padding: 0;
  min-height: var(--cl-topbar-h);
  align-items: stretch;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
ul.tmenu::-webkit-scrollbar { display: none; }
ul.tmenu li { list-style: none !important; margin: 0; padding: 0; display: flex !important; align-items: stretch; flex-shrink: 0; }

ul.tmenu li div.tmenucenter { display: flex; align-items: center; padding: 0; }

ul.tmenu li a.tmenuimage {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: var(--cl-topbar-h);
  text-decoration: none;
  color: var(--cl-text-muted);
  transition: background var(--cl-trans),color var(--cl-trans);
  flex-shrink: 0;
}
ul.tmenu li a.tmenuimage:hover { background: var(--cl-surface-alt); color: var(--cl-text); }
ul.tmenu li a.tmenuimage div.mainmenu.topmenuimage { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
ul.tmenu li a.tmenuimage div.mainmenu.topmenuimage span { font-size: 16px; }

ul.tmenu li a.tmenulabel {
  display: flex !important;
  align-items: center;
  height: var(--cl-topbar-h);
  padding: 0 10px 0 2px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cl-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--cl-trans),color var(--cl-trans);
  border-bottom: 3px solid transparent;
}
ul.tmenu li a.tmenulabel:hover { color: var(--cl-text); background: var(--cl-surface-alt); }

ul.tmenu li.tmenusel a.tmenuimage,
ul.tmenu li.tmenusel a.tmenulabel {
  color: var(--cl-primary);
  background: var(--cl-primary-light);
}
ul.tmenu li.tmenusel a.tmenulabel { border-bottom-color: var(--cl-primary); font-weight: 600; }
ul.tmenu li#mainmenutd_menu a.tmenuimage { color: var(--cl-text-muted); background: none; }
ul.tmenu li#mainmenutd_menu a.tmenuimage:hover { background: var(--cl-surface-alt); }
ul.tmenu span.mainmenuaspan { font-size: inherit; }
ul.tmenu li div.tmenucenter > div.tmenuimage { opacity: 0.4; cursor: not-allowed; }
ul.tmenu li span.tmenudisabled { opacity: 0.4; }
ul.tmenu li.tmenuend { flex: 1; }

/* Bloc utilisateur */
div.login_block {
  display: flex; align-items: center; padding: 0 12px;
  gap: 4px; flex-shrink: 0; border-left: 1px solid var(--cl-border);
}
div.login_block a { color: var(--cl-text-muted); text-decoration: none; }
div.login_block a:hover { color: var(--cl-primary); }
div.login_block .atoplogin { font-size: 16px; padding: 8px 6px; display: inline-flex; align-items: center; }
div.login_block .aversion { font-size: 0.75rem; color: var(--cl-text-muted); padding: 0 6px; }
div.login_block img.photouserphoto { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cl-border); }

#topmenu-login-dropdown { position: relative; }
#topmenu-login-dropdown .dropdown-menu {
  position: absolute; right: 0; top: 100%;
  background: var(--cl-surface); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg); box-shadow: var(--cl-shadow-lg);
  min-width: 260px; display: none; z-index: 300; overflow: hidden;
}
#topmenu-login-dropdown.open .dropdown-menu { display: block; }
#topmenu-login-dropdown .user-header { background: var(--cl-primary-light); padding: 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--cl-border); }
#topmenu-login-dropdown .user-header img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--cl-surface); }
#topmenu-login-dropdown .user-header p { margin: 0; font-size: 0.8125rem; color: var(--cl-text); }
#topmenu-login-dropdown .user-body { padding: 12px; font-size: 0.8125rem; color: var(--cl-text-muted); border-bottom: 1px solid var(--cl-border); }
#topmenu-login-dropdown .user-footer { padding: 10px; display: flex; justify-content: space-between; align-items: center; }
#topmenu-login-dropdown .user-footer a.button-top-menu-dropdown {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--cl-radius); background: var(--cl-surface-alt); color: var(--cl-text-muted);
  font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: background var(--cl-trans);
}
#topmenu-login-dropdown .user-footer a:hover { background: var(--cl-border); color: var(--cl-text); }

/* ================================================================
   LAYOUT
   ================================================================ */
#id-container { display: flex; min-height: calc(100vh - var(--cl-topbar-h)); }
div.side-nav { width: var(--cl-sidebar-w); flex-shrink: 0; transition: width var(--cl-trans-md); }
body.sidebar-collapse div.side-nav { width: 0; overflow: hidden; }
body.sidebar-collapse #id-left { transform: translateX(-100%); }
#id-left {
  width: var(--cl-sidebar-w);
  height: calc(100vh - var(--cl-topbar-h));
  position: sticky; top: var(--cl-topbar-h);
  background: var(--cl-surface);
  border-right: 1px solid var(--cl-border);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--cl-trans-md);
  scrollbar-width: thin; scrollbar-color: var(--cl-border) transparent;
  z-index: 100;
}
#id-left::-webkit-scrollbar { width: 3px; }
#id-left::-webkit-scrollbar-thumb { background: var(--cl-border); border-radius: 2px; }
#id-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--cl-bg); }

/* ================================================================
   MENU GAUCHE
   ================================================================ */
div.vmenu { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
div.blockvmenu { display: block; }
div.blockvmenufirst { margin-top: 4px; }
div.blockvmenuend { flex: 1; }
div.menu_top, div.menu_end { display: none; }

div.menu_titre a.vmenu, div.menu_titre > a {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 0 14px 0 16px !important; height: var(--cl-touch) !important;
  min-height: var(--cl-touch) !important; text-decoration: none !important;
  color: var(--cl-text-muted) !important; font-size: 0.875rem !important;
  font-weight: 500 !important; font-family: var(--cl-font) !important;
  border-left: 3px solid transparent !important;
  transition: background var(--cl-trans),color var(--cl-trans) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
div.menu_titre a.vmenu:hover, div.menu_titre > a:hover {
  background: var(--cl-surface-alt) !important; color: var(--cl-text) !important;
}
div.menu_titre a.vmenu .fa, div.menu_titre a.vmenu .fas, div.menu_titre a.vmenu .far,
div.menu_titre a.vmenu i[class*="fa-"], div.menu_titre a.vmenu span[class*="fa-"],
div.menu_titre a.vmenu .pictofixedwidth {
  font-size: 15px !important; width: 18px !important; min-width: 18px !important;
  text-align: center !important; flex-shrink: 0 !important; opacity: 0.6;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
div.menu_titre a.vmenu.pm-active {
  background: var(--cl-primary-light) !important; color: var(--cl-primary) !important;
  font-weight: 600 !important; border-left-color: var(--cl-primary) !important;
}
div.menu_contenu { background: var(--cl-surface-alt); border-top: 1px solid var(--cl-border); }
div.menu_contenu a {
  display: flex; align-items: center; gap: 8px; padding: 0 14px 0 40px;
  height: 38px; font-size: 0.8125rem; color: var(--cl-text-muted);
  text-decoration: none; transition: background var(--cl-trans),color var(--cl-trans);
}
div.menu_contenu a:hover { background: var(--cl-border); color: var(--cl-text); }
#blockvmenusearch { padding: 10px 12px; border-bottom: 1px solid var(--cl-border); }
#blockvmenusearch select { width: 100%; font-size: 0.8125rem; font-family: var(--cl-font); }
#blockvmenuhelp { margin-top: auto; padding: 8px 12px; font-size: 0.75rem; color: var(--cl-text-light); }

/* ================================================================
   CONTENU
   ================================================================ */
#id-right > div.fiche, #id-right > div.fichecenter, div.fiche { padding: 20px 24px; min-width: 0; }
div.titre, td.titre, .titre, h1.titre {
  font-size: 1.2rem; font-weight: 700; color: var(--cl-text);
  padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--cl-border); display: block;
}
div.info-box {
  display: flex; align-items: center; background: var(--cl-surface);
  border: 1px solid var(--cl-border); border-radius: var(--cl-radius-lg);
  padding: 14px 16px; box-shadow: var(--cl-shadow); gap: 14px;
}
div.info-box-icon {
  width: 48px; height: 48px; border-radius: var(--cl-radius); display: flex;
  align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
  background: var(--cl-surface-alt); color: var(--cl-primary);
}
div.box.divboxtable {
  background: var(--cl-surface); border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg); overflow: hidden; box-shadow: var(--cl-shadow); margin-bottom: 14px;
}

/* ================================================================
   TABLEAUX
   ================================================================ */
.div-table-responsive, .div-table-responsive-no-min { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.liste, table.listefull, table.noborder {
  width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--cl-surface);
}
table.liste th, table.listefull th, tr.liste_titre th, tr.liste_titre td {
  padding: 9px 14px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cl-text-muted); text-align: left;
  white-space: nowrap; border-bottom: 2px solid var(--cl-border); background: var(--cl-surface-alt);
}
table.liste td, table.listefull td, table.noborder td {
  padding: 9px 14px; border-bottom: 1px solid var(--cl-border); vertical-align: middle; color: var(--cl-text);
}
table.liste tbody tr:hover td, table.listefull tbody tr:hover td,
tr.oddeven:hover td, tr.impair:hover td, tr.pair:hover td {
  background: rgba(37,99,235,.06) !important; cursor: pointer;
}
tr.pair { background: var(--cl-surface); }
tr.impair { background: #FAFBFC; }

/* ================================================================
   BOUTONS
   ================================================================ */
.butAction, .butActionNew, a.butAction, a.butActionNew,
input[type="submit"].button, input[type="submit"].butAction, button.button, input.button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px !important; padding: 0 18px !important; height: var(--cl-touch) !important;
  border: 1px solid var(--cl-primary) !important; border-radius: var(--cl-radius) !important;
  background: var(--cl-primary) !important; color: #fff !important;
  font-size: 0.875rem !important; font-weight: 600 !important; font-family: var(--cl-font) !important;
  cursor: pointer !important; text-decoration: none !important; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.butAction:hover, a.butAction:hover { background: var(--cl-primary-dark) !important; border-color: var(--cl-primary-dark) !important; }
.butActionDelete, a.butActionDelete {
  display: inline-flex !important; align-items: center !important; padding: 0 18px !important;
  height: var(--cl-touch) !important; border: 1px solid #DC2626 !important;
  border-radius: var(--cl-radius) !important; background: #DC2626 !important; color: #fff !important;
  font-size: .875rem !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important;
}
div.tabsAction, .tabsAction { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; align-items: center; }

/* ================================================================
   FORMULAIRES
   ================================================================ */
input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
input[type="url"], input[type="password"], input[type="search"], input[type="date"],
input[type="time"], input.flat, select, select.flat {
  font-family: var(--cl-font) !important; font-size: var(--cl-font-size) !important;
  color: var(--cl-text) !important; background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important; border-radius: var(--cl-radius) !important;
  padding: 0 12px !important; height: var(--cl-touch) !important;
  outline: none !important; transition: border-color var(--cl-trans),box-shadow var(--cl-trans) !important;
  -webkit-appearance: none !important;
}
input:focus, select:focus { border-color: var(--cl-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.15) !important; }
textarea {
  font-family: var(--cl-font); font-size: var(--cl-font-size); color: var(--cl-text);
  background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--cl-radius);
  padding: 10px 12px; resize: vertical; min-height: 80px; outline: none;
}
textarea:focus { border-color: var(--cl-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

/* ================================================================
   ALERTES / STATUTS / ONGLETS / PAGINATION
   ================================================================ */
div.info { background: var(--cl-info-bg); border-left: 4px solid var(--cl-info); padding: 10px 14px; border-radius: 0 var(--cl-radius) var(--cl-radius) 0; margin-bottom: 12px; font-size: .875rem; }
div.ok { background: var(--cl-success-bg); border-left: 4px solid var(--cl-success); padding: 10px 14px; border-radius: 0 var(--cl-radius) var(--cl-radius) 0; margin-bottom: 12px; }
div.warning { background: var(--cl-warning-bg); border-left: 4px solid var(--cl-warning); padding: 10px 14px; border-radius: 0 var(--cl-radius) var(--cl-radius) 0; margin-bottom: 12px; }
div.error { background: var(--cl-danger-bg); border-left: 4px solid var(--cl-danger); padding: 10px 14px; border-radius: 0 var(--cl-radius) var(--cl-radius) 0; margin-bottom: 12px; }

div.tabs, ul.tabs { display: flex; border-bottom: 2px solid var(--cl-border); overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
div.tabs a, a.tab { display: inline-flex; align-items: center; padding: 10px 16px; font-size: .875rem; font-weight: 500; color: var(--cl-text-muted); border-bottom: 3px solid transparent; text-decoration: none; white-space: nowrap; min-height: var(--cl-touch); transition: color var(--cl-trans); margin-bottom: -2px; }
div.tabs a:hover { color: var(--cl-text); }
div.tabs a.tab_actif, a.tab_actif, a.tab.tabactive { color: var(--cl-primary); border-bottom-color: var(--cl-primary); font-weight: 600; }

/* ================================================================
   RESPONSIVE MOBILE ≤ 768px
   ================================================================ */
@media (max-width: 768px) {

  /* Topbar : fixe, scroll horizontal, labels cachés */
  header#id-top { padding: 0 !important; height: 50px !important; min-height: 50px !important; overflow: hidden !important; flex-wrap: nowrap !important; }
  #tmenu_tooltip { flex: 1 !important; overflow-x: auto !important; overflow-y: hidden !important; height: 50px !important; }
  #tmenu_tooltip.tmenu, div.tmenu { overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; }
  ul.tmenu { height: 50px !important; min-height: 50px !important; flex-wrap: nowrap !important; }
  ul.tmenu li a.tmenulabel { display: none !important; }
  ul.tmenu li a.tmenuimage { width: 44px !important; height: 50px !important; }
  div.login_block { flex-shrink: 0 !important; padding: 0 6px !important; }
  div.login_block .hideonsmartphone { display: none !important; }

  /* Sidebar : drawer depuis la gauche */
  div.side-nav { width: 0 !important; overflow: visible !important; }
  #id-left {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    height: 100vh !important;
    width: 82vw !important; max-width: 300px !important;
    z-index: 500 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s ease !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.2) !important;
  }
  /* Burger natif Dolibarr retire sidebar-collapse = ouvre le drawer */
  body:not(.sidebar-collapse) #id-left {
    transform: translateX(0) !important;
  }

  /* Contenu */
  #id-container { display: block !important; }
  #id-right { width: 100% !important; }
  #id-right > div.fiche { padding: 12px !important; }
  div.fichehalfleft, div.fichehalfright { width: 100% !important; display: block !important; padding: 0 !important; margin-bottom: 12px !important; }

  /* Tables → cards */
  table.liste thead, table.listefull thead { display: none; }
  table.liste, table.listefull { display: block; }
  table.liste tbody, table.listefull tbody { display: block; }
  table.liste tbody tr, table.listefull tbody tr {
    display: block; background: var(--cl-surface);
    border: 1px solid var(--cl-border); border-radius: var(--cl-radius-lg);
    margin-bottom: 10px; padding: 12px;
  }
  table.liste tbody td, table.listefull tbody td {
    display: flex; justify-content: space-between; align-items: center;
    border: none; border-bottom: 1px solid var(--cl-border); padding: 6px 0;
  }
  table.liste tbody td:last-child { border-bottom: none; }
  table.liste tbody td::before {
    content: attr(data-label);
    font-weight: 600; font-size: .75rem; color: var(--cl-text-muted);
    text-transform: uppercase; flex-shrink: 0; margin-right: 8px;
  }
}

/* ================================================================
   UTILITAIRES
   ================================================================ */
.nowrap, .nowraponall { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.bold { font-weight: 700; }
.opacitymedium { opacity: .65; }
.small { font-size: .8125rem; }
@media (max-width: 768px) { .hideonsmartphone { display: none !important; } }
:focus-visible { outline: 2px solid var(--cl-primary); outline-offset: 2px; }