/* ============================================================================
   SENDRAISE · ACE — Import & analyse / contrôle des commissions (BLOC 5)
   Charge _ace-ui.css en amont. Header + nav produits + nav types commissions
   + table de bordereaux avec flags d'erreur (tooltips).
   ============================================================================ */

/* ── Header sombre ─────────────────────────────────────────────────────── */
.dk5-header{background:var(--inverted);padding:22px 28px 14px;box-shadow:0 1px 0 0 var(--inverted);}
.dk5-header-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.dk5-month{display:flex;align-items:center;gap:12px;color:var(--secondary-contrast);}
.dk5-month .t-h2{color:var(--secondary-contrast);}
.dk5-month img{width:30px;height:30px;object-fit:contain;}
.dk5-total{display:flex;align-items:center;gap:7px;color:var(--secondary-contrast);opacity:.7;font-size:15px;margin-top:6px;}
.dk5-total svg{width:16px;height:16px;opacity:.7;}
.btn-dark{
  flex-shrink:0;height:36px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08);color:var(--primary-contrast);border-radius:var(--r);
  font-family:'dm-sans';font-size:13px;font-weight:500;padding:0 16px;cursor:pointer;transition:background .15s;
}
.btn-dark:hover{background:rgba(255,255,255,0.14);}

/* ── Nav produits (sombre) ─────────────────────────────────────────────── */
.pnav{background:var(--inverted);display:flex;gap:28px;padding:6px 28px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.pnav-link{
  position:relative;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:'dm-sans';font-size:15px;font-weight:500;color:var(--secondary-contrast);opacity:.65;
  padding:10px 2px 14px;transition:opacity .15s;
}
.pnav-link:hover{opacity:.85;}
.pnav-link.active{opacity:1;}
.pnav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--primary);border-radius:3px 3px 0 0;}

/* ── Nav types de commissions (clair) ──────────────────────────────────── */
.cnav{display:flex;gap:24px;padding:0 28px;background:var(--paper);border-bottom:1px solid var(--divider);}
.cnav-link{
  position:relative;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-family:'dm-sans';font-size:15px;font-weight:500;color:var(--text-secondary);
  padding:14px 2px;transition:color .15s;white-space:nowrap;
}
.cnav-link:hover{color:var(--text-primary);}
.cnav-link.active{color:var(--text-primary);}
.cnav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary);border-radius:2px 2px 0 0;}

/* tags d'erreur (rouge) / ok (vert) */
.ntag{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:11px;font-weight:700;font-family:'dm-sans';}
.ntag.err{background:#F6DAD6;color:#9a1500;}
.ntag.ok{background:#D7EEDD;color:#1b6b3a;}
.ntag.ok svg{width:11px;height:11px;}

/* ── Table bordereaux ──────────────────────────────────────────────────── */
.dtbl-wrap{padding:20px 28px;}
.dtbl{border:1px solid var(--divider);border-radius:6px;overflow:hidden;background:#fff;}
.dtbl-cols{display:grid;grid-template-columns:1.7fr 1.6fr 0.95fr 1fr 0.85fr 1.05fr;}
.dtbl-head{background:rgba(38,37,34,0.02);border-bottom:1px solid var(--divider);}
.dtbl-head .h{font-size:12px;color:var(--text-secondary);font-weight:500;padding:11px 14px;}
.dtbl-head .h.right{text-align:right;}
.dtbl-group{
  background:var(--default);border-bottom:1px solid var(--divider);
  padding:9px 16px;display:flex;align-items:center;gap:8px;font-size:13px;
}
.dtbl-group .ico{width:16px;height:16px;color:var(--text-secondary);opacity:.7;flex-shrink:0;}
.dtbl-group .ico svg{width:16px;height:16px;}
.dtbl-group .who{font-weight:600;color:var(--text-primary);}
.dtbl-group .sep{opacity:.35;}
.dtbl-group .meta{color:var(--text-secondary);}
.dtbl-row{border-bottom:1px solid var(--divider);}
.dtbl-row:last-child{border-bottom:none;}
.dtbl-row:hover{background:var(--grey-50);}
.dtbl-row .c{padding:11px 14px;font-size:13px;color:var(--text-primary);min-width:0;display:flex;align-items:center;gap:6px;}
.dtbl-row .c.right{justify-content:flex-end;text-align:right;}
.dtbl-row .c .mono{font-family:'dm-mono';}
.dtbl-row .c .flagged{color:#c8500a;font-weight:500;}
.dtbl-row .support{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.dtbl-row .support .nm{font-weight:500;}
.dtbl-row .support .sub{font-size:11px;color:var(--text-secondary);}
.dtbl-row .op .pill{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:3px 9px;border-radius:999px;background:rgba(48,129,219,0.1);color:#1c5390;white-space:nowrap;}
.dtbl-row .op .pill.take{background:rgba(188,95,6,0.12);color:#8a4405;}

/* ── Flag d'erreur + tooltip ───────────────────────────────────────────── */
.flag{position:relative;display:inline-flex;align-items:center;cursor:help;color:var(--warning);flex-shrink:0;}
.flag svg{width:16px;height:16px;}
.flag .flagtip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  width:240px;background:#fff;box-shadow:var(--elev2);border:1px solid var(--divider);border-radius:6px;
  padding:10px 12px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;z-index:30;text-align:left;
  white-space:normal;
}
.flag:hover .flagtip,.flag.hint-show .flagtip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.flag.tip-right.hint-show .flagtip{transform:translateY(0);}
.flag .flagtip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#fff;}
.flag .flagtip .ttype{display:block;font-family:'dm-sans';font-size:13px;font-weight:600;color:var(--error);margin-bottom:4px;}
.flag .flagtip .tmsg{display:block;font-family:'dm-sans';font-size:12px;line-height:1.45;color:var(--text-secondary);font-weight:400;}
/* tooltips proches du bord : ancrage à droite */
.flag.tip-right .flagtip{left:auto;right:-8px;transform:translateY(4px);}
.flag.tip-right:hover .flagtip{transform:translateY(0);}
.flag.tip-right .flagtip::after{left:auto;right:12px;transform:none;}