/* ═══════════════════════════════════════════════════════════════════════
   YABOX OS — dashboard.css V302 "Operational Luxury Workspace"
   Designed for agents working 8h+/day — Low fatigue, high clarity
   ═══════════════════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans','Figtree',system-ui,-apple-system,sans-serif;font-size:13px;line-height:1.5;color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit}
a{text-decoration:none}

/* ══════════════════════════════════════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════════════════════════════════════ */
#app{display:flex;min-height:100vh}

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR — Dark premium, compact, refined
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--sb);display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;z-index:100;
  overflow-y:auto;overflow-x:hidden;
  flex-shrink:0;transition:transform var(--ease);
  scrollbar-width:none;border-right:1px solid var(--sb-border);
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar-toggle{display:none;background:none;border:none;font-size:18px;cursor:pointer;color:var(--text3);padding:6px;border-radius:var(--r);flex-shrink:0}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99;display:none;backdrop-filter:blur(2px)}
.sidebar-overlay.show{display:block}

/* Logo */
.sidebar-header{padding:16px 14px 12px;border-bottom:1px solid var(--sb-border);flex-shrink:0}
.sidebar-logo{display:flex;align-items:center;gap:10px}
.sidebar-logo-icon{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,var(--violet),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--on-accent);letter-spacing:-.5px;
  flex-shrink:0;box-shadow:0 2px 8px var(--shadow-focus);
}
.sidebar-logo-text{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.sidebar-logo-sub{font-size:10px;color:var(--text3);margin-top:1px;letter-spacing:.2px}

/* Nav */
.sidebar-nav{flex:1;padding:6px 8px;overflow-y:auto;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}
.nav-section{margin-bottom:2px}
.nav-section-title{
  font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--text3);
  padding:10px 8px 4px;display:block;
}
.nav-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:var(--r);
  color:var(--text2);font-size:12.5px;font-weight:450;
  cursor:pointer;background:none;border:none;width:100%;text-align:left;
  transition:background var(--ease),color var(--ease);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
}
.nav-item:hover{background:var(--bg-hover);color:var(--text)}
.nav-item.active,.nav-item[data-active="true"]{
  background:var(--blue-bg);color:var(--blue-txt);font-weight:550;
}
.nav-item.active::before{
  content:'';display:inline-block;width:3px;height:14px;
  background:var(--blue);border-radius:2px;flex-shrink:0;margin-left:-2px;
}
.nav-icon{font-size:14px;flex-shrink:0;width:16px;text-align:center;opacity:.9}
.nav-label{flex:1;overflow:hidden;text-overflow:ellipsis}

.nav-badge{
  margin-left:auto;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:var(--r-full);flex-shrink:0;min-width:18px;text-align:center;
  background:var(--red);color:var(--on-accent);
}
.nav-badge.orange{background:var(--orange);color:var(--on-accent)}
.nav-badge.green{background:var(--green);color:var(--on-accent)}
.nav-badge.blue{background:var(--blue);color:var(--on-accent)}
.nav-badge.violet{background:var(--violet);color:var(--on-accent)}
.nav-badge.sky{background:var(--sky);color:var(--on-accent)}
.nav-divider{margin:5px 8px;border:none;border-top:1px solid var(--sb-border)}

/* Sidebar footer */
.sidebar-footer{padding:8px;border-top:1px solid var(--sb-border);flex-shrink:0}
.agent-info{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:var(--r);cursor:pointer;transition:background var(--ease)}
.agent-info:hover{background:var(--bg-hover)}
.agent-avatar,.sidebar-avatar{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:11px;flex-shrink:0;color:var(--on-accent);
  background:linear-gradient(135deg,var(--violet),var(--blue));
}
.sidebar-name-wrap{flex:1;min-width:0}
.agent-name,.sidebar-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-role,.sidebar-role{font-size:10px;color:var(--text3)}
.online-dot{width:7px;height:7px;background:#22C55E;border-radius:50%;margin-left:auto;flex-shrink:0;box-shadow:0 0 0 2px rgba(34,197,94,.2)}
.dbtn{background:none;border:none;cursor:pointer;font-size:14px;padding:5px;border-radius:var(--r);color:var(--text3);transition:all var(--ease)}
.dbtn:hover{background:var(--bg-hover);color:var(--text)}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN AREA
   ══════════════════════════════════════════════════════════════════════════ */
.main-area{margin-left:0;flex:1;display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════════════════════════════════════ */
.topbar{
  height:52px;min-height:52px;background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 18px;gap:10px;
  flex-shrink:0;z-index:50;
}
.topbar-title{display:flex;align-items:baseline;gap:5px;white-space:nowrap;min-width:0;flex-shrink:0}
#page-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.page-sub{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-sep{width:1px;height:16px;background:var(--border);flex-shrink:0}
.search-wrap{flex:1;max-width:340px;position:relative}
.search-wrap input{
  width:100%;padding:6px 10px 6px 30px;
  border:1px solid var(--border);border-radius:var(--r);
  background:var(--bg);color:var(--text);font-size:12px;outline:none;
  transition:border-color var(--ease),box-shadow var(--ease);
}
.search-wrap input:focus{border-color:var(--blue);background:var(--white);box-shadow:var(--shadow-focus)}
.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;color:var(--text3)}
.search-drop{
  position:absolute;top:calc(100% + 5px);left:0;right:0;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  z-index:9999;max-height:420px;overflow-y:auto;display:none;
}
.search-drop.open{display:block}
.search-grp-hdr{padding:6px 12px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);background:var(--bg);border-bottom:1px solid var(--border)}
.search-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background var(--ease);border-bottom:1px solid var(--border)}
.search-item:last-child{border-bottom:none}
.search-item:hover{background:var(--bg)}
.search-item-icon{font-size:15px;flex-shrink:0;width:20px}
.search-item-main{flex:1;min-width:0}
.search-item-title{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item-sub{font-size:11px;color:var(--text2)}
.search-item-tag{font-size:10px;padding:2px 7px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--border);color:var(--text2);flex-shrink:0}
.search-empty{padding:20px;text-align:center;color:var(--text2);font-size:12px}
.topbar-btn{
  display:flex;align-items:center;gap:5px;padding:5px 11px;
  border-radius:var(--r);border:1px solid var(--border);
  background:var(--white);color:var(--text);font-size:12px;
  font-weight:500;cursor:pointer;transition:all var(--ease);white-space:nowrap;flex-shrink:0;
}
.topbar-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.topbar-btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}
.topbar-btn-ghost:hover{background:var(--bg);border-color:var(--border);color:var(--text)}
.topbar-btn-primary{background:var(--blue);border-color:var(--blue);color:var(--on-accent);font-weight:600}
.topbar-btn-primary:hover{background:#4338CA;border-color:#4338CA;color:var(--on-accent)}
.sbadge{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-full);border:1px solid;font-size:11px;font-weight:600;white-space:nowrap}
.sbadge.online{color:var(--green-txt);border-color:var(--green-border);background:var(--green-bg)}
.sdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.topbar-sync-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
#last-sync-info{font-size:10px;color:var(--text3);white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
#btn-notif{position:relative;padding:5px 10px}
#notif-count.show{
  display:flex!important;position:absolute;top:3px;right:3px;
  background:var(--red);color:var(--on-accent);border-radius:50%;
  width:15px;height:15px;font-size:9px;font-weight:700;
  align-items:center;justify-content:center;line-height:1;
}

/* ══════════════════════════════════════════════════════════════════════════
   KPI STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.kpis{
  display:grid;grid-template-columns:repeat(6,1fr);gap:8px;
  padding:12px 18px;background:var(--white);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.kpi{
  background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:10px 12px;cursor:pointer;
  transition:all var(--ease);position:relative;overflow:hidden;
}
.kpi:hover{border-color:var(--border2);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.kpi::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity var(--ease)}
.kpi.blue::after{background:var(--blue);opacity:1}
.kpi.green::after{background:var(--green);opacity:1}
.kpi.red::after{background:var(--red);opacity:1}
.kpi.orange::after{background:var(--orange);opacity:1}
.kpi.violet::after,.kpi.purple::after{background:var(--violet);opacity:1}
.kpi.sky::after{background:var(--sky);opacity:1}
.kpil{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);margin-bottom:4px}
.kpiv{font-size:21px;font-weight:800;line-height:1;letter-spacing:-.5px;color:var(--text)}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:3px}
.kpi.blue .kpiv{color:var(--blue)}
.kpi.green .kpiv{color:var(--green)}
.kpi.orange .kpiv{color:var(--orange)}
.kpi.red .kpiv{color:var(--red)}
.kpi.violet .kpiv,.kpi.purple .kpiv{color:var(--violet)}
.kpi.sky .kpiv{color:var(--sky-txt)}
.kpi.kpi-active{border-color:var(--blue);background:var(--blue-bg)}
.kpi-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:20px;opacity:.08}
.kpi-reset{display:none;font-size:11px;padding:3px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--white);color:var(--text2);cursor:pointer;margin-left:8px}

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT
   ══════════════════════════════════════════════════════════════════════════ */
.content{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 18px;min-height:0;background:var(--bg)}

/* ══════════════════════════════════════════════════════════════════════════
   YABOX DESIGN SYSTEM COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Cards */
.cbox,.yabox-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;margin-bottom:12px;
  box-shadow:var(--shadow-xs);
}
.yabox-card-flat{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.yabox-card-hover{transition:box-shadow var(--ease),transform var(--ease)}
.yabox-card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}

/* Toolbar */
.yabox-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.yabox-toolbar-title{font-size:13px;font-weight:700;color:var(--text)}
.yabox-toolbar-spacer{flex:1}

/* Buttons */
.obtn,.yabox-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 13px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--white);
  color:var(--text);font-size:12.5px;font-weight:500;
  cursor:pointer;transition:all var(--ease);font-family:inherit;white-space:nowrap;
}
.obtn:hover,.yabox-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.obtn-primary,.yabox-btn-primary,.topbar-btn.primary{
  background:var(--blue);border-color:var(--blue);color:var(--on-accent);font-weight:600;
}
.obtn-primary:hover,.yabox-btn-primary:hover{background:#4338CA;border-color:#4338CA;color:var(--on-accent)}
.yabox-btn-success{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.yabox-btn-success:hover{background:#15803D;color:var(--on-accent)}
.yabox-btn-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red-txt)}
.yabox-btn-danger:hover{background:var(--red);color:var(--on-accent);border-color:var(--red)}
.yabox-btn-ghost{background:transparent;border-color:transparent;color:var(--text2)}
.yabox-btn-ghost:hover{background:var(--bg);border-color:var(--border);color:var(--text)}
.sselbtn{padding:6px 12px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--bg);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:all var(--ease);color:var(--text)}
.sselbtn.on{border-color:var(--blue);background:var(--blue-bg);color:var(--blue-txt);font-weight:600}

/* Badges */
.tag,.yabox-badge,.tbadge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:600;padding:2px 8px;
  border-radius:var(--r-full);white-space:nowrap;
}
.yabox-badge-blue,.tag-new{background:var(--blue-bg);color:var(--blue-txt);border:1px solid var(--blue-border)}
.yabox-badge-green,.tag-livraison{background:var(--green-bg);color:var(--green-txt);border:1px solid var(--green-border)}
.yabox-badge-orange,.tag-attente{background:var(--orange-bg);color:var(--orange-txt);border:1px solid var(--orange-border)}
.yabox-badge-red,.tag-retour,.tag-risk{background:var(--red-bg);color:var(--red-txt);border:1px solid var(--red-border)}
.yabox-badge-violet,.tag-conf{background:var(--violet-bg);color:var(--violet-txt);border:1px solid var(--violet-border)}
.yabox-badge-sky{background:var(--sky-bg);color:var(--sky-txt);border:1px solid var(--sky-border)}
.yabox-badge-gray,.tag-closed{background:var(--bg);color:var(--text2);border:1px solid var(--border)}
.tag-double{background:#FFFBEB;color:#92400E;border:1px solid var(--orange-border)}
.tag-fake{background:#FFF1F2;color:#BE123C;border:1px solid #FFE4E6}

/* Inputs */
.ninp,.cinp,.linp,.yabox-input,.fsel{
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--r);
  background:var(--white);color:var(--text);font-size:13px;
  outline:none;transition:border-color var(--ease),box-shadow var(--ease);
  font-family:inherit;
}
.ninp:focus,.cinp:focus,.linp:focus,.yabox-input:focus,.fsel:focus{
  border-color:var(--blue);box-shadow:var(--shadow-focus);
}
.ninp,.cinp,.linp,.yabox-input{width:100%}
.fsel{background-image:none;cursor:pointer}
.flbl{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px}

/* Tables */
.data-table,.yabox-table{width:100%;border-collapse:collapse;font-size:12.5px}
.data-table th,.yabox-table th{
  background:var(--bg);padding:8px 13px;text-align:left;
  font-size:10.5px;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.5px;
  border-bottom:2px solid var(--border);
}
.data-table td,.yabox-table td{
  padding:9px 13px;border-bottom:1px solid var(--border);
  color:var(--text);vertical-align:middle;
}
.data-table tr:hover td,.yabox-table tr:hover td{background:var(--bg)}
.data-table tr:last-child td,.yabox-table tr:last-child td{border-bottom:none}
.tbtn{padding:4px 9px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);font-size:11px;color:var(--text2);cursor:pointer;font-family:inherit;transition:all var(--ease)}
.tbtn:hover{border-color:var(--border2);color:var(--text)}

/* Modal */
#ov{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:10000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);pointer-events:auto}
#ov.hidden{display:none}
#mbox{
  background:var(--white);border-radius:var(--r-xl);
  width:100%;max-width:520px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);display:flex;flex-direction:column;
  border:1px solid var(--border);position:relative;z-index:10001;pointer-events:auto;
}
.mhdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 12px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--white);z-index:1;
  border-radius:var(--r-xl) var(--r-xl) 0 0;flex-shrink:0;
}
.mtitle{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.mbody{padding:14px 18px;flex:1;display:flex;flex-direction:column;gap:11px}
.mfooter{
  padding:12px 18px 14px;border-top:1px solid var(--border);
  display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;
}

/* Pagination */
.pgbar{display:flex;align-items:center;justify-content:center;gap:5px;padding:14px 0;flex-wrap:wrap}
.pgbtn{padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--white);cursor:pointer;font-family:inherit;font-size:12px;color:var(--text);transition:all var(--ease)}
.pgbtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.pgbtn.active{background:var(--blue);color:var(--on-accent);border-color:var(--blue);font-weight:700}
.pgbtn:disabled{opacity:.4;cursor:not-allowed}
.pgsize{padding:5px 8px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px;font-family:inherit;background:var(--white);color:var(--text)}

/* ORDER CARDS */
.ocard{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:8px;
  transition:all var(--ease);position:relative;box-shadow:var(--shadow-xs);
}
.ocard:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px);border-color:var(--border2)}
.otop{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start}
.oinfo{min-width:0;overflow:hidden}
.otags{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:4px;align-items:center}
.otr{font-family:'JetBrains Mono',monospace;font-size:10px;background:var(--bg);color:var(--text2);padding:2px 7px;border-radius:var(--r-sm);border:1px solid var(--border)}
.ometa{font-size:13px;font-weight:700;color:var(--text);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.oprod{font-size:12px;color:var(--text2);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odetails{display:flex;flex-wrap:wrap;gap:7px;font-size:11px;color:var(--text3);margin-bottom:3px}
.odetails span{display:flex;align-items:center;gap:3px;white-space:nowrap}
.octas{display:flex;flex-direction:column;gap:5px;align-items:flex-end;flex-shrink:0;min-width:84px}
.octa{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 10px;border-radius:var(--r);border:none;
  font-size:11.5px;font-weight:600;cursor:pointer;transition:all var(--ease);
  white-space:nowrap;font-family:inherit;min-width:78px;text-align:center;
}
.octa:hover{opacity:.88;transform:scale(.98)}
.octa:disabled{opacity:.5;cursor:not-allowed;transform:none}
.olast{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--text3);padding-top:7px;margin-top:7px;border-top:1px solid var(--border);flex-wrap:wrap}
.ddots{padding:3px 0}
.drow{display:flex;align-items:center;gap:3px;margin-bottom:3px}
.dlbl{font-size:10px;color:var(--text3);margin-left:4px}

/* Sections */
.sec-wrap{margin-bottom:12px}
.sec-hdr{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg);border-radius:var(--r);margin-bottom:8px;cursor:pointer;border:1px solid var(--border)}
.sec-bar{width:3px;height:16px;border-radius:2px;flex-shrink:0}
.sec-lbl{font-weight:700;font-size:13px;color:var(--text);display:flex;align-items:center;gap:7px}
.sec-cnt{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--r-full);margin-left:4px;display:inline-flex;align-items:center}
.sec-hint{font-size:11px;color:var(--text2);margin-top:1px}
.filters{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;margin-bottom:8px}
/* -- FILTERS BAR : width:100% override for direct filter controls -- */
.filters {
  flex-direction: row;
  flex-wrap: wrap;
  overflow-x: visible;
  overflow-y: visible;
}
.filters .yabox-input,
.filters select,
.filters input {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 140px;
  max-width: 200px;
}
.filters > div,
.filters > button {
  flex: 0 0 auto;
}
.filters > button.yabox-input {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 140px;
  max-width: 200px;
  height: 34px;
  font-size: 12px;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.filters > div > button.yabox-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 34px;
  font-size: 12px;
  padding: 0 8px;
  white-space: nowrap;
  box-sizing: border-box;
}
.fclear{font-size:11px;color:var(--text2);cursor:pointer;padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.fclear:hover{color:var(--red);border-color:var(--red)}

/* Empty states */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:52px 20px;text-align:center}
.empty-state-icon{font-size:40px;margin-bottom:12px;opacity:.45}
.empty-state-text{font-size:14px;font-weight:700;color:var(--text);margin-bottom:5px}
.empty-state-sub{font-size:12px;color:var(--text2)}
.loading-center{padding:44px;text-align:center;color:var(--text2);font-size:13px}
.loading-icon{font-size:26px;margin-bottom:8px;display:block}
.p-center{padding:36px;text-align:center;color:var(--text2)}

/* Form helpers */
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

/* Stats cards (analytics) */
.an-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;margin-bottom:10px;box-shadow:var(--shadow-xs)}
.an-kpi{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 13px}
.an-kpi-val{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.an-kpi-lbl{font-size:11px;color:var(--text2);margin-top:3px}
.an-sec{margin-bottom:14px}
.yabox-kpi{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 13px;cursor:pointer;transition:all var(--ease)}
.yabox-kpi:hover{border-color:var(--border2);transform:translateY(-1px)}
.yabox-kpi-val{font-size:22px;font-weight:800;letter-spacing:-.5px}
.yabox-kpi-lbl{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}

/* Banner alerts */
.info-banner{background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:var(--r);padding:8px 12px;margin-bottom:10px;font-size:12px;color:var(--blue-txt);font-weight:600}
.success-banner{background:var(--green-bg);border:1px solid var(--green-border);border-radius:var(--r);padding:8px 12px;margin-bottom:10px;font-size:12px;color:var(--green-txt);font-weight:600}
.warning-banner{background:var(--orange-bg);border:1px solid var(--orange-border);border-radius:var(--r);padding:8px 12px;margin-bottom:10px;font-size:12px;color:var(--orange-txt);font-weight:600}

/* Confirmation module */
.cai-section{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden}
.confirmation-modal-open .cai-actions-section,
.confirmation-modal-open [data-confirmation-actions-panel="1"],
.modal-open .cai-actions-section,
.modal-open [data-confirmation-actions-panel="1"]{
  pointer-events:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.cai-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px 14px;border-top:1px solid var(--border)}
.cai-act,.conf-action-btn{
  padding:8px 6px;border-radius:var(--r);border:1px solid var(--border);
  background:var(--bg);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;text-align:center;
  transition:all var(--ease);display:flex;align-items:center;justify-content:center;gap:5px;
}
.cai-act:hover,.conf-action-btn:hover{border-color:var(--border2);transform:translateY(-1px)}
.cai-act.confirm{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.cai-act.recall{background:var(--blue-bg);color:var(--blue-txt);border-color:var(--blue-border)}

.unified-insight-card .sec-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ubi-body{display:flex;flex-direction:column;gap:9px}
.ubi-grid,.ubi-signals{display:flex;flex-wrap:wrap;gap:6px}
.ubi-badge{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--border);border-radius:999px;padding:3px 8px;font-size:10px;font-weight:800;background:var(--bg);color:var(--text2)}
.ubi-success{background:var(--green-bg);border-color:var(--green-border);color:var(--green-txt)}
.ubi-warn{background:var(--orange-bg);border-color:var(--orange-border);color:var(--orange-txt)}
.ubi-danger{background:var(--red-bg);border-color:var(--red-border);color:var(--red-txt)}
.ubi-info{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue-txt)}
.ubi-muted{background:var(--bg);border-color:var(--border);color:var(--text2)}
.ubi-confidence{font-size:10px;font-weight:900;color:var(--blue);background:var(--blue-bg);border:1px solid var(--blue-border);border-radius:999px;padding:2px 7px}
.ubi-rec{border:1px solid var(--border);border-radius:var(--r);padding:8px;background:var(--bg);display:flex;flex-direction:column;gap:6px}
.ubi-rec b{display:block;font-size:12px;color:var(--text)}
.ubi-rec span{display:block;font-size:11px;color:var(--text2);margin-top:2px}
.ubi-rec-meta{display:flex;flex-wrap:wrap;gap:5px}
.ubi-next{font-size:11px;font-weight:800;color:var(--text)}
.ubi-note{font-size:10px;color:var(--text2);font-weight:700}
.ubi-feedback{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:4px}
.ubi-feedback-btn{border:1px solid var(--border);background:var(--white);color:var(--text);border-radius:var(--r-md);padding:5px 9px;font-size:11px;font-weight:800;cursor:pointer}
.ubi-feedback-btn:hover{background:var(--bg-hover);border-color:var(--blue-border)}
.ubi-feedback-btn:disabled{opacity:.65;cursor:default}
.ubi-feedback-state{font-size:10px;color:var(--text2);font-weight:700}
.cai-act.noanswer{background:var(--orange-bg);color:var(--orange-txt);border-color:var(--orange-border)}
.cai-act.cancel{background:var(--red-bg);color:var(--red-txt);border-color:var(--red-border)}
.cai-act.fake{background:#FFF1F2;color:#BE123C;border-color:#FFE4E6}
.cai-act.waiting{background:var(--bg);color:var(--text2);border-color:var(--border)}

/* Dispatch / analytics grids */
.dispatch-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dispatch-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;margin-bottom:8px;box-shadow:var(--shadow-xs)}
.finance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.finance-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;box-shadow:var(--shadow-xs)}

/* Toast */
#toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--bg-elev);color:var(--text);
  padding:9px 18px;border-radius:var(--r-lg);font-size:12.5px;font-weight:500;
  z-index:9999;opacity:0;transition:opacity .25s;pointer-events:none;
  max-width:90vw;text-align:center;border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
}
#toast.show{opacity:1}

/* Avatar */
.avt{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:9px;flex-shrink:0}

/* Login */
#ls{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#F5F7FB 0%,#EEF2F8 100%);padding:20px}
.lbox{background:var(--white);border-radius:var(--r-xl);padding:36px;width:100%;max-width:360px;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.llogo{text-align:center;margin-bottom:24px}
.llogo-icon{
  width:52px;height:52px;background:linear-gradient(135deg,var(--violet),var(--blue));
  border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:var(--on-accent);margin:0 auto 12px;
  box-shadow:0 4px 16px rgba(79,70,229,.3);
}
.llogo-title{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.llogo-sub{font-size:12px;color:var(--text2);margin-top:4px}
.lerr{color:var(--red-txt);font-size:12px;margin-top:8px;text-align:center;padding:8px;background:var(--red-bg);border-radius:var(--r)}
.ll{display:block;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;margin-top:14px}
.lbtn{
  width:100%;padding:10px;border-radius:var(--r-md);border:none;
  background:linear-gradient(135deg,var(--violet),var(--blue));color:var(--on-accent);
  font-size:13px;font-weight:700;cursor:pointer;transition:all var(--ease);
  font-family:inherit;margin-top:18px;box-shadow:0 2px 8px rgba(79,70,229,.3);
}
.lbtn:hover{background:linear-gradient(135deg,#4F46E5,#4338CA);transform:translateY(-1px)}

/* Date picker */
#dp-popup{display:none;position:absolute;top:38px;left:0;z-index:999;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;min-width:280px;box-shadow:var(--shadow-lg)}
#dp-popup.open{display:block}
.dp-presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.dp-preset-btn{padding:3px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:transparent;color:var(--text2);font-size:11px;cursor:pointer;font-family:inherit;transition:all var(--ease)}
.dp-preset-btn.active,.dp-preset-btn:hover{background:var(--blue);border-color:var(--blue);color:var(--on-accent)}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.dp-label{font-size:11px;color:var(--text2);display:block;margin-bottom:3px}
.dp-input{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:var(--r-sm);font-family:inherit;font-size:12px;color:var(--text);background:var(--white);outline:none}
.dp-input:focus{border-color:var(--blue)}
.dp-actions{display:flex;gap:8px;justify-content:flex-end}
.dp-cancel{padding:5px 12px;border-radius:var(--r);border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-family:inherit}
.dp-apply{padding:5px 12px;border-radius:var(--r);border:none;background:var(--blue);color:var(--on-accent);cursor:pointer;font-family:inherit;font-weight:600}

/* Skeleton loader */
@keyframes shimmer{0%{background-color:var(--border)}50%{background-color:var(--bg2)}100%{background-color:var(--border)}}
.skeleton{background:var(--border);border-radius:var(--r);animation:shimmer 1.2s infinite}
.skeleton-card{height:88px;border-radius:var(--r-md);margin-bottom:8px;animation:shimmer 1.2s infinite}

/* Utilities */
.hidden{display:none!important}
.spin{display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fw-700{font-weight:700}
.text-muted{color:var(--text2)}
.text-sm{font-size:12px}
.text-xs{font-size:10px}
.mt-8{margin-top:8px}
.mb-8{margin-bottom:8px}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border2)}

/* Driver card */
.driver-card{border:1px solid var(--border);border-radius:var(--r-md);padding:12px;background:var(--bg);display:flex;align-items:center;gap:10px}
.decision-badge{padding:3px 10px;border-radius:var(--r-full);font-size:11px;font-weight:700;letter-spacing:.5px}
.dec-scale{background:var(--green-bg);color:var(--green-txt)}
.dec-test{background:var(--blue-bg);color:var(--blue-txt)}
.dec-pause{background:var(--orange-bg);color:var(--orange-txt)}
.dec-stop{background:var(--red-bg);color:var(--red-txt)}

/* Printing module */
.printing-module{display:flex;flex-direction:column;gap:14px}
.printing-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.printing-head h2{margin:0;font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.3px}
.printing-head p{margin:4px 0 0;color:var(--text2);font-size:13px}
.printing-head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.printing-grid{display:grid;grid-template-columns:minmax(320px,1fr) minmax(360px,430px);gap:14px;align-items:start}
.printing-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;min-width:0}
.printing-filters{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 150px;gap:8px;margin-bottom:10px}
.printing-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text2);padding:6px 0 12px}
.printing-results{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow:auto;padding-right:2px}
.printing-order{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-md);padding:10px;background:var(--bg)}
.printing-order-main{border:0;background:transparent;text-align:left;display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer;font-family:inherit;color:var(--text)}
.printing-order-main strong,.printing-order-main span,.printing-order-main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.printing-order-main strong{font-size:13px;font-weight:700}
.printing-order-main span{font-size:12px;color:var(--text2)}
.printing-order-main small{font-size:11px;color:var(--text3)}
.printing-order b{font-size:13px;color:#059669;white-space:nowrap}
.printing-empty{padding:28px;text-align:center;color:var(--text2)}
.printing-preview-panel{position:sticky;top:12px}
.printing-preview-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;font-size:13px;color:var(--text)}
.printing-preview-top span{color:var(--text2);font-weight:500}
.printing-preview-wrap{height:680px;max-height:72vh;background:#eef2f7;border:1px solid var(--border);border-radius:var(--r-md);overflow:auto;padding:12px;display:flex;justify-content:center}
#printing-preview-empty{width:100%;min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text2);font-size:13px}
#printing-preview-frame{display:none;width:100mm;min-width:100mm;height:150mm;border:0;background:#fff;box-shadow:var(--shadow-lg);flex:none}

/* V257/V258 additions */
.sidebar-name-wrap{flex:1;min-width:0}
.topbar-sync-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.ll2{font-size:11px;color:var(--text2);margin-top:4px}
.kpis-tab{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.wq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step-progress{padding:8px 0 4px}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD HOME — V258
   Module: data-tab="dashboard" — Tableau de bord principal
   ═══════════════════════════════════════════════════════════════════ */
.db-page { display:flex; flex-direction:column; gap:14px; }

/* Header */
.db-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.db-title {
  font-size:20px; font-weight:800; color:var(--text);
  letter-spacing:-.4px; display:flex; align-items:center; gap:8px;
}
.db-subtitle { font-size:12px; color:var(--text2); margin-top:3px; }
.db-date { font-size:13px; font-weight:400; color:var(--text2); }
.db-header-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* KPI Grid */
.db-kpi-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media(min-width:1400px){ .db-kpi-grid{ grid-template-columns:repeat(8,1fr); } }

/* Two-column widgets row */
.db-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
/* Three-column widgets row */
.db-grid-3 {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;
}

/* Widget card */
.db-widget {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px;
  box-shadow:var(--shadow-xs); display:flex; flex-direction:column; gap:10px;
}
.db-widget-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.db-widget-title {
  font-size:13px; font-weight:700; color:var(--text); letter-spacing:-.1px;
}
.db-widget-sub {
  font-size:11px; color:var(--text3); font-weight:400;
}

/* Agent performance list */
.db-agent-list { display:flex; flex-direction:column; gap:7px; }
.db-agent-row {
  display:flex; align-items:center; gap:9px;
  padding:6px 4px; border-radius:var(--r-sm);
  transition:background var(--ease);
}
.db-agent-row:hover { background:var(--bg); }
.db-agent-ava {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--on-accent); flex-shrink:0;
}
.db-agent-info { flex:1; min-width:0; }
.db-agent-name { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-agent-role { font-size:10px; color:var(--text3); }
.db-agent-bar-wrap { display:flex; align-items:center; gap:7px; flex-shrink:0; min-width:90px; }
.db-agent-bar { flex:1; height:5px; border-radius:var(--r-full); overflow:hidden; }
.db-agent-bar-fill { height:100%; border-radius:var(--r-full); transition:width .4s ease; }
.db-agent-pct { font-size:11px; font-weight:700; min-width:30px; text-align:right; }

/* Brand activity list */
.db-brand-list { display:flex; flex-direction:column; gap:7px; }
.db-brand-row { display:flex; align-items:center; gap:9px; }
.db-brand-name { font-size:12px; font-weight:600; color:var(--text); min-width:90px; }
.db-brand-bar-wrap { flex:1; }
.db-brand-stats { font-size:12px; color:var(--text); min-width:60px; text-align:right; }

/* Quick actions */
.db-quick-action {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r);
  border:1px solid var(--border); background:var(--bg);
  cursor:pointer; font-family:inherit; width:100%;
  text-align:left; transition:all var(--ease);
}
.db-quick-action:hover {
  border-color:var(--blue); background:var(--blue-bg);
  transform:translateX(2px);
}
.db-qa-icon { font-size:16px; flex-shrink:0; }
.db-qa-text { flex:1; min-width:0; }
.db-qa-label { font-size:12px; font-weight:600; color:var(--text); }
.db-qa-sub { font-size:10px; color:var(--text3); }
.db-qa-arrow { font-size:14px; color:var(--text3); flex-shrink:0; transition:color var(--ease); }
.db-quick-action:hover .db-qa-arrow { color:var(--blue); }

/* Badge pill */
.db-badge-pill { font-size:10px; font-weight:700; padding:2px 9px; border-radius:var(--r-full); }
.badge-orange { background:var(--orange-bg); color:var(--orange-txt); border:1px solid var(--orange-border); }
.badge-green  { background:var(--green-bg);  color:var(--green-txt);  border:1px solid var(--green-border); }
.badge-red    { background:var(--red-bg);    color:var(--red-txt);    border:1px solid var(--red-border); }
.badge-blue   { background:var(--blue-bg);   color:var(--blue-txt);   border:1px solid var(--blue-border); }

/* Responsive */
@media(max-width:1100px){
  .db-kpi-grid{ grid-template-columns:repeat(4,1fr); }
  .db-grid-3{ grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  .db-kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .db-grid-2,.db-grid-3{ grid-template-columns:1fr; }
  .db-header{ flex-direction:column; align-items:flex-start; }
  .db-header-actions{ width:100%; }
  /* V299: mobile sidebar improvements */
  #sidebar{
    width:220px;
    max-width:80vw;
    font-size:12px;
  }
  .nav-item{
    padding:5px 7px;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.3;
  }
  .nav-label{
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:140px;
    display:inline-block;
  }
  .nav-icon{
    flex-shrink:0;
    width:18px;
    text-align:center;
  }
  .nav-section-title{
    font-size:9px;
    letter-spacing:.6px;
    padding:6px 10px 3px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   AGENTS MODULE — V259
   CSS classes replacing inline styles in agents.js
   ═══════════════════════════════════════════════════════════════════ */
.yabox-agent-list { display:flex; flex-direction:column; gap:14px; }
.flex-between { display:flex; align-items:center; justify-content:space-between; margin-bottom:2px; }
.flex-1-min0 { flex:1; min-width:0; }
.yabox-section-title { font-weight:800; font-size:15px; color:var(--text); }
.yabox-agent-card {
  border:1.5px solid var(--border); border-radius:14px;
  background:var(--white); overflow:hidden; box-shadow:var(--shadow-xs);
  transition:box-shadow var(--ease);
}
.yabox-agent-card:hover { box-shadow:var(--shadow-sm); }
.yabox-agent-card-hdr {
  display:flex; align-items:center; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--border);
}
.yabox-agent-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.yabox-agent-name-text { font-weight:800; font-size:14px; color:var(--text); }
.yabox-text-muted-sm { font-size:11px; color:var(--text2); }
.yabox-btn-group { display:flex; gap:7px; margin-left:auto; flex-shrink:0; }
.yabox-agent-stats-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.stat-cell { text-align:center; }
.yabox-stat-big { font-size:18px; font-weight:800; color:var(--text); }
.yabox-stat-lbl { font-size:10px; color:var(--text3); margin-top:2px; }
.yabox-agent-actions {
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; flex-wrap:wrap;
}
.yabox-brand-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════════
   STOCK MODULE — V259
   ═══════════════════════════════════════════════════════════════════ */
.yabox-stock-list { display:grid; gap:10px; }
.yabox-progress-bg {
  background:var(--border); border-radius:999px; height:5px;
  margin-bottom:8px; overflow:hidden;
}
.yabox-progress-fill { height:100%; border-radius:999px; transition:width .3s ease; }

/* Platform badges */
.platform-shopify { background:var(--green-bg)!important; color:var(--green-txt)!important; }
.platform-woo { background:var(--violet-bg)!important; color:var(--violet-txt)!important; }

/* Prod image fallback */
.prod-img {
  width:32px; height:32px; border-radius:var(--r);
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; overflow:hidden; flex-shrink:0;
}

/* Table actions */
.tbl-actions { display:flex; gap:4px; }
.tbl-btn {
  width:26px; height:26px; border:1px solid var(--border);
  background:var(--bg); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:12px; color:var(--text2);
  transition:all var(--ease);
}
.tbl-btn:hover { border-color:var(--blue); color:var(--blue); }

/* ═══════════════════════════════════════════════════════════════════
   V260 UTILITY CLASSES — Generated by legacy cleanup engine
   Replacing 628 inline style occurrences across 8 legacy files
   ═══════════════════════════════════════════════════════════════════ */

/* Layout */
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-gap-6  { display:flex; align-items:center; gap:6px; }
.flex-gap-8  { display:flex; align-items:center; gap:8px; }
.flex-gap-10 { display:flex; align-items:center; gap:10px; }
.flex-gap-12 { display:flex; align-items:center; gap:12px; }
.flex-1      { flex:1; }
.flex-1-min0 { flex:1; min-width:0; }
.ml-auto     { margin-left:auto; }

/* Typography */
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.fw-800 { font-weight:800; }
.text-sm  { font-size:12px; }
.text-xs  { font-size:10px; }
.text-lg  { font-size:14px; }
.text-muted  { color:var(--text2); }
.text-muted3 { color:var(--text3); }

/* Spacing */
.mt-4  { margin-top:4px; }
.mt-8  { margin-top:8px; }
.mt-12 { margin-top:12px; }
.mb-8  { margin-bottom:8px; }
.mb-12 { margin-bottom:12px; }
.p-center { padding:32px; text-align:center; color:var(--text2); }

/* Button states */
.yabox-btn-active {
  border-color:var(--blue);
  background:var(--blue-bg);
  color:var(--blue-txt);
  font-weight:600;
}

/* ── Stock legacy cleanup ─────────────────────────────────────────── */
.stock-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow-xs);
}
.stock-card-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--border);
}
.stock-card-title {
  font-size:13px; font-weight:700; color:var(--text);
}
.stock-grid-cards {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;
}
.stock-stat-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0; border-bottom:1px solid var(--border);
  font-size:12px; color:var(--text);
}
.stock-stat-row:last-child { border-bottom:none; }
.stock-stat-label { color:var(--text2); }
.stock-stat-value { font-weight:700; }

/* ── Dashboard widgets cleanup ──────────────────────────────────────── */
.widget-section {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px;
  box-shadow:var(--shadow-xs);
}
.widget-section-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 14px; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.widget-section-title {
  font-size:13px; font-weight:700; color:var(--text);
}
.widget-section-body { padding:12px 14px; }
.widget-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid var(--border);
}
.widget-row:last-child { border-bottom:none; }
.widget-row-label { flex:1; font-size:12px; color:var(--text); }
.widget-row-value { font-size:12px; font-weight:700; color:var(--text); }

/* ── Orders render cleanup ──────────────────────────────────────────── */
.order-detail-section {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px; margin-bottom:12px;
}
.order-detail-title {
  font-size:12px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.order-detail-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 0; font-size:12px;
}
.order-detail-key { color:var(--text2); }
.order-detail-val { font-weight:600; color:var(--text); }
.order-detail-val.green { color:var(--green-txt); font-weight:700; }
.order-detail-val.blue  { color:var(--blue-txt); }
.order-detail-val.red   { color:var(--red-txt); }

/* ── Modal cleanup ──────────────────────────────────────────────────── */
.modal-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.modal-form-group { display:flex; flex-direction:column; gap:4px; }
.modal-form-group.full { grid-column:span 2; }
.modal-form-label {
  font-size:11px; font-weight:600; color:var(--text2);
  text-transform:uppercase; letter-spacing:.4px;
}
.modal-section {
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border);
}
.modal-section-title {
  font-size:11px; font-weight:600; color:var(--text2);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;
}

/* ── Confirmation module extras ─────────────────────────────────────── */
.conf-filter-panel {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:12px; overflow-y:auto;
}
.conf-filter-title {
  font-size:10px; font-weight:700; color:var(--text2);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px;
}
.conf-filter-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 8px; border-radius:var(--r); cursor:pointer;
  margin-bottom:2px; transition:background var(--ease);
}
.conf-filter-item:hover { background:var(--bg); }
.conf-filter-item.active { background:var(--violet-bg); }
.conf-filter-item.active .conf-filter-name { color:var(--violet-txt); font-weight:600; }
.conf-filter-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.conf-filter-name { font-size:12px; color:var(--text); margin-left:8px; flex:1; }
.conf-filter-count { font-size:11px; font-weight:700; color:var(--text2); }

/* Call counter dots */
.call-dots { display:flex; gap:3px; }
.call-dot {
  width:18px; height:18px; border-radius:4px;
  background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:var(--text2);
  transition:all var(--ease);
}
.call-dot.done {
  background:var(--blue-bg); border-color:var(--blue-border);
  color:var(--blue-txt);
}
.call-dot.done-warn { background:var(--orange-bg); border-color:var(--orange-border); color:var(--orange-txt); }
.call-dot.done-max  { background:var(--red-bg);    border-color:var(--red-border);    color:var(--red-txt); }

/* ── Dispatch / Tracking extras ─────────────────────────────────────── */
.tracking-timeline {
  display:flex; align-items:center; padding:8px 0 4px;
}
.track-step {
  display:flex; flex-direction:column; align-items:center; flex:1;
}
.track-step-dot {
  width:22px; height:22px; border-radius:50%;
  border:2px solid var(--border); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:9px; z-index:1; position:relative;
  transition:all var(--ease);
}
.track-step-dot.done   { background:var(--blue);   border-color:var(--blue);   color:var(--on-accent); }
.track-step-dot.active { background:var(--orange);  border-color:var(--orange);  color:var(--on-accent); box-shadow:0 0 0 4px var(--orange-bg); }
.track-step-label      { font-size:9px; color:var(--text3); margin-top:5px; text-align:center; white-space:nowrap; }
.track-step-label.done { color:var(--blue-txt); font-weight:600; }
.track-step-label.active{ color:var(--orange-txt); font-weight:700; }
.track-line { flex:1; height:2px; background:var(--border); margin-top:-11px; position:relative; z-index:0; }
.track-line.done { background:var(--blue); }

/* History items */
.hist-list { padding-left:14px; border-left:2px solid var(--border); }
.hist-item {
  display:flex; gap:10px; padding:5px 0;
  position:relative;
}
.hist-item::before {
  content:''; width:8px; height:8px; border-radius:50%;
  background:var(--border2); position:absolute; left:-18px; top:8px;
  flex-shrink:0;
}
.hist-item.recent::before { background:var(--blue); }
.hist-time { font-size:10px; color:var(--text3); white-space:nowrap; min-width:50px; }
.hist-text { font-size:11.5px; color:var(--text); }

/* ── Finance module extras ──────────────────────────────────────────── */
.finance-stat {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); padding:13px;
}
.finance-stat-val { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-.5px; }
.finance-stat-lbl { font-size:11px; color:var(--text2); margin-top:3px; }

/* ── Order card action buttons ──────────────────────────────────────── */
.octa-call {
  background:var(--green-bg);color:var(--green-txt);
  border:1px solid var(--green-border);text-decoration:none;
}
.octa-call:hover { background:var(--green);color:var(--on-accent);border-color:var(--green); }
.octa-track {
  background:var(--blue-bg);color:var(--blue-txt);
  border:1px solid var(--blue-border);
}
.octa-track:hover { background:var(--blue);color:var(--on-accent);border-color:var(--blue); }

/* ═══════════════════════════════════════════════════════════════════
   V300 MOBILE PRODUCTION POLISH
   ═══════════════════════════════════════════════════════════════════ */
/* Prevent horizontal scroll on mobile */
body, html { max-width:100vw; overflow-x:hidden; }
#main, #cnt, .tab-content { max-width:100%; min-width:0; }
/* Tables: scroll horizontally inside container */
.yabox-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table { min-width:auto; }
/* Cards: prevent overflow */
.yabox-card, .ocard, .kpi { max-width:100%; box-sizing:border-box; }
/* Inputs: full width on mobile */
@media(max-width:600px){
  .yabox-input, .yabox-btn { max-width:100%; box-sizing:border-box; }
  .ocard { padding:10px; }
  .otags { flex-wrap:wrap; gap:4px; }
  .octas { flex-direction:column; gap:6px; }
  .octa  { width:100%; text-align:center; }
  /* Stack grids to single column */
  [style*="display:grid"] { min-width:0; }
  .db-kpi-grid { grid-template-columns:1fr 1fr !important; }
}

/* V3348 final polish: operational filters stay in one ergonomic row */
.filters-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.filters-row .yabox-input,
.filters-row select,
.filters-row input,
.filters-row button.yabox-input {
  width:auto !important;
  flex:0 0 auto !important;
  min-width:140px;
  max-width:200px;
}
.filters-row > div,
.filters-row > button {
  flex:0 0 auto;
}
.filters-row .fclear {
  min-width:auto;
  max-width:none;
  white-space:nowrap;
}
@media(max-width:768px){
  .filters-row {
    flex-wrap:wrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .filters-row .yabox-input,
  .filters-row select,
  .filters-row input,
  .filters-row button {
    min-width:160px;
    flex:0 0 auto;
  }
}