/* ═══════════════════════════════════════════════════════════════
   InkCRM — theme.css
   CSS custom du layout et des composants partagés.
   Ne pas mettre de CSS page-spécifique ici.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --primary:           #4361ee;
  --primary-rgb:       67, 97, 238;
  --primary-dark:      #3651d4;
  --primary-light:     #eef0fd;

  --sidebar-bg:        #0f1524;
  --sidebar-w:         260px;
  --sidebar-col:       70px;
  --sidebar-text:      #9fa7b5;

  --topbar-h:          60px;
  --topbar-bg:         #ffffff;

  --content-bg:        #f0f2f5;
  --card-bg:           #ffffff;
  --border:            #e2e8f0;
  --text:              #1a202c;
  --text-muted:        #334155;
  --text-light:        #475569;

  --shadow-xs:         0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:         0 1px 4px rgba(0,0,0,0.06);
  --shadow:            0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:         0 4px 20px rgba(0,0,0,0.10);

  --radius-sm:         6px;
  --radius:            10px;
  --radius-lg:         14px;
  --trans:             0.2s ease;
  --trans-slow:        0.32s cubic-bezier(.4,0,.2,1);
  --font:              'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --topbar-bg:         #1a1f2e;
  --content-bg:        #0f1117;
  --card-bg:           #1a1f2e;
  --border:            #2d3448;
  --text:              #e2e8f0;
  --text-muted:        #a9b6c7;
  --text-light:        #94a3b8;
}

/* ═══════════════════════════════════════════
   BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 15px;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--content-bg);
  color: var(--text);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background .3s ease, color .3s ease;
}

/* ═══════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════ */
#wrapper { display: flex; min-height: 100vh; padding-top: var(--topbar-h); }

/* ═══════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background: var(--sidebar-bg);
  position: fixed;
  left: 0; top: var(--topbar-h);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--trans-slow), transform var(--trans-slow);
  border-right: 1px solid rgba(255,255,255,0.04);
}

body[data-sidebar="collapsed"] #sidebar { width: var(--sidebar-col); }
body[data-sidebar="hidden"]    #sidebar { transform: translateX(-100%); }

.sb-nav {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  padding: .6rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.sb-nav::-webkit-scrollbar { width: 3px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }

.nav-section { margin-bottom: .15rem; }

.nav-section-label {
  font-size: .67rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: rgba(136,146,164,.45);
  padding: .9rem 1.25rem .3rem;
  white-space: nowrap;
  max-height: 40px;
  overflow: hidden;
  transition: opacity var(--trans-slow), max-height var(--trans-slow), padding var(--trans-slow);
}
body[data-sidebar="collapsed"] .nav-section-label {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.nav-list { list-style: none; padding: 0; margin: 0; }

.nav-link-item {
  display: flex; align-items: center;
  padding: .54rem .9rem;
  margin: 1px .55rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background var(--trans), color var(--trans);
  cursor: pointer;
  user-select: none;
}
.nav-link-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link-item.active {
  background: rgba(67,97,238,.16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--primary);
}

.nav-ico {
  font-size: 1.05rem;
  width: 34px; min-width: 34px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--trans);
}
.nav-link-item.active .nav-ico { color: var(--primary); }

.nav-lbl {
  font-size: .88rem; font-weight: 500;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  max-width: 180px;
  transition: opacity var(--trans-slow), max-width var(--trans-slow);
}
.nav-arr {
  font-size: .68rem;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 20px;
  transition: transform var(--trans), opacity var(--trans-slow), max-width var(--trans-slow);
}
.nav-link-item[aria-expanded="true"] .nav-arr { transform: rotate(180deg); }

body[data-sidebar="collapsed"] .nav-lbl {
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  flex: 0;
}
body[data-sidebar="collapsed"] .nav-arr {
  opacity: 0;
  pointer-events: none;
  max-width: 0;
}
body[data-sidebar="collapsed"] .nav-link-item {
  justify-content: center;
  padding: .72rem .5rem;
  margin: 1px .5rem;
  position: relative;
}
body[data-sidebar="collapsed"] .nav-ico {
  width: 34px;
  min-width: 34px;
  font-size: 1.1rem;
}
body[data-sidebar="collapsed"] .nav-link-item.active {
  box-shadow: none;
  background: rgba(67,97,238,.22);
}

/* Tooltip CSS natif en mode collapsed */
body[data-sidebar="collapsed"] .nav-link-item:not(.has-sub)[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: #0f1524;
  color: #e2e8f0;
  font-size: .77rem;
  font-weight: 500;
  padding: .35em .75em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1050;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
}
body[data-sidebar="collapsed"] .nav-link-item:not(.has-sub)[data-tooltip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 6px);
  top: 50%; transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #0f1524;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 1050;
}
body[data-sidebar="collapsed"] .nav-link-item:not(.has-sub)[data-tooltip]:hover::after,
body[data-sidebar="collapsed"] .nav-link-item:not(.has-sub)[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── Flyout submenu (mode collapsed) ── */
.sb-flyout {
  position: fixed;
  z-index: 1060;
  background: #131c2f;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  padding: .4rem;
  min-width: 195px;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  transform: translateX(-6px);
}
.sb-flyout.show { opacity: 1; pointer-events: all; transform: translateX(0); }

.sb-flyout::before {
  content: '';
  position: absolute;
  left: -7px; top: var(--flyout-arrow-top, 16px);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid rgba(255,255,255,.09);
}
.sb-flyout::after {
  content: '';
  position: absolute;
  left: -5px; top: calc(var(--flyout-arrow-top, 16px) + 1px);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #131c2f;
}
.sb-flyout-title {
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem .8rem .35rem;
}
.sb-flyout-list { list-style: none; padding: 0; margin: 0; }
.sb-flyout-list a {
  display: block;
  padding: .48rem .8rem;
  font-size: .85rem; font-weight: 500;
  color: #8892a4;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}
.sb-flyout-list a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-flyout-list a.active { color: var(--primary); }

/* Badge pill nav */
.nav-pill {
  font-size: .6rem; font-weight: 700;
  padding: .15em .5em; border-radius: 20px;
  background: var(--primary); color: #fff;
  line-height: 1.5; margin-left: 2px;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 30px;
  transition: opacity var(--trans-slow), max-width var(--trans-slow), padding var(--trans-slow), margin var(--trans-slow);
}
body[data-sidebar="collapsed"] .nav-pill {
  opacity: 0;
  max-width: 0;
  padding: 0;
  margin: 0;
}

/* Submenu */
.nav-sub { list-style: none; padding: .2rem 0; margin: 0; }
.nav-sub-link {
  display: flex; align-items: center; gap: 8px;
  padding: .42rem 1rem .42rem 3.1rem;
  margin: 1px .55rem;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: .85rem;
  white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}
.nav-sub-link::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: .35;
  margin-left: -1rem;
}
.nav-sub-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-sub-link.active { color: var(--primary); }

body[data-sidebar="collapsed"] .nav-sub { display: none; }

/* Footer — bouton collapse */
.sb-collapse-wrap {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.05);
  padding: .4rem .6rem;
}
.sb-collapse-btn {
  display: flex; align-items: center; gap: 0;
  width: 100%;
  padding: .55rem .75rem;
  background: transparent; border: none;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text);
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap; text-align: left;
}
.sb-collapse-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-col-ico {
  font-size: 1rem;
  min-width: 34px; width: 34px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color var(--trans);
}
.sb-col-lbl {
  font-size: .88rem; font-weight: 500;
  flex: 1; overflow: hidden; white-space: nowrap;
  max-width: 180px;
  transition: opacity var(--trans-slow), max-width var(--trans-slow);
}
body[data-sidebar="collapsed"] .sb-col-lbl { opacity: 0; max-width: 0; flex: 0; pointer-events: none; }
body[data-sidebar="collapsed"] .sb-collapse-btn { justify-content: center; }

/* ═══════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════ */
#main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex; flex-direction: column;
  overflow-x: hidden;
  transition: margin-left var(--trans-slow);
}
body[data-sidebar="collapsed"] #main-content { margin-left: var(--sidebar-col); }
body[data-sidebar="hidden"]    #main-content { margin-left: 0; }

/* ═══════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════ */
#topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.1rem;
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  z-index: 1040;
  transition: background var(--trans), border-color var(--trans);
}

.topbar-left, .topbar-right {
  display: flex; align-items: center; gap: .25rem;
  flex-shrink: 0;
}

.tb-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  margin: 0 .4rem;
}
.tb-logo-icon {
  width: 28px; height: 28px;
  background: var(--primary);
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(67,97,238,.35);
  flex-shrink: 0;
}
.tb-logo-icon i { color: #fff; font-size: 12px; }
.tb-logo-text {
  font-size: .95rem; font-weight: 800;
  color: var(--text); letter-spacing: -.3px;
  white-space: nowrap;
}
.tb-logo-text em { color: var(--primary); font-style: normal; }

.topbar-nav {
  display: flex; align-items: center; gap: .1rem;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.tn-link {
  display: flex; align-items: center; gap: 5px;
  padding: .38rem .78rem;
  font-size: .85rem; font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}
.tn-link i { font-size: .85rem; }
.tn-link:hover { background: rgba(0,0,0,.045); color: var(--text); }
.tn-link.active { color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .tn-link:hover { background: rgba(255,255,255,.07); }
[data-theme="dark"] .tn-link.active { background: rgba(67,97,238,.15); }

.tb-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: none; background: transparent;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
  font-size: 1.05rem; padding: 0;
  position: relative;
}
.tb-btn:hover { background: rgba(0,0,0,.05); color: var(--text); }
[data-theme="dark"] .tb-btn:hover { background: rgba(255,255,255,.07); }

.tb-divider { width: 1px; height: 20px; background: var(--border); margin: 0 .2rem; }

.tb-breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  margin-left: .4rem;
}
.tb-breadcrumb span { font-size: .84rem; color: var(--text-muted); }
.tb-breadcrumb span.active { color: var(--text); font-weight: 600; }
.tb-breadcrumb i { font-size: .65rem; color: var(--text-light); }

.btn-create {
  display: flex; align-items: center; gap: 6px;
  padding: .42rem .9rem;
  font-size: .82rem; font-weight: 600;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--trans), box-shadow var(--trans);
}
.btn-create:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(67,97,238,.35);
}
.btn-create.dropdown-toggle::after { display: none; }

/* Planning jour — couleur ambre distincte du bleu primaire (Calendrier), pour
   se distinguer au coup d'œil comme l'action "à faire aujourd'hui". */
.btn-create.btn-planning { background: #d97706; text-decoration: none; }
.btn-create.btn-planning:hover { background: #b45309; box-shadow: 0 4px 12px rgba(217,119,6,.35); }
.btn-create.btn-planning.active { background: #b45309; }

.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: #ef4444; border-radius: 50%;
  border: 1.5px solid var(--topbar-bg);
  animation: pulse 2.5s infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

.av-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px;
  border: none; background: transparent;
  border-radius: 30px; cursor: pointer;
  transition: background var(--trans);
}
.av-btn:hover { background: rgba(0,0,0,.05); }
[data-theme="dark"] .av-btn:hover { background: rgba(255,255,255,.07); }
.av-btn.dropdown-toggle::after { display: none; }

.av-circle {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.av-name { font-size: .85rem; font-weight: 600; color: var(--text); line-height: 1.1; }
.av-role { font-size: .72rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════
   DROPDOWNS
═══════════════════════════════════════════ */
.dd-menu {
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: .3rem;
  min-width: 180px;
}
.dd-menu .dd-item {
  display: flex; align-items: center; gap: 9px;
  padding: .55rem .75rem;
  font-size: .87rem; color: var(--text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--trans), color var(--trans);
  cursor: pointer; border: none; background: none; width: 100%;
}
.dd-menu .dd-item:hover { background: var(--content-bg); color: var(--text); }
.dd-menu .dd-item i { font-size: .95rem; width: 16px; }
.dd-menu .dd-item.danger { color: #ef4444; }
.dd-menu .dd-item.danger:hover { background: #fef2f2; }
[data-theme="dark"] .dd-menu .dd-item.danger:hover { background: rgba(239,68,68,.1); }
.dd-sep { border: none; border-top: 1px solid var(--border); margin: .3rem 0; }

/* Caret arrow Phoenix style */
.dd-user-menu, .notif-dd { overflow: visible; }

.dd-user-menu::before, .dd-user-menu::after,
.notif-dd::before,     .notif-dd::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.dd-user-menu::before, .notif-dd::before {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--border);
  top: -9px;
}
.dd-user-menu::after, .notif-dd::after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--card-bg);
  top: -8px;
}
.dd-user-menu::before { right: 20px; }
.dd-user-menu::after  { right: 21px; }
.notif-dd::before     { right: 18px; }
.notif-dd::after      { right: 19px; }

/* User dropdown header */
.dd-user-head {
  display: flex; align-items: center; gap: 11px;
  padding: 1rem 1rem .85rem;
  border-bottom: 1px solid var(--border);
}
.av-circle-lg {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.dd-user-head .u-name  { font-size: .92rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.dd-user-head .u-email { font-size: .77rem; color: var(--text-muted); margin-top: 1px; }
.dd-body { padding: .3rem; }
.dd-signout {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: calc(100% - 1rem);
  margin: .15rem .5rem .5rem;
  padding: .5rem .7rem;
  font-size: .84rem; font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  text-decoration: none;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}
.dd-signout:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
[data-theme="dark"] .dd-signout:hover { background: rgba(239,68,68,.1); color: #f87171; border-color: rgba(239,68,68,.25); }

/* Notifications dropdown */
.notif-dd {
  width: 340px; min-width: 340px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  background: var(--card-bg);
  padding: 0;
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.notif-head h6 { font-size: .88rem; font-weight: 700; margin: 0; color: var(--text); }
.notif-head a { font-size: .77rem; color: var(--primary); text-decoration: none; }
.notif-item {
  display: flex; gap: 10px;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--trans);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--content-bg); }
.notif-item.unread { background: rgba(67,97,238,.025); }
.notif-ico {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}
.notif-body p { font-size: .84rem; color: var(--text); margin: 0 0 2px; line-height: 1.45; }
.notif-body span { font-size: .75rem; color: var(--text-muted); }
.notif-footer {
  display: flex; justify-content: center;
  padding: .7rem 1rem;
  border-top: 1px solid var(--border);
}
.notif-footer a {
  font-size: .82rem; color: var(--primary);
  font-weight: 500; text-decoration: none;
}
.notif-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════
   CONTENT AREA
═══════════════════════════════════════════ */
.content-area { flex: 1; min-width: 0; padding: 1.75rem 1.9rem 2.25rem; }

.page-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.6rem;
}
.page-title {
  font-size: 1.35rem; font-weight: 800;
  color: var(--text); margin: 0 0 2px;
  letter-spacing: -.4px;
}
.page-sub { font-size: .84rem; color: var(--text-muted); margin: 0; }

/* ═══════════════════════════════════════════
   CARDS
═══════════════════════════════════════════ */
.crm-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
  animation: fadeUp .35s ease both;
}
.crm-card:hover { box-shadow: var(--shadow); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.crm-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--border);
}
.crm-card-title { font-size: .88rem; font-weight: 700; color: var(--text); margin: 0; }
.crm-card-link { font-size: .77rem; color: var(--primary); text-decoration: none; display: flex; align-items: center; gap: 3px; }

/* ═══════════════════════════════════════════
   KPI CARDS
═══════════════════════════════════════════ */
.kpi-card { padding: 1.35rem; }
.kpi-lbl { font-size: .83rem; font-weight: 500; color: var(--text-muted); margin: 0 0 1px; }
.kpi-sub { font-size: .75rem; color: var(--text-light); margin: 0; }
.kpi-val {
  font-size: 1.85rem; font-weight: 800;
  color: var(--text); letter-spacing: -.5px;
  line-height: 1.15; margin: .3rem 0 0;
}

.row .col-kpi:nth-child(1) .crm-card { animation-delay: .05s; }
.row .col-kpi:nth-child(2) .crm-card { animation-delay: .1s; }
.row .col-kpi:nth-child(3) .crm-card { animation-delay: .15s; }
.row .col-kpi:nth-child(4) .crm-card { animation-delay: .2s; }

/* Variation badges */
.bv {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: .73rem; font-weight: 700;
  padding: .2em .55em; border-radius: 20px;
}
.bv.up   { background: #dcfce7; color: #15803d; }
.bv.down { background: #fff3cd; color: #92400e; }
[data-theme="dark"] .bv.up   { background: rgba(21,128,61,.2);  color: #4ade80; }
[data-theme="dark"] .bv.down { background: rgba(146,64,14,.2); color: #fbbf24; }

.kpi-chart-wrap { height: 52px; margin: .7rem 0 .55rem; }

.micro-bar { height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: .4rem; }
.micro-fill { height: 100%; border-radius: 3px; }

.legend-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; color: var(--text-muted);
}
.legend-dot { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-right: 5px; }

/* ═══════════════════════════════════════════
   INLINE STATS ROW
═══════════════════════════════════════════ */
.inline-stats {
  display: flex; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  animation: fadeUp .3s .22s ease both;
}
.inline-stat {
  display: flex; align-items: center; gap: 12px;
  padding: .95rem 1.5rem;
  flex: 1;
  border-right: 1px solid var(--border);
  transition: background var(--trans);
}
.inline-stat:last-child { border-right: none; }
.inline-stat:hover { background: var(--content-bg); }

.stat-ico {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.stat-num { font-size: 1.15rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.stat-lbl { font-size: .75rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════
   COMPOSANTS COMMUNS
═══════════════════════════════════════════ */

/* Boutons période chart */
.period-btn {
  font-size: .75rem; padding: .3rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; background: transparent; color: var(--text-muted);
  transition: all var(--trans);
}
.period-btn.active,
.period-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Avatar cercle small */
.c-av {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* Ligne client (top clients, fiches) */
.top-client {
  display: flex; align-items: center; gap: 10px;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
}
.top-client:last-child { border-bottom: none; }
.tc-name { font-size: .87rem; font-weight: 600; color: var(--text); }
.tc-sub  { font-size: .75rem; color: var(--text-muted); }
.tc-amt  { font-size: .87rem; font-weight: 700; color: var(--text); white-space: nowrap; }

/* ═══════════════════════════════════════════
   TABLEAU
═══════════════════════════════════════════ */
.crm-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.crm-tbl th {
  font-size: .73rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted);
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.crm-tbl td {
  padding: .72rem .85rem;
  font-size: .87rem; color: var(--text);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.crm-tbl tr:last-child td { border-bottom: none; }
.crm-tbl tbody tr:hover td { background: var(--content-bg); }

/* ═══════════════════════════════════════════
   STATUS BADGES
═══════════════════════════════════════════ */
.sb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600;
  padding: .22em .65em; border-radius: 20px;
}
.sb::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sb-ok   { background: #dcfce7; color: #15803d; }
.sb-info { background: #dbeafe; color: #1e40af; }
.sb-warn { background: #fff3cd; color: #92400e; }
.sb-err  { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .sb-ok   { background: rgba(21,128,61,.15); color: #4ade80; }
[data-theme="dark"] .sb-info { background: rgba(30,64,175,.2);  color: #93c5fd; }
[data-theme="dark"] .sb-warn { background: rgba(146,64,14,.15); color: #fbbf24; }
[data-theme="dark"] .sb-err  { background: rgba(185,28,28,.15); color: #f87171; }

/* ═══════════════════════════════════════════
   ACTIVITÉ FEED
═══════════════════════════════════════════ */
.act-item { display: flex; gap: 10px; padding: .72rem 0; border-bottom: 1px solid var(--border); }
.act-item:last-child { border-bottom: none; }
.act-line { position: relative; }
.act-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex-shrink: 0; }
.act-line::after {
  content: '';
  position: absolute; left: 3px; top: 13px; bottom: -.72rem;
  width: 1px; background: var(--border);
}
.act-item:last-child .act-line::after { display: none; }
.act-text { font-size: .85rem; color: var(--text); margin: 0 0 2px; line-height: 1.45; }
.act-text strong { color: var(--primary); font-weight: 600; }
.act-time { font-size: .74rem; color: var(--text-light); }

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }

/* ═══════════════════════════════════════════
   SIDEBAR OVERLAY — backdrop mobile
═══════════════════════════════════════════ */
#sb-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1029;
  opacity: 0; pointer-events: none;
  transition: opacity var(--trans-slow);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════
   SIDEBAR MOBILE HEADER
═══════════════════════════════════════════ */
.sb-mobile-head {
  display: none;
  align-items: center; justify-content: space-between;
  padding: 0 .8rem 0 1.1rem;
  height: var(--topbar-h);
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.sb-mobile-head .tb-logo-text     { color: #fff; }
.sb-mobile-head .tb-logo-text em  { color: var(--primary); }
.sb-close-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.07);
  border: none; border-radius: 8px;
  color: var(--sidebar-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
  transition: background var(--trans), color var(--trans);
  flex-shrink: 0;
}
.sb-close-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* ≥ 768px : hamburger topbar masqué (sidebar a son propre toggle) */
@media (min-width: 768px) {
  #btn-sidebar-toggle { display: none; }
}

/* ≤ 991px : masquer nav centrale topbar */
@media (max-width: 991.98px) {
  .topbar-nav { display: none; }
}

/* ≤ 767px : mobile */
@media (max-width: 767.98px) {

  #sb-overlay { display: block; }
  body[data-sidebar="expanded"] #sb-overlay { opacity: 1; pointer-events: all; }

  #sidebar {
    width: var(--sidebar-w) !important;
    top: 0;
    height: 100vh; height: 100dvh;
    transform: translateX(-100%);
    box-shadow: none;
  }
  body[data-sidebar="expanded"]  #sidebar { transform: translateX(0); box-shadow: 6px 0 40px rgba(0,0,0,.5); }
  body[data-sidebar="collapsed"] #sidebar { transform: translateX(-100%); }
  .sb-collapse-wrap { display: none; }
  .sb-mobile-head   { display: flex; }

  #main-content { margin-left: 0 !important; }
  .content-area {
    padding: 1.1rem 1rem 1rem;
  }

  #topbar { padding: 0 .6rem; }
  .tb-logo {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    margin: 0;
  }
  #btn-apps,
  #btn-theme-toggle,
  .btn-create,
  .tb-divider         { display: none !important; }
  .av-name, .av-role  { display: none; }
  .av-btn             { padding: 4px; gap: 0; }
  .av-btn .bi-chevron-down { display: none; }

  .page-hdr { flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
  .page-hdr > div:last-child { display: none; }
  .page-title { font-size: 1.15rem; }
  .page-sub   { font-size: .79rem; }

  .inline-stats { flex-wrap: wrap; }
  .inline-stat {
    flex: 0 0 50%; width: 50%;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: .8rem .95rem;
  }
  .inline-stat:nth-child(even)  { border-right: none !important; }
  .inline-stat:nth-child(3),
  .inline-stat:nth-child(4)     { border-bottom: none !important; }

  .crm-tbl th:nth-child(3),
  .crm-tbl td:nth-child(3) { display: none; }

  .row .col-kpi:nth-child(2) .crm-card { animation-delay: .05s; }
  .row .col-kpi:nth-child(3) .crm-card { animation-delay: .08s; }
  .row .col-kpi:nth-child(4) .crm-card { animation-delay: .11s; }
}

/* ≤ 399px : très petits écrans */
@media (max-width: 399.98px) {
  html           { font-size: 14px; }
  .content-area  { padding-left: .75rem; padding-right: .75rem; }
  .kpi-val       { font-size: 1.5rem; }
  .stat-num      { font-size: 1rem; }
  .crm-card      { padding: 1.1rem; }
  .kpi-card      { padding: 1rem; }
  .inline-stat   { padding: .65rem .7rem; }
  .stat-ico      { width: 34px; height: 34px; font-size: .9rem; }
}

/* ═══════════════════════════════════════════
   LOGIN
═══════════════════════════════════════════ */
body.login-page {
  min-height: 100vh; min-height: 100dvh;
  background: url('../img/auth-bg.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 6px 36px rgba(0,0,0,.14);
  padding: 2.25rem 2rem 2rem;
  width: 100%;
  max-width: 360px;
}

.login-logo {
  text-align: center;
  margin-bottom: 1.75rem;
}

.login-logo-icon {
  width: 42px; height: 42px;
  background: var(--primary);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.18rem;
  margin: 0 auto .6rem;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), .38);
}

.login-logo-name {
  font-size: 1.08rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.login-logo-name em { font-style: normal; color: var(--primary); }

.login-logo-img {
  display: block;
  max-width: 220px;
  max-height: 64px;
  margin: 0 auto .6rem;
}

.login-tagline {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Zone d'erreur — masquée par défaut */
/* CakePHP: afficher si $this->Flash->render('auth') contient une erreur */
.login-error {
  display: none;
  align-items: center; gap: 7px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 3px solid #ef4444;
  color: #b91c1c;
  border-radius: 3px;
  padding: .65rem .85rem;
  font-size: .82rem; font-weight: 500;
  margin-bottom: 1.1rem;
}
.login-error.show { display: flex; animation: shake .3s ease; }
.login-error i { color: #ef4444; font-size: .85rem; flex-shrink: 0; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px); }
  75%       { transform: translateX(5px); }
}

/* Deux champs séparés avec leur propre bordure */
.login-fields {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.1rem;
}

.login-field {
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.login-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
  background: rgba(var(--primary-rgb), .018);
}

.login-field-ico {
  flex-shrink: 0;
  padding: 0 .7rem 0 1rem;
  color: var(--text-light);
  font-size: .9rem;
  pointer-events: none;
  transition: color var(--trans);
}
.login-field:focus-within .login-field-ico { color: var(--primary); }

.login-field input {
  flex: 1;
  border: none; outline: none;
  padding: .95rem .8rem .95rem 0;
  font-family: inherit;
  font-size: .9rem;
  color: var(--text);
  background: transparent;
  min-height: 48px;
}
.login-field input::placeholder { color: var(--text-light); font-weight: 400; }

/* Bouton œil : maintenir pour voir / relâcher pour masquer */
.pwd-eye {
  flex-shrink: 0;
  background: none; border: none;
  padding: 0 1rem;
  cursor: pointer;
  color: var(--text-light);
  font-size: .9rem;
  display: flex; align-items: center;
  align-self: stretch;
  transition: color var(--trans);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.pwd-eye:hover  { color: var(--primary); }
.pwd-eye:focus  { outline: none; }

.login-submit {
  display: block; width: 100%;
  padding: .9rem 1rem;
  background: var(--primary); color: #fff;
  border: none; border-radius: 6px;
  font-family: inherit;
  font-size: .92rem; font-weight: 600;
  letter-spacing: .015em;
  cursor: pointer;
  transition: background var(--trans), box-shadow var(--trans), transform var(--trans);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 48px;
}
.login-submit:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), .38);
}
.login-submit:active {
  opacity: .92;
  transform: scale(.99);
}

/* ── Mobile ── */
@media (max-width: 575.98px) {
  body.login-page {
    padding: 1rem;
    align-items: center;
  }
  .login-card {
    max-width: 100%;
    padding: 2rem 1.5rem 1.75rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.18);
  }
}

@media (max-width: 359.98px) {
  .login-card { padding: 1.75rem 1.25rem 1.5rem; }
  .login-field input { font-size: .85rem; }
}

/* ═══════════════════════════════════════════
   BOUTONS — overrides Bootstrap
═══════════════════════════════════════════ */
.btn { font-family: var(--font); font-weight: 500; }
.btn-primary {
  --bs-btn-bg:                  var(--primary);
  --bs-btn-border-color:        var(--primary);
  --bs-btn-hover-bg:            var(--primary-dark);
  --bs-btn-hover-border-color:  var(--primary-dark);
  --bs-btn-active-bg:           var(--primary-dark);
  --bs-btn-focus-shadow-rgb:    var(--primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color:               var(--primary);
  --bs-btn-border-color:        var(--primary);
  --bs-btn-hover-bg:            var(--primary);
  --bs-btn-hover-border-color:  var(--primary);
  --bs-btn-active-bg:           var(--primary);
  --bs-btn-focus-shadow-rgb:    var(--primary-rgb);
}

/* ═══════════════════════════════════════════
   FORMULAIRES — overrides globaux
═══════════════════════════════════════════ */
.form-control,
.form-select {
  background-color: var(--card-bg);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: .9rem;
  transition: border-color var(--trans), box-shadow var(--trans), background-color var(--trans);
}
.form-control:focus,
.form-select:focus {
  background-color: var(--card-bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
  color: var(--text);
}
.form-control::placeholder { color: var(--text-light); }
.form-label {
  font-size: .85rem; font-weight: 500;
  color: var(--text); margin-bottom: .35rem;
}
.form-text { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.form-check-input { cursor: pointer; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
.form-check-label { font-size: .88rem; color: var(--text); cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.input-group-text {
  background-color: var(--content-bg);
  border-color: var(--border);
  color: var(--text-muted);
  font-size: .88rem;
}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select   { background-color: #252d3d; border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background-color: #252d3d; }
[data-theme="dark"] .form-control::placeholder { color: var(--text-light); }
[data-theme="dark"] .input-group-text { background-color: #1e2436; border-color: var(--border); }
[data-theme="dark"] .form-check-input:not(:checked) { background-color: #252d3d; border-color: var(--border); }

/* ═══════════════════════════════════════════
   ALERTES
═══════════════════════════════════════════ */
.crm-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: .9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  font-size: .87rem; line-height: 1.5;
}
.crm-alert .ca-ico { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.crm-alert .ca-content { flex: 1; min-width: 0; }
.crm-alert .ca-title { font-weight: 600; margin-bottom: 2px; line-height: 1.3; }
.crm-alert .ca-body  { font-size: .83rem; opacity: .85; }
.crm-alert .ca-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  opacity: .5; font-size: .85rem; padding: 0 0 0 .5rem;
  color: inherit; line-height: 1; transition: opacity var(--trans);
}
.crm-alert .ca-close:hover { opacity: 1; }
.crm-alert-success { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #22c55e; color: #15803d; }
.crm-alert-info    { background: #eff6ff; border-color: #bfdbfe; border-left-color: #3b82f6; color: #1e40af; }
.crm-alert-warning { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; color: #92400e; }
.crm-alert-danger  { background: #fef2f2; border-color: #fecaca; border-left-color: #ef4444; color: #b91c1c; }
[data-theme="dark"] .crm-alert-success { background: rgba(21,128,61,.1);  border-color: rgba(34,197,94,.15);  border-left-color: #22c55e; color: #4ade80; }
[data-theme="dark"] .crm-alert-info    { background: rgba(30,64,175,.1);  border-color: rgba(59,130,246,.15); border-left-color: #3b82f6; color: #93c5fd; }
[data-theme="dark"] .crm-alert-warning { background: rgba(146,64,14,.1);  border-color: rgba(245,158,11,.15); border-left-color: #f59e0b; color: #fbbf24; }
[data-theme="dark"] .crm-alert-danger  { background: rgba(185,28,28,.1);  border-color: rgba(239,68,68,.15);  border-left-color: #ef4444; color: #f87171; }

/* ═══════════════════════════════════════════
   PROGRESS BARS
═══════════════════════════════════════════ */
.crm-progress-wrap { margin-bottom: 1.1rem; }
.crm-progress-wrap:last-child { margin-bottom: 0; }
.crm-progress-label {
  display: flex; justify-content: space-between;
  font-size: .8rem; font-weight: 500;
  color: var(--text-muted); margin-bottom: .4rem;
}
.crm-progress-label strong { color: var(--text); font-weight: 700; }
.crm-progress-bar {
  height: 7px; background: var(--border);
  border-radius: 20px; overflow: hidden;
}
.crm-progress-bar.thick { height: 10px; }
.crm-progress-bar.thin  { height: 4px; }
.crm-progress-fill {
  height: 100%; border-radius: 20px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}
.crm-stacked-bar { display: flex; height: 100%; border-radius: 20px; overflow: hidden; }
.crm-stacked-bar > div { height: 100%; }

/* Radial — CSS conic-gradient */
.ui-radial {
  --pct: 0;
  --clr: var(--primary);
  width: 76px; height: 76px; border-radius: 50%;
  background: conic-gradient(var(--clr) calc(var(--pct) * 1%), var(--border) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ui-radial::before {
  content: ''; position: absolute; inset: 9px;
  background: var(--card-bg); border-radius: 50%;
}
.ui-radial span { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════
   MODALS — overrides
═══════════════════════════════════════════ */
.crm-modal .modal-content {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
.crm-modal .modal-header { border-bottom: 1px solid var(--border); padding: 1.1rem 1.4rem; }
.crm-modal .modal-title  { font-size: .97rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.crm-modal .modal-body   { padding: 1.4rem; color: var(--text); }
.crm-modal .modal-footer { border-top: 1px solid var(--border); padding: .85rem 1.4rem; gap: .5rem; }
.crm-modal .btn-close { opacity: .4; }
.crm-modal .btn-close:hover { opacity: .8; }
[data-theme="dark"] .crm-modal .modal-content { background: var(--card-bg); }
[data-theme="dark"] .crm-modal .btn-close { filter: invert(1); }

/* ═══════════════════════════════════════════
   NOTIFICATIONS TOAST
═══════════════════════════════════════════ */
#crm-toast-container {
  position: fixed; top: 1.2rem; right: 1.2rem;
  z-index: 1095; display: flex; flex-direction: column;
  gap: .55rem; min-width: 300px; max-width: 380px;
  pointer-events: none;
}
.crm-toast {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
  overflow: hidden; pointer-events: all;
  animation: toastIn .3s cubic-bezier(.21,1.02,.73,1) both;
}
.crm-toast.hiding {
  animation: toastOut .22s ease forwards;
  pointer-events: none;
}
@keyframes toastIn  { from { opacity:0; transform:translateX(110%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { to   { opacity:0; transform:translateX(110%); } }

.crm-toast-inner {
  display: flex; align-items: flex-start;
  gap: .7rem; padding: .85rem 1rem;
}
.crm-toast-ico   { font-size: 1.05rem; flex-shrink: 0; margin-top: 2px; }
.crm-toast-cnt   { flex: 1; min-width: 0; }
.crm-toast-title { font-size: .83rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.crm-toast-msg   { font-size: .79rem; color: var(--text-muted); line-height: 1.45; margin-top: 2px; }
.crm-toast-close {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: .78rem; padding: 0;
  line-height: 1; transition: color var(--trans); margin-top: 1px;
}
.crm-toast-close:hover { color: var(--text); }
.crm-toast-bar {
  height: 3px; width: 100%; transform-origin: left;
  animation: crmBarShrink linear forwards;
}
@keyframes crmBarShrink { from { transform:scaleX(1); } to { transform:scaleX(0); } }

.crm-toast[data-type="success"] .crm-toast-ico { color: #16a34a; }
.crm-toast[data-type="success"] .crm-toast-bar { background: #16a34a; }
.crm-toast[data-type="error"]   .crm-toast-ico { color: #dc2626; }
.crm-toast[data-type="error"]   .crm-toast-bar { background: #dc2626; }
.crm-toast[data-type="warning"] .crm-toast-ico { color: #d97706; }
.crm-toast[data-type="warning"] .crm-toast-bar { background: #d97706; }
.crm-toast[data-type="info"]    .crm-toast-ico { color: #2563eb; }
.crm-toast[data-type="info"]    .crm-toast-bar { background: #2563eb; }

/* ═══════════════════════════════════════════
   UI ELEMENTS — STYLE GUIDE LAYOUT
═══════════════════════════════════════════ */
.ui-sticky-nav {
  position: sticky; top: var(--topbar-h); z-index: 100;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: .4rem .6rem; margin-bottom: 1.75rem;
  transition: background var(--trans), border-color var(--trans);
}
.ui-nav {
  display: flex; align-items: center; gap: .15rem;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ui-nav::-webkit-scrollbar { display: none; }
.ui-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: .38rem .8rem;
  font-size: .81rem; font-weight: 500; color: var(--text-muted);
  border-radius: var(--radius-sm); text-decoration: none; white-space: nowrap;
  transition: background var(--trans), color var(--trans);
}
.ui-nav-link i { font-size: .78rem; }
.ui-nav-link:hover { background: var(--content-bg); color: var(--text); }
.ui-nav-link.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
[data-theme="dark"] .ui-nav-link:hover  { background: rgba(255,255,255,.06); }
[data-theme="dark"] .ui-nav-link.active { background: rgba(67,97,238,.15); }

.ui-section { margin-bottom: 3rem; scroll-margin-top: calc(var(--topbar-h) + 5.5rem); }
.ui-section-hdr { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.ui-section-title { font-size: .97rem; font-weight: 700; color: var(--text); margin: 0; white-space: nowrap; }
.ui-section-sub   { font-size: .78rem; color: var(--text-muted); white-space: nowrap; }
.ui-sep { flex: 1; height: 1px; background: var(--border); }

.ui-preview {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.ui-preview-body { padding: 1.5rem; }
.ui-preview-body + .ui-preview-body { border-top: 1px solid var(--border); }
.ui-preview-label {
  font-size: .69rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-light); padding: .42rem 1.5rem;
  background: var(--content-bg); border-top: 1px solid var(--border);
}
.ui-preview > .ui-preview-label:first-child { border-top: none; }

.typo-row { display: flex; align-items: baseline; gap: 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.typo-row:last-child { border-bottom: none; }
.typo-meta { min-width: 168px; flex-shrink: 0; font-size: .71rem; color: var(--text-muted); font-family: 'Courier New', monospace; }

/* ═══════════════════════════════════════════
   PHOENIX FORM FIELDS — label-above style
═══════════════════════════════════════════ */
.pf-field {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.pf-field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
  z-index: 2;
}
.pf-lbl {
  display: block;
  font-size: .82rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--primary);
  padding: .6rem .85rem .12rem;
  line-height: 1; pointer-events: none; user-select: none;
}
.pf-field:focus-within .pf-lbl { color: var(--primary); }
.pf-input, .pf-select {
  display: block; width: 100%;
  padding: .08rem .85rem .6rem;
  background: transparent; border: none; outline: none;
  font-family: var(--font); font-size: 1rem; color: var(--text);
}
.pf-input::placeholder { color: var(--text-light); }
.pf-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2rem; }
.pf-field.has-arrow::after {
  content: '';
  position: absolute; right: .85rem; bottom: .72rem;
  border: 4px solid transparent;
  border-top: 5px solid var(--text-muted); pointer-events: none;
}
.pf-field textarea.pf-input { resize: vertical; min-height: 96px; padding-bottom: .5rem; }
[data-theme="dark"] .pf-field { background: #252d3d; }
[data-theme="dark"] .pf-input,
[data-theme="dark"] .pf-select { color: var(--text); }

/* État erreur — pf-field */
.pf-field.has-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.pf-field.has-error .pf-lbl { color: #ef4444; }
.pf-err {
  font-size: .73rem; color: #ef4444; margin-top: .3rem;
  display: flex; align-items: center; gap: 4px;
}

/* Texte d'aide sous un champ — définition globale, certaines pages
   (Categories, CompanySettings) redéfinissent encore la leur en <style>
   local et priment sur celle-ci pour elles-mêmes (voir bug_css_class_defined_wrong_template) ;
   sert de filet par défaut pour toute page qui oublie de le faire. */
.pf-hint {
  font-size: .73rem; color: var(--text-muted); margin-top: .35rem;
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 5px;
}
.pf-hint i { flex-shrink: 0; margin-top: .15rem; color: var(--text-light); font-size: .8rem; }

/* Bandeau d'erreur formulaire */
.form-error-band {
  display: flex; align-items: flex-start; gap: .75rem;
  background: #fef2f2; border: 1px solid #fecaca;
  border-left: 4px solid #ef4444;
  border-radius: var(--radius-sm);
  padding: .85rem 1rem; margin-bottom: 1.5rem;
  font-size: .82rem; color: #b91c1c;
}
.form-error-band i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.form-error-band ul { margin: .3rem 0 0 0; padding-left: 1rem; }
.form-error-band ul li { margin-bottom: .15rem; }


/* ─── Tag input ─── */
.tag-wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: .4rem .85rem .38rem; min-height: 44px; cursor: text;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), .22);
  font-size: .7rem; font-weight: 700;
  padding: .2em .5em; border-radius: 4px;
  letter-spacing: .05em; text-transform: uppercase; user-select: none;
}
.tag-chip-del {
  cursor: pointer; background: none; border: none; padding: 0;
  color: inherit; opacity: .5; font-size: .7rem;
  display: flex; align-items: center; transition: opacity var(--trans); line-height: 1;
}
.tag-chip-del:hover { opacity: 1; }
.tag-bare-input {
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: .88rem; color: var(--text);
  min-width: 90px; flex: 1; padding: 0;
}
.tag-bare-input::placeholder { color: var(--text-light); }
[data-theme="dark"] .tag-chip { background: rgba(67,97,238,.15); border-color: rgba(67,97,238,.3); }

/* ─── Stepper wizard ─── */
.frm-wizard { display: flex; align-items: center; margin-bottom: 1.75rem; }
.ws-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ws-line { flex: 1; height: 2px; background: var(--border); margin: 0 .5rem; transition: background .4s ease; }
.ws-circle {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--text-muted);
  flex-shrink: 0; transition: all .25s ease;
}
.ws-lbl { font-size: .79rem; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
.ws-step.done .ws-circle   { background: var(--primary); border-color: var(--primary); color: #fff; }
.ws-step.done .ws-lbl      { color: var(--primary); font-weight: 600; }
.ws-step.done + .ws-line   { background: var(--primary); }
.ws-step.active .ws-circle { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .15); }
.ws-step.active .ws-lbl    { color: var(--text); font-weight: 600; }

/* ─── File drop zone ─── */
.file-drop {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; text-align: center; cursor: pointer;
  background: transparent;
  transition: border-color var(--trans), background var(--trans);
}
.file-drop:hover, .file-drop.drag-over { border-color: var(--primary); background: var(--primary-light); }
[data-theme="dark"] .file-drop:hover,
[data-theme="dark"] .file-drop.drag-over { background: rgba(67,97,238,.08); }
.file-drop-ico { font-size: 2rem; color: var(--text-light); margin-bottom: .4rem; display: block; transition: color var(--trans); }
.file-drop:hover .file-drop-ico,
.file-drop.drag-over .file-drop-ico { color: var(--primary); }
.file-drop-title { font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: .2rem; }
.file-drop-sub   { font-size: .77rem; color: var(--text-muted); }

/* ─── Custom range slider ─── */
.crm-range {
  -webkit-appearance: none; width: 100%; height: 5px;
  border-radius: 5px; outline: none; cursor: pointer;
  background: linear-gradient(to right, var(--primary) var(--rng-pct, 50%), var(--border) var(--rng-pct, 50%));
}
.crm-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--primary);
  border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 2px var(--primary), 0 2px 6px rgba(var(--primary-rgb),.3);
  cursor: pointer; transition: transform .15s ease;
}
.crm-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.crm-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 2px var(--primary); cursor: pointer;
}

/* ─── Color presets ─── */
.color-preset {
  width: 26px; height: 26px; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform var(--trans), box-shadow var(--trans);
  flex-shrink: 0;
}
.color-preset:hover { transform: scale(1.12); }
.color-preset.active { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 4px var(--text); }

/* ═══════════════════════════════════════════
   FLATPICKR — theme override
═══════════════════════════════════════════ */
.flatpickr-calendar {
  font-family: var(--font) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--card-bg) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-weekday            { background: var(--card-bg) !important; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: var(--text-muted) !important; fill: var(--text-muted) !important; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: var(--primary) !important; fill: var(--primary) !important; }
.flatpickr-current-month span.cur-month { color: var(--text) !important; }
.numInput                     { color: var(--text) !important; background: transparent !important; }
.numInputWrapper:hover        { background: var(--content-bg) !important; }
.flatpickr-weekday            { color: var(--text-muted) !important; font-weight: 600 !important; font-size: .72rem !important; }
.flatpickr-day                { color: var(--text) !important; border-radius: var(--radius-sm) !important; }
.flatpickr-day:hover          { background: var(--content-bg) !important; border-color: transparent !important; }
.flatpickr-day.today          { border-color: var(--primary) !important; color: var(--primary) !important; font-weight: 600 !important; }
.flatpickr-day.today:hover    { background: var(--primary-light) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.flatpickr-day.inRange        { background: var(--primary-light) !important; border-color: var(--primary-light) !important; color: var(--primary) !important; box-shadow: none !important; }
.flatpickr-day.startRange,
.flatpickr-day.endRange       { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.flatpickr-day.flatpickr-disabled { color: var(--text-light) !important; opacity: .45; }
.flatpickr-time               { border-top: 1px solid var(--border) !important; background: var(--card-bg) !important; }
.flatpickr-time input         { color: var(--text) !important; }
.flatpickr-time .flatpickr-time-separator { color: var(--text-muted) !important; }
.flatpickr-am-pm              { color: var(--text-muted) !important; }
.flatpickr-am-pm:hover,
.flatpickr-time input:hover,
.flatpickr-time input:focus   { background: var(--content-bg) !important; }
[data-theme="dark"] .flatpickr-day:hover          { background: rgba(255,255,255,.08) !important; border-color: transparent !important; }
[data-theme="dark"] .flatpickr-day.today:hover    { background: rgba(67,97,238,.2) !important; }
[data-theme="dark"] .numInputWrapper:hover         { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .flatpickr-am-pm:hover,
[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time input:focus   { background: rgba(255,255,255,.06) !important; }

/* ═══════════════════════════════════════════
   FICHE — détail entité (company / order / product)
═══════════════════════════════════════════ */

/* ── Header ── */
.fiche-header {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: .65rem;
  position: relative;
  /* z-index : sans lui, ce sibling perd contre .fiche-body en ordre de peinture
     DOM (aucun des deux n'a de z-index sinon) — le menu "..." qui déborde sous
     le header se retrouvait peint SOUS la nav à tuiles/carte blanche juste en
     dessous, donc invisible malgré un z-index Bootstrap de 1000 en interne
     (ce 1000 ne compte que dans le contexte d'empilement de .fiche-header). */
  z-index: 2;
  animation: fadeUp .3s ease both;
}
/* PAS de overflow:hidden sur .fiche-header : ça rognait aussi le menu du
   dropdown "..." (position absolute, dépasse la carte) qui devenait invisible
   bien qu'ouvert dans le DOM. La barre d'accent arrondit ses propres coins
   plutôt que de compter sur le clip du parent. */
.fiche-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary) 0%, #7c3aed 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Ligne identité — seule ligne du header depuis la refonte compacte (plus de
   breadcrumb/avatar/sous-titre/chip commercial : ce détail vit dans l'onglet
   Infos de chaque fiche, cf. [[project_fiche_redesign_density_2026_07]]) */
.fiche-hdr-body {
  display: flex; align-items: center; gap: 1rem;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
}
/* En-tête réduit de moitié — statut + titre + 1-2 boutons, rien d'autre
   (le détail — référence, contact, coordonnées — vit déjà dans l'onglet Infos) */
.fiche-hdr-body--compact { padding: .6rem 1.25rem; }
.fiche-hdr-body--compact .fiche-title { font-size: 1.5rem; }

.fiche-title {
  font-size: 1.12rem; font-weight: 800; color: var(--text);
  letter-spacing: -.35px; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fiche-sep { color: var(--border); user-select: none; }
/* Lien discret vers une entité parente (ex. client d'un devis) juste à côté
   du titre — repère de navigation, pas une donnée dupliquée */
.fiche-contact-link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--text-muted); text-decoration: none; font-weight: 500;
  transition: color var(--trans);
}
.fiche-contact-link:hover { color: var(--primary); }

/* Date d'un document (devis/commande) à côté de la référence — pastille
   colorée plutôt que du texte gris discret, pour rester repérable au coup
   d'œil au même titre que le statut. */
.fiche-date-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; font-weight: 700;
  color: var(--primary); background: var(--primary-light);
  padding: .2em .65em; border-radius: 20px;
  white-space: nowrap;
}
[data-theme="dark"] .fiche-date-chip { background: rgba(var(--primary-rgb), .16); }

/* Carré de statut — remplace le badge texte devant le titre quand le statut
   est déjà visible juste en dessous (stepper de l'onglet actif par défaut) :
   un simple repère couleur suffit, pas la peine de répéter le mot. */
.fiche-status-dot {
  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
}

.fiche-header-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

/* ── Layout fiche — flex row ── */
/* flex-start (pas stretch) : la hauteur de .fiche-tab-wrap doit suivre son
   propre contenu, pas être forcée à la hauteur de la colonne de nav — testé en
   stretch pour éviter un vide gris à côté des tuiles sur les fiches à beaucoup
   d'onglets (Companies), mais ça produisait l'inverse : un onglet court se
   retrouvait avec une carte étirée et du vide en bas. */
.fiche-body {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

/* ── Nav verticale — liste compacte façon menu (même langage que la sidebar
   app #sidebar/.nav-link-item) : un seul bloc carte contient les rangées,
   plus de tuiles carrées séparées. Icône + libellé sur une ligne, filet de
   couleur (--tab-c) à gauche pour l'onglet actif — repérage instantané même
   avec beaucoup d'onglets (9 sur Companies), et la colonne tient dans une
   hauteur raisonnable au lieu de déborder largement sous le contenu.
   Remplace le design "tuiles carrées 108px" du 07-08/07/2026, jugé trop
   volumineux et pas assez scannable (retour utilisateur 09/07/2026). */
.fiche-vnav {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 210px;
  gap: 1px;
  padding: .4rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--topbar-h) + .75rem);
  animation: fadeUp .3s .09s ease both;
}

.fv-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .6rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--trans), color var(--trans);
  color: var(--text-muted);
  font-size: .83rem;
  font-weight: 600;
  position: relative;
}
.fv-item:hover { background: rgba(0,0,0,.035); }
[data-theme="dark"] .fv-item:hover { background: rgba(255,255,255,.05); }
.fv-item.active {
  background: var(--tab-bg, var(--primary-light));
  box-shadow: inset 3px 0 0 var(--tab-c, var(--primary));
  color: var(--text);
}
.fv-item.active .fv-lbl { color: var(--tab-c, var(--primary)); font-weight: 800; }
[data-theme="dark"] .fv-item.active { background: var(--tab-bg-dark, rgba(var(--primary-rgb),.16)); }

/* Puce colorée par onglet — fond plein + icône blanche (même recette que
   .parc-ico/.panier-prod-ico déjà dans l'app, pas la pastille pâle d'avant :
   un tag pastel washed-out laissait planer un doute sur "est-ce vraiment
   coloré ?", surtout sur les teintes ardoise/bleu clair. Fond plein = aucune
   ambiguïté, et cohérent avec le reste du produit. Lit --tab-c posée sur le
   .fv-item parent — plus besoin de répéter la couleur en inline sur l'icône
   elle-même dans chaque template. */
.fv-ico {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .92rem; flex-shrink: 0;
  background: var(--tab-c, var(--text-muted));
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.16);
}
.fv-lbl {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}

.fv-badge {
  font-size: .7rem; font-weight: 700;
  background: var(--content-bg); color: var(--text-muted);
  border: 1px solid var(--border);
  padding: .15em .5em; border-radius: 20px;
  min-width: 20px; text-align: center; line-height: 1.4;
  flex-shrink: 0;
}
.fv-badge--primary { background: #dbeafe; color: #1e40af; border-color: transparent; }
.fv-badge--warn    { background: #fff3cd; color: #92400e; border-color: transparent; }
[data-theme="dark"] .fv-badge          { background: rgba(255,255,255,.06); }
[data-theme="dark"] .fv-badge--primary { background: rgba(30,64,175,.2); color: #93c5fd; }
[data-theme="dark"] .fv-badge--warn    { background: rgba(146,64,14,.15); color: #fbbf24; }

/* Dans une rangée d'onglet — pastille alignée à droite de la ligne (fini le
   médaillon qui débordait en coin, inutile maintenant que la rangée est
   basse et large). Reprend la couleur d'identité de l'onglet (--tab-c,
   déjà posée sur .fv-item) plutôt qu'un bleu générique. */
.fv-item .fv-badge {
  margin-left: auto;
  background: var(--card-bg);
  color: var(--tab-c, var(--text-muted));
  border: 1px solid var(--tab-c, var(--border));
  line-height: 1.4;
}

/* ── Tab content wrapper ── */
.fiche-tab-wrap {
  flex: 1;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  animation: fadeUp .3s .12s ease both;
}
/* Barre d'en-tête avec background propre — arrondir les coins supérieurs */
.fiche-tbl-head-bar {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ── État vide générique (onglet sans données) — utilisé par plusieurs
   fiches (Products, Companies...), centralisé ici plutôt que dupliqué dans
   le <style> de chaque template. ── */
.placeholder-module { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; padding:3rem 2rem; color:var(--text-muted); text-align:center; }
.placeholder-module i { font-size:2.5rem; opacity:.25; }
.placeholder-module strong { font-size:.95rem; color:var(--text); }
.placeholder-module span { font-size:.82rem; }

/* ── Section ── */
.fiche-section { padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--border); }
.fiche-section:last-child { border-bottom: none; }

.fiche-section-ttl {
  font-size: .77rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-light);
  margin: 0 0 1.1rem; display: flex; align-items: center; gap: 8px;
}
.fiche-section-ttl::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Read fields ── */
.fiche-fields { display: flex; flex-direction: column; gap: .5rem; }
.fiche-field { display: flex; align-items: flex-start; min-height: 30px; }
.fiche-field-lbl {
  font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
  min-width: 140px; width: 140px; flex-shrink: 0; padding-top: 2px;
}
.fiche-field-val {
  font-size: .9rem; font-weight: 500; color: var(--text); flex: 1; line-height: 1.45;
}
.fiche-field-val a { color: var(--primary); text-decoration: none; }
.fiche-field-val a:hover { text-decoration: underline; }
.fiche-field-val .sb { font-size: .73rem; }

/* ── Edit mode ── */
.fiche-body.editing .fiche-field-val { display: none; }
.fiche-body.editing .fiche-pf { display: block; }
.fiche-body:not(.editing) .fiche-pf { display: none; }
.fiche-body:not(.editing) .fiche-edit-bar { display: none; }
.fiche-body.editing .fiche-edit-bar { display: flex; }
.fiche-pf { margin-top: 2px; }

.fiche-edit-bar {
  align-items: center; gap: .5rem;
  padding: .9rem 1.5rem;
  background: rgba(var(--primary-rgb), .04);
  border-top: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 0 0 var(--radius) var(--radius);
}
[data-theme="dark"] .fiche-edit-bar { background: rgba(var(--primary-rgb), .07); }

/* ═══════════════════════════════════════════════
   TAB SYNTHÈSE — Situation commerciale + financière + RDV
═══════════════════════════════════════════════ */

/* A. KPIs commerciaux — 3 colonnes */
.synt-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--border);
}
.synt-kpi-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.35rem 1.5rem;
  border-right: 1px solid var(--border);
}
.synt-kpi-card:last-child { border-right: none; }

.synt-kpi-ico {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.synt-kpi-body { display: flex; flex-direction: column; gap: 3px; }
.synt-kpi-lbl {
  font-size: .73rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted);
  display: flex; align-items: center; gap: .4rem;
}
.synt-kpi-val {
  font-size: 1.5rem; font-weight: 800;
  color: var(--text); letter-spacing: -.5px; line-height: 1.1;
}
.synt-kpi-sub { font-size: .75rem; color: var(--text-light); }
.synt-kpi-sub a { color: var(--primary); font-weight: 600; text-decoration: none; }
.synt-kpi-sub a:hover { text-decoration: underline; }

/* B + C + D — grille 3 colonnes */
.synt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
}
.synt-section {
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1rem 1.1rem;
}
.synt-section-hdr {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-muted);
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--border);
}
.synt-section-hdr i { font-size: .88rem; }

/* B. Situation financière */
.synt-sf-rows { display: flex; flex-direction: column; flex: 1; }
.synt-sf-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.synt-sf-row:last-child { border-bottom: none; }
.synt-sf-lbl { font-size: .88rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.synt-sf-sub { font-size: .74rem; color: var(--text-muted); margin-top: 1px; }
.synt-sf-val {
  font-size: 1.15rem; font-weight: 800;
  color: var(--text); letter-spacing: -.3px; flex-shrink: 0; margin-left: .5rem;
}
.synt-sf-val.warn { color: #d97706; }
.synt-sf-val.ok   { color: #15803d; }
.synt-sf-val.err  { color: #dc2626; }

.synt-link-btn {
  display: inline-flex; align-items: center;
  font-size: .81rem; font-weight: 600; color: var(--primary);
  background: transparent; border: none; cursor: pointer; padding: 0;
  margin-top: auto; transition: opacity var(--trans);
}
.synt-link-btn:hover { opacity: .72; }

/* C. Prochaine action */
.synt-rdv { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.synt-rdv-date { font-size: 1.1rem; font-weight: 800; color: var(--text); letter-spacing: -.3px; }
.synt-rdv-time { font-size: .9rem; font-weight: 700; color: var(--primary); }
.synt-rdv-time i { font-size: .82rem; }
.synt-rdv-obj { font-size: .88rem; color: var(--text); line-height: 1.4; padding: .25rem 0; }
.synt-rdv-meta { display: flex; flex-direction: column; gap: .2rem; }
.synt-rdv-meta span {
  font-size: .78rem; color: var(--text-muted);
  display: flex; align-items: center; gap: .3rem;
}
.synt-rdv-meta i { font-size: .78rem; }

/* D. Panier card */
.synt-panier-card {
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.synt-panier-card:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .08);
}
[data-theme="dark"] .synt-panier-card:hover { background: rgba(var(--primary-rgb),.07); }
.synt-panier-total {
  font-size: 1.85rem; font-weight: 800;
  color: var(--text); letter-spacing: -.6px; line-height: 1;
  padding: .4rem 0;
}
.synt-panier-hint { font-size: .8rem; font-weight: 600; color: var(--primary); margin-top: auto; }

/* ── Aside ── */
.fiche-aside-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 1rem; overflow: hidden;
}
.fiche-aside-card:nth-child(1) { animation: fadeUp .3s .06s ease both; }
.fiche-aside-card:nth-child(2) { animation: fadeUp .3s .12s ease both; }
.fiche-aside-card:nth-child(3) { animation: fadeUp .3s .18s ease both; }
.fiche-aside-card:nth-child(4) { animation: fadeUp .3s .24s ease both; }

.fiche-aside-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem; border-bottom: 1px solid var(--border);
}
.aside-hdr-ttl {
  font-size: .71rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted);
}
.aside-hdr-link { font-size: .77rem; color: var(--primary); text-decoration: none; }
.aside-hdr-link:hover { text-decoration: underline; }

.aside-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; }
.aside-kpi-cell {
  padding: 1rem 1.1rem; text-align: center;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.aside-kpi-cell:nth-child(2n) { border-right: none; }
.aside-kpi-cell:nth-last-child(-n+2) { border-bottom: none; }
.aside-kpi-val {
  font-size: 1.25rem; font-weight: 800; color: var(--text);
  letter-spacing: -.5px; line-height: 1.1; display: block;
}
.aside-kpi-val.accent { color: var(--primary); }
.aside-kpi-lbl { font-size: .71rem; color: var(--text-muted); display: block; margin-top: 3px; }
.aside-kpi-sub { font-size: .69rem; color: var(--text-light); display: block; margin-top: 1px; }

.fiche-quick-actions { padding: .6rem; display: flex; flex-direction: column; gap: .25rem; }
.fiche-qa-btn {
  display: flex; align-items: center; gap: 8px;
  padding: .58rem .85rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--text); font-size: .87rem; font-weight: 500;
  cursor: pointer; text-decoration: none; width: 100%;
  transition: all var(--trans);
}
.fiche-qa-btn i { font-size: .95rem; color: var(--text-muted); flex-shrink: 0; transition: color var(--trans); }
.fiche-qa-btn:hover { background: var(--content-bg); border-color: var(--primary); color: var(--primary); }
.fiche-qa-btn:hover i { color: var(--primary); }
.fiche-qa-btn.qa-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.fiche-qa-btn.qa-primary i { color: rgba(255,255,255,.7); }
.fiche-qa-btn.qa-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; box-shadow: 0 4px 12px rgba(var(--primary-rgb),.3); }
.fiche-qa-btn.qa-primary:hover i { color: rgba(255,255,255,.8); }

.aside-info-body { padding: .35rem 1.1rem .65rem; }
.aside-info-row {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .85rem;
}
.aside-info-row:last-child { border-bottom: none; }
.air-lbl { color: var(--text-muted); min-width: 70px; flex-shrink: 0; font-size: .77rem; padding-top: 1px; }
.air-val { color: var(--text); font-weight: 500; flex: 1; }

.aside-commercial { display: flex; align-items: center; gap: .55rem; }
.aside-commercial .c-av { width: 22px; height: 22px; font-size: .58rem; font-weight: 800; }

.tag-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag-pill {
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  padding: .2em .6em; border-radius: 4px;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), .18);
}
.tag-pill.neutral { background: var(--content-bg); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .tag-pill { background: rgba(var(--primary-rgb),.15); }
[data-theme="dark"] .tag-pill.neutral { background: rgba(255,255,255,.05); }

/* ── Panier ── */

.panier-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.5rem; border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.panier-row:hover { background: rgba(var(--primary-rgb), .025); }

.panier-prod-ico {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; flex-shrink: 0;
}
.panier-prod-info { flex: 1; min-width: 0; }
.panier-prod-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.panier-prod-spec { font-size: .8rem; color: var(--text-muted); margin-top: 1px; }

.qty-ctrl {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; flex-shrink: 0;
}
.qty-btn {
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--trans), color var(--trans);
}
.qty-btn:hover { background: var(--content-bg); color: var(--text); }
.qty-val {
  width: 40px; height: 28px; text-align: center;
  font-size: .87rem; font-weight: 700; color: var(--text);
  border: none; outline: none; background: transparent;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  -moz-appearance: textfield;
}
.qty-val::-webkit-outer-spin-button,
.qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.panier-price { min-width: 72px; text-align: right; flex-shrink: 0; }
.panier-price-total { font-size: .9rem; font-weight: 700; color: var(--text); display: block; }
.panier-price-unit { font-size: .71rem; color: var(--text-muted); display: block; }

/* Ligne panier « offerte » (cadeau à 0 €) — liseré violet + badge « Offert »
   pour la repérer dans le panier. Le prix n'est pas éditable (toujours 0). */
.panier-row--offert { background: rgba(124, 58, 237, .05); box-shadow: inset 3px 0 0 #7c3aed; }
.panier-row--offert:hover { background: rgba(124, 58, 237, .09); }
.panier-offert-badge {
  display: inline-block; font-size: .64rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: #7c3aed;
  border-radius: 999px; padding: .05rem .4rem; vertical-align: middle; margin-right: .1rem;
}
.panier-offert-price { text-align: right; }
.panier-offert-price .prod-prix-val { font-size: .87rem; font-weight: 700; color: var(--text); display: block; }
.panier-offert-tag { font-size: .71rem; font-weight: 700; color: #7c3aed; display: block; }

.panier-del {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-light); cursor: pointer; font-size: .82rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--trans);
}
.panier-del:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
[data-theme="dark"] .panier-del:hover { background: rgba(239,68,68,.12); }

.panier-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
}
.panier-total-lbl { font-size: .74rem; color: var(--text-muted); display: block; margin-bottom: 2px; }
.panier-total-ttc { font-size: 1.3rem; font-weight: 800; color: var(--text); letter-spacing: -.5px; display: block; line-height: 1; }
.panier-total-ht  { font-size: .75rem; color: var(--text-muted); display: block; margin-top: 3px; }
.panier-cta { display: flex; align-items: center; gap: .4rem; }

/* ── Activity timeline ── */
.ft-add-bar {
  display: flex; align-items: center; gap: .35rem;
  padding: .8rem 1.25rem; border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--content-bg); flex-wrap: wrap;
}
.ft-add-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .79rem; font-weight: 500;
  padding: .3rem .72rem; border-radius: 20px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all var(--trans); text-decoration: none;
}
.ft-add-chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.ft-add-chip i { font-size: .77rem; }

.ft-filters {
  display: flex; align-items: center; gap: .3rem;
  padding: .65rem 1.25rem; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.ft-filters::-webkit-scrollbar { display: none; }
.ft-chip {
  font-size: .76rem; font-weight: 600; padding: .22rem .7rem;
  border-radius: 20px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all var(--trans);
}
.ft-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ft-chip:hover:not(.active) { border-color: var(--text-muted); color: var(--text); }
[data-theme="dark"] .ft-add-bar { background: rgba(255,255,255,.02); }

.fiche-timeline { padding: 1.25rem 1.25rem 1rem; }
.ft-item { display: flex; gap: .9rem; position: relative; padding-bottom: 1.25rem; }
.ft-item:last-child { padding-bottom: 0; }
.ft-item:not(:last-child)::before {
  content: ''; position: absolute;
  left: 19px; top: 39px; bottom: 0;
  width: 1px; background: var(--border);
}

.ft-ico {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .88rem; flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 4px var(--border);
}
.ft-ico.t-note  { background: #fef9c3; color: #92400e; }
.ft-ico.t-email { background: #dbeafe; color: #1e40af; }
.ft-ico.t-call  { background: #dcfce7; color: #15803d; }
.ft-ico.t-rdv   { background: #f5f3ff; color: #7c3aed; }
.ft-ico.t-cmd   { background: var(--primary-light); color: var(--primary); }
[data-theme="dark"] .ft-ico { box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 4px var(--border); }
[data-theme="dark"] .ft-ico.t-note  { background: rgba(146,64,14,.15); color: #fbbf24; }
[data-theme="dark"] .ft-ico.t-email { background: rgba(30,64,175,.15); color: #93c5fd; }
[data-theme="dark"] .ft-ico.t-call  { background: rgba(21,128,61,.15); color: #4ade80; }
[data-theme="dark"] .ft-ico.t-rdv   { background: rgba(124,58,237,.15); color: #c4b5fd; }
[data-theme="dark"] .ft-ico.t-cmd   { background: rgba(var(--primary-rgb),.15); }

.ft-body { flex: 1; min-width: 0; }
.ft-header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: 2px; }
.ft-type { font-size: .71rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ft-time { font-size: .73rem; color: var(--text-light); white-space: nowrap; flex-shrink: 0; }
.ft-text { font-size: .87rem; color: var(--text); line-height: 1.5; }
.ft-text strong { font-weight: 600; }

.ft-note-box {
  margin-top: .5rem;
  background: #fefce8; border: 1px solid #fde68a; border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm); padding: .6rem .9rem;
  font-size: .84rem; color: #713f12; line-height: 1.5; font-style: italic;
}
[data-theme="dark"] .ft-note-box { background: rgba(146,64,14,.1); border-color: rgba(245,158,11,.2); border-left-color: #f59e0b; color: #fbbf24; }

.ft-rdv-box {
  display: flex; align-items: center; gap: .65rem;
  margin-top: .5rem;
  background: var(--primary-light); border: 1px solid rgba(var(--primary-rgb), .2);
  border-radius: var(--radius-sm); padding: .55rem .9rem;
}
.ft-rdv-box i { color: var(--primary); font-size: .9rem; flex-shrink: 0; }
.ft-rdv-date { font-size: .84rem; font-weight: 600; color: var(--primary); display: block; }
.ft-rdv-loc  { font-size: .76rem; color: var(--text-muted); display: block; margin-top: 1px; }
[data-theme="dark"] .ft-rdv-box { background: rgba(var(--primary-rgb),.1); border-color: rgba(var(--primary-rgb),.2); }

/* ── Contacts tab ── */
.contact-row {
  display: flex; align-items: center; gap: 1rem;
  padding: .9rem 1.5rem; border-bottom: 1px solid var(--border);
  transition: background var(--trans);
}
.contact-row:last-child { border-bottom: none; }
.contact-row:hover { background: var(--content-bg); }
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-size: .88rem; font-weight: 600; color: var(--text); }
.contact-role { font-size: .81rem; color: var(--text-muted); margin-top: 1px; }
.contact-reach { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.contact-reach a, .contact-reach span {
  font-size: .79rem; color: var(--text-muted); text-decoration: none;
  display: flex; align-items: center; gap: 4px; transition: color var(--trans);
}
.contact-reach a:hover { color: var(--primary); }
.contact-reach i { font-size: .74rem; }

.contact-add-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .72rem 1.5rem;
  font-size: .84rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; border: none; background: transparent; width: 100%;
  border-top: 1px solid var(--border);
  transition: background var(--trans), color var(--trans);
}
.contact-add-row:hover { background: var(--content-bg); color: var(--primary); }

/* ── Documents tab ── */
.docs-grid-wrap { padding: 1.25rem 1.5rem; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem; }
.doc-card {
  background: var(--content-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem .9rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .4rem; cursor: pointer;
  position: relative; overflow: hidden; text-decoration: none;
  transition: all var(--trans);
}
.doc-card:hover { border-color: var(--primary); box-shadow: 0 4px 14px rgba(var(--primary-rgb),.1); background: var(--card-bg); }
[data-theme="dark"] .doc-card { background: rgba(255,255,255,.03); }
[data-theme="dark"] .doc-card:hover { background: rgba(255,255,255,.06); }

.doc-ico {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.doc-ico.pdf { background: #fef2f2; color: #ef4444; }
.doc-ico.img { background: #eff6ff; color: #3b82f6; }
.doc-ico.doc { background: #eff6ff; color: #1d4ed8; }
.doc-ico.xls { background: #f0fdf4; color: #16a34a; }
.doc-ico.zip { background: #f5f3ff; color: #7c3aed; }
[data-theme="dark"] .doc-ico.pdf { background: rgba(239,68,68,.12); }
[data-theme="dark"] .doc-ico.img { background: rgba(59,130,246,.12); }
[data-theme="dark"] .doc-ico.doc { background: rgba(29,78,216,.12); }
[data-theme="dark"] .doc-ico.xls { background: rgba(22,163,74,.12); }
[data-theme="dark"] .doc-ico.zip { background: rgba(124,58,237,.12); }

.doc-name { font-size: .8rem; font-weight: 600; color: var(--text); line-height: 1.3; word-break: break-word; }
.doc-meta { font-size: .7rem; color: var(--text-muted); }

.doc-card-actions {
  position: absolute; top: .4rem; right: .4rem;
  display: flex; gap: .2rem; opacity: 0; transition: opacity var(--trans);
}
.doc-card:hover .doc-card-actions { opacity: 1; }
.doc-card-btn {
  width: 24px; height: 24px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-muted); cursor: pointer; font-size: .74rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--trans);
}
.doc-card-btn:hover { color: var(--primary); border-color: var(--primary); }

.docs-upload-btn {
  margin-top: .75rem;
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: .8rem 1rem; text-align: center; cursor: pointer;
  color: var(--text-muted); font-size: .84rem; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all var(--trans); background: transparent;
  width: 100%;
}
.docs-upload-btn:hover, .docs-upload-btn.dragover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* ── Commandes tab ──
   Fond --content-bg retiré de la barre d'outils/en-tête/pied (05/07/2026,
   retour utilisateur direct : "gris sur un fond gris, c'est n'importe quoi").
   --content-bg (#f0f2f5) est trop proche de --card-bg (#ffffff) en thème
   clair pour servir de séparateur visuel : au lieu d'une bande "différente",
   ça lit comme une tache floue sur la carte. La structure vient maintenant
   des bordures + du texte foncé/gras, pas d'un aplat de couleur en plus. */
.fiche-tbl-wrap { overflow-x: auto; }
.fiche-tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.fiche-tbl th {
  font-size: .71rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text);
  padding: .65rem 1rem; border-bottom: 2px solid var(--border); white-space: nowrap;
}
.fiche-tbl td {
  padding: .72rem 1rem; font-size: .87rem; color: var(--text);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.fiche-tbl tr:last-child td { border-bottom: none; }
.fiche-tbl tbody tr:hover td { background: var(--content-bg); }

/* Séparation renforcée entre lignes : le --border par défaut (#e2e8f0) est
   trop pâle sur une liste dense (parc/consommables, autres produits) où
   l'œil doit distinguer chaque ligne d'un coup d'œil, pas en cherchant. */
.fiche-tbl-sep td { border-bottom-color: #cbd5e1; }
[data-theme="dark"] .fiche-tbl-sep td { border-bottom-color: #3b4256; }
.fiche-tbl-foot {
  padding: .85rem 1.25rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.fiche-tbl-foot-info { font-size: .8rem; color: var(--text-muted); }

/* ── Produits & Services tab ── */
.prod-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.25rem; border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.prod-toolbar-info .prod-toolbar-title {
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text);
}
.prod-toolbar-info .prod-toolbar-sub { font-size: .8rem; color: var(--text-light); margin-top: 2px; }

.prod-ico {
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; flex-shrink: 0;
}
.prod-name { font-size: .87rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.prod-spec { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.prod-freq {
  font-size: .76rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.prod-freq i { font-size: .68rem; }
.prod-tarif { font-size: .84rem; color: var(--text-muted); white-space: nowrap; }

.prod-prix-cell { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.prod-prix-val { font-size: .87rem; font-weight: 700; color: var(--primary); white-space: nowrap; cursor: pointer; border-bottom: 1px dashed transparent; transition: border-color var(--trans); }
.prod-prix-val:hover { border-bottom-color: currentColor; }
.prod-prix-input {
  width: 65px; font-size: .82rem; padding: .2rem .4rem;
  border: 1px solid var(--primary); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--text); text-align: right;
  display: none; font-family: var(--font);
}
.prod-prix-input.active { display: block; }
.prod-prix-save {
  font-size: .72rem; padding: .2rem .45rem; line-height: 1;
  border-radius: var(--radius-sm); border: 1px solid var(--primary);
  background: var(--primary); color: #fff; cursor: pointer;
  display: none; align-items: center;
}
.prod-prix-save.active { display: inline-flex; }
.prod-prix-edit-btn {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-light); cursor: pointer; font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--trans);
}
.prod-prix-edit-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }

/* ── Onglet Lignes des fiches document (Devis/Commande/Facture/Avoir/Ticket) ──
   Les classes .doc-* sont dupliquees a l'identique dans le <style> inline de
   chaque fiche (voir bug_css_class_defined_wrong_template) et n'avaient aucun
   garde-fou de debordement en desktop : une designation produit longue
   elargissait le tableau au-dela de la carte, rognant la colonne TVA et les
   actions a droite. Correctif centralise, applique a toutes les largeurs
   (le bloc @media plus bas ne couvrait que le mobile). */
.doc-tbl-section { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc-tbl { min-width: 640px; }

/* La cellule Designation est du texte libre : elle doit revenir a la ligne
   plutot que forcer la largeur du tableau (elle heritait white-space:nowrap
   de .prod-prix-val, prevu pour un prix court). */
.prod-prix-cell--text { flex-wrap: wrap; }
.prod-prix-cell--text .prod-prix-val { white-space: normal; overflow-wrap: anywhere; }

.prod-actions { display: flex; align-items: center; gap: .3rem; justify-content: flex-end; }
.prod-action-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text-muted); cursor: pointer; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--trans);
}
.prod-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.prod-action-btn.panier-ico:hover { border-color: #15803d; color: #15803d; background: #f0fdf4; }
[data-theme="dark"] .prod-action-btn { background: rgba(255,255,255,.04); }
[data-theme="dark"] .prod-action-btn.panier-ico:hover { background: rgba(21,128,61,.12); }

/* Ajouter au panier = l'action la plus utilisée sur une liste de consommables
   (le commercial construit une vente) — plein vert (identité déjà du module
   Panier ailleurs dans l'app, #15803d) plutôt que la même case neutre que les
   autres icônes, pour être repérée sans avoir à passer la souris dessus. */
.prod-action-btn--cart { background: #15803d; border-color: #15803d; color: #fff; }
.prod-action-btn--cart:hover { background: #166534; border-color: #166534; color: #fff; }
[data-theme="dark"] .prod-action-btn--cart { background: #15803d; border-color: #15803d; color: #fff; }
[data-theme="dark"] .prod-action-btn--cart:hover { background: #166534; border-color: #166534; }

/* Bouton cadeau (offrir à 0 €) — style neutre, comme les boutons "supprimer" et
   "Google" à côté (choix explicite de l'utilisateur), pas le plein vert de
   "ajouter au panier". Seule l'icône bi-gift le distingue. */

/* Pas de prix de vente = pas de vente possible — retombe au style neutre
   (pas de vert) plutôt qu'estomper l'icône : le bouton reste bien visible
   pour signaler "il manque quelque chose", pas juste "moins important". */
.prod-action-btn--cart:disabled {
  background: var(--card-bg); border-color: var(--border); color: var(--text-light);
  cursor: not-allowed;
}
.prod-action-btn--cart:disabled:hover { background: var(--card-bg); border-color: var(--border); color: var(--text-light); }

/* ── Commercial card (aside) ── */
.aside-commercial-card-body { padding: .85rem 1.1rem; }
.commercial-profile { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.commercial-name { font-size: .9rem; font-weight: 700; color: var(--text); }
.commercial-job { font-size: .74rem; color: var(--text-muted); margin-top: 1px; }
.commercial-reach { border-top: 1px solid var(--border); padding-top: .5rem; }
.comm-link {
  display: flex; align-items: center; gap: .5rem;
  font-size: .79rem; color: var(--text-muted); text-decoration: none;
  padding: .28rem 0; transition: color var(--trans);
}
.comm-link:hover { color: var(--primary); }
.comm-link + .comm-link { border-top: 1px solid var(--border); }
.comm-link i { font-size: .72rem; }

/* ── Quick actions 2-col grid ── */
.qa-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
}
.qa-row-2 .fiche-qa-btn { justify-content: center; font-size: .82rem; padding: .5rem .4rem; }
.qa-badge {
  margin-left: auto; flex-shrink: 0;
  background: rgba(255,255,255,.25); color: #fff;
  font-size: .62rem; font-weight: 700; padding: .1em .45em; border-radius: 20px;
}
.fiche-qa-btn.qa-sep-top { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .62rem; }

/* ── Modal produit ── */
.crm-modal-content {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); background: var(--card-bg);
}
.crm-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 1rem 1.35rem; border-bottom: 1px solid var(--border);
}
.crm-modal-title { font-size: .95rem; font-weight: 700; color: var(--text); margin: 0; }
.crm-modal-sub { font-size: .76rem; color: var(--text-muted); margin: 2px 0 0; }
.crm-modal-body { padding: 1.25rem 1.35rem; }
.crm-modal-footer {
  padding: .85rem 1.35rem; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: .5rem;
}
.modal-section-ttl {
  font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-light); margin-bottom: .5rem;
  padding-bottom: .35rem; border-bottom: 1px solid var(--border);
}
.modal-field-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border);
}
.modal-field-row:last-child { border-bottom: none; }
.modal-field-lbl {
  font-size: .78rem; color: var(--text-muted); font-weight: 500;
  min-width: 110px; flex-shrink: 0;
}
.modal-input {
  flex: 1; min-width: 0; max-width: 100%; box-sizing: border-box;
  font-size: .85rem; padding: .3rem .5rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-bg); color: var(--text); font-family: var(--font);
  transition: border-color var(--trans);
}
/* Un <select> ne rétrécit pas sous la largeur de sa plus longue option
   sans min-width:0 (règle ci-dessus) — et le libellé fermé doit être tronqué
   proprement au lieu de déborder de la modale (contacts avec email long). */
select.modal-input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.1); }
[data-theme="dark"] .modal-input { background: rgba(255,255,255,.06); border-color: var(--border); }
[data-theme="dark"] .crm-modal-content { background: var(--card-bg); }

/* Corps de modale en champs empilés (label au-dessus, aide en dessous) —
   pour les modales à texte explicatif où le layout horizontal .modal-field-row
   (label | input côte à côte) écrase le champ. */
.crm-modal-body.mb-stack { display: flex; flex-direction: column; gap: .95rem; }
.crm-modal-body.mb-stack .pf-input,
.crm-modal-body.mb-stack .pf-select { font-size: .9rem; }

/* Case à cocher encadrée dans une modale (ex. « Réinitialiser ») */
.modal-check-row {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; color: var(--text); cursor: pointer;
  padding: .6rem .75rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--content-bg);
  transition: border-color var(--trans), background var(--trans);
}
.modal-check-row:hover { border-color: var(--primary); }
.modal-check-row input { margin: 0; flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; }

/* Un <select> .pf-select : tronquer le libellé fermé si l'option est longue
   (mêmes raisons que select.modal-input). */
select.pf-select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Fiche responsive ── */
@media (max-width: 1199.98px) {
  .synt-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
  .synt-kpi-val { font-size: 1.2rem; }
}
@media (max-width: 767.98px) {
  .fiche-hdr-body { flex-wrap: wrap; gap: .75rem; }
  .fiche-title { font-size: 1.15rem; }

  /* Nav verticale → barre horizontale scrollable. align-items:stretch est
     indispensable : en colonne, l'axe croisé du flex devient la largeur —
     sans stretch, .fiche-tab-wrap se dimensionne sur son propre contenu
     (ex. un tableau large) au lieu de l'écran, et son overflow-x interne
     ne sert plus à rien (le débordement se fait au niveau du body). */
  .fiche-body { flex-direction: column; align-items: stretch; }
  .fiche-vnav {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    position: static; top: auto;
    gap: .3rem; padding: .35rem; margin-bottom: .6rem;
    width: 100%; min-width: 0; max-width: 100%;
    scrollbar-width: none;
  }
  .fiche-vnav::-webkit-scrollbar { display: none; }
  /* Chips horizontaux (icône + libellé en ligne) plutôt que des mini-carrés
     empilés — l'accent actif passe d'un filet gauche (liste verticale) à un
     soulignement bas (barre horizontale de chips), pattern tab-bar classique. */
  .fv-item {
    width: auto; flex-shrink: 0;
    padding: .5rem .65rem; gap: .45rem;
    font-size: .78rem;
  }
  .fv-item.active { box-shadow: inset 0 -3px 0 var(--tab-c, var(--primary)); }
  .fv-ico { width: 26px; height: 26px; font-size: .82rem; }
  .fv-lbl { font-size: .78rem; }
  .fv-item .fv-badge { margin-left: .35rem; font-size: .68rem; padding: .16em .48em; min-width: 19px; }

  /* Synthèse colonnes → empilement */
  .synt-kpi-row { grid-template-columns: 1fr; }
  .synt-kpi-card { border-right: none; border-bottom: 1px solid var(--border); }
  .synt-kpi-card:last-child { border-bottom: none; }
  .synt-grid { grid-template-columns: 1fr; padding: .85rem; gap: .85rem; }

  .fiche-field { flex-direction: column; gap: 2px; min-height: auto; }
  .fiche-field-lbl { min-width: unset; width: auto; }
  .docs-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .panier-row { flex-wrap: wrap; gap: .6rem; }
  .panier-footer { flex-direction: column; align-items: flex-start; }
  .contact-reach { display: none; }
  .fiche-tab-wrap { border-radius: var(--radius); }
  .aside-kpi-val { font-size: 1.05rem; }

  /* Boutons d'en-tête (Devis/Commande/Facture/Ticket/Avoir) : plusieurs
     actions en texte complet peuvent cohabiter (ex. Orders "Marquer en
     préparation" + "Transformer en facture" + "Créer un ticket SAV") —
     sans wrap, le groupe déborde du viewport au lieu de passer à la ligne.
     width:100% est nécessaire en plus de flex-wrap : flex-shrink:0 (règle
     desktop) empêche .fiche-hdr-body de contraindre sa largeur, donc sans
     largeur explicite le groupe garde sa largeur "max-content" et flex-wrap
     n'a rien à quoi s'accrocher pour déclencher un retour à la ligne. */
  .fiche-header-actions { flex-wrap: wrap; width: 100%; flex-shrink: 1; }

  /* Onglet Lignes (Devis/Commande/Facture/Ticket) : classes doc-, dsf- et fin-
     dupliquees a l'identique dans le style inline de chaque fiche (voir
     bug_css_class_defined_wrong_template), jamais rendues responsive cote
     page - correctif centralise ici pour couvrir les 4 fiches en un point. */
  .doc-status-flow { flex-wrap: wrap; padding: .85rem 1.1rem 1rem; }
  .dsf-step { min-width: 64px; }
  .dsf-stats {
    margin-left: 0; padding-left: 0; width: 100%;
    justify-content: space-between; flex-wrap: wrap; gap: .6rem .75rem; margin-top: .85rem;
  }

  /* Tableau de lignes : trop de colonnes pour la largeur mobile — au lieu de
     laisser le tableau étirer toute la page (débordement horizontal global,
     coupant aussi le header), il scrolle dans son propre conteneur, comme
     .fiche-vnav un peu plus haut. */
  .doc-tbl-section { padding: 1rem 1rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .doc-tbl { min-width: 620px; }

  .doc-fin-wrap { padding: 1rem; }
  .doc-fin-block { min-width: 0; width: 100%; }
}

/* ═══════════════════════════════════════════
   COMMENTAIRES TAB
═══════════════════════════════════════════ */
.comm-list {
  padding: .25rem 1.25rem;
}

.comm-item {
  display: flex;
  gap: .85rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.comm-item:last-child { border-bottom: none; }

.comm-body { flex: 1; min-width: 0; }

.comm-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .35rem;
}
.comm-author {
  font-weight: 700;
  font-size: .84rem;
  color: var(--text);
}
.comm-date {
  font-size: .82rem;
  color: var(--text-light);
  margin-left: auto;
}

.comm-text {
  font-size: .845rem;
  line-height: 1.6;
  color: var(--text);
}

.comm-actions {
  display: none;
  gap: .25rem;
  margin-top: .45rem;
}
.comm-item:hover .comm-actions { display: flex; }

.comm-action-link {
  font-size: .74rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: .15rem .45rem;
  border-radius: var(--radius-sm);
  transition: background var(--trans), color var(--trans);
  border: none;
  background: none;
}
.comm-action-link:hover {
  background: var(--border);
  color: var(--text);
}
.comm-action-link.danger:hover {
  background: #fee2e2;
  color: #dc2626;
}

[data-theme="dark"] .comm-action-link.danger:hover {
  background: rgba(220,38,38,.15);
  color: #f87171;
}

/* ══════════════════════════════════════════════════════════════════
   CALENDRIER COMMERCIAL — modal #modal-cal (voir layout/default.php)
══════════════════════════════════════════════════════════════════ */
.cal-wrap { user-select: none; }

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.cal-month-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -.2px;
}
.cal-nav-side { display: flex; align-items: center; gap: .35rem; }
.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .14s ease;
  font-size: .82rem;
  line-height: 1;
}
.cal-nav-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.cal-today-btn {
  height: 30px;
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  transition: all .14s ease;
}
.cal-today-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.cal-legend {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: var(--content-bg);
}
.cal-legend-lbl {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-right: .1rem;
  white-space: nowrap;
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .73rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.cal-legend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .64rem;
  font-weight: 700;
  padding: .1rem .32rem;
  border-radius: 99px;
  min-width: 20px;
  line-height: 1.3;
  color: #fff;
}

.cal-grid-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--border);
}
.cal-day-head {
  text-align: center;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: .45rem .2rem;
  border-right: 1px solid var(--border);
  background: var(--content-bg);
}
.cal-day-head:last-child { border-right: none; }
.cal-day-head.weekend { color: var(--primary); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cell {
  min-height: 84px;
  padding: .4rem .45rem .45rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
  transition: background .12s, box-shadow .12s;
  position: relative;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.empty { background: var(--content-bg); pointer-events: none; }
.cal-cell.weekend-cell { background: rgba(67,97,238,.025); }
.cal-cell.today {
  background: var(--primary-light);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* La case entière est un lien vers le Planning jour de cette date. */
a.cal-cell {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
a.cal-cell:hover, a.cal-cell:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

.cal-day-num {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .3rem;
  line-height: 1;
}
.cal-cell.empty .cal-day-num { opacity: 0; }
.cal-cell.today .cal-day-num { color: var(--primary); }
.cal-today-pill {
  font-size: .58rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  border-radius: 99px;
  padding: .08rem .38rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cal-badges { display: flex; flex-wrap: wrap; gap: .22rem; }
.cal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 .3rem;
  border-radius: 5px;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  transition: transform .1s, filter .1s;
}
.cal-badge:hover { filter: brightness(1.12); transform: translateY(-1px); color: #fff; }

.cal-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .6rem 1.4rem;
  border-top: 1px solid var(--border);
  background: var(--content-bg);
  font-size: .74rem;
  color: var(--text-muted);
}
.cal-footer-item { display: flex; align-items: center; gap: .3rem; }
.cal-footer-item strong { color: var(--text); font-weight: 700; }

[data-theme="dark"] .cal-cell        { background: var(--card-bg); }
[data-theme="dark"] .cal-cell.empty  { background: var(--content-bg); }
[data-theme="dark"] .cal-cell.today  { background: rgba(67,97,238,.15); }
[data-theme="dark"] .cal-cell.weekend-cell { background: rgba(67,97,238,.04); }
[data-theme="dark"] .cal-legend      { background: var(--content-bg); }
[data-theme="dark"] .cal-day-head    { background: var(--content-bg); }

@media (max-width: 640px) {
  .cal-cell    { min-height: 56px; padding: .28rem .3rem; }
  .cal-day-num { font-size: .7rem; }
  .cal-badge   { font-size: .6rem; padding: .08rem .24rem; }
  .cal-legend  { padding: .4rem .75rem; gap: .3rem; }
  .cal-nav     { padding: .7rem .75rem; }
  .cal-day-head { font-size: .6rem; padding: .35rem .1rem; }
  .cal-today-pill { display: none; }
}

/* ═══════════════════════════════════════════
   CHAT INTERNE (modal #modal-chat)
═══════════════════════════════════════════ */
.chat-index-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--border);
}
.chat-index-title { font-size: .92rem; font-weight: 700; color: var(--text); }
.chat-index-sub   { font-size: .74rem; color: var(--text-muted); }

.chat-list { max-height: 60vh; overflow-y: auto; }
.chat-row {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .8rem 1.25rem; border: none; border-bottom: 1px solid var(--border);
  background: none; text-align: left; cursor: pointer; transition: background var(--trans);
}
.chat-row:hover  { background: var(--content-bg); }
.chat-row.unread { background: rgba(67,97,238,.04); }
.chat-row-body { flex: 1; min-width: 0; }
.chat-row-top  { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.chat-row-name { font-size: .84rem; font-weight: 700; color: var(--text); }
.chat-row-cat, .chat-row-ctx {
  font-size: .68rem; color: var(--text-muted); background: var(--content-bg);
  border-radius: var(--radius-sm); padding: .1rem .4rem;
}
.chat-row-objet, .chat-row-last { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }
.chat-row-you { font-weight: 600; color: var(--text); }
.chat-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; }
.chat-row-date { font-size: .7rem; color: var(--text-light); white-space: nowrap; }
.chat-row-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary);
  color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}

.chat-panel-hdr {
  display: flex; align-items: center; gap: .65rem; padding: .75rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.chat-back-btn {
  width: 30px; height: 30px; border: none; background: var(--content-bg); color: var(--text);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
}
.chat-back-btn:hover { background: var(--border); }
.chat-panel-title { font-size: .86rem; font-weight: 700; color: var(--text); }
.chat-panel-sub   { font-size: .72rem; color: var(--text-muted); }

.chat-add-body   { padding: 1.1rem 1.25rem; }
.chat-add-footer { padding: 0 1.25rem 1.1rem; }

.chat-messages { height: 360px; overflow-y: auto; padding: 1rem 1.25rem; }
.chat-bubble-row { display: flex; margin-bottom: .6rem; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 72%; padding: .5rem .75rem; border-radius: var(--radius-md, 12px);
  background: var(--content-bg); color: var(--text);
}
.chat-bubble-row.mine .chat-bubble { background: var(--primary); color: #fff; }
.chat-bubble-text { font-size: .84rem; line-height: 1.5; white-space: pre-wrap; }
.chat-bubble-text a { color: var(--primary); font-weight: 600; text-decoration: underline; word-break: break-all; }
.chat-bubble-row.mine .chat-bubble-text a { color: #fff; }
.chat-bubble-date {
  font-size: .66rem; margin-top: .25rem; text-align: right;
  color: var(--text-light);
}
.chat-bubble-row.mine .chat-bubble-date { color: rgba(255,255,255,.75); }

.chat-compose {
  display: flex; align-items: flex-end; gap: .6rem; padding: .75rem 1.1rem;
  border-top: 1px solid var(--border);
}
.chat-compose-input {
  flex: 1; resize: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .5rem .7rem; font-size: .84rem; background: var(--card-bg); color: var(--text);
  max-height: 100px;
}
.chat-compose-input:focus { outline: none; border-color: var(--primary); }
.chat-compose-send {
  width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
}
.chat-compose-send:hover { opacity: .9; }

[data-theme="dark"] .chat-row.unread { background: rgba(67,97,238,.1); }