:root{
  --primary:#602D9A;
  --primary-2:#7A43B6;
  --primary-3:#A57BD3;
  --purple-50:#F7F1FC;
  --purple-100:#EFE3FA;
  --purple-200:#E3D2F5;
  --pink-50:#FFF1F7;
  --pink-100:#FBDCEB;
  --rose:#D85A91;
  --blue-50:#EEF7FF;
  --blue-100:#D9EDFF;
  --blue:#5B92D9;
  --mint-50:#EFFCF7;
  --mint-100:#D9F4E9;
  --mint:#49A77D;
  --peach-50:#FFF5EE;
  --peach-100:#FFE3D0;
  --peach:#E88A5F;
  --yellow-50:#FFF9E8;
  --yellow-100:#FDECB3;
  --yellow:#C6932F;
  --coral-50:#FFF1EF;
  --coral-100:#FFD9D2;
  --coral:#D96D62;
  --ink:#272338;
  --muted:#7F7892;
  --muted-2:#AAA3B6;
  --bg:#F7F4FA;
  --surface:#FFFFFF;
  --surface-2:#FBF9FD;
  --border:#ECE6F1;
  --border-strong:#E2D8EA;
  --success:#3A9B74;
  --warning:#C48C2E;
  --danger:#C84F64;
  --shadow-sm:0 5px 18px rgba(96,45,154,.06);
  --shadow:0 16px 40px rgba(96,45,154,.09);
  --shadow-lg:0 25px 70px rgba(63,38,90,.18);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--primary);text-decoration:none}
.hidden{display:none!important}
.eyebrow{font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:#9A8BA8}
.eyebrow.light{color:#E9D9F7}
.sub{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.45}
.logo{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),#8C4BC4);color:white;font-weight:900;letter-spacing:.03em;box-shadow:0 12px 26px rgba(96,45,154,.26)}
.logo.small{width:40px;height:40px;border-radius:13px;box-shadow:none}
.logo.logo-xl{width:72px;height:72px;border-radius:24px;font-size:24px}

.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(420px,1.15fr) minmax(380px,.85fr);background:#F7F4FA}
.login-visual{position:relative;overflow:hidden;background:linear-gradient(145deg,#53258A,#7B43B0 52%,#A667C5);display:flex;align-items:center;justify-content:center;padding:50px}
.login-brand-card{position:relative;z-index:2;max-width:540px;color:white}
.login-brand-card h2{font-size:42px;line-height:1.08;margin:14px 0 14px}
.login-brand-card p{color:#EADCF4;font-size:16px;line-height:1.65;max-width:500px}
.login-features{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.login-features span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);font-size:11px;font-weight:800}
.login-glow{position:absolute;border-radius:50%;filter:blur(5px);opacity:.4}
.glow-a{width:280px;height:280px;background:#FFC1DF;right:-70px;top:-60px}
.glow-b{width:240px;height:240px;background:#B4E5FF;left:-80px;bottom:-50px}
.glow-c{width:140px;height:140px;background:#FFF2B5;right:18%;bottom:16%}
.login-card{width:min(430px,86%);margin:auto;background:rgba(255,255,255,.98);border:1px solid var(--border);border-radius:28px;padding:30px;box-shadow:var(--shadow-lg)}
.login-card-head{display:flex;gap:14px;align-items:center}
.login-card h1{margin:2px 0 0;font-size:28px}
.login-subtitle{color:var(--muted);margin:20px 0}
.login-btn{margin-top:4px}
.error{color:var(--danger);font-size:11px;margin-top:8px}

.app-shell{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;background:linear-gradient(180deg,#44206E 0%,#5A278F 50%,#4B2377 100%);color:white;display:flex;flex-direction:column;box-shadow:8px 0 28px rgba(82,37,130,.12);z-index:30}
.sidebar::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.11),transparent 25%),radial-gradient(circle at 90% 45%,rgba(255,198,224,.12),transparent 22%);pointer-events:none}
.sidebar>*{position:relative;z-index:2}
.sidebar-top{position:relative;display:flex;align-items:center;justify-content:center;padding:2px 5px 15px}
.brand{display:flex;align-items:center;gap:11px}
.brand-copy strong{display:block;font-size:15px}.brand-copy span{display:block;color:#D8C6E8;font-size:10px;margin-top:2px}
.sidebar-collapse{position:absolute;right:8px;top:31px;width:30px;height:30px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(55,20,88,.34);color:#F7F0FC;font-size:18px;backdrop-filter:blur(8px);box-shadow:0 6px 14px rgba(24,5,42,.12)}
.workspace-pill{display:flex;gap:9px;align-items:center;margin:5px 6px 18px;padding:10px 11px;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}
.workspace-dot{width:9px;height:9px;background:#9EF0C8;border-radius:50%;box-shadow:0 0 0 4px rgba(158,240,200,.12)}
.workspace-pill small{display:block;color:#D9C8E7;font-size:9px}.workspace-pill strong{display:block;font-size:11px;margin-top:1px}
.nav-section-title{padding:13px 11px 6px;color:#CBB7DC;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.14em}
nav{display:flex;flex-direction:column;gap:5px}
.nav{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px;border:0;border-radius:13px;background:transparent;color:#E2D4EE;text-align:left;font-size:12px;font-weight:750;transition:.16s}
.nav:hover{background:rgba(255,255,255,.09);color:white}
.nav.active{background:white;color:var(--primary);box-shadow:0 10px 24px rgba(28,10,50,.14)}
.nav-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:900;flex:none}
.icon-purple{background:#8A59C0}.icon-coral{background:#E17D75}.icon-mint{background:#57B48A}.icon-blue{background:#67A2DE}.icon-yellow{background:#D4A944}.icon-pink{background:#D96F9F}
.sidebar-insight{display:flex;gap:9px;margin:18px 6px 0;padding:11px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.sidebar-insight-icon{width:28px;height:28px;border-radius:10px;background:#F3D7FF;color:#6E319E;display:grid;place-items:center;flex:none}
.sidebar-insight strong{display:block;font-size:10px}.sidebar-insight span{display:block;color:#D3C3DF;font-size:9px;line-height:1.45;margin-top:3px}
.sidebar-footer{margin-top:auto}
.profile-mini{display:flex;align-items:center;gap:9px;margin:0 7px 10px}
.avatar{width:34px;height:34px;border-radius:12px;background:#F5DBFF;color:#6A329B;display:grid;place-items:center;font-size:10px;font-weight:900}
.profile-mini strong{display:block;font-size:10px}.profile-mini span{display:block;font-size:9px;color:#D4C2E2;margin-top:2px}
.sidebar-logout{background:rgba(255,255,255,.09)!important;color:white!important;border-color:rgba(255,255,255,.12)!important}

.content-shell{min-width:0}
.topbar{height:92px;display:flex;justify-content:space-between;align-items:center;padding:0 30px;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);border-bottom:1px solid rgba(231,222,238,.8);position:sticky;top:0;z-index:20}
.topbar h1{margin:3px 0 2px;font-size:27px}
.topbar p{margin:0;color:var(--muted);font-size:11px}
.top-actions{display:flex;gap:9px;align-items:center}
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:var(--mint-50);border:1px solid var(--mint-100);font-size:10px;color:#377C60;font-weight:800}
.status-pill span{width:7px;height:7px;background:#46B983;border-radius:50%;box-shadow:0 0 0 4px rgba(70,185,131,.12)}
main{padding:28px 30px 40px}
.page{display:none}.page.active{display:block}

.welcome-banner{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(125deg,#5B2A90,#7439A7 52%,#9258B6);color:white;border-radius:24px;padding:26px 28px;margin-bottom:17px;box-shadow:0 18px 40px rgba(96,45,154,.16)}
.welcome-banner h2{margin:7px 0 7px;font-size:27px}.welcome-banner p{margin:0;color:#E9DDF3;max-width:620px;font-size:12px}
.welcome-orbs{position:relative;width:210px;height:90px}.orb{position:absolute;border-radius:50%}.orb-1{width:82px;height:82px;background:#F8B9D8;right:8px;top:4px}.orb-2{width:54px;height:54px;background:#CDEEFF;right:76px;bottom:-8px}.orb-3{width:36px;height:36px;background:#FFF0A8;right:130px;top:9px}

.hero-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:14px}
.hero-kpi{min-height:115px;padding:16px;border-radius:19px;border:1px solid rgba(255,255,255,.65);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:13px}
.kpi-icon{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.72);display:grid;place-items:center;font-size:19px;color:var(--primary);box-shadow:0 6px 16px rgba(78,51,98,.07)}
.hero-kpi span{display:block;color:#736A7D;font-size:10px;font-weight:800}.hero-kpi strong{display:block;font-size:21px;margin-top:4px}.hero-kpi small{display:block;color:#978DA0;font-size:9px;margin-top:3px}
.pastel-lilac{background:linear-gradient(145deg,#F3EAFB,#EADBF8)}.pastel-pink{background:linear-gradient(145deg,#FFF0F7,#FADBEA)}.pastel-mint{background:linear-gradient(145deg,#EFFCF6,#DDF5EB)}.pastel-peach{background:linear-gradient(145deg,#FFF4EC,#FFE1D1)}.pastel-blue{background:linear-gradient(145deg,#EEF7FF,#DCEEFF)}.pastel-yellow{background:linear-gradient(145deg,#FFF9E9,#FCECB9)}
.pastel-soft-lilac{background:#FBF7FE}.pastel-soft-mint{background:#F5FCF8}

.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:15px}
.stat-card{position:relative;overflow:hidden;background:white;border:1px solid var(--border);border-radius:17px;padding:16px;box-shadow:var(--shadow-sm)}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.accent-purple::before{background:#8652B8}.accent-blue::before{background:#6AA4DE}.accent-green::before{background:#55AF85}.accent-coral::before{background:#DD7A72}.accent-yellow::before{background:#D6AA46}
.stat-card span{display:block;color:var(--muted);font-size:10px}.stat-card strong{display:block;font-size:22px;margin-top:5px}.stat-card small{display:block;color:#9C94A4;font-size:9px;margin-top:4px}

.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:18px;box-shadow:var(--shadow-sm)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.panel-head>div:first-child{display:flex;align-items:center;gap:10px}
.panel-head h2{margin:0;font-size:16px}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:10px}
.panel-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-weight:900}
.bg-purple{background:var(--purple-100);color:var(--primary)}.bg-pink{background:var(--pink-100);color:#B65182}.bg-mint{background:var(--mint-100);color:#3D8C69}.bg-peach{background:var(--peach-100);color:#C66C46}.bg-blue{background:var(--blue-100);color:#467EB6}.bg-yellow{background:var(--yellow-100);color:#9C7827}.bg-coral{background:var(--coral-100);color:#B85E56}

.page-hero{display:flex;justify-content:space-between;align-items:center;border-radius:22px;padding:22px 24px;margin-bottom:15px;border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-sm)}
.page-hero h2{margin:4px 0 5px;font-size:23px}.page-hero p{margin:0;color:#766D7D;font-size:11px;max-width:700px}.page-hero-icon{width:62px;height:62px;border-radius:20px;background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:25px;color:var(--primary)}

.toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:9px;margin-bottom:14px;align-items:center}.toolbar.compact{grid-template-columns:1fr auto}
label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;color:#5C5368;margin-bottom:11px}
input,select,textarea{width:100%;border:1px solid var(--border-strong);border-radius:11px;padding:10px 12px;background:white;color:var(--ink);outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:#B898D7;box-shadow:0 0 0 3px rgba(96,45,154,.08)}
.btn{border:1px solid transparent;border-radius:11px;padding:9px 13px;font-weight:800;font-size:11px;transition:.15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary);color:white;box-shadow:0 8px 18px rgba(96,45,154,.18)}.btn.primary:hover{background:#512584}
.btn.secondary{background:white;border-color:var(--border);color:#5C5266}
.btn.soft-purple{background:var(--purple-50);border-color:var(--purple-100);color:var(--primary)}
.btn.full{width:100%}.btn.small{padding:6px 9px;font-size:10px}.left-actions{justify-content:flex-start!important}

.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:white}
table{width:100%;border-collapse:collapse;min-width:900px}
thead{background:linear-gradient(180deg,#FCFAFD,#F8F4FA)}
th{text-align:left;padding:10px 11px;color:#8A8093;font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}
td{padding:11px;border-bottom:1px solid #F1ECF4;font-size:11px;vertical-align:top}
tbody tr:hover{background:#FCF9FD}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900;background:var(--purple-50);color:var(--primary)}
.badge.good{background:var(--mint-50);color:#3B8765}.badge.warn{background:var(--yellow-50);color:#9F7925}.badge.bad{background:#FFF0F2;color:#B7485C}

.pager{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:13px}.pager button{border:1px solid var(--border);background:white;color:#655B70;border-radius:9px;padding:6px 9px}.pager button.active{background:var(--primary);color:white;border-color:var(--primary)}.pager span{font-size:10px;color:var(--muted)}

.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.live-card{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:18px;padding:15px;background:linear-gradient(145deg,#fff,#FCFAFE);box-shadow:var(--shadow-sm);transition:.16s}
.live-card::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--purple-50);right:-35px;top:-35px}
.live-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.live-card .live-top{display:flex;justify-content:space-between;gap:10px;position:relative;z-index:2}.live-card h3{margin:0;font-size:13px}.live-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;position:relative;z-index:2}.live-metrics div{background:#F8F5FA;border-radius:10px;padding:8px}.live-metrics b{display:block;font-size:12px}.live-metrics span{font-size:8px;color:var(--muted)}
.live-detail-panel{margin-top:14px}
.live-detail-grid{display:grid;grid-template-columns:2fr 1fr;gap:13px;margin-bottom:18px}.detail-section{border:1px solid var(--border);border-radius:16px;padding:14px}
.summary-box{padding:11px;border-radius:12px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.8)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:var(--purple-50);border:1px solid var(--purple-100);color:var(--primary);font-size:9px}.chip button{border:0;background:transparent;color:#A04659}

.section-title{font-size:11px;font-weight:900;color:#5A5064;margin:18px 0 10px}.section-title.with-action{display:flex;justify-content:space-between;align-items:center}

.bar-chart{height:190px;display:flex;align-items:flex-end;gap:10px;padding:10px 4px 0}
.bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.bar{width:64%;min-width:18px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#B58BDA,var(--primary));box-shadow:0 8px 16px rgba(96,45,154,.12)}
.bar-label{font-size:8px;color:var(--muted)}.bar-value{font-size:8px;font-weight:900;color:#6A5F73}
.status-list{display:flex;flex-direction:column;gap:10px}.status-row{display:grid;grid-template-columns:100px 1fr 28px;gap:8px;align-items:center;font-size:9px}.progress{height:7px;border-radius:999px;background:#F1ECF4;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#9F6DC8,var(--primary))}
.history-item{padding:10px;border:1px solid var(--border);border-radius:12px;background:#FCFAFD;margin-bottom:7px}

.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.product-card{position:relative;overflow:hidden;background:white;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-sm)}
.product-card::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:var(--yellow-50);right:-50px;top:-50px}
.product-body{padding:15px;position:relative;z-index:2}.product-head{display:flex;justify-content:space-between;gap:10px}.product-head h3{margin:2px 0 0;font-size:14px}.sku{font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.03em}
.product-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.product-meta div{background:#F9F6FA;border-radius:10px;padding:8px}.product-meta b{display:block;font-size:11px}.product-meta span{font-size:8px;color:var(--muted)}

.attribute-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.attribute-card{position:relative;overflow:hidden;background:white;border:1px solid var(--border);border-radius:18px;padding:15px;box-shadow:var(--shadow-sm)}.attribute-card::after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:var(--pink-50);right:-45px;bottom:-45px}.attribute-card>*{position:relative;z-index:2}.attribute-card h3{margin:2px 0;font-size:14px}.attribute-values{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.attribute-value-chip{padding:5px 8px;border-radius:999px;background:var(--pink-50);border:1px solid var(--pink-100);color:#A24875;font-size:9px}
.product-attribute-block{border:1px solid var(--border);border-radius:13px;padding:11px;background:#FCFAFD;margin-bottom:8px}.product-attribute-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.value-check-grid{display:flex;flex-wrap:wrap;gap:6px}.value-check{display:inline-flex;flex-direction:row;align-items:center;gap:5px;border:1px solid var(--border);border-radius:999px;padding:6px 9px;background:white;font-size:9px;margin:0}

.capture-table .comments-column{min-width:360px}.comment-line{display:grid;grid-template-columns:22px 1fr 46px;gap:6px;padding:6px;border:1px solid var(--border);border-radius:9px;background:#FBF9FD;margin-bottom:5px}.comment-index{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--purple-100);color:var(--primary);font-size:8px;font-weight:900}.comment-text{word-break:break-word}.comment-time{font-size:8px;color:var(--muted);text-align:right}

.drawer{position:fixed;inset:0;background:rgba(48,30,62,.32);backdrop-filter:blur(3px);z-index:80;display:flex;justify-content:flex-end}.drawer-card{width:min(800px,96vw);height:100%;background:white;overflow:auto;padding:22px;box-shadow:-24px 0 70px rgba(40,21,54,.2)}
.drawer-head,.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.drawer-head h2,.modal-head h2{margin:3px 0}.drawer-head p{margin:3px 0;color:var(--muted);font-size:10px}.drawer-head button,.modal-head button{border:0;background:var(--purple-50);color:var(--primary);width:34px;height:34px;border-radius:11px;font-size:20px}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checkline{flex-direction:row;align-items:center}.checkline input{width:auto}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.mini-stats div{background:var(--purple-50);border:1px solid var(--purple-100);border-radius:12px;padding:10px;font-size:9px}.mini-stats strong{display:block;font-size:16px;margin-top:4px;color:var(--primary)}

.modal{position:fixed;inset:0;background:rgba(48,30,62,.34);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;z-index:90}.modal-card{width:min(650px,96vw);max-height:92vh;overflow:auto;background:white;border-radius:22px;padding:21px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}.modal-card.wide{width:min(930px,96vw)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.order-item{border:1px solid var(--border);border-radius:13px;padding:11px;background:#FCFAFD;margin-bottom:8px}.order-item-grid{display:grid;grid-template-columns:1.4fr 1fr 80px 110px;gap:8px;align-items:end}
.variant-row{border:1px solid var(--border);border-radius:11px;padding:9px;background:#FCFAFD;margin-bottom:6px;display:grid;grid-template-columns:1.2fr repeat(5,1fr) auto;gap:7px;align-items:center;font-size:9px}

.toast{position:fixed;right:22px;bottom:22px;z-index:120;background:var(--primary);color:white;padding:11px 15px;border-radius:12px;box-shadow:0 14px 34px rgba(96,45,154,.28);font-size:10px;font-weight:800}

body.sidebar-collapsed .app-shell{grid-template-columns:84px minmax(0,1fr)}
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .workspace-pill>div:not(.workspace-dot),
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-section-title,
body.sidebar-collapsed .sidebar-insight,
body.sidebar-collapsed .profile-mini>div:not(.avatar){display:none}
body.sidebar-collapsed .sidebar{padding-left:11px;padding-right:11px}
body.sidebar-collapsed .nav{justify-content:center}
body.sidebar-collapsed .sidebar-top{justify-content:center}
body.sidebar-collapsed .sidebar-collapse{position:absolute;right:-13px;top:21px;background:white;color:var(--primary);box-shadow:var(--shadow-sm)}
body.sidebar-collapsed .workspace-pill{justify-content:center}
body.sidebar-collapsed .sidebar-logout{font-size:0}
body.sidebar-collapsed .sidebar-logout::after{content:"";font-size:14px}

@media(max-width:1200px){
  .hero-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .dashboard-grid{grid-template-columns:1fr}
  .app-shell{grid-template-columns:220px 1fr}
  .live-detail-grid{grid-template-columns:1fr}
}
@media(max-width:850px){
  .login-screen{grid-template-columns:1fr}.login-visual{display:none}
  .app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.content-shell{min-width:0}
  .topbar{position:relative;padding:18px;height:auto}.top-actions{flex-wrap:wrap}.hero-grid,.stats-grid{grid-template-columns:1fr 1fr}
  main{padding:18px}.toolbar{grid-template-columns:1fr}.detail-grid{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr 1fr}
}


/* =========================================================
   v3.3 — Brand integration + Live capture pagination
   ========================================================= */

.brand-logo-wrap{
  width:100%;
  min-width:0;
  min-height:86px;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 28px 8px 10px;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.sidebar-logo{
  display:block;
  width:236px;
  max-width:100%;
  height:72px;
  object-fit:contain;
  object-position:center center;
  filter:drop-shadow(0 6px 14px rgba(17,6,28,.14));
}
.login-main-logo{
  display:block;
  width:min(420px,88%);
  max-height:165px;
  object-fit:contain;
  object-position:left center;
  margin-bottom:18px;
  filter:drop-shadow(0 16px 28px rgba(29,7,44,.15));
}
.login-card-logo{
  width:145px;
  height:62px;
  object-fit:contain;
  object-position:left center;
  flex:0 0 auto;
}
.login-card-head{
  align-items:center;
}
.sidebar-insight{
  display:none!important;
}
.capture-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-top:18px;
  margin-bottom:10px;
}
.capture-title{
  margin:0 0 3px;
}
.capture-info{
  font-size:10px;
  color:var(--muted);
  font-weight:700;
}
.capture-page-size{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.capture-page-size label{
  margin:0;
  display:block;
  white-space:nowrap;
  font-size:9px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.capture-page-size select{
  width:82px;
  min-width:82px;
  padding:7px 9px;
  border-radius:10px;
  background:var(--purple-50);
  border-color:var(--purple-100);
  color:var(--primary);
  font-weight:800;
}
.capture-pager{
  padding-top:2px;
}
.capture-pager .pager-summary{
  margin-right:auto;
  font-size:10px;
  color:var(--muted);
}
.capture-pager button:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
}
body.sidebar-collapsed .sidebar-logo{
  width:52px;
  height:52px;
  object-fit:cover;
  object-position:left center;
}
body.sidebar-collapsed .brand-logo-wrap{
  width:56px;
  min-height:60px;
  padding:4px;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
body.sidebar-collapsed .sidebar-collapse{right:-2px;top:19px}
@media(max-width:850px){
  .capture-section-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .capture-page-size{
    width:100%;
    justify-content:flex-end;
  }
  .sidebar-logo{
    width:220px;
    height:66px;
  }
  .brand-logo-wrap{min-height:82px;padding:8px 14px;background:transparent;border:0;box-shadow:none}
}


/* v3.4 — Live lifecycle */
.live-detail-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.live-status-select{
  width:118px;
  min-width:118px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--purple-50);
  border-color:var(--purple-100);
  color:var(--primary);
  font-weight:800;
  font-size:10px;
}


/* =========================================================
   v3.5 — Inventory, waitlist & inline order status
   ========================================================= */
.stock-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.inventory-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.inline-status-select{
  min-width:132px;
  width:auto;
  padding:7px 30px 7px 10px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  background:var(--purple-50);
  color:var(--primary);
  border:1px solid var(--purple-100);
}
.inline-status-select.waiting{
  background:var(--yellow-50);
  border-color:var(--yellow-100);
  color:#9f7925;
}
.order-table-item{
  padding:4px 0;
  border-bottom:1px dashed #eee7f2;
}
.order-table-item:last-child{border-bottom:0}
.order-table-item b{font-size:10px}
.order-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.stock-line-status{
  display:inline-block;
  margin-top:5px;
  padding:4px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
}
.stock-line-status.is-ok{
  color:#367e5f;
  background:var(--mint-50);
  border:1px solid var(--mint-100);
}
.stock-line-status.is-waiting{
  color:#9f7925;
  background:var(--yellow-50);
  border:1px solid var(--yellow-100);
}
.stock-low-row{
  background:#fffaf0;
}
.wait-qty{
  display:inline-flex;
  min-width:28px;
  justify-content:center;
  padding:3px 7px;
  border-radius:999px;
  background:var(--yellow-50);
  color:#9f7925;
  font-weight:900;
}
.threshold-input{
  width:68px;
  padding:6px 8px;
}
.text-success{color:#2f8c65!important}
.text-danger{color:var(--danger)!important}
.field-help{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
  font-weight:500;
}
#vStock[readonly]{
  background:#f7f4fa;
  color:#776d80;
}
@media(max-width:1200px){
  .stock-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .inventory-grid{grid-template-columns:1fr}
}


/* =========================================================
   v3.5.1 — FIX INVENTAIRE / overflow horizontal
   Le problème venait des tables min-width:900px à l'intérieur
   d'une grille 2 colonnes : chaque colonne refusait de rétrécir,
   ce qui élargissait toute la page CRM.
   ========================================================= */

/* Aucun module ne doit pouvoir agrandir le shell principal. */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.app-shell,
.content-shell,
main,
.page,
#page-stock{
  min-width:0;
  max-width:100%;
}

#page-stock{
  overflow:hidden;
}

/* Les éléments grid doivent explicitement pouvoir rétrécir. */
.stock-kpi-grid,
.inventory-grid{
  width:100%;
  min-width:0;
}

.stock-kpi-grid > *,
.inventory-grid > *{
  min-width:0;
  max-width:100%;
}

.inventory-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}

/* Les panels restent strictement dans leur colonne. */
#page-stock > .panel,
.inventory-grid > .panel{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}

/* Le scroll horizontal éventuel doit rester DANS la table,
   jamais au niveau de toute la page. */
#page-stock .table-wrap{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

/* Table Stock principale : toutes les colonnes tiennent mieux
   sur un écran desktop classique. */
#page-stock > .panel .table-wrap table{
  width:100%;
  min-width:760px;
  table-layout:auto;
}

/* Les deux tableaux du bas sont plus compacts pour éviter
   une largeur minimale de 900px dans chaque demi-colonne. */
.inventory-grid .table-wrap table{
  width:100%;
  min-width:620px;
  table-layout:auto;
}

.inventory-grid th,
.inventory-grid td{
  white-space:nowrap;
}

/* Les colonnes contenant des libellés peuvent revenir à la ligne. */
.inventory-grid th:nth-child(2),
.inventory-grid td:nth-child(2),
.inventory-grid th:nth-child(3),
.inventory-grid td:nth-child(3){
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Empêche le pager de créer lui aussi un débordement. */
#page-stock .pager{
  width:100%;
  min-width:0;
  flex-wrap:wrap;
}

/* Le header et les filtres du module Stock doivent rester fluides. */
#page-stock .panel-head,
#page-stock .toolbar{
  min-width:0;
  max-width:100%;
}

#page-stock .toolbar{
  grid-template-columns:minmax(180px,1fr) minmax(170px,220px) 100px;
}

/* Ajustement des breakpoints : la grille passe en une colonne
   avant que les tableaux deviennent trop étroits. */
@media(max-width:1450px){
  .inventory-grid{
    grid-template-columns:1fr;
  }

  .inventory-grid .table-wrap table{
    min-width:760px;
  }
}

@media(max-width:900px){
  #page-stock .toolbar{
    grid-template-columns:1fr;
  }

  .stock-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #page-stock > .panel .table-wrap table,
  .inventory-grid .table-wrap table{
    min-width:680px;
  }
}

@media(max-width:600px){
  .stock-kpi-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v3.5.2 — FIX SIDEBAR
   v3.5.1 avait mis overflow-x:hidden sur html/body.
   Cela crée un ancêtre de scroll qui peut casser position:sticky
   du sidebar dans Chrome. On limite désormais l'overflow au
   contenu principal uniquement.
   ========================================================= */

/* Restaurer le comportement normal de la page pour le sticky sidebar. */
html,
body{
  max-width:none !important;
  overflow-x:visible !important;
}

/* Le sidebar reste fixe visuellement pendant le scroll de la page. */
.sidebar{
  position:sticky !important;
  top:0 !important;
  height:100vh !important;
  align-self:start !important;
  overflow-y:auto;
  overflow-x:hidden;
}

/* On bloque les débordements UNIQUEMENT dans la partie contenu,
   sans toucher au viewport ni au sidebar. */
.content-shell{
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:clip;
}

.content-shell main,
.content-shell .page{
  min-width:0 !important;
  max-width:100% !important;
}

/* Les tableaux restent scrollables localement. */
#page-stock .table-wrap{
  max-width:100% !important;
  overflow-x:auto !important;
}

/* Le module stock ne doit jamais forcer la largeur globale. */
#page-stock,
#page-stock > .panel,
#page-stock .inventory-grid,
#page-stock .inventory-grid > .panel{
  min-width:0 !important;
  max-width:100% !important;
}

/* En desktop on garde le sidebar complet et sa largeur prévue. */
@media(min-width:851px){
  .app-shell{
    grid-template-columns:270px minmax(0,1fr) !important;
  }

  body.sidebar-collapsed .app-shell{
    grid-template-columns:84px minmax(0,1fr) !important;
  }
}


/* =========================================================
   v3.6 — Filtres Commandes
   ========================================================= */
.order-filter-card{
  margin-bottom:16px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0,rgba(217,244,233,.42),transparent 26%),
    linear-gradient(145deg,#fff,#FCFAFD);
}

.order-filter-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:13px;
}

.order-filter-title{
  margin-top:4px;
  font-size:13px;
  font-weight:900;
  color:var(--ink);
}

.quick-date-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.quick-date{
  padding:7px 10px;
  border:1px solid var(--purple-100);
  border-radius:999px;
  background:#fff;
  color:#6F617A;
  box-shadow:none;
  font-size:9px;
  font-weight:850;
}

.quick-date:hover{
  border-color:#CDB5E2;
  background:var(--purple-50);
  color:var(--primary);
}

.quick-date.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
  box-shadow:0 6px 14px rgba(96,45,154,.15);
}

.order-filter-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) 145px 145px 170px 180px 92px auto;
  gap:8px;
  align-items:end;
}

.order-filter-field{
  min-width:0;
  margin:0;
}

.order-filter-field > span{
  display:block;
  margin:0 0 5px;
  color:#8B8095;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.order-filter-field input,
.order-filter-field select{
  height:38px;
  padding:8px 10px;
  font-size:10px;
}

.search-input-wrap{
  position:relative;
}

.search-input-wrap > span{
  position:absolute;
  z-index:2;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:#9E90A8;
}

.search-input-wrap input{
  padding-left:30px;
}

.order-filter-actions{
  display:flex;
  align-items:flex-end;
}

.order-filter-actions .btn{
  height:38px;
  white-space:nowrap;
}

.order-filter-summary{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  margin-top:12px;
  padding:8px 10px;
  border:1px solid var(--mint-100);
  border-radius:11px;
  background:var(--mint-50);
  color:#66726C;
  font-size:9px;
}

.order-filter-summary > div:first-child{
  display:flex;
  align-items:center;
  gap:6px;
}

.order-filter-summary strong{
  color:#39795F;
}

.summary-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#52B88B;
  box-shadow:0 0 0 4px rgba(82,184,139,.10);
}

.summary-separator{
  width:1px;
  height:15px;
  background:#CFEBDD;
}

@media(max-width:1500px){
  .order-filter-grid{
    grid-template-columns:minmax(260px,1.5fr) 140px 140px 165px 175px 90px;
  }

  .order-filter-actions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
}

@media(max-width:1100px){
  .order-filter-top{
    align-items:flex-start;
    flex-direction:column;
  }

  .order-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .order-search-field{
    grid-column:1 / -1;
  }
}

@media(max-width:700px){
  .order-filter-grid{
    grid-template-columns:1fr;
  }

  .order-search-field{
    grid-column:auto;
  }

  .order-filter-summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .summary-separator{
    display:none;
  }
}


/* =========================================================
   v3.7 — Création manuelle intelligente des commandes
   ========================================================= */
.manual-order-btn{
  white-space:nowrap;
}

.modal-card.extra-wide{
  width:min(1220px,96vw);
}

.manual-order-modal{
  padding:0;
  overflow:hidden;
}

.manual-order-head{
  padding:22px 24px 18px;
  background:
    radial-gradient(circle at 100% 0,rgba(217,244,233,.75),transparent 33%),
    linear-gradient(145deg,#FFFFFF,#F9F4FC);
  border-bottom:1px solid var(--border);
}

.manual-order-head p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
}

.manual-order-layout{
  max-height:calc(90vh - 165px);
  overflow:auto;
  padding:18px 24px 4px;
}

.manual-step{
  margin-bottom:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:17px;
  background:#fff;
  box-shadow:0 5px 18px rgba(96,45,154,.035);
}

.manual-step-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px;
}

.manual-step-head>div{
  min-width:0;
}

.manual-step-head strong{
  display:block;
  font-size:13px;
}

.manual-step-head span:not(.step-number){
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}

.manual-step-head .btn{
  margin-left:auto;
}

.step-number{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:10px;
  background:linear-gradient(145deg,var(--purple-100),#F6E9FC);
  color:var(--primary);
  font-size:11px;
  font-weight:900;
}

.customer-mode-switch{
  display:inline-flex;
  padding:3px;
  margin-bottom:12px;
  border:1px solid var(--purple-100);
  border-radius:11px;
  background:var(--purple-50);
}

.customer-mode{
  padding:7px 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#81738B;
  box-shadow:none;
  font-size:9px;
}

.customer-mode.active{
  background:#fff;
  color:var(--primary);
  box-shadow:0 4px 10px rgba(96,45,154,.08);
}

.manual-field{
  margin:0;
}

.manual-customer-search-wrap{
  position:relative;
}

.customer-suggestions{
  position:absolute;
  z-index:105;
  left:0;
  right:0;
  top:calc(100% + 6px);
  max-height:280px;
  overflow:auto;
  padding:5px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
  box-shadow:0 18px 45px rgba(66,38,84,.16);
}

.customer-suggestion{
  width:100%;
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:9px;
  align-items:center;
  padding:9px;
  border:0;
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  box-shadow:none;
}

.customer-suggestion:hover{
  background:var(--purple-50);
  transform:none;
}

.customer-avatar,
.selected-customer-avatar{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:linear-gradient(145deg,var(--purple-100),var(--pink-100));
  color:var(--primary);
  font-weight:900;
}

.customer-suggestion-main strong{
  display:block;
  font-size:10px;
}

.customer-suggestion-main small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
}

.customer-order-count{
  color:var(--primary);
  font-size:8px;
  font-weight:900;
}

.customer-suggestion-empty{
  padding:12px;
  color:var(--muted);
  font-size:9px;
}

.selected-customer{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:10px;
  align-items:center;
  margin-top:10px;
  padding:10px;
  border:1px solid var(--mint-100);
  border-radius:12px;
  background:var(--mint-50);
}

.selected-customer strong{
  display:block;
  font-size:11px;
}

.selected-customer span{
  display:block;
  margin-top:2px;
  color:#688176;
  font-size:9px;
}

.selected-customer button{
  padding:6px 9px;
  border-color:#CBEADB;
  background:#fff;
  color:#48816A;
  box-shadow:none;
  font-size:8px;
}

.manual-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.manual-line{
  display:grid;
  grid-template-columns:30px minmax(185px,1.2fr) minmax(220px,1.5fr) 70px 100px minmax(145px,.9fr) 105px 32px;
  gap:8px;
  align-items:end;
  padding:10px;
  border:1px solid var(--border);
  border-radius:13px;
  background:linear-gradient(145deg,#FFFFFF,#FCFAFD);
}

.manual-line label{
  margin:0;
}

.manual-line label,
.manual-line-stock,
.manual-line-total{
  min-width:0;
}

.manual-line label,
.manual-line-stock>span:first-child,
.manual-line-total>span:first-child{
  color:#8A7F94;
  font-size:8px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.manual-line select,
.manual-line input{
  height:36px;
  margin-top:5px;
  padding:7px 9px;
  font-size:9px;
}

.manual-line-number{
  width:27px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--purple-50);
  color:var(--primary);
  font-size:10px;
  font-weight:900;
}

.manual-line-stock,
.manual-line-total{
  min-height:36px;
}

.manual-line-stock>span:first-child,
.manual-line-total>span:first-child{
  display:block;
  margin-bottom:5px;
}

.manual-stock{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 8px;
  border-radius:9px;
  font-size:8px;
  font-weight:850;
}

.manual-stock.ok{
  background:var(--mint-50);
  color:#347B5E;
}

.manual-stock.low{
  background:var(--yellow-50);
  color:#9C7424;
}

.manual-stock.zero{
  background:var(--danger-soft);
  color:#B3475A;
}

.manual-stock.neutral{
  background:#F5F2F7;
  color:#8A8190;
}

.manual-line-total strong{
  display:block;
  padding-top:6px;
  color:var(--primary);
  font-size:10px;
}

.manual-remove-line{
  width:30px;
  height:36px;
  padding:0;
  border:1px solid #F1D4DA;
  border-radius:9px;
  background:var(--danger-soft);
  color:var(--danger);
  box-shadow:none;
  font-size:17px;
}

.manual-stock-legend{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--muted);
  font-size:8px;
}

.manual-stock-legend span{
  display:flex;
  align-items:center;
  gap:5px;
}

.stock-dot{
  width:7px;
  height:7px;
  border-radius:50%;
}

.stock-ok{background:#52B88B}
.stock-low{background:#E0B350}
.stock-zero{background:#D96678}

.manual-details-grid{
  display:grid;
  grid-template-columns:180px 180px 1fr;
  gap:10px;
}

.manual-details-grid label{
  margin:0;
}

.manual-note-field{
  grid-column:auto;
}

.manual-order-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-bottom:15px;
}

.manual-order-summary>div{
  padding:12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#FBF9FD;
}

.manual-order-summary span{
  display:block;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.manual-order-summary strong{
  display:block;
  margin-top:4px;
  font-size:13px;
}

.manual-order-summary .stock-summary-ok{
  border-color:var(--mint-100);
  background:var(--mint-50);
}

.manual-order-summary .stock-summary-ok strong{
  color:#357B5E;
}

.manual-order-summary .stock-summary-wait{
  border-color:#F5E3B7;
  background:var(--yellow-50);
}

.manual-order-summary .stock-summary-wait strong{
  color:#9B7424;
}

.manual-order-summary .stock-summary-neutral{
  background:#F7F4FA;
}

.manual-order-actions{
  margin:0;
  padding:14px 24px 18px;
  border-top:1px solid var(--border);
  background:#FCFAFD;
}

.manual-order-actions #createManualOrder{
  min-width:155px;
}

@media(max-width:1200px){
  .manual-line{
    grid-template-columns:30px 1fr 1fr 70px 100px;
  }

  .manual-line-stock,
  .manual-line-total{
    grid-column:auto;
  }

  .manual-remove-line{
    grid-column:-2 / -1;
  }
}

@media(max-width:850px){
  .manual-details-grid{
    grid-template-columns:1fr;
  }

  .manual-order-summary{
    grid-template-columns:1fr 1fr;
  }

  .manual-line{
    grid-template-columns:1fr 1fr;
  }

  .manual-line-number{
    grid-column:1 / -1;
  }

  .manual-remove-line{
    grid-column:auto;
  }
}



/* =========================================================
   v3.8 — FICHE CLIENT 360° INTELLIGENTE
   ========================================================= */
.customer-360-drawer{
  width:min(1080px,97vw);
  padding:0;
  background:#F8F5FA;
}

.customer-360-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:24px 26px;
  background:
    radial-gradient(circle at 92% 0,rgba(255,190,220,.30),transparent 27%),
    radial-gradient(circle at 70% 100%,rgba(190,229,255,.22),transparent 26%),
    linear-gradient(130deg,#56278A,#7138A4 58%,#8B52B2);
  color:#fff;
}

.customer-360-hero::after{
  content:"";
  position:absolute;
  width:135px;
  height:135px;
  right:115px;
  bottom:-75px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.customer-identity{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:15px;
  min-width:0;
}

.customer-360-avatar{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:20px;
  background:linear-gradient(145deg,#FAD9EB,#E9D7FA);
  color:var(--primary);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 12px 28px rgba(30,10,48,.18);
  font-size:23px;
  font-weight:950;
}

.customer-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.customer-title-row h2{
  margin:3px 0 0;
  color:#fff;
  font-size:24px;
}

.customer-360-hero #dMeta{
  margin:5px 0 0;
  color:#E6D9F0;
  font-size:10px;
}

.customer-segment-badge{
  display:inline-flex;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-size:9px;
  font-weight:900;
}

.customer-contact-quick{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.customer-contact-quick span{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:#F1E8F7;
  font-size:9px;
}

.customer-hero-actions{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}

.customer-action-primary{
  background:#fff!important;
  border-color:#fff!important;
  color:var(--primary)!important;
  box-shadow:0 8px 20px rgba(31,12,44,.14)!important;
}

.customer-action-soft{
  background:rgba(255,255,255,.11)!important;
  border-color:rgba(255,255,255,.17)!important;
  color:#fff!important;
  box-shadow:none!important;
}

.customer-close-btn{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:19px;
  box-shadow:none;
}

.customer-360-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  padding:16px 20px 8px;
}

.customer-stat{
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.customer-stat span,
.customer-stat small{
  display:block;
  color:var(--muted);
  font-size:8px;
}

.customer-stat strong{
  display:block;
  margin:5px 0 4px;
  font-size:17px;
  color:var(--ink);
}

.customer-stat-purple{background:linear-gradient(145deg,#fff,var(--purple-50))}
.customer-stat-blue{background:linear-gradient(145deg,#fff,var(--blue-50))}
.customer-stat-mint{background:linear-gradient(145deg,#fff,var(--mint-50))}
.customer-stat-peach{background:linear-gradient(145deg,#fff,var(--peach-50))}
.customer-stat-soft{background:linear-gradient(145deg,#fff,#F7F4FA)}
.customer-stat-warning{background:linear-gradient(145deg,#fff,var(--yellow-50));border-color:#F2DFAD}
.customer-stat-warning strong{color:#9D7424}

.customer-smart-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:10px;
  padding:8px 20px 13px;
}

.smart-card{
  padding:14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.smart-card-title{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:11px;
}

.smart-card-title strong{
  display:block;
  font-size:11px;
}

.smart-card-title small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.smart-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-weight:900;
}

.smart-icon.purple{
  background:var(--purple-100);
  color:var(--primary);
}

.smart-icon.mint{
  background:var(--mint-100);
  color:#3F8869;
}

.intelligence-highlight{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 10px;
  margin-bottom:7px;
  border:1px solid var(--purple-100);
  border-radius:11px;
  background:var(--purple-50);
}

.intelligence-highlight span{
  color:#74687E;
  font-size:9px;
}

.intelligence-highlight strong{
  color:var(--primary);
  font-size:11px;
}

.intelligence-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:7px 1px;
  border-bottom:1px solid #F1ECF4;
  font-size:9px;
}

.intelligence-row>span{
  color:var(--muted);
}

.intelligence-row strong{
  text-align:right;
}

.intelligence-row small{
  color:var(--muted);
  font-weight:600;
}

.attention-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.attention-list>div{
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border-radius:8px;
  background:var(--yellow-50);
  color:#8F6B24;
  font-size:8px;
}

.attention-list>div>span{
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#F4DFAC;
  font-weight:900;
}

.next-action{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:8px;
  align-items:start;
  padding:7px 0;
  border-bottom:1px solid #F1ECF4;
}

.next-action:last-child{
  border-bottom:0;
}

.next-action>span{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--mint-50);
  color:#3D8C69;
  font-size:8px;
  font-weight:900;
}

.next-action p{
  margin:3px 0 0;
  color:#62586B;
  font-size:9px;
  line-height:1.45;
}

.smart-empty{
  padding:9px;
  border-radius:9px;
  font-size:9px;
}

.smart-empty.good{
  background:var(--mint-50);
  color:#3F8366;
}

.customer-tabs{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  gap:5px;
  padding:8px 20px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);
}

.customer-tab{
  padding:8px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#81748B;
  box-shadow:none;
  font-size:9px;
}

.customer-tab span{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  margin-left:4px;
  padding:0 4px;
  border-radius:999px;
  background:#F0EAF4;
  font-size:8px;
}

.customer-tab.active{
  background:var(--primary);
  color:#fff;
}

.customer-tab.active span{
  background:rgba(255,255,255,.18);
}

.customer-tab-panel{
  display:none;
  padding:15px 20px 24px;
}

.customer-tab-panel.active{
  display:block;
}

.customer-overview-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.customer-section-card{
  margin-bottom:10px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.customer-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:11px;
}

.customer-section-head strong{
  display:block;
  font-size:11px;
}

.customer-section-head span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.customer-preference-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.preference-row{
  display:grid;
  grid-template-columns:27px 1fr auto;
  gap:8px;
  align-items:center;
  padding:8px;
  border:1px solid #F0EBF3;
  border-radius:10px;
  background:#FCFAFD;
}

.preference-rank{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--purple-50);
  color:var(--primary);
  font-size:8px;
  font-weight:900;
}

.preference-row strong{
  display:block;
  font-size:9px;
}

.preference-row small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.preference-metric{
  text-align:right;
}

.preference-metric strong{
  color:var(--primary);
  font-size:11px;
}

.customer-status-breakdown{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 14px;
}

.customer-status-row{
  display:grid;
  grid-template-columns:100px 1fr 28px;
  gap:8px;
  align-items:center;
}

.customer-status-row>strong{
  font-size:9px;
}

.customer-status-progress{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#F1ECF4;
}

.customer-status-progress i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#A974D0,var(--primary));
}

.customer-timeline{
  display:flex;
  flex-direction:column;
}

.timeline-row{
  display:grid;
  grid-template-columns:16px 1fr;
  gap:9px;
  padding:8px 0;
  border-bottom:1px solid #F1ECF4;
}

.timeline-row:last-child{
  border-bottom:0;
}

.timeline-dot{
  width:9px;
  height:9px;
  margin-top:4px;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(96,45,154,.07);
}

.timeline-dot.order{background:var(--primary)}
.timeline-dot.comment{background:#60A2DC}

.timeline-row strong{
  display:block;
  font-size:9px;
}

.timeline-row p{
  margin:2px 0;
  color:#62596A;
  font-size:9px;
  line-height:1.4;
}

.timeline-row small{
  color:var(--muted);
  font-size:8px;
}

.customer-tab-toolbar{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:8px;
  margin-bottom:10px;
}

#customer-tab-activity .customer-tab-toolbar{
  grid-template-columns:1fr;
}

.customer-order-list,
.customer-activity-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.customer-order-card{
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.customer-order-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.customer-order-card-head>div:first-child>strong{
  display:block;
  font-size:10px;
}

.customer-order-card-head small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:8px;
}

.customer-order-head-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.customer-order-head-right>strong{
  font-size:11px;
  color:var(--primary);
}

.customer-order-items{
  border:1px solid #F0EBF3;
  border-radius:10px;
  overflow:hidden;
}

.customer-order-item{
  display:grid;
  grid-template-columns:1fr 45px 90px auto;
  gap:8px;
  align-items:center;
  padding:7px 9px;
  border-bottom:1px solid #F2EDF5;
  font-size:8px;
}

.customer-order-item:last-child{
  border-bottom:0;
}

.customer-order-item strong{
  display:block;
  font-size:9px;
}

.customer-order-item small{
  display:block;
  margin-top:2px;
  color:var(--muted);
}

.customer-order-item em{
  padding:4px 6px;
  border-radius:7px;
  background:var(--yellow-50);
  color:#967024;
  font-style:normal;
  font-weight:800;
}

.customer-order-note{
  margin-top:8px;
  padding:7px 8px;
  border-radius:8px;
  background:#FAF7FC;
  color:#73697B;
  font-size:8px;
}

.customer-order-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

.customer-activity-card{
  display:grid;
  grid-template-columns:15px 1fr;
  gap:8px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
}

.activity-marker{
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:#6EA7DD;
  box-shadow:0 0 0 4px rgba(91,146,217,.09);
}

.customer-activity-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.customer-activity-meta strong{
  font-size:9px;
}

.customer-activity-meta>span{
  color:var(--muted);
  font-size:8px;
}

.activity-potential{
  padding:3px 6px;
  border-radius:999px;
  background:var(--mint-50);
  color:#3B8464!important;
  font-weight:800;
}

.customer-activity-card p{
  margin:5px 0 3px;
  color:#4F4657;
  font-size:10px;
  line-height:1.5;
}

.customer-edit-card{
  margin:0;
}

.customer-profile-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.customer-test-line{
  margin-top:8px;
}

.customer-empty{
  padding:18px;
  border:1px dashed #DDD2E5;
  border-radius:11px;
  background:#FBF8FD;
  color:var(--muted);
  text-align:center;
  font-size:9px;
}

@media(max-width:1000px){
  .customer-360-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .customer-smart-grid,
  .customer-overview-grid{
    grid-template-columns:1fr;
  }

  .customer-360-hero{
    flex-direction:column;
  }

  .customer-hero-actions{
    justify-content:flex-start;
  }
}

@media(max-width:700px){
  .customer-360-stats{
    grid-template-columns:1fr 1fr;
  }

  .customer-tabs{
    overflow-x:auto;
  }

  .customer-tab{
    white-space:nowrap;
  }

  .customer-status-breakdown{
    grid-template-columns:1fr;
  }

  .customer-profile-grid,
  .customer-tab-toolbar{
    grid-template-columns:1fr;
  }

  .customer-order-card-head{
    flex-direction:column;
  }

  .customer-order-head-right{
    justify-content:space-between;
  }
}


/* =========================================================
   v3.8.1 — UI polish global
   - listes/selects harmonisés avec le CRM
   - typographie légèrement agrandie
   - tableaux, fiches, cartes et formulaires plus lisibles
   ========================================================= */

/* ---------- Base lisibilité ---------- */
body{
  font-size:13px;
}

.sub{
  font-size:11px;
}

label{
  font-size:12px;
}

input,
select,
textarea{
  min-height:42px;
  padding:10px 13px;
  font-size:12px;
  line-height:1.35;
}

/* ---------- SELECTS : identité CRM ---------- */
select{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:38px !important;
  border:1px solid #DED1E8;
  border-radius:12px;
  background-color:#fff;
  background-image:
    linear-gradient(45deg,transparent 50%,#602D9A 50%),
    linear-gradient(135deg,#602D9A 50%,transparent 50%),
    linear-gradient(to right,#F0E6F7,#F0E6F7);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    calc(100% - 37px) 50%;
  background-size:
    5px 5px,
    5px 5px,
    1px 22px;
  background-repeat:no-repeat;
  color:#31263B;
  font-weight:700;
  box-shadow:0 3px 10px rgba(96,45,154,.035);
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

select:hover{
  border-color:#CDB8DE;
  background-color:#FCF9FE;
}

select:focus{
  border-color:#9D78BE;
  background-color:#fff;
  box-shadow:0 0 0 4px rgba(96,45,154,.09);
}

/* Chromium applique une partie de ces styles au menu natif.
   Le rendu exact du menu ouvert dépend aussi du navigateur / OS. */
select option{
  min-height:36px;
  padding:9px 12px;
  background:#fff;
  color:#342A3D;
  font-size:13px;
  font-weight:600;
}

select option:checked{
  background:#602D9A;
  color:#fff;
}

select option:hover{
  background:#F0E4F9;
  color:#602D9A;
}

/* Selects spéciaux déjà présents */
.inline-status-select,
.live-status-select,
.capture-page-size select,
.order-filter-field select{
  min-height:38px;
  font-size:11.5px;
  font-weight:800;
}

.inline-status-select{
  min-width:138px;
  padding:8px 36px 8px 11px !important;
  border-radius:10px;
}

.inline-status-select.waiting{
  background-color:#FFF8E7;
  border-color:#F0DDA7;
  color:#946B13;
}

/* ---------- Tables ---------- */
table{
  font-size:12.5px;
}

th{
  padding:12px 12px;
  font-size:10.5px;
  letter-spacing:.055em;
  line-height:1.3;
}

td{
  padding:13px 12px;
  font-size:12.5px;
  line-height:1.45;
}

tbody td strong,
tbody td b{
  font-size:12.5px;
}

tbody td .sub,
tbody td small{
  font-size:10.5px;
  line-height:1.4;
}

.order-table-item b{
  font-size:11.5px;
}

.order-table-item{
  font-size:11px;
  line-height:1.45;
}

/* ---------- Badges / statuts ---------- */
.badge{
  padding:5px 9px;
  font-size:10px;
  line-height:1.2;
}

.status-pill{
  font-size:11px;
}

.chip,
.attribute-value-chip{
  font-size:10px;
}

/* ---------- Panels / cards / titres ---------- */
.panel-head h2{
  font-size:17px;
}

.panel-head p{
  font-size:11px;
}

.page-hero h2{
  font-size:24px;
}

.page-hero p{
  font-size:12px;
}

.section-title{
  font-size:12px;
}

.live-card h3,
.product-head h3,
.attribute-card h3{
  font-size:14.5px;
}

.live-metrics b{
  font-size:13px;
}

.live-metrics span,
.product-meta span{
  font-size:9.5px;
}

.product-meta b{
  font-size:12px;
}

.sku{
  font-size:10px;
}

/* ---------- Pagination ---------- */
.pager{
  gap:8px;
}

.pager button{
  min-width:34px;
  min-height:34px;
  padding:7px 10px;
  font-size:11px;
  font-weight:800;
}

.pager span{
  font-size:11px;
}

/* ---------- Modales / drawers / fiches ---------- */
.drawer-card,
.modal-card{
  font-size:12.5px;
}

.drawer-head p,
.modal-head p{
  font-size:11px;
}

.detail-grid label,
.manual-details-grid label,
.customer-profile-grid label{
  font-size:11.5px;
}

.mini-stats div{
  font-size:10px;
}

.customer-stat span,
.customer-stat small{
  font-size:9.5px;
}

.customer-stat strong{
  font-size:18px;
}

.customer-segment-badge{
  font-size:10px;
}

.customer-contact-quick span{
  font-size:10px;
}

.smart-card-title strong,
.customer-section-head strong{
  font-size:12px;
}

.smart-card-title small,
.customer-section-head span{
  font-size:9.5px;
}

.intelligence-highlight span,
.intelligence-row,
.next-action p,
.customer-order-card-head small,
.customer-activity-meta>span,
.timeline-row p,
.timeline-row small{
  font-size:9.5px;
}

.intelligence-highlight strong{
  font-size:12px;
}

.preference-row strong,
.customer-order-card-head>div:first-child>strong,
.customer-order-item strong,
.customer-activity-meta strong,
.timeline-row strong{
  font-size:10.5px;
}

.preference-row small,
.customer-order-item small{
  font-size:9px;
}

.customer-order-item{
  font-size:9.5px;
}

.customer-activity-card p{
  font-size:11px;
}

/* ---------- Formulaire commande manuelle ---------- */
.manual-step-head strong{
  font-size:14px;
}

.manual-step-head span:not(.step-number){
  font-size:10px;
}

.manual-line label,
.manual-line-stock>span:first-child,
.manual-line-total>span:first-child{
  font-size:9px;
}

.manual-line select,
.manual-line input{
  min-height:38px;
  font-size:10.5px;
}

.manual-stock{
  font-size:9px;
}

.manual-line-total strong{
  font-size:11px;
}

/* ---------- Filtres commandes ---------- */
.order-filter-title{
  font-size:14px;
}

.quick-date{
  font-size:10px;
  padding:8px 11px;
}

.order-filter-field > span{
  font-size:9px;
}

.order-filter-field input,
.order-filter-field select{
  min-height:40px;
  font-size:11px;
}

.order-filter-summary{
  font-size:10px;
}

/* ---------- Sidebar ---------- */
.nav{
  font-size:12.5px;
}

.nav-section-title{
  font-size:9.5px;
}

.workspace-pill small{
  font-size:9.5px;
}

.workspace-pill strong{
  font-size:11.5px;
}

/* ---------- Compatibilité petites résolutions ---------- */
@media(max-width:850px){
  input,
  select,
  textarea{
    font-size:12px;
  }

  th{
    font-size:10px;
  }

  td{
    font-size:12px;
  }
}


/* =========================================================
   v3.9 — Origine / source des commandes
   ========================================================= */
.order-origin{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:105px;
}

.origin-mode,
.origin-source{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:145px;
  padding:4px 8px;
  border-radius:999px;
  font-size:9.5px;
  line-height:1.15;
  font-weight:850;
  white-space:nowrap;
}

.origin-mode.automatic{
  background:var(--purple-50);
  border:1px solid var(--purple-100);
  color:var(--primary);
}

.origin-mode.manual{
  background:var(--blue-50);
  border:1px solid var(--blue-100);
  color:#4279AE;
}

.origin-source{
  background:#F8F5FA;
  border:1px solid var(--border);
  color:#73687D;
}

.origin-source.source-live{
  background:var(--coral-50);
  border-color:var(--coral-100);
  color:#B15D55;
}

.origin-source.source-whatsapp{
  background:var(--mint-50);
  border-color:var(--mint-100);
  color:#388161;
}

.origin-source.source-phone{
  background:var(--blue-50);
  border-color:var(--blue-100);
  color:#467DAF;
}

.origin-source.source-tiktok-message{
  background:#F8EDF9;
  border-color:#EBD9F0;
  color:#7B4E8B;
}

.origin-source.source-messenger{
  background:#EEF5FF;
  border-color:#D8E8FB;
  color:#4876AA;
}

.origin-source.source-facebook{
  background:#EFF4FF;
  border-color:#DAE4FA;
  color:#45699E;
}

.origin-source.source-instagram{
  background:var(--pink-50);
  border-color:var(--pink-100);
  color:#A94E78;
}

.origin-source.source-manual{
  background:var(--yellow-50);
  border-color:var(--yellow-100);
  color:#8D6B20;
}

.order-modal-summary-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.order-modal-summary-line>.order-origin{
  flex-direction:row;
  min-width:auto;
}

/* One extra order filter: keep the layout fluid rather than overflowing. */
.order-filter-grid{
  grid-template-columns:
    minmax(240px,1.65fr)
    135px
    135px
    155px
    165px
    150px
    90px
    auto;
}

/* Manual order now includes Date, Status, Source and Note. */
.manual-details-grid{
  grid-template-columns:180px 180px 210px minmax(260px,1fr);
}

@media(max-width:1550px){
  .order-filter-grid{
    grid-template-columns:
      minmax(230px,1.4fr)
      135px
      135px
      155px
      160px
      145px
      90px;
  }

  .order-filter-actions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }
}

@media(max-width:1200px){
  .manual-details-grid{
    grid-template-columns:1fr 1fr;
  }

  .manual-note-field{
    grid-column:1 / -1;
  }
}

@media(max-width:850px){
  .manual-details-grid{
    grid-template-columns:1fr;
  }

  .manual-note-field{
    grid-column:auto;
  }
}


/* =========================================================
   v3.9.1 — FIX colonnes Liste d'attente Stock
   Les règles génériques de l'inventory-grid faisaient casser
   les textes caractère par caractère dans Client/Variante.
   ========================================================= */

/* Les tableaux secondaires gardent leur propre comportement. */
.inventory-grid .table-wrap table.waiting-list-table{
  min-width:980px !important;
  table-layout:auto;
}

.inventory-grid .table-wrap table.stock-movements-table{
  min-width:760px !important;
  table-layout:auto;
}

/* Réinitialiser le wrapping trop agressif sur la liste d'attente. */
.waiting-list-table th,
.waiting-list-table td{
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  vertical-align:top;
}

/* Colonnes textuelles : retour à la ligne normal, jamais lettre par lettre. */
.waiting-list-table th:nth-child(1),
.waiting-list-table td:nth-child(1){
  min-width:220px;
}

.waiting-list-table th:nth-child(2),
.waiting-list-table td:nth-child(2){
  min-width:170px;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}

.waiting-list-table th:nth-child(3),
.waiting-list-table td:nth-child(3){
  min-width:250px;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}

.waiting-list-table th:nth-child(4),
.waiting-list-table td:nth-child(4),
.waiting-list-table th:nth-child(5),
.waiting-list-table td:nth-child(5),
.waiting-list-table th:nth-child(6),
.waiting-list-table td:nth-child(6){
  min-width:74px;
  text-align:left;
}

.waiting-list-table th:nth-child(7),
.waiting-list-table td:nth-child(7){
  min-width:140px;
}

.waiting-list-table td b,
.waiting-list-table td strong{
  display:block;
}

.waiting-list-table td .sub{
  display:block;
  margin-top:4px;
  white-space:normal !important;
  overflow-wrap:break-word !important;
}

/* Mouvements récents : garder un tableau lisible et homogène. */
.stock-movements-table th:nth-child(1),
.stock-movements-table td:nth-child(1){min-width:130px}
.stock-movements-table th:nth-child(2),
.stock-movements-table td:nth-child(2){min-width:95px}
.stock-movements-table th:nth-child(3),
.stock-movements-table td:nth-child(3){min-width:230px; white-space:normal; overflow-wrap:break-word}
.stock-movements-table th:nth-child(4),
.stock-movements-table td:nth-child(4){min-width:70px}
.stock-movements-table th:nth-child(5),
.stock-movements-table td:nth-child(5){min-width:150px; white-space:normal; overflow-wrap:break-word}

@media(max-width:1450px){
  .inventory-grid .table-wrap table.waiting-list-table{
    min-width:920px !important;
  }
}

@media(max-width:900px){
  .inventory-grid .table-wrap table.waiting-list-table{
    min-width:860px !important;
  }
}


/* =========================================================
   v3.9.2 — File d'attente Stock intelligente
   ========================================================= */
.waiting-order-state{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}

.waiting-order-state .sub{
  margin:0;
  color:#9A7626;
  font-weight:700;
}

.waiting-list-table tbody tr{
  background:linear-gradient(90deg,#FFFDF8,#FFFFFF 28%);
}

.waiting-list-table tbody tr:hover{
  background:linear-gradient(90deg,#FFF9E8,#FCFAFD 32%);
}


/* =========================================================
   v3.9.3 — Statuts avec couleurs distinctes non répétées
   ========================================================= */
.badge.status-order-new,
.inline-status-select.status-order-new,
.status-row.status-order-new .progress i{background:#EAF2FF;color:#2357C8;border-color:#BCD0FF}
.badge.status-order-waiting,
.inline-status-select.status-order-waiting,
.status-row.status-order-waiting .progress i{background:#FFF1DE;color:#C06A00;border-color:#FFD8A6}
.badge.status-order-confirmed,
.inline-status-select.status-order-confirmed,
.status-row.status-order-confirmed .progress i{background:#F1E8FF;color:#6E3DCB;border-color:#D8C3FF}
.badge.status-order-prepared,
.inline-status-select.status-order-prepared,
.status-row.status-order-prepared .progress i{background:#FFF8D8;color:#A87A00;border-color:#F4E7A6}
.badge.status-order-delivered,
.inline-status-select.status-order-delivered,
.status-row.status-order-delivered .progress i{background:#E7F9EF;color:#1B8C58;border-color:#BDEACF}
.badge.status-order-cancelled,
.inline-status-select.status-order-cancelled,
.status-row.status-order-cancelled .progress i{background:#FFE8EE;color:#C34568;border-color:#F4B8C9}

.badge.status-customer-new{background:#E6F7FF;color:#0C7AA6;border-color:#B5E8FF}
.badge.status-customer-client{background:#E9FBF3;color:#167C63;border-color:#BFEEDB}
.badge.status-customer-vip{background:#FDEBFF;color:#A02DB0;border-color:#F2C0F7}
.badge.status-customer-blocked{background:#F6EAF0;color:#9F4C68;border-color:#E7C5D3}

.badge.status-live-active{background:#EAFBF0;color:#268B58;border-color:#C9F1D8}
.badge.status-live-ended{background:#F1EEF5;color:#6D6480;border-color:#DDD4EA}
.badge.status-stock-reserved{background:#EAF2FF;color:#2357C8;border-color:#BCD0FF}
.badge.status-stock-partial{background:#FFF3E6;color:#C86A00;border-color:#FFD7A6}
.badge.status-stock-unavailable{background:#FFE8EE;color:#C34568;border-color:#F4B8C9}
.badge.status-stock-fulfilled{background:#E7F9EF;color:#1B8C58;border-color:#BDEACF}

.badge.status-order-new,
.badge.status-order-waiting,
.badge.status-order-confirmed,
.badge.status-order-prepared,
.badge.status-order-delivered,
.badge.status-order-cancelled,
.badge.status-customer-new,
.badge.status-customer-client,
.badge.status-customer-vip,
.badge.status-customer-blocked,
.badge.status-live-active,
.badge.status-live-ended,
.badge.status-stock-reserved,
.badge.status-stock-partial,
.badge.status-stock-unavailable,
.badge.status-stock-fulfilled{
  border:1px solid transparent;
  font-weight:900;
}

.inline-status-select.status-order-new,
.inline-status-select.status-order-waiting,
.inline-status-select.status-order-confirmed,
.inline-status-select.status-order-prepared,
.inline-status-select.status-order-delivered,
.inline-status-select.status-order-cancelled{
  border-width:1px;
  box-shadow:none;
}
.inline-status-select.status-order-new{background-color:#EAF2FF;color:#2357C8;border-color:#BCD0FF}
.inline-status-select.status-order-waiting{background-color:#FFF1DE;color:#C06A00;border-color:#FFD8A6}
.inline-status-select.status-order-confirmed{background-color:#F1E8FF;color:#6E3DCB;border-color:#D8C3FF}
.inline-status-select.status-order-prepared{background-color:#FFF8D8;color:#A87A00;border-color:#F4E7A6}
.inline-status-select.status-order-delivered{background-color:#E7F9EF;color:#1B8C58;border-color:#BDEACF}
.inline-status-select.status-order-cancelled{background-color:#FFE8EE;color:#C34568;border-color:#F4B8C9}

.status-row.status-order-new .progress,
.status-row.status-order-waiting .progress,
.status-row.status-order-confirmed .progress,
.status-row.status-order-prepared .progress,
.status-row.status-order-delivered .progress,
.status-row.status-order-cancelled .progress{
  background:#F2ECF6;
}
.status-row.status-order-new .progress i{background:linear-gradient(90deg,#8BB5FF,#2357C8)}
.status-row.status-order-waiting .progress i{background:linear-gradient(90deg,#FFD184,#C06A00)}
.status-row.status-order-confirmed .progress i{background:linear-gradient(90deg,#C6A7FF,#6E3DCB)}
.status-row.status-order-prepared .progress i{background:linear-gradient(90deg,#FFE89A,#A87A00)}
.status-row.status-order-delivered .progress i{background:linear-gradient(90deg,#79D7A8,#1B8C58)}
.status-row.status-order-cancelled .progress i{background:linear-gradient(90deg,#F5A7BC,#C34568)}

select option[value="NEW"]{background:#EAF2FF;color:#2357C8}
select option[value="WAITING_STOCK"]{background:#FFF1DE;color:#C06A00}
select option[value="CONFIRMED"]{background:#F1E8FF;color:#6E3DCB}
select option[value="PREPARED"]{background:#FFF8D8;color:#A87A00}
select option[value="DELIVERED"]{background:#E7F9EF;color:#1B8C58}
select option[value="CANCELLED"]{background:#FFE8EE;color:#C34568}
select option[value="CUSTOMER"]{background:#E9FBF3;color:#167C63}
select option[value="VIP"]{background:#FDEBFF;color:#A02DB0}
select option[value="BLOCKED"]{background:#F6EAF0;color:#9F4C68}


/* =========================================================
   v4.0 — Dashboard 360° + navigation contextuelle
   ========================================================= */
.dashboard-360-banner{margin-bottom:16px}
.dashboard-filter-card{padding:16px;margin-bottom:16px;border:1px solid var(--border);border-radius:18px;background:linear-gradient(145deg,#fff,#FBF8FD);box-shadow:var(--shadow-sm)}
.dashboard-filter-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.dashboard-filter-head strong{display:block;font-size:14px}.dashboard-filter-head>div:first-child>span{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.dashboard-quick-dates{display:flex;gap:6px;flex-wrap:wrap}.dashboard-quick-dates button{padding:7px 10px;border:1px solid var(--purple-100);border-radius:999px;background:#fff;color:#776A82;box-shadow:none;font-size:9px}.dashboard-quick-dates button.active{background:var(--primary);border-color:var(--primary);color:#fff}
.dashboard-filter-grid{display:grid;grid-template-columns:minmax(220px,1.5fr) 135px 135px 155px 150px minmax(180px,1fr) 125px auto;gap:8px;align-items:end}.dashboard-filter-grid label{margin:0}.dashboard-filter-grid label>span{display:block;margin-bottom:5px;color:#8C8095;font-size:8px;font-weight:900;text-transform:uppercase}.dashboard-filter-grid input,.dashboard-filter-grid select{min-height:39px;font-size:10.5px}.dashboard-filter-grid .btn{height:39px;white-space:nowrap}
.dashboard-filter-summary{margin-top:11px;padding:8px 10px;border:1px solid var(--mint-100);border-radius:10px;background:var(--mint-50);color:#477861;font-size:10px;font-weight:750}
.clickable-entity{cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.clickable-entity:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(96,45,154,.10);border-color:#DCC8EA}
.dashboard-insights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0 0 16px}.insight-card{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:14px;background:#fff;text-align:left;box-shadow:var(--shadow-sm)}.insight-card>span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#fff}.insight-card strong,.insight-card small{display:block}.insight-card strong{font-size:10.5px}.insight-card small{margin-top:2px;color:var(--muted);font-size:8.5px}.insight-card.warn{background:var(--yellow-50)}.insight-card.peach{background:var(--peach-50)}.insight-card.pink{background:var(--pink-50)}.insight-card.mint{background:var(--mint-50)}
.dashboard-all-good{padding:12px;border:1px solid var(--mint-100);border-radius:11px;background:var(--mint-50);color:#3B8162;font-size:10px}
.dashboard-360-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.36fr)}
.entity-list-row,.source-row,.recent-order-card{width:100%;border:1px solid #EEE7F2;background:#fff;box-shadow:none;text-align:left;transition:.14s}.entity-list-row:hover,.source-row:hover,.recent-order-card:hover{background:var(--purple-50);border-color:#DDC9EC;transform:none}.entity-list-row{display:grid;grid-template-columns:1fr auto 18px;gap:8px;align-items:center;padding:9px;border-radius:10px;margin-bottom:6px}.entity-list-row strong,.entity-list-row small{display:block}.entity-list-row strong{font-size:10px}.entity-list-row small{margin-top:2px;color:var(--muted);font-size:8px}.entity-list-row>div:nth-child(2){text-align:right}.stock-alert-row b{color:#C06A00}
.source-row{display:grid;grid-template-columns:110px 1fr 30px;gap:8px;align-items:center;padding:7px 8px;border-radius:9px;margin-bottom:6px;font-size:9px}.source-row>div{height:7px;border-radius:999px;background:#F1ECF4;overflow:hidden}.source-row i{display:block;height:100%;background:linear-gradient(90deg,#B68AD4,var(--primary));border-radius:999px}
.dashboard-recent-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.recent-order-card{padding:10px;border-radius:11px}.recent-order-card>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.recent-order-card>span,.recent-order-card>small{display:block}.recent-order-card>span{margin-top:6px;font-weight:750}.recent-order-card>small{margin-top:3px;color:var(--muted);font-size:8.5px}
.dashboard-status-link{width:100%;border:0;background:transparent;box-shadow:none;text-align:left;padding:2px 0}.dashboard-status-link:hover{transform:none;background:transparent}.clickable-bar{border:0;background:transparent;box-shadow:none;padding:0;cursor:pointer}.clickable-bar:hover{transform:translateY(-2px)}.clickable-bar small{color:var(--muted);font-size:8px}
.click-table tbody tr{cursor:pointer}.click-table tbody tr:hover{background:var(--purple-50)}
.link-entity{padding:0;border:0;background:transparent;color:var(--primary);box-shadow:none;text-align:left;font-size:inherit;font-weight:750}.link-entity:hover{transform:none;text-decoration:underline}.link-entity.strong{font-weight:900}.product-link{color:#3F6FA7}.metric-link{min-width:30px;padding:4px 7px;border:1px solid var(--purple-100);border-radius:8px;background:var(--purple-50);color:var(--primary);box-shadow:none;font-weight:900}.metric-link:hover{transform:none;background:var(--purple-100)}.metric-link-disabled{display:inline-flex;align-items:center;justify-content:center;cursor:default;pointer-events:none;opacity:.72}.metric-link-disabled:hover{background:var(--purple-50)}
.order-context-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;padding:9px 11px;border:1px solid var(--blue-100);border-radius:11px;background:var(--blue-50);color:#466D92;font-size:10px}.order-context-bar button{padding:5px 8px;background:#fff;border-color:#CDE1F4;color:#466D92;box-shadow:none}
@media(max-width:1450px){.dashboard-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.dashboard-insights{grid-template-columns:1fr 1fr}}
@media(max-width:1000px){.dashboard-360-grid{grid-template-columns:1fr}.dashboard-filter-head{align-items:flex-start;flex-direction:column}.dashboard-filter-grid{grid-template-columns:1fr 1fr}.dashboard-recent-grid{grid-template-columns:1fr}}
@media(max-width:650px){.dashboard-filter-grid,.dashboard-insights{grid-template-columns:1fr}}


/* =========================================================
   v4.0.1 — Dashboard 360 layout fix
   - aucun filtre ne dépasse du panel
   - panneaux latéraux stables
   - commandes récentes lisibles sans badges coupés
   - responsive robuste avec sidebar ouverte ou repliée
   ========================================================= */

/* Tous les enfants du dashboard doivent pouvoir rétrécir dans leur grille. */
#page-dashboard,
#page-dashboard > *,
.dashboard-filter-card,
.dashboard-filter-grid,
.dashboard-360-grid,
.dashboard-360-grid > .panel,
.dashboard-recent-grid,
.recent-order-card{
  min-width:0;
  max-width:100%;
}

/* -------------------------
   Filtres 360
   ------------------------- */
.dashboard-filter-card{
  overflow:hidden;
}

.dashboard-filter-head{
  min-width:0;
}

.dashboard-quick-dates{
  justify-content:flex-end;
  min-width:0;
}

/* Sur un grand écran : deux lignes propres au lieu de forcer 8 contrôles
   sur une seule ligne. Le champ recherche prend plus de place. */
.dashboard-filter-grid{
  grid-template-columns:minmax(260px,1.6fr) repeat(3,minmax(145px,1fr));
  gap:10px;
  width:100%;
}

.dashboard-filter-grid > label,
.dashboard-filter-grid > button{
  min-width:0;
  max-width:100%;
}

.dashboard-filter-grid input,
.dashboard-filter-grid select{
  width:100%;
  min-width:0;
}

.dashboard-filter-grid > label:first-child{
  grid-column:span 1;
}

#dashboardReset{
  width:max-content;
  min-width:120px;
  justify-self:end;
}

.dashboard-filter-summary{
  width:100%;
  min-width:0;
  overflow-wrap:anywhere;
}

/* -------------------------
   Grille analytique 360
   ------------------------- */
.dashboard-grid.dashboard-360-grid{
  grid-template-columns:minmax(0,2fr) minmax(330px,.78fr);
  align-items:start;
}

.dashboard-360-grid > .panel{
  overflow:hidden;
}

/* Les sections marquées span-2 représentent les blocs principaux à gauche. */
.dashboard-360-grid > .span-2{
  min-width:0;
}

/* -------------------------
   Commandes récentes
   ------------------------- */
.dashboard-recent-grid{
  grid-template-columns:1fr !important;
  gap:9px;
}

.recent-order-card{
  width:100%;
  display:block;
  padding:11px 12px;
  text-align:left;
  overflow:hidden;
}

.recent-order-card > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:9px;
  width:100%;
}

.recent-order-card > div > strong{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.35;
}

.recent-order-card .badge{
  flex:none;
  max-width:130px;
  white-space:nowrap;
}

.recent-order-card > span{
  overflow-wrap:anywhere;
  line-height:1.4;
}

.recent-order-card > small{
  overflow-wrap:anywhere;
  line-height:1.45;
}

/* Les listes du rail droit ne doivent jamais élargir le rail. */
.entity-list-row,
.source-row,
.status-row{
  min-width:0;
  max-width:100%;
}

.entity-list-row > div,
.source-row > span,
.status-row > span{
  min-width:0;
}

/* -------------------------
   Breakpoints tenant compte du sidebar
   ------------------------- */
@media(max-width:1650px){
  .dashboard-filter-grid{
    grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(135px,1fr));
  }

  .dashboard-grid.dashboard-360-grid{
    grid-template-columns:minmax(0,1.75fr) minmax(310px,.72fr);
  }
}

@media(max-width:1350px){
  .dashboard-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-filter-grid > label:first-child{
    grid-column:1 / -1;
  }

  #dashboardReset{
    justify-self:end;
  }

  .dashboard-grid.dashboard-360-grid{
    grid-template-columns:1fr;
  }

  .dashboard-recent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  .dashboard-filter-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .dashboard-quick-dates{
    justify-content:flex-start;
  }

  .dashboard-filter-grid{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-recent-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:650px){
  .dashboard-filter-grid{
    grid-template-columns:1fr;
  }

  .dashboard-filter-grid > label:first-child{
    grid-column:auto;
  }

  #dashboardReset{
    width:100%;
    justify-self:stretch;
  }
}


/* =========================================================
   v4.1 — Dashboard 360 organisé visuellement
   ========================================================= */
#page-dashboard{
  display:flex;
  flex-direction:column;
  gap:18px;
}

#page-dashboard.page:not(.active){display:none}

.dashboard-360-banner,
.dashboard-filter-card,
.dashboard-zone{
  margin:0;
}

.dashboard-zone{
  position:relative;
  min-width:0;
}

.dashboard-zone + .dashboard-zone{
  padding-top:4px;
}

.dashboard-zone-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin:0 0 11px;
  padding:0 2px;
}

.dashboard-zone-head.compact{
  margin-bottom:8px;
}

.dashboard-zone-head h3{
  margin:3px 0 0;
  color:var(--ink);
  font-size:17px;
  line-height:1.2;
}

.dashboard-zone-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:10.5px;
}

/* 1. Vue exécutive */
.dashboard-zone-executive{
  padding:16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:linear-gradient(145deg,#FFFFFF,#FBF8FD);
  box-shadow:var(--shadow-sm);
}

.dashboard-executive-kpis{
  margin:0 0 10px;
  gap:10px;
}

.dashboard-executive-kpis .hero-kpi{
  min-height:112px;
}

.dashboard-secondary-kpis{
  margin:0;
  gap:8px;
}

.dashboard-secondary-kpis .stat-card{
  min-height:88px;
  box-shadow:none;
  background:#fff;
}

/* 2. Priorités */
.dashboard-zone-alerts{
  padding:13px 15px;
  border:1px solid #F0E6F6;
  border-radius:17px;
  background:linear-gradient(145deg,#FCFAFD,#FFFFFF);
}

.dashboard-zone-alerts .dashboard-insights{
  margin:0;
}

/* 3. Performance */
.dashboard-performance-grid{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(300px,.65fr);
  gap:12px;
  align-items:stretch;
}

.dashboard-panel-main{
  min-height:390px;
}

.dashboard-panel-main .bar-chart{
  min-height:285px;
}

.dashboard-side-stack,
.dashboard-commerce-side{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  min-width:0;
}

.dashboard-panel-compact{
  min-width:0;
  min-height:0;
}

.dashboard-panel-compact .panel-head{
  margin-bottom:10px;
}

/* 4. Commerce */
.dashboard-commerce-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);
  gap:12px;
  align-items:start;
}

.dashboard-products-panel{
  min-width:0;
  min-height:330px;
}

.dashboard-commerce-side .panel{
  min-height:0;
}

/* 5. Operations */
.dashboard-operations-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  gap:12px;
  align-items:start;
}

.dashboard-stock-panel,
.dashboard-recent-panel{
  min-width:0;
}

.dashboard-recent-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px;
}

/* Les panneaux du dashboard ne doivent plus générer des blancs artificiels. */
#page-dashboard .panel{
  height:auto;
}

#page-dashboard .panel:has(#topCustomers),
#page-dashboard .panel:has(#topLives),
#page-dashboard .panel:has(#statusBreakdown),
#page-dashboard .panel:has(#sourceBreakdown){
  padding-bottom:14px;
}

/* Séparation visuelle légère entre zones */
.dashboard-zone:not(.dashboard-zone-executive):not(.dashboard-zone-alerts){
  padding-top:2px;
}

.dashboard-zone:not(.dashboard-zone-executive):not(.dashboard-zone-alerts)::before{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin-bottom:15px;
  background:linear-gradient(90deg,transparent,#EDE5F2 9%,#EDE5F2 91%,transparent);
}

/* Responsive */
@media(max-width:1450px){
  .dashboard-performance-grid,
  .dashboard-commerce-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(290px,.72fr);
  }

  .dashboard-operations-grid{
    grid-template-columns:1fr 1.25fr;
  }
}

@media(max-width:1180px){
  .dashboard-performance-grid,
  .dashboard-commerce-grid,
  .dashboard-operations-grid{
    grid-template-columns:1fr;
  }

  .dashboard-side-stack,
  .dashboard-commerce-side{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-recent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:800px){
  #page-dashboard{gap:14px}

  .dashboard-side-stack,
  .dashboard-commerce-side,
  .dashboard-recent-grid{
    grid-template-columns:1fr !important;
  }

  .dashboard-zone-executive,
  .dashboard-zone-alerts{
    padding:12px;
  }

  .dashboard-zone-head h3{font-size:15px}
}


/* =========================================================
   v4.2 — Dashboard Bento compact / zéro zone morte
   ========================================================= */

/* Densité globale : le dashboard doit se lire comme un cockpit,
   pas comme une succession de grands panneaux vides. */
#page-dashboard{
  gap:14px;
}

.dashboard-zone-head{
  margin-bottom:9px;
}

.dashboard-zone-head h3{
  font-size:16px;
}

.dashboard-zone-head p{
  max-width:820px;
}

/* Vue exécutive légèrement plus compacte. */
.dashboard-zone-executive{
  padding:14px;
}
.dashboard-executive-kpis .hero-kpi{
  min-height:100px;
}
.dashboard-secondary-kpis .stat-card{
  min-height:78px;
}

/* Performance : un vrai bloc 8/4, sans hauteur artificielle excessive. */
.dashboard-performance-grid{
  grid-template-columns:minmax(0,2fr) minmax(300px,.78fr);
  gap:10px;
  align-items:start;
}
.dashboard-panel-main{
  min-height:0;
}
.dashboard-panel-main .bar-chart{
  min-height:240px;
  max-height:300px;
}
.dashboard-side-stack{
  gap:10px;
}
.dashboard-side-stack .panel{
  padding-bottom:12px;
}

/* Nouveau workbench commercial + opérationnel.
   La colonne principale contient les données larges.
   La colonne secondaire empile les listes courtes.
   Ainsi, Top Produits ne laisse plus un énorme vide sous lui. */
.dashboard-zone-workbench{
  min-width:0;
}
.dashboard-bento-grid{
  display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(320px,.85fr);
  gap:10px;
  align-items:start;
}
.dashboard-bento-main,
.dashboard-bento-side{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  min-width:0;
  align-content:start;
}
.dashboard-bento-card{
  min-width:0;
  height:auto!important;
  min-height:0!important;
  margin:0;
}
.dashboard-products-panel{
  min-height:0!important;
}

/* Top produits reste compact quand il n'y a qu'une ligne. */
.dashboard-products-panel #topProducts{
  min-height:0;
}
.dashboard-products-panel .table-wrap,
.dashboard-products-panel table{
  margin-bottom:0;
}

/* Top clients peut contenir beaucoup de lignes sans étirer toute la page. */
.dashboard-scroll-list{
  max-height:320px;
  overflow:auto;
  padding-right:2px;
}
.dashboard-scroll-list::-webkit-scrollbar{
  width:6px;
}
.dashboard-scroll-list::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#DCCFE6;
}

/* Commandes récentes utilisent la largeur disponible au lieu de se tasser. */
.dashboard-recent-wide .dashboard-recent-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px;
}
.dashboard-recent-wide .recent-order-card{
  min-width:0;
  min-height:92px;
}
.dashboard-recent-wide .recent-order-card>div{
  min-width:0;
}
.dashboard-recent-wide .recent-order-card b,
.dashboard-recent-wide .recent-order-card span{
  overflow-wrap:anywhere;
}

/* Stock : si tout va bien le panneau reste très compact. */
.dashboard-stock-panel{
  padding-bottom:12px;
}
.dashboard-stock-panel .dashboard-all-good,
.dashboard-stock-panel .stock-alert-row{
  margin-bottom:0;
}

/* Les anciens layouts v4.1 sont neutralisés dans le dashboard courant. */
.dashboard-commerce-grid,
.dashboard-commerce-side,
.dashboard-operations-grid{
  display:none!important;
}

/* Séparateurs de zones plus fins, moins d'espace perdu. */
.dashboard-zone:not(.dashboard-zone-executive):not(.dashboard-zone-alerts)::before{
  margin-bottom:11px;
}

/* Aucune carte du dashboard ne doit s'étirer juste parce qu'une carte voisine est grande. */
#page-dashboard .panel{
  align-self:start;
}

@media(max-width:1300px){
  .dashboard-bento-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);
  }
  .dashboard-scroll-list{
    max-height:280px;
  }
}

@media(max-width:1080px){
  .dashboard-performance-grid,
  .dashboard-bento-grid{
    grid-template-columns:1fr;
  }
  .dashboard-side-stack,
  .dashboard-bento-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-bento-side .dashboard-stock-panel{
    grid-column:1 / -1;
  }
  .dashboard-scroll-list{
    max-height:360px;
  }
}

@media(max-width:760px){
  .dashboard-side-stack,
  .dashboard-bento-side,
  .dashboard-recent-wide .dashboard-recent-grid{
    grid-template-columns:1fr!important;
  }
  .dashboard-bento-side .dashboard-stock-panel{
    grid-column:auto;
  }
}


/* =========================================================
   v4.3 — CRM 100% responsive / mobile-first
   Objectif : toutes les fonctions restent utilisables sur téléphone.
   ========================================================= */

.mobile-menu-btn,
.mobile-nav-backdrop{display:none}

/* Tous les éléments flex/grid peuvent rétrécir sans créer de débordement. */
.content-shell,
.content-shell main,
.page,
.panel,
.panel-head,
.toolbar,
.table-wrap,
.detail-grid,
.dashboard-zone,
.dashboard-filter-card,
.dashboard-filter-grid,
.dashboard-bento-grid,
.inventory-grid,
.manual-order-layout,
.customer-360-drawer{min-width:0}

img,svg,canvas{max-width:100%}

@media(max-width:850px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  body{font-size:14px;background:#F8F5FA}

  /* ---------- Shell ---------- */
  .app-shell{display:block!important;min-height:100dvh}
  .content-shell{width:100%;max-width:100%;overflow:visible!important}

  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0;
    width:min(86vw,320px)!important;
    height:100dvh!important;
    z-index:120!important;
    padding:16px 13px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:20px 0 55px rgba(42,21,58,.28);
  }
  body.mobile-nav-open .sidebar{transform:translateX(0)}

  body.sidebar-collapsed .sidebar{width:min(86vw,320px)!important}
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .workspace-pill>div:not(.workspace-dot),
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .nav-section-title,
  body.sidebar-collapsed .profile-mini>div:not(.avatar){display:block!important}
  body.sidebar-collapsed .nav{justify-content:flex-start!important}
  body.sidebar-collapsed .sidebar-logo{width:220px!important;height:66px!important;object-fit:contain!important;object-position:center!important}
  body.sidebar-collapsed .brand-logo-wrap{width:100%!important;min-height:82px!important;padding:8px 14px!important;border-radius:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
  body.sidebar-collapsed .sidebar-logout{font-size:12px!important}
  body.sidebar-collapsed .sidebar-logout::after{display:none!important}

  .sidebar-collapse{display:none!important}
  .sidebar-top{padding-bottom:10px}
  .sidebar-footer{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .workspace-pill{margin-top:6px}
  .nav{min-height:48px;border-radius:13px;font-size:13px}
  .nav-icon{width:34px;height:34px}

  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:110;
    border:0;
    padding:0;
    opacity:0;
    visibility:hidden;
    background:rgba(31,20,39,.42);
    backdrop-filter:blur(2px);
    transition:.2s ease;
  }
  body.mobile-nav-open .mobile-nav-backdrop{opacity:1;visibility:visible}

  /* ---------- Topbar ---------- */
  .topbar{
    position:sticky!important;
    top:0;
    z-index:90;
    min-height:66px;
    height:auto!important;
    padding:9px 12px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:9px;
    align-items:center;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);
  }
  .mobile-menu-btn{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--purple-100);
    border-radius:12px;
    background:var(--purple-50);
    color:var(--primary);
    font-size:20px;
    font-weight:900;
    box-shadow:none;
  }
  .topbar-copy{min-width:0}
  .topbar .eyebrow{font-size:8px}
  .topbar h1{font-size:19px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar p{display:none}
  .top-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap!important}
  .status-pill{padding:7px 8px;font-size:8px;white-space:nowrap}
  #refresh{width:38px;height:38px;padding:0;font-size:0;border-radius:11px}
  #refresh::before{content:"";font-size:17px}

  /* ---------- Global content ---------- */
  main{padding:12px!important;width:100%;max-width:100%}
  .page{width:100%;max-width:100%}
  .panel{padding:13px;border-radius:16px}
  .panel-head{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .panel-head>div:first-child{min-width:0}
  .panel-head h2{font-size:15px}
  .panel-head p{font-size:10px;line-height:1.4}
  .panel-head .btn{margin-left:auto}

  .welcome-banner,.page-hero{padding:16px!important;border-radius:17px}
  .welcome-banner h2,.page-hero h2{font-size:20px!important;line-height:1.18}
  .welcome-banner p,.page-hero p{font-size:11px;line-height:1.5}
  .welcome-orbs{opacity:.45;transform:scale(.75);transform-origin:right center}

  /* ---------- Dashboard ---------- */
  #page-dashboard{gap:11px!important}
  .dashboard-zone-executive,.dashboard-zone-alerts{padding:10px!important;border-radius:16px}
  .dashboard-zone-head{align-items:flex-start!important;margin-bottom:8px}
  .dashboard-zone-head h3{font-size:15px!important}
  .dashboard-zone-head p{font-size:10px}

  .hero-grid,.dashboard-executive-kpis{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .hero-kpi{min-height:92px!important;padding:11px!important;border-radius:14px}
  .hero-kpi .kpi-icon{width:34px;height:34px}
  .hero-kpi strong{font-size:18px!important}
  .hero-kpi span{font-size:9px}
  .hero-kpi small{font-size:8px}

  .stats-grid,.dashboard-secondary-kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .dashboard-secondary-kpis .stat-card{min-height:72px!important;padding:10px}

  .dashboard-filter-card{padding:11px!important;border-radius:16px}
  .dashboard-filter-head{gap:8px!important}
  .dashboard-filter-head>div:first-child{width:100%}
  .dashboard-quick-dates{display:flex;flex-wrap:nowrap!important;overflow-x:auto;max-width:100%;padding:2px 0 5px;scrollbar-width:none}
  .dashboard-quick-dates::-webkit-scrollbar{display:none}
  .dashboard-quick-dates button{flex:0 0 auto;white-space:nowrap}
  .dashboard-filter-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .dashboard-filter-grid>label:first-child{grid-column:auto!important}
  .dashboard-filter-grid label,.order-filter-field{width:100%;min-width:0}
  #dashboardReset{width:100%;min-height:42px}
  .dashboard-filter-summary{font-size:9px;line-height:1.45}

  .dashboard-performance-grid,
  .dashboard-bento-grid,
  .dashboard-side-stack,
  .dashboard-bento-side,
  .dashboard-recent-wide .dashboard-recent-grid{grid-template-columns:1fr!important}
  .dashboard-panel-main .bar-chart{min-height:210px!important;max-height:none!important;overflow-x:auto}
  .dashboard-scroll-list{max-height:none!important;overflow:visible!important}
  .dashboard-recent-grid{grid-template-columns:1fr!important}

  /* ---------- Toolbars / filters ---------- */
  .toolbar,
  .order-filter-grid,
  .customer-tab-toolbar,
  .manual-details-grid,
  .detail-grid,
  .product-form-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .order-filter-top{align-items:flex-start!important;flex-direction:column!important}
  .quick-date-filters{width:100%;display:flex;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:5px;scrollbar-width:none}
  .quick-date-filters::-webkit-scrollbar{display:none}
  .quick-date{flex:0 0 auto}
  .order-search-field,.manual-note-field{grid-column:auto!important}
  .order-filter-actions{grid-column:auto!important;width:100%}
  .order-filter-actions .btn{width:100%}
  .order-filter-summary{align-items:flex-start!important;flex-direction:column!important;gap:5px!important}
  .summary-separator{display:none!important}

  input,select,textarea{width:100%;max-width:100%;min-height:44px;font-size:13px!important}
  button,.btn{min-height:40px}

  /* ---------- Tables => cards on phone ---------- */
  .table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  .responsive-table{display:block;width:100%!important;min-width:0!important;border:0!important}
  .responsive-table thead{display:none!important}
  .responsive-table tbody{display:flex;flex-direction:column;gap:9px;width:100%}
  .responsive-table tbody tr{display:block!important;width:100%;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
  .responsive-table tbody td{
    display:grid!important;
    grid-template-columns:minmax(92px,34%) minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:100%!important;
    min-width:0!important;
    padding:9px 11px!important;
    border:0!important;
    border-bottom:1px solid #F1ECF4!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    text-align:left!important;
  }
  .responsive-table tbody td:last-child{border-bottom:0!important}
  .responsive-table tbody td::before{
    content:attr(data-label);
    color:#8B8095;
    font-size:9px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .responsive-table tbody td[colspan]{display:block!important;text-align:center!important;padding:16px!important}
  .responsive-table tbody td[colspan]::before{display:none}
  .responsive-table tbody td .btn,
  .responsive-table tbody td select{max-width:100%}
  .inline-status-select{width:100%!important;min-width:0!important}

  /* ---------- Lives / cards ---------- */
  .lives-grid,.product-grid,.attribute-grid{grid-template-columns:1fr!important}
  .live-card,.product-card,.attribute-card{width:100%;min-width:0}
  .live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* ---------- Stock ---------- */
  #page-stock{overflow:visible!important}
  .stock-kpi-grid{grid-template-columns:1fr 1fr!important;gap:8px}
  .inventory-grid{grid-template-columns:1fr!important;gap:10px}
  #page-stock .table-wrap{overflow:visible!important}
  .waiting-list-table,.stock-movements-table{min-width:0!important}

  /* ---------- Customer 360 ---------- */
  .drawer{align-items:stretch}
  .drawer-card,.customer-360-drawer{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    border-radius:0!important;
    padding:0!important;
  }
  .customer-360-hero{padding:16px!important;flex-direction:column!important;gap:12px}
  .customer-identity{width:100%}
  .customer-360-avatar{width:52px;height:52px;border-radius:16px;font-size:20px}
  .customer-title-row h2{font-size:20px}
  .customer-hero-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr 42px;gap:7px}
  .customer-hero-actions .btn{width:100%;justify-content:center}
  .customer-360-stats{grid-template-columns:1fr 1fr!important;padding:10px!important;gap:7px!important}
  .customer-smart-grid,.customer-overview-grid{grid-template-columns:1fr!important;padding:0 10px 10px!important}
  .customer-tabs{padding:7px 10px!important;overflow-x:auto;flex-wrap:nowrap!important;scrollbar-width:none}
  .customer-tabs::-webkit-scrollbar{display:none}
  .customer-tab{flex:0 0 auto}
  .customer-tab-panel{padding:10px!important}
  .customer-status-breakdown{grid-template-columns:1fr!important}
  .customer-profile-grid{grid-template-columns:1fr!important}
  .customer-order-card-head{flex-direction:column}
  .customer-order-item{grid-template-columns:minmax(0,1fr) auto!important;gap:5px}
  .customer-order-item>span,.customer-order-item>em{justify-self:end}

  /* ---------- Modals / manual order ---------- */
  .modal{padding:0!important;place-items:stretch!important}
  .modal-card,.modal-card.wide,.modal-card.extra-wide{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    border:0!important;
    padding:14px!important;
  }
  .modal-head{position:sticky;top:-14px;z-index:5;margin:-14px -14px 12px;padding:14px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
  .manual-order-modal{padding:0!important}
  .manual-order-head{position:sticky;top:0;z-index:7;padding:14px!important;margin:0!important}
  .manual-order-layout{max-height:none!important;padding:11px!important;overflow:visible!important}
  .manual-step{padding:11px;border-radius:14px}
  .manual-step-head{align-items:flex-start;flex-wrap:wrap}
  .manual-step-head .btn{width:100%;margin-left:0}
  .manual-lines{gap:9px}
  .manual-line{display:grid!important;grid-template-columns:1fr!important;gap:7px;padding:10px}
  .manual-line-number{width:100%;height:28px}
  .manual-remove-line{width:100%!important;height:38px!important}
  .manual-order-summary{grid-template-columns:1fr 1fr!important;gap:7px}
  .manual-order-actions{position:sticky;bottom:0;z-index:8;margin:0!important;padding:10px!important;background:rgba(255,255,255,.97);backdrop-filter:blur(10px)}
  .manual-order-actions .btn{flex:1}

  /* ---------- Pagination ---------- */
  .pager{justify-content:center!important;gap:5px;flex-wrap:wrap!important;padding:10px 0}
  .pager button{min-width:38px;min-height:38px}
  .capture-section-head{gap:8px!important}
  .capture-page-size{justify-content:flex-start!important}

  /* ---------- Login ---------- */
  .login-screen{display:block!important;min-height:100dvh;padding:0!important}
  .login-visual{display:none!important}
  .login-card{width:100%!important;min-height:100dvh;border-radius:0!important;padding:28px 20px!important;display:flex;flex-direction:column;justify-content:center}
  .login-card-logo{width:180px;height:72px}
}

@media(max-width:560px){
  main{padding:9px!important}
  .topbar{padding:8px 9px!important}
  .status-pill{display:none}
  .topbar{grid-template-columns:42px minmax(0,1fr) 40px}

  .hero-grid,.dashboard-executive-kpis,.stats-grid,.dashboard-secondary-kpis,.stock-kpi-grid{grid-template-columns:1fr!important}
  .hero-kpi{min-height:78px!important}
  .dashboard-secondary-kpis .stat-card{min-height:64px!important}

  .customer-360-stats,.manual-order-summary{grid-template-columns:1fr!important}
  .customer-hero-actions{grid-template-columns:1fr 1fr!important}
  .customer-close-btn{position:absolute;right:12px;top:12px}

  .responsive-table tbody td{grid-template-columns:1fr!important;gap:4px}
  .responsive-table tbody td::before{margin-bottom:1px}

  .panel-head .btn,.manual-order-btn{width:100%;margin-left:0}
  .quick-date,.dashboard-quick-dates button{min-height:36px}
}

/* Support des encoches iPhone / Android modernes */
@supports(padding:max(0px)){
  @media(max-width:850px){
    .topbar{padding-top:max(8px,env(safe-area-inset-top))!important}
    .sidebar{padding-top:max(16px,env(safe-area-inset-top))!important}
    .modal-card,.drawer-card{padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
  }
}


/* =========================================================
   v4.4 — synchronisation temps réel
   ========================================================= */
.realtime-pill{
  gap:7px;
  transition:.18s ease;
}
.realtime-pill b{
  font-size:inherit;
  font-weight:850;
}
.realtime-pill.synced{
  border-color:#CBEFDE;
  background:#EFFCF6;
  color:#33795D;
}
.realtime-pill.synced>span{
  background:#4FC08A;
  box-shadow:0 0 0 4px rgba(79,192,138,.12);
}
.realtime-pill.syncing{
  border-color:#E1D1EF;
  background:#F8F1FD;
  color:#6D3A9C;
}
.realtime-pill.syncing>span{
  background:#9C69C8;
  box-shadow:0 0 0 4px rgba(156,105,200,.12);
  animation:realtimePulse 1s ease-in-out infinite;
}
.realtime-pill.offline{
  border-color:#F2D2D9;
  background:#FFF2F5;
  color:#B94D65;
}
.realtime-pill.offline>span{
  background:#D96678;
  box-shadow:0 0 0 4px rgba(217,102,120,.10);
}
@keyframes realtimePulse{
  50%{opacity:.35;transform:scale(.75)}
}
@media(max-width:700px){
  .realtime-pill b{display:none}
  .realtime-pill{min-width:34px;justify-content:center;padding-inline:9px}
  #refresh{font-size:0;width:38px;padding:0}
  #refresh::before{content:"";font-size:16px}
}


/* =========================================================
   v4.4.2 — Auth mobile isolation fix
   IMPORTANT: ces règles doivent rester à la fin du fichier.
   Les media queries mobile utilisent display:block!important
   pour .login-screen / .app-shell ; sans ces gardes, elles
   peuvent annuler .hidden sur téléphone.
   ========================================================= */
.login-screen.hidden,
.app-shell.hidden{
  display:none!important;
}

/* En mode déconnecté, aucune partie du CRM ne doit être visible
   ni participer à la hauteur/au scroll de la page. */
body.crm-auth-logged-out #app{
  display:none!important;
}

/* En mode connecté, l'écran de connexion est totalement retiré. */
body.crm-auth-logged-in #login{
  display:none!important;
}

@media(max-width:850px){
  body.crm-auth-logged-out{
    overflow:hidden!important;
    min-height:100dvh;
    background:#fff;
  }
  body.crm-auth-logged-out #login{
    display:block!important;
    width:100%;
    min-height:100dvh;
  }
  body.crm-auth-logged-in{
    overflow-x:hidden!important;
  }
  body.crm-auth-logged-in #app{
    display:block!important;
    min-height:100dvh;
  }
}

/* =========================================================
   V4.6 — TEAM & ACCESS 360
   ========================================================= */
.permission-hidden{display:none!important}
.sidebar-account{margin-top:8px;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.14)}
.team-hero{background:linear-gradient(135deg,#efe5ff 0%,#f8f1ff 45%,#e9fbf6 100%);border:1px solid #eadcf8}
.team-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0}
.team-head-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.team-toolbar{grid-template-columns:minmax(240px,1fr) minmax(170px,.35fr) minmax(170px,.35fr)}
.team-user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.team-user-card{border:1px solid #eadff3;background:#fff;border-radius:20px;padding:18px;box-shadow:0 8px 30px rgba(74,32,118,.06);display:grid;gap:15px;transition:.2s ease}
.team-user-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(74,32,118,.1)}
.team-user-card.disabled{opacity:.68;background:#faf9fb}
.team-user-main{display:flex;gap:13px;align-items:flex-start;min-width:0}
.team-avatar{width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:grid;place-items:center;font-weight:900;color:#6226a8;background:linear-gradient(145deg,#efe2ff,#f9dff0);border:1px solid #e2cef6}
.team-user-main>div:last-child{min-width:0;display:grid;gap:3px}
.team-user-main span,.team-user-main small{color:#71657f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-user-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.team-user-title strong{font-size:16px;color:#171327}
.role-chip{font-size:10px;font-weight:900;padding:4px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.role-chip.owner{background:#2d1655;color:#fff}.role-chip.admin{background:#eadcff;color:#6725a8}.role-chip.manager{background:#dff4ff;color:#126892}.role-chip.sales{background:#e3f8ee;color:#15714c}.role-chip.stock{background:#fff0d7;color:#8a5600}.role-chip.viewer{background:#f0edf3;color:#695f70}
.team-user-state{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;border-top:1px solid #f0eaf4;padding-top:12px}
.team-user-state small{color:#8e8198}.presence{width:9px;height:9px;border-radius:50%;background:#b9b2bd}.presence.online{background:#25bd7a;box-shadow:0 0 0 5px rgba(37,189,122,.12)}.presence.active{background:#7d62ae}.presence.off{background:#c6bec9}
.team-user-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.team-user-meta span{background:#faf7fc;border:1px solid #eee5f4;padding:10px;border-radius:12px;color:#897a93;font-size:11px}.team-user-meta b{display:block;color:#30263a;margin-top:3px;font-size:12px}
.team-user-actions{display:flex;gap:8px;flex-wrap:wrap}
.team-bottom-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;margin-top:16px}
.team-security-list{display:grid;gap:10px}.team-security-list>div{display:flex;gap:11px;align-items:flex-start;padding:12px;border:1px solid #ece5f1;border-radius:14px;background:#fcfbfd}.team-security-list>div>span{width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#e4f8ef;color:#16855a;font-weight:900}.team-security-list strong,.team-security-list small{display:block}.team-security-list small{margin-top:3px;color:#7f7289;line-height:1.35}
.team-audit-list{display:grid;gap:0;max-height:420px;overflow:auto}.team-audit-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:10px;padding:12px 4px;border-bottom:1px solid #f0eaf4;align-items:start}.audit-dot{width:8px;height:8px;border-radius:50%;background:#7b2bc2;margin-top:5px}.team-audit-row strong,.team-audit-row small{display:block}.team-audit-row small{color:#8a7d93;margin-top:3px;line-height:1.35}.team-audit-row time{font-size:11px;color:#9a8fa1;white-space:nowrap}
.team-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.team-form-grid label{min-width:0}
.role-preview{margin-top:14px;border:1px solid #e9dff0;background:#faf7fc;border-radius:16px;padding:14px;display:grid;gap:6px}.role-preview>span{color:#766a7e}.role-preview>div{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.role-preview em{font-style:normal;font-size:10px;background:#fff;border:1px solid #e7d9f2;color:#673091;border-radius:999px;padding:4px 7px}
.roles-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;min-height:560px}.roles-layout>aside{border-right:1px solid #eee6f3;padding-right:16px}.role-list{display:grid;gap:7px;margin-top:12px;max-height:500px;overflow:auto}.role-list-row{border:1px solid transparent;background:#faf8fc;border-radius:13px;padding:11px;text-align:left;display:flex;gap:10px;align-items:center;cursor:pointer}.role-list-row:hover,.role-list-row.active{background:#f3eaff;border-color:#d9bff1}.role-list-row div{display:grid;gap:2px}.role-list-row small{color:#8a7e92}.role-symbol{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eee3f8;color:#6929a7}.role-symbol.owner{background:#2f1754;color:#fff}.role-symbol.admin{background:#ebddff}.role-symbol.manager{background:#ddf4ff;color:#1e7399}.role-symbol.sales{background:#def6eb;color:#1a7b55}.role-symbol.stock{background:#fff0d8;color:#8b5800}
.role-editor-empty{height:100%;display:grid;place-items:center;text-align:center;color:#8d8195;background:#faf8fc;border:1px dashed #dfd2e9;border-radius:18px;padding:30px}.permission-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.permission-matrix section{border:1px solid #e9e0ef;border-radius:15px;padding:13px;background:#fcfbfd}.permission-matrix section>strong{display:block;margin-bottom:9px;color:#2b2033}.permission-matrix label{display:flex;gap:9px;align-items:center;padding:7px 4px;color:#594e62}.permission-matrix input{width:17px;height:17px;accent-color:#7127b6}.info-note{border:1px solid #e5d5f2;background:#faf4ff;color:#674979;border-radius:13px;padding:11px 13px;margin:10px 0;font-size:12px;line-height:1.45}
.temporary-password-box{display:flex;gap:9px;align-items:center;margin:16px 0}.temporary-password-box code{flex:1;background:#241731;color:#fff;border-radius:13px;padding:15px;font-size:17px;letter-spacing:.06em;overflow:auto}
.btn.danger{background:#fff1f3;color:#b4314c;border:1px solid #f1c9d2}.btn.danger:hover{background:#ffe4e9}
.modal-card.xl{width:min(1050px,calc(100vw - 40px));max-width:1050px}
.empty-state{padding:28px;text-align:center;border:1px dashed #ded2e6;border-radius:16px;color:#887b90;background:#fcfbfd}

@media(max-width:1050px){.team-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-user-grid{grid-template-columns:1fr}.team-bottom-grid{grid-template-columns:1fr}.roles-layout{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:720px){.team-kpi-grid{grid-template-columns:1fr 1fr;gap:10px}.team-toolbar{display:grid!important;grid-template-columns:1fr!important}.team-head-actions{width:100%}.team-head-actions .btn{flex:1}.team-user-card{padding:14px}.team-user-meta{grid-template-columns:1fr}.team-user-actions{display:grid;grid-template-columns:1fr 1fr}.team-user-actions .btn{width:100%}.team-form-grid{grid-template-columns:1fr}.roles-layout{grid-template-columns:1fr;min-height:0}.roles-layout>aside{border-right:0;border-bottom:1px solid #eee6f3;padding-right:0;padding-bottom:14px}.role-list{display:flex;overflow:auto;max-height:none;padding-bottom:5px}.role-list-row{min-width:210px}.permission-matrix{grid-template-columns:1fr}.team-audit-row{grid-template-columns:12px minmax(0,1fr)}.team-audit-row time{grid-column:2}.modal-card.xl{width:100%;max-width:none}.temporary-password-box{align-items:stretch;flex-direction:column}}
@media(max-width:420px){.team-kpi-grid{grid-template-columns:1fr}.team-user-actions{grid-template-columns:1fr}.team-user-main{align-items:center}.team-user-title{align-items:flex-start;flex-direction:column}.role-chip{align-self:flex-start}}
.team-smart-notice{display:flex;align-items:center;gap:12px;margin:-2px 0 16px;padding:13px 15px;border:1px solid #e7dbef;border-radius:16px;background:linear-gradient(90deg,#fbf7ff,#f7fffc)}
.team-smart-notice>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;font-weight:900}.team-smart-notice .smart-ok{background:#ddf7ea;color:#168254}.team-smart-notice .smart-warn{background:#fff0d8;color:#9b5f00}.team-smart-notice strong,.team-smart-notice small{display:block}.team-smart-notice small{margin-top:2px;color:#82758c}
.team-smart-notice{display:flex;align-items:center;gap:12px;margin:-2px 0 16px;padding:13px 15px;border:1px solid #e7dbef;border-radius:16px;background:linear-gradient(90deg,#fbf7ff,#f7fffc)}
.team-smart-notice>span{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;font-weight:900}.team-smart-notice .smart-ok{background:#ddf7ea;color:#168254}.team-smart-notice .smart-warn{background:#fff0d8;color:#9b5f00}.team-smart-notice strong,.team-smart-notice small{display:block}.team-smart-notice small{margin-top:2px;color:#82758c}

/* v4.6.3 password-change UX */
.password-hint{display:block;margin-top:6px;color:#8c819a;font-size:12px;font-weight:600}.modal-card button:disabled{opacity:.65;cursor:wait}


/* ================================================================
   v4.7 — Order & Stock 360 lifecycle
   ================================================================ */
.stock-line-status.is-fulfilled{background:#E7F9EF;color:#176B46;border:1px solid #BDEACF}
.stock-line-status.is-released{background:#F5F2F7;color:#6F6577;border:1px solid #E4DCE9}
.stock-line-status.is-neutral{background:#F8F6FA;color:#746A7C;border:1px solid #E8E1EC}
.order-stock-summary{margin-top:10px;border-radius:14px;padding:12px 14px;border:1px solid #E9E0EF;background:#FAF8FC}
.order-stock-summary strong,.order-stock-summary span{display:block}
.order-stock-summary strong{font-size:13px;color:#30283A}
.order-stock-summary span{font-size:11px;margin-top:3px;color:#766C7F}
.order-stock-summary.fulfilled{background:#ECFAF2;border-color:#BEEBD0}
.order-stock-summary.fulfilled strong{color:#177249}
.order-stock-summary.reserved{background:#EEF4FF;border-color:#C8D8FF}
.order-stock-summary.reserved strong{color:#2B5AB7}
.order-stock-summary.waiting{background:#FFF6E8;border-color:#FFD99F}
.order-stock-summary.waiting strong{color:#A85F00}
.order-stock-summary.released{background:#F5F2F7;border-color:#E2D9E8}
.order-stock-summary.released strong{color:#65586F}
@media (max-width:700px){.order-stock-summary{padding:10px 11px}.order-stock-summary strong{font-size:12px}.order-stock-summary span{font-size:10px}}

/* =========================================================
   v4.9 — Internationalisation FR / EN / AR
   ========================================================= */
.language-picker{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:rgba(255,255,255,.9);border-radius:12px;padding:5px 8px;box-shadow:0 5px 16px rgba(64,31,94,.05)}
.language-picker-label{font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.language-picker select{border:0!important;background:transparent!important;padding:5px 24px 5px 5px!important;min-width:96px;font-size:11px;font-weight:850;color:var(--text);outline:none;box-shadow:none!important}
.login-language-picker{position:absolute;top:18px;right:18px;z-index:5}
.login-card{position:relative;padding-top:72px}
.top-language-picker{background:#fff}
html[dir="rtl"] body{font-family:Arial,"Segoe UI",Tahoma,sans-serif}
html[dir="rtl"] .app-shell{direction:rtl}
html[dir="rtl"] .sidebar,html[dir="rtl"] .content-shell,html[dir="rtl"] .modal-card,html[dir="rtl"] .drawer,html[dir="rtl"] .login-card{direction:rtl;text-align:right}
html[dir="rtl"] .nav{text-align:right}
html[dir="rtl"] .sidebar{box-shadow:-8px 0 28px rgba(82,37,130,.12)}
html[dir="rtl"] .stat-card::before{left:auto;right:0}
html[dir="rtl"] .sidebar-collapse{transform:scaleX(-1)}
html[dir="rtl"] .topbar-copy,html[dir="rtl"] .panel-head,html[dir="rtl"] .page-hero,html[dir="rtl"] .dashboard-zone-head{text-align:right}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right}
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="url"],html[dir="rtl"] input[data-no-i18n]{direction:ltr;text-align:left}
html[dir="rtl"] .login-language-picker{right:auto;left:18px}
html[dir="rtl"] .modal-actions{direction:rtl}
html[dir="rtl"] .order-origin,html[dir="rtl"] .profile-mini,html[dir="rtl"] .workspace-pill,html[dir="rtl"] .panel-head>div{direction:rtl}
html[dir="rtl"] .table-wrap table{direction:rtl}
html[dir="rtl"] .bar-chart{direction:rtl}
html[dir="rtl"] .toast{direction:rtl;text-align:right}
@media(max-width:900px){
  .top-language-picker .language-picker-label{display:none}.top-language-picker{padding:3px 5px}.top-language-picker select{min-width:70px!important;padding-right:20px!important}
  .login-language-picker{top:12px;right:12px}.login-card{padding-top:65px}
  html[dir="rtl"] .sidebar{left:auto!important;right:0!important;transform:translateX(110%)!important}
  html[dir="rtl"] body.mobile-nav-open .sidebar{transform:translateX(0)!important}
}

/* =========================================================
   v4.9.2 — Dashboard Executive KPI polish
   - 4 KPI cards fill the full executive row (no empty fifth cell)
   - semantic inline SVG icons replace abstract glyphs
   - responsive 4 → 2 → 1 layout without dead space
   ========================================================= */
.dashboard-executive-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  width:100%;
}
.dashboard-executive-kpis .hero-kpi{
  width:100%;
  min-width:0;
  min-height:108px;
  padding:16px 18px;
  gap:14px;
  align-items:center;
}
.dashboard-executive-kpis .hero-kpi > div:last-child{
  min-width:0;
  flex:1 1 auto;
}
.dashboard-executive-kpis .hero-kpi strong{
  font-size:clamp(20px,1.65vw,28px);
  line-height:1.08;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.dashboard-executive-kpis .kpi-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border-radius:15px;
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 20px rgba(72,43,97,.08), inset 0 0 0 1px rgba(255,255,255,.72);
}
.dashboard-executive-kpis .kpi-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dashboard-executive-kpis .pastel-lilac .kpi-icon{color:#6F2DBD}
.dashboard-executive-kpis .pastel-pink .kpi-icon{color:#D94C87}
.dashboard-executive-kpis .pastel-mint .kpi-icon{color:#159B78}
.dashboard-executive-kpis .pastel-peach .kpi-icon{color:#E47735}
.dashboard-executive-kpis .hero-kpi.clickable-entity{
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dashboard-executive-kpis .hero-kpi.clickable-entity:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(64,34,91,.10);
  border-color:rgba(111,45,189,.12);
}
.dashboard-executive-kpis .hero-kpi.clickable-entity:active{
  transform:translateY(0);
}
@media(max-width:1100px){
  .dashboard-executive-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:520px){
  .dashboard-executive-kpis{
    grid-template-columns:1fr !important;
  }
  .dashboard-executive-kpis .hero-kpi{
    min-height:86px !important;
  }
}


/* =========================================================
   v4.9.5 — definitive sidebar logo background removal
   ========================================================= */
.sidebar .sidebar-top,
.sidebar .brand,
.sidebar .brand-logo-wrap{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.sidebar .brand-logo-wrap{
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.sidebar .sidebar-logo{
  width:236px !important;
  max-width:100% !important;
  height:72px !important;
  object-fit:contain !important;
  object-position:center center !important;
}
@media(max-width:850px){
  .sidebar .brand-logo-wrap{
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
}

/* =========================================================
   v4.9.6 — Professional sidebar architecture
   ========================================================= */
@media(min-width:851px){
  .app-shell{grid-template-columns:284px minmax(0,1fr)!important}
  body.sidebar-collapsed .app-shell{grid-template-columns:88px minmax(0,1fr)!important}
}
.sidebar{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  padding:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  align-self:start!important;
  background:linear-gradient(180deg,#45206f 0%,#602d9a 48%,#4d237b 100%)!important;
  color:#fff;
  box-shadow:8px 0 28px rgba(57,24,91,.16)!important;
}
.sidebar::after{
  background:radial-gradient(circle at 18% 5%,rgba(255,255,255,.085),transparent 24%),radial-gradient(circle at 100% 54%,rgba(255,184,221,.08),transparent 28%)!important;
}
.sidebar-top{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:108px!important;
  padding:16px 24px 10px 18px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.brand-logo-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:78px!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.sidebar-logo-full{
  display:block!important;
  width:min(218px,100%)!important;
  height:76px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 5px 12px rgba(25,7,40,.13))!important;
}
.sidebar-logo-mark{display:none!important}
.sidebar-collapse{
  position:absolute!important;
  right:-1px!important;
  top:39px!important;
  width:32px!important;
  height:36px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-right:0!important;
  border-radius:12px 0 0 12px!important;
  background:rgba(43,17,69,.72)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(24,5,42,.18)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  cursor:pointer!important;
  transition:background .16s ease!important;
}
.sidebar-collapse:hover{background:rgba(35,10,58,.92)!important}
.sidebar-collapse svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.sidebar-scroll{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 14px 16px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.sidebar-scroll::-webkit-scrollbar{width:5px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:999px}
.workspace-pill{
  min-height:58px!important;
  margin:0 2px 18px!important;
  padding:11px 13px!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.095)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.workspace-dot{width:9px!important;height:9px!important;box-shadow:0 0 0 5px rgba(158,240,200,.12)!important}
.workspace-pill small{font-size:10px!important;color:#dacbe6!important;letter-spacing:.01em}
.workspace-pill strong{font-size:12px!important;line-height:1.35!important;margin-top:2px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:185px}
.nav-section-title{
  padding:12px 10px 7px!important;
  color:#cebadd!important;
  font-size:9px!important;
  font-weight:850!important;
  text-transform:uppercase!important;
  letter-spacing:.15em!important;
}
.sidebar nav{display:flex!important;flex-direction:column!important;gap:5px!important}
.sidebar .nav{
  position:relative!important;
  min-height:52px!important;
  padding:8px 10px!important;
  gap:11px!important;
  border-radius:16px!important;
  color:#eee4f5!important;
  background:transparent!important;
  border:1px solid transparent!important;
  font-size:12.5px!important;
  font-weight:760!important;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.sidebar .nav:hover{background:rgba(255,255,255,.085)!important;color:#fff!important;transform:translateX(2px)}
.sidebar .nav.active{
  background:#fff!important;
  color:#602d9a!important;
  border-color:rgba(255,255,255,.82)!important;
  box-shadow:0 10px 24px rgba(27,8,48,.16)!important;
}
.sidebar .nav.active::after{
  content:"";
  position:absolute;
  right:9px;
  top:50%;
  width:6px;
  height:6px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#9a67cf;
  box-shadow:0 0 0 4px rgba(154,103,207,.12);
}
.nav-icon{
  width:36px!important;
  height:36px!important;
  border-radius:12px!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 36px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 12px rgba(27,8,48,.08)!important;
}
.nav-icon svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer{
  margin:0!important;
  padding:13px 14px max(14px,env(safe-area-inset-bottom))!important;
  background:linear-gradient(180deg,rgba(58,24,91,.05),rgba(41,15,67,.24))!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 -10px 24px rgba(40,12,65,.06)!important;
}
.profile-mini{margin:0 2px 10px!important;padding:2px!important;min-width:0}
.profile-mini-copy{min-width:0}
.profile-mini strong{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-mini span{font-size:9.5px!important;color:#d7c5e5!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-account,.sidebar-logout{min-height:38px!important;border-radius:12px!important;font-size:10.5px!important;font-weight:800!important}
.sidebar-account{background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.13)!important;color:#fff!important}
.sidebar-account:hover,.sidebar-logout:hover{background:rgba(255,255,255,.14)!important}
@media(min-width:851px){
  body.sidebar-collapsed .sidebar{padding:0!important}
  body.sidebar-collapsed .sidebar-top{min-height:90px!important;padding:14px 9px 8px!important}
  body.sidebar-collapsed .brand-logo-wrap{width:54px!important;min-height:58px!important;padding:0!important}
  body.sidebar-collapsed .sidebar-logo-full{display:none!important}
  body.sidebar-collapsed .sidebar-logo-mark{display:block!important;width:52px!important;height:52px!important;object-fit:contain!important;filter:drop-shadow(0 4px 10px rgba(25,7,40,.12))!important}
  body.sidebar-collapsed .sidebar-collapse{right:-1px!important;top:31px!important}
  body.sidebar-collapsed .sidebar-collapse svg{transform:rotate(180deg)}
  body.sidebar-collapsed .sidebar-scroll{padding:0 10px 14px!important}
  body.sidebar-collapsed .workspace-pill{justify-content:center!important;min-height:48px!important;margin:0 0 14px!important;padding:8px!important}
  body.sidebar-collapsed .workspace-copy{display:none!important}
  body.sidebar-collapsed .workspace-dot{margin:0!important}
  body.sidebar-collapsed .nav-section-title{display:none!important}
  body.sidebar-collapsed .sidebar nav{gap:6px!important;margin-bottom:8px}
  body.sidebar-collapsed .nav{justify-content:center!important;min-height:50px!important;padding:7px!important;border-radius:14px!important;transform:none!important}
  body.sidebar-collapsed .nav-label{display:none!important}
  body.sidebar-collapsed .nav.active::after{display:none!important}
  body.sidebar-collapsed .sidebar-footer{padding:12px 10px 14px!important}
  body.sidebar-collapsed .profile-mini{justify-content:center!important;margin-bottom:8px!important}
  body.sidebar-collapsed .profile-mini-copy{display:none!important}
  body.sidebar-collapsed .sidebar-account{font-size:0!important;padding:0!important;min-height:40px!important}
  body.sidebar-collapsed .sidebar-account::after{content:"";font-size:15px!important}
  body.sidebar-collapsed .sidebar-logout{font-size:0!important;padding:0!important;min-height:40px!important}
  body.sidebar-collapsed .sidebar-logout::after{content:""!important;font-size:15px!important}
}
@media(max-width:850px){
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(88vw,318px)!important;
    height:100dvh!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .sidebar-top{min-height:98px!important;padding:14px 20px 8px!important}
  .sidebar-logo-full{display:block!important;width:214px!important;height:70px!important}
  .sidebar-logo-mark{display:none!important}
  .sidebar-collapse{display:none!important}
  .sidebar-scroll{padding:0 13px 14px!important}
  .workspace-pill{margin:0 2px 15px!important}
  .sidebar .nav{min-height:50px!important;font-size:13px!important}
  .sidebar-footer{padding:12px 13px max(14px,env(safe-area-inset-bottom))!important}
  body.sidebar-collapsed .sidebar-logo-full{display:block!important;width:214px!important;height:70px!important}
  body.sidebar-collapsed .sidebar-logo-mark{display:none!important}
  body.sidebar-collapsed .workspace-copy,body.sidebar-collapsed .nav-label,body.sidebar-collapsed .nav-section-title,body.sidebar-collapsed .profile-mini-copy{display:block!important}
}
html[dir="rtl"] .sidebar-collapse{right:auto!important;left:-1px!important;border-right:1px solid rgba(255,255,255,.2)!important;border-left:0!important;border-radius:0 12px 12px 0!important}
html[dir="rtl"] .sidebar .nav:hover{transform:translateX(-2px)}
html[dir="rtl"] .sidebar .nav.active::after{right:auto;left:9px}


/* =========================================================
   v4.10.0 — FRONT-END 360 HARDENING
   Cohérence globale, responsive, accessibilité, densité et UX.
   ========================================================= */
:root{
  --ui-sidebar:284px;
  --ui-sidebar-collapsed:88px;
  --ui-topbar:88px;
  --ui-content-max:1760px;
  --ui-page-gap:18px;
  --ui-radius-xs:10px;
  --ui-radius-sm:13px;
  --ui-radius-md:17px;
  --ui-radius-lg:22px;
  --ui-focus:0 0 0 3px rgba(96,45,154,.18);
  --ui-control-h:42px;
  --ui-transition:160ms ease;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{min-width:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="button"]:focus-visible{
  outline:2px solid rgba(96,45,154,.72)!important;
  outline-offset:2px!important;
  box-shadow:var(--ui-focus)!important;
}
button:disabled,.btn:disabled{cursor:not-allowed!important;opacity:.55!important;transform:none!important;box-shadow:none!important}
[role="button"]{cursor:pointer}
.hidden,.permission-hidden{display:none!important}

/* Shell */
.app-shell{width:100%;min-height:100dvh;grid-template-columns:var(--ui-sidebar) minmax(0,1fr)!important}
body.sidebar-collapsed .app-shell{grid-template-columns:var(--ui-sidebar-collapsed) minmax(0,1fr)!important}
.content-shell{width:100%;min-width:0;overflow:clip}
main{width:100%;max-width:var(--ui-content-max);margin-inline:auto;padding:22px clamp(16px,2vw,30px) 44px!important}
.page.active{display:grid!important;gap:var(--ui-page-gap)}
.page>.page-hero,.page>.welcome-banner,.page>section,.page>.panel{margin-bottom:0!important}

/* Header */
.topbar{height:auto!important;min-height:var(--ui-topbar);padding:14px clamp(16px,2vw,30px)!important;gap:16px;background:rgba(255,255,255,.9)!important}
.topbar-copy{min-width:0;flex:1}
.topbar h1{font-size:clamp(23px,2vw,29px)!important;line-height:1.05;letter-spacing:-.025em}
.topbar p{font-size:11.5px!important;line-height:1.45}
.top-actions{flex-wrap:wrap;justify-content:flex-end;row-gap:7px}
.status-pill,.language-picker{min-height:38px}
#refresh{white-space:nowrap}

/* Sidebar final polish */
.sidebar{width:100%!important}
.sidebar-top{isolation:isolate}
.sidebar-logo-full{width:min(226px,100%)!important;height:78px!important}
.sidebar-collapse{z-index:4}
.sidebar-scroll{overscroll-behavior:contain}
.sidebar .nav{outline:none}
.sidebar .nav.active{font-weight:850!important}
.sidebar .nav.active .nav-icon{transform:scale(1.02)}
.sidebar-footer{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sidebar-account,.sidebar-logout{width:100%}

/* Design-system controls */
label{color:#594e62;font-weight:760;line-height:1.35}
label>input,label>select,label>textarea{margin-top:6px}
input,select,textarea{
  min-height:var(--ui-control-h);
  border:1px solid var(--border-strong)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--ink)!important;
  padding:9px 12px!important;
  transition:border-color var(--ui-transition),box-shadow var(--ui-transition),background var(--ui-transition)!important;
}
textarea{min-height:96px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#d7c8e2!important}
input:focus,select:focus,textarea:focus{border-color:#a77bc9!important;box-shadow:var(--ui-focus)!important;outline:0!important}
input::placeholder,textarea::placeholder{color:#aaa0b2;opacity:1}
select{cursor:pointer}
.checkline input[type="checkbox"],input[type="checkbox"],input[type="radio"]{min-height:0!important;padding:0!important;accent-color:var(--primary)}

.btn{
  min-height:40px;
  border-radius:12px!important;
  padding:9px 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px;
  line-height:1.15;
  font-weight:820!important;
  transition:transform var(--ui-transition),box-shadow var(--ui-transition),background var(--ui-transition),border-color var(--ui-transition)!important;
}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.primary{box-shadow:0 7px 16px rgba(96,45,154,.15)}
.btn.secondary,.btn.soft-purple{background:#fff!important;border:1px solid var(--border-strong)!important;color:var(--primary)!important}
.btn.secondary:hover,.btn.soft-purple:hover{background:var(--purple-50)!important;border-color:var(--purple-200)!important}
.btn.danger{background:#fff3f5!important;border-color:#f2ccd3!important;color:#b53e54!important}

/* Core panels */
.panel,.dashboard-zone,.dashboard-filter-card,.customer-section-card,.smart-card{
  border:1px solid var(--border)!important;
  box-shadow:0 8px 24px rgba(62,35,87,.055)!important;
}
.panel,.dashboard-zone,.dashboard-filter-card{border-radius:var(--ui-radius-lg)!important}
.panel{padding:18px!important;min-width:0}
.panel-head{gap:12px;align-items:center!important;margin-bottom:14px}
.panel-head>div{min-width:0}
.panel-head h2{line-height:1.15}
.panel-head p{line-height:1.45}
.panel-icon{flex:0 0 38px;width:38px!important;height:38px!important;border-radius:12px!important}
.toolbar{gap:10px!important;align-items:center!important;flex-wrap:wrap!important}
.toolbar>*{min-width:0}
.section-title{line-height:1.2}

/* Dashboard: compact, no dead zones */
.dashboard-zone{padding:18px!important;background:rgba(255,255,255,.78)!important}
.dashboard-zone-head{margin-bottom:14px!important}
.dashboard-zone-head h3{margin:3px 0 4px!important;font-size:18px!important;line-height:1.15}
.dashboard-zone-head p{margin:0;line-height:1.45}
.dashboard-filter-card{padding:17px!important}
.dashboard-filter-grid{grid-template-columns:minmax(220px,1.45fr) repeat(3,minmax(120px,.8fr)) minmax(145px,.9fr) minmax(170px,1fr) minmax(120px,.8fr) auto!important;gap:10px!important}
.dashboard-filter-grid input,.dashboard-filter-grid select{min-height:42px!important}
.dashboard-filter-summary{border-radius:11px!important;padding:9px 12px!important;line-height:1.35}
.dashboard-executive-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch}
.dashboard-executive-kpis .hero-kpi{min-height:104px!important;padding:15px 16px!important}
.dashboard-secondary-kpis{grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch}
.dashboard-secondary-kpis .stat-card{min-height:88px!important}
.dashboard-insights{align-items:stretch}
.dashboard-performance-grid,.dashboard-bento-grid,.dashboard-recent-grid{align-items:start!important}
.dashboard-side-stack,.dashboard-bento-side,.dashboard-commerce-side{align-self:start!important}
.dashboard-panel-main,.dashboard-panel-compact,.dashboard-bento-card{height:auto!important;min-height:0!important}
.dashboard-products-panel .table-wrap{max-height:360px;overflow:auto!important}
.recent-order-card{min-width:0}

/* KPI interaction */
.clickable-entity{transition:transform var(--ui-transition),box-shadow var(--ui-transition),border-color var(--ui-transition)!important}
.clickable-entity:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(62,35,87,.09)!important}
.clickable-entity:active{transform:none}
.hero-kpi strong,.stat-card strong{font-variant-numeric:tabular-nums}

/* Tables: local scroll only, clearer desktop reading */
.table-wrap{width:100%;max-width:100%;overflow:auto!important;overscroll-behavior-inline:contain;scrollbar-width:thin;border-radius:15px!important}
table{width:100%;border-collapse:separate!important;border-spacing:0;min-width:760px}
thead th{position:sticky;top:0;z-index:2;background:#fbf9fd!important;box-shadow:0 1px 0 var(--border);white-space:nowrap}
th,td{vertical-align:middle;line-height:1.4}
tbody tr{transition:background var(--ui-transition)}
tbody tr:hover{background:#fcf9ff}
td .btn{min-height:34px;padding:7px 10px!important}
td select{min-height:36px!important;padding-block:6px!important}

/* Pager */
.pager{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:12px}
.pager button{min-width:36px;min-height:36px;border-radius:10px}

/* Hero sections and grids */
.page-hero{border-radius:var(--ui-radius-lg)!important;padding:18px 20px!important;gap:16px!important}
.page-hero h2{font-size:clamp(20px,1.8vw,25px)!important;line-height:1.15}
.page-hero p{font-size:11.5px!important;line-height:1.5!important}
.hero-grid,.stats-grid,.stock-kpi-grid,.detail-grid,.inventory-grid,.customer-360-stats{align-items:stretch}

/* Cards/lists */
.live-card,.product-card,.attribute-card,.customer-card,.team-user-card{height:100%;min-width:0}
.live-card,.product-card,.attribute-card,.team-user-card{transition:transform var(--ui-transition),box-shadow var(--ui-transition),border-color var(--ui-transition)}
.live-card:hover,.product-card:hover,.attribute-card:hover,.team-user-card:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(62,35,87,.075)}

/* Drawers and modals */
.modal{padding:clamp(12px,3vw,28px)!important;overflow:auto!important;overscroll-behavior:contain;background:rgba(31,20,42,.46)!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal-card{width:min(680px,100%)!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;border-radius:22px!important;padding:20px!important;box-shadow:0 28px 80px rgba(28,16,42,.24)!important}
.modal-card.wide{width:min(980px,100%)!important}
.modal-card.xl{width:min(1120px,100%)!important}
.modal-head{position:sticky;top:-20px;z-index:5;background:#fff;padding:3px 0 12px;margin-bottom:4px;border-bottom:1px solid rgba(236,230,241,.7)}
.modal-head button,.drawer-head button{flex:0 0 auto}
.modal-actions{position:sticky;bottom:-20px;z-index:4;background:linear-gradient(180deg,rgba(255,255,255,.85),#fff 26%);padding-top:14px!important;margin-top:16px!important}
.drawer{max-width:min(720px,96vw)!important;overflow:auto!important;overscroll-behavior:contain}

/* Toast */
.toast{max-width:min(460px,calc(100vw - 24px));line-height:1.4;border-radius:13px!important;box-shadow:0 16px 42px rgba(32,17,46,.22)!important}

/* RTL robustness */
html[dir="rtl"] .top-actions{justify-content:flex-start}
html[dir="rtl"] .panel-head{text-align:right}
html[dir="rtl"] input,html[dir="rtl"] textarea{text-align:right}
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="number"],html[dir="rtl"] input[type="date"]{direction:ltr;text-align:left}
html[dir="rtl"] .pager{justify-content:flex-start}

/* Responsive desktop/tablet */
@media(max-width:1450px){
  .dashboard-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #dashboardReset{width:100%}
}
@media(max-width:1180px){
  .dashboard-executive-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-secondary-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .top-actions .status-pill{padding-inline:9px}
}
@media(max-width:900px){
  :root{--ui-topbar:72px}
  .app-shell,body.sidebar-collapsed .app-shell{display:block!important}
  .content-shell{width:100%!important}
  .topbar{position:sticky!important;top:0!important;min-height:72px!important;padding:10px 12px!important}
  .topbar-copy h1{font-size:21px!important}
  .topbar-copy p,.topbar .eyebrow{display:none}
  .top-actions{gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:70vw}
  .top-actions::-webkit-scrollbar{display:none}
  .top-actions .status-pill{flex:0 0 auto}
  main{padding:14px 12px 30px!important}
  .dashboard-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .dashboard-performance-grid,.dashboard-bento-grid,.dashboard-recent-grid,.inventory-grid{grid-template-columns:1fr!important}
  .panel{padding:14px!important}
  .page-hero{padding:15px!important}
}

/* Phone: touch-first */
@media(max-width:700px){
  :root{--ui-page-gap:12px;--ui-control-h:46px}
  input,select,textarea{font-size:16px!important} /* prevents iOS zoom */
  .top-actions{max-width:62vw}
  .top-actions>.status-pill:first-of-type{display:none}
  #refresh{width:40px!important;min-width:40px!important;font-size:0!important;padding:0!important}
  #refresh::before{content:"";font-size:17px}
  .language-picker select{font-size:13px!important}
  .welcome-banner{padding:18px!important;border-radius:18px!important}
  .welcome-banner h2{font-size:21px!important;line-height:1.12!important}
  .welcome-banner p{font-size:11.5px!important;line-height:1.5!important}
  .welcome-orbs{display:none!important}
  .dashboard-filter-card,.dashboard-zone{padding:13px!important;border-radius:17px!important}
  .dashboard-filter-head{gap:10px!important}
  .dashboard-quick-dates{width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:3px;scrollbar-width:none}
  .dashboard-quick-dates::-webkit-scrollbar{display:none}
  .dashboard-quick-dates button{flex:0 0 auto}
  .dashboard-filter-grid{grid-template-columns:1fr!important}
  .dashboard-executive-kpis,.dashboard-secondary-kpis,.dashboard-insights{grid-template-columns:1fr!important}
  .dashboard-executive-kpis .hero-kpi{min-height:82px!important}
  .dashboard-secondary-kpis .stat-card{min-height:70px!important}
  .toolbar{display:grid!important;grid-template-columns:1fr!important;width:100%}
  .toolbar>.btn,.toolbar>input,.toolbar>select{width:100%!important}
  .modal{padding:0!important;align-items:flex-end!important}
  .modal-card,.modal-card.wide,.modal-card.xl{width:100%!important;max-width:none!important;max-height:94dvh!important;border-radius:22px 22px 0 0!important;padding:16px!important}
  .modal-head{top:-16px}
  .modal-actions{bottom:-16px;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .modal-actions .btn{width:100%}
  .drawer{width:100vw!important;max-width:100vw!important}
  .detail-grid,.manual-details-grid,.team-form-grid{grid-template-columns:1fr!important}
  .pager{justify-content:center}
  .responsive-table tbody tr{border-radius:15px!important}
  .responsive-table tbody td{grid-template-columns:minmax(105px,38%) minmax(0,1fr)!important;gap:10px!important;padding:10px 12px!important}
  .responsive-table tbody td::before{font-size:10px!important;line-height:1.3!important}
}
@media(max-width:430px){
  .top-actions{max-width:58vw}
  .realtime-pill b{display:none}
  .dashboard-executive-kpis .hero-kpi{padding:12px!important}
  .kpi-icon{width:38px!important;height:38px!important;min-width:38px!important}
  .responsive-table tbody td{grid-template-columns:1fr!important;gap:4px!important}
  .modal-actions{grid-template-columns:1fr!important}
}

/* Reduced motion & print quality */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
  .sidebar,.topbar,.mobile-nav-backdrop,.toast,.modal{display:none!important}
  .app-shell{display:block!important}.content-shell{overflow:visible!important}main{max-width:none!important;padding:0!important}.page{display:none!important}.page.active{display:block!important}
  .panel,.dashboard-zone{box-shadow:none!important;break-inside:avoid}
}


/* =========================================================
   v4.10.1 — Customer 360 drawer always opens from RIGHT
   independent from FR / EN / AR document direction.
   ========================================================= */

/* The overlay direction must never decide where the drawer is anchored. */
#customerDrawer.drawer{
  position:fixed !important;
  inset:0 !important;
  display:block !important;
  direction:ltr !important;
}

/* Always anchor the customer sheet to the physical RIGHT side. */
#customerDrawer > .customer-360-drawer,
#customerDrawer > .drawer-card{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:auto !important;
  height:100% !important;
  max-height:100dvh !important;
  margin:0 !important;
}

/* Keep the actual card content translated according to the selected language. */
html[dir="ltr"] #customerDrawer > .customer-360-drawer,
html[dir="ltr"] #customerDrawer > .drawer-card{
  direction:ltr !important;
  text-align:left;
}

html[dir="rtl"] #customerDrawer > .customer-360-drawer,
html[dir="rtl"] #customerDrawer > .drawer-card{
  direction:rtl !important;
  text-align:right;
}

/* Physical close button remains predictable while its content keeps RTL/LTR semantics. */
#customerDrawer .customer-close-btn{
  flex:0 0 auto;
}

/* Mobile: still opens from right; it simply occupies the full viewport width. */
@media(max-width:850px){
  #customerDrawer > .customer-360-drawer,
  #customerDrawer > .drawer-card{
    width:100vw !important;
    max-width:100vw !important;
    right:0 !important;
    left:auto !important;
  }
}


/* =========================================================
   v4.10.2 — FRONTEND STABILITY / CUSTOMER 360 DRAWER
   Authoritative final rules.
   ========================================================= */

/* The overlay is always the full viewport. Never constrain the overlay itself. */
.drawer,
#customerDrawer.drawer{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  max-width:none !important;
  height:100dvh !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  direction:ltr !important;
  background:rgba(31,20,42,.44) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  z-index:120 !important;
}

/* Hidden must always win over the drawer's display rule. */
.drawer.hidden,
#customerDrawer.hidden{
  display:none !important;
}

/* The sheet itself is the only element whose width is constrained. */
#customerDrawer > .drawer-card.customer-360-drawer{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  flex:0 0 auto !important;
  width:min(1080px,calc(100vw - 24px)) !important;
  max-width:min(1080px,calc(100vw - 24px)) !important;
  min-width:0 !important;
  height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  background:#f8f5fa !important;
  border:0 !important;
  border-radius:24px 0 0 24px !important;
  box-shadow:-30px 0 80px rgba(30,14,43,.24) !important;
  animation:crmCustomerDrawerIn .22s cubic-bezier(.22,.78,.32,1) both;
  scrollbar-gutter:stable;
}

@keyframes crmCustomerDrawerIn{
  from{transform:translate3d(34px,0,0);opacity:.88}
  to{transform:translate3d(0,0,0);opacity:1}
}

/* Direction only affects content, never the physical anchoring. */
html[dir="ltr"] #customerDrawer > .customer-360-drawer{
  direction:ltr !important;
  text-align:left !important;
}
html[dir="rtl"] #customerDrawer > .customer-360-drawer{
  direction:rtl !important;
  text-align:right !important;
}

/* Customer 360 header stays readable and never gets clipped. */
#customerDrawer .customer-360-hero{
  position:sticky !important;
  top:0 !important;
  z-index:20 !important;
  width:100% !important;
  min-height:118px;
  box-sizing:border-box;
}
#customerDrawer .customer-identity{
  min-width:0 !important;
  flex:1 1 auto !important;
}
#customerDrawer .customer-title-row,
#customerDrawer .customer-contact-quick{
  min-width:0 !important;
}
#customerDrawer .customer-title-row h2,
#customerDrawer #dMeta{
  overflow-wrap:anywhere;
}
#customerDrawer .customer-hero-actions{
  flex:0 0 auto !important;
}

/* Dense but fluid Customer 360 grids. */
#customerDrawer .customer-360-stats{
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
#customerDrawer .customer-smart-grid,
#customerDrawer .customer-overview-grid{
  min-width:0 !important;
}
#customerDrawer .customer-section-card,
#customerDrawer .smart-card,
#customerDrawer .customer-stat{
  min-width:0 !important;
  height:auto !important;
}
#customerDrawer .customer-tabs{
  position:sticky;
  top:118px;
  z-index:15;
  background:rgba(248,245,250,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Strong global overlay isolation. */
body.crm-overlay-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

/* Tablet */
@media(max-width:1100px){
  #customerDrawer > .drawer-card.customer-360-drawer{
    width:min(860px,calc(100vw - 18px)) !important;
    max-width:min(860px,calc(100vw - 18px)) !important;
  }
  #customerDrawer .customer-360-stats{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Mobile: full-screen sheet, still physically from the right. */
@media(max-width:700px){
  .drawer,
  #customerDrawer.drawer{
    width:100vw !important;
    height:100dvh !important;
    align-items:stretch !important;
  }
  #customerDrawer > .drawer-card.customer-360-drawer{
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  #customerDrawer .customer-360-hero{
    min-height:auto !important;
    position:sticky !important;
    top:0 !important;
    padding:14px 14px 12px !important;
  }
  #customerDrawer .customer-hero-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #customerDrawer .customer-hero-actions .btn,
  #customerDrawer .customer-hero-actions a{
    width:100% !important;
    justify-content:center;
  }
  #customerDrawer .customer-close-btn{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    z-index:25 !important;
  }
  html[dir="rtl"] #customerDrawer .customer-close-btn{
    right:10px !important;
    left:auto !important;
  }
  #customerDrawer .customer-tabs{
    top:0 !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    scrollbar-width:none;
  }
  #customerDrawer .customer-tabs::-webkit-scrollbar{display:none}
  #customerDrawer .customer-tab{
    flex:0 0 auto !important;
  }
  #customerDrawer .customer-360-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Very small phones */
@media(max-width:430px){
  #customerDrawer .customer-360-stats{
    grid-template-columns:1fr !important;
  }
  #customerDrawer .customer-hero-actions{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   v4.11.0 — SMART ONBOARDING 360°
   ========================================================= */
.onboarding-help-btn{
  border:1px solid #e8daf4;background:#fff;color:#6527a8;box-shadow:0 7px 18px rgba(72,30,109,.08);
  white-space:nowrap
}
.onboarding-help-btn:hover{background:#f7effd;transform:translateY(-1px)}
.lo-guide-lock{overflow:hidden!important}
.lo-guide-layer{position:fixed;inset:0;z-index:5000;pointer-events:none}
.lo-guide-layer.hidden,.lo-guide-modal.hidden{display:none!important}
.lo-guide-backdrop{position:absolute;inset:0;background:rgba(21,12,31,.58);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:auto}
.lo-guide-spotlight{position:fixed;border:3px solid #8a42d2;border-radius:18px;box-shadow:0 0 0 4px rgba(255,255,255,.86),0 12px 44px rgba(71,24,114,.28);z-index:2;pointer-events:none;transition:all .2s ease;background:rgba(255,255,255,.02)}
.lo-guide-popover{position:fixed;z-index:3;background:#fff;border:1px solid #e5d6ef;border-radius:22px;padding:20px;box-shadow:0 28px 70px rgba(28,11,45,.28);pointer-events:auto;max-height:calc(100dvh - 24px);overflow:auto;direction:ltr;text-align:left}
html[dir="rtl"] .lo-guide-popover{direction:rtl;text-align:right}
.lo-guide-kicker{font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#8240c7;margin-bottom:7px}
.lo-guide-popover h3{margin:0 0 8px;font-size:20px;color:#241d31;line-height:1.25}.lo-guide-popover p{margin:0;color:#6f657a;line-height:1.6;font-size:14px}
.lo-guide-stepbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;margin-top:18px;color:#8b8096;font-size:12px;font-weight:800}
.lo-guide-stepbar>div{height:6px;background:#f0e8f6;border-radius:99px;overflow:hidden}.lo-guide-stepbar i{display:block;height:100%;background:linear-gradient(90deg,#6e2bb4,#ae63db);border-radius:99px;transition:width .2s ease}
.lo-guide-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;margin-top:16px}.lo-guide-link{border:0;background:transparent;color:#897a94;font-weight:800;cursor:pointer;padding:8px 0}.lo-guide-link:hover{color:#6429a5}
.lo-guide-modal{position:fixed;inset:0;z-index:5100;background:rgba(24,13,35,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);display:grid;place-items:center;padding:20px;overflow:auto}
.lo-guide-welcome-card,.lo-guide-hub-card{width:min(760px,100%);background:#fff;border:1px solid #eadcf4;border-radius:28px;box-shadow:0 32px 90px rgba(33,13,51,.30);padding:30px;direction:ltr;text-align:left}
html[dir="rtl"] .lo-guide-welcome-card,html[dir="rtl"] .lo-guide-hub-card{direction:rtl;text-align:right}
.lo-guide-welcome-icon{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,#7b32bb,#ad65d8);color:#fff;font-size:27px;box-shadow:0 15px 35px rgba(116,47,177,.24);margin-bottom:15px}.lo-guide-welcome-card h2,.lo-guide-hub-card h2{margin:3px 0 8px;font-size:28px;color:#241d31}.lo-guide-welcome-card>p,.lo-guide-hub-card .modal-head p{color:#74697f;line-height:1.6;margin:0}
.lo-guide-role{margin:20px 0;background:#f7f1fb;border:1px solid #eadcf4;border-radius:18px;padding:15px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px}.lo-guide-role span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#917fa0;font-weight:900}.lo-guide-role strong{color:#5c2498}.lo-guide-role small{grid-column:1/-1;color:#72667c;line-height:1.5;margin-top:5px}
.lo-guide-area-pills{display:flex;flex-wrap:wrap;gap:8px}.lo-guide-area-pills span{padding:8px 11px;border-radius:12px;background:#fbf9fc;border:1px solid #eadff1;font-size:12px;font-weight:800;color:#55485f}
.lo-guide-welcome-actions,.lo-guide-hub-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.lo-guide-hub-card{width:min(860px,100%);max-height:min(820px,92dvh);overflow:auto}.lo-guide-hub-card .modal-head{align-items:flex-start}.lo-guide-overall{margin:18px 0 16px;background:#faf7fc;border:1px solid #eadff1;border-radius:17px;padding:14px}.lo-guide-overall>div:first-child{display:flex;justify-content:space-between;gap:12px;font-weight:800;color:#5f5269}.lo-guide-overall>div:last-child{height:8px;background:#eee5f4;border-radius:99px;overflow:hidden;margin-top:10px}.lo-guide-overall i{display:block;height:100%;background:linear-gradient(90deg,#61269e,#ad5ed9);border-radius:99px}
.lo-guide-module-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lo-guide-module-list button{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid #eadff1;border-radius:17px;padding:13px;cursor:pointer;color:#2e2637;transition:.16s ease}.lo-guide-module-list button:hover{border-color:#bf96dc;box-shadow:0 9px 24px rgba(87,45,116,.10);transform:translateY(-1px)}html[dir="rtl"] .lo-guide-module-list button{text-align:right}.lo-guide-module-icon{width:44px;height:44px;border-radius:14px;background:#f1e4fb;color:#6b2dab;display:grid;place-items:center;font-size:19px;font-weight:900}.lo-guide-module-list strong{display:block;font-size:14px}.lo-guide-module-list small{display:block;color:#92869b;margin-top:3px}.lo-guide-module-list em{font-style:normal;color:#6d2eb1;font-size:12px;font-weight:900}
.lo-module-prompt{position:fixed;right:22px;bottom:22px;z-index:4200;width:min(420px,calc(100vw - 24px));background:#fff;border:1px solid #e4d5ef;border-radius:20px;box-shadow:0 20px 55px rgba(40,16,60,.22);padding:17px;opacity:0;transform:translateY(14px);transition:.2s ease;display:grid;gap:14px;direction:ltr}.lo-module-prompt.show{opacity:1;transform:none}html[dir="rtl"] .lo-module-prompt{direction:rtl;right:auto;left:22px}.lo-module-prompt strong{font-size:15px;color:#2b2234}.lo-module-prompt span{display:inline-block;margin-inline-start:7px;color:#6f2cb0;font-weight:900;font-size:13px}.lo-module-prompt p{margin:5px 0 0;color:#786c81;font-size:13px;line-height:1.5}.lo-module-prompt>div:last-child{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:850px){.onboarding-help-btn{padding-inline:11px}.lo-guide-popover{border-radius:20px}.lo-guide-welcome-card,.lo-guide-hub-card{padding:22px;border-radius:23px}.lo-guide-module-list{grid-template-columns:1fr}.lo-module-prompt{right:12px;bottom:12px}html[dir="rtl"] .lo-module-prompt{left:12px}.lo-guide-welcome-actions,.lo-guide-hub-actions{display:grid;grid-template-columns:1fr}.lo-guide-welcome-actions .btn,.lo-guide-hub-actions .btn{width:100%}.lo-guide-actions{grid-template-columns:1fr 1fr}.lo-guide-actions .lo-guide-link{grid-column:1/-1;text-align:start}.lo-guide-actions span{display:none}.lo-guide-actions .btn{width:100%}}
@media(max-width:520px){.lo-guide-modal{padding:8px}.lo-guide-welcome-card,.lo-guide-hub-card{border-radius:18px;padding:18px}.lo-guide-welcome-card h2,.lo-guide-hub-card h2{font-size:23px}.lo-guide-role{grid-template-columns:1fr}.lo-guide-role small{grid-column:auto}.lo-guide-popover{max-height:56dvh;padding:16px}.lo-guide-area-pills span{font-size:11px}}
@media(prefers-reduced-motion:reduce){.lo-guide-spotlight,.lo-module-prompt{transition:none!important}}

/* =========================================================
   LiveGoOrder CRM v4.11.3 — UI 360 / SVG / Responsive / RTL
   Final authoritative layer
   ========================================================= */
:root{--lgo-sidebar:292px;--lgo-sidebar-collapsed:88px;--lgo-content-max:1800px;--lgo-icon-stroke:2}
.ui-icon-svg{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:var(--lgo-icon-stroke);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.panel-icon .ui-icon-svg,.kpi-icon .ui-icon-svg,.page-hero-icon .ui-icon-svg,.smart-icon .ui-icon-svg,.nav-icon .ui-icon-svg{width:52%;height:52%}
.page-hero-icon .ui-icon-svg{width:31px;height:31px}.panel-icon .ui-icon-svg{width:20px;height:20px}.kpi-icon .ui-icon-svg{width:22px;height:22px}.smart-icon .ui-icon-svg{width:18px;height:18px}
.inline-svg{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-inline-end:4px}.btn-svg{width:17px;height:17px;display:inline-grid;place-items:center;flex:0 0 17px}
.btn-svg .ui-icon-svg,.sidebar-action-icon .ui-icon-svg,.search-svg .ui-icon-svg,.security-svg .ui-icon-svg{width:100%;height:100%}.icon-button{display:grid!important;place-items:center!important}.icon-button .ui-icon-svg{width:21px;height:21px}
.row-arrow .ui-icon-svg,.insight-arrow .ui-icon-svg{width:17px;height:17px}.insight-svg{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 34px}.insight-svg .ui-icon-svg{width:18px;height:18px}
.security-svg{width:22px!important;height:22px!important;display:grid!important;place-items:center!important}.role-symbol .ui-icon-svg{width:18px;height:18px}.smart-ok .ui-icon-svg{width:20px;height:20px}

/* Brand/sidebar */
.app-shell{grid-template-columns:var(--lgo-sidebar) minmax(0,1fr)!important}body.sidebar-collapsed .app-shell{grid-template-columns:var(--lgo-sidebar-collapsed) minmax(0,1fr)!important}
.sidebar{width:100%!important;min-width:0!important;overflow:hidden!important;background:radial-gradient(circle at 12% 2%,rgba(176,110,255,.20),transparent 25%),radial-gradient(circle at 95% 32%,rgba(247,132,193,.10),transparent 28%),linear-gradient(180deg,#3e1768 0%,#552086 48%,#351355 100%)!important}
.sidebar-top{min-height:124px!important;padding:10px 16px 6px!important}.brand-logo-wrap{min-height:104px!important;width:100%!important;overflow:visible!important}
.sidebar-logo-full{width:min(258px,100%)!important;height:98px!important;padding:0!important;object-fit:contain!important;object-position:center!important;filter:drop-shadow(0 6px 12px rgba(18,3,32,.26)) drop-shadow(0 0 2px rgba(255,255,255,.62)) drop-shadow(0 0 10px rgba(255,255,255,.10))!important;transform:translateZ(0)}
.sidebar-logo-mark{object-fit:contain!important;filter:drop-shadow(0 5px 12px rgba(18,3,32,.22))!important}.sidebar-collapse{top:44px!important}.workspace-pill{margin-top:2px!important}.sidebar .nav{min-height:51px!important}
.sidebar-account,.sidebar-logout{display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important}.sidebar-action-icon{width:17px;height:17px;display:grid;place-items:center;flex:0 0 17px}
.sidebar-account::after,.sidebar-logout::after,#refresh::before{display:none!important;content:none!important}

/* Topbar */
.topbar{position:sticky!important;top:0!important;z-index:44!important}.top-actions>.btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}.mobile-menu-btn{font-size:0!important}
#refresh .ui-icon-svg{transition:transform .2s ease}#refresh:hover .ui-icon-svg{transform:rotate(28deg)}.onboarding-help-btn{display:inline-flex!important;gap:7px!important;align-items:center!important}

/* Layout */
.content-shell{min-width:0!important;max-width:100vw}main{width:100%!important;max-width:var(--lgo-content-max)!important;padding-inline:clamp(14px,2.2vw,34px)!important}.page.active{min-width:0!important}
.panel,.page-hero,.welcome-banner,.dashboard-filter-card,.drawer-card,.modal-card{box-sizing:border-box}.panel-head>div:first-child{min-width:0}.panel-head h2,.panel-head p,.page-hero h2,.page-hero p{overflow-wrap:anywhere}
.table-wrap{max-width:100%;overflow:auto!important;overscroll-behavior-inline:contain}.toolbar>*{min-width:0}.panel-icon,.kpi-icon,.page-hero-icon,.smart-icon{font-size:0!important;line-height:1!important}.panel-icon,.kpi-icon,.page-hero-icon{overflow:hidden}
.search-svg{width:18px!important;height:18px!important;color:#897894!important;display:grid!important;place-items:center!important;flex:0 0 18px}.insight-card{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important}.insight-card>div{min-width:0}
.insight-arrow,.row-arrow{display:grid;place-items:center;color:#7d5d97}.dashboard-all-good{display:flex!important;align-items:center!important;gap:7px}.team-security-list>div>span.security-svg{color:#168861!important;background:#eaf9f2!important;border-radius:9px;padding:3px!important}.smart-ok{display:grid!important;place-items:center!important}
.modal{padding:clamp(10px,2vw,24px)!important}.modal-card{width:min(760px,calc(100vw - 24px))!important;max-height:min(92dvh,980px)!important;overflow:auto!important}.drawer{width:100vw!important;height:100dvh!important}.customer-360-drawer{max-width:min(1080px,calc(100vw - 18px))!important}
.dashboard-filter-grid,.order-filter-grid{align-items:end}.dashboard-filter-grid label,.order-filter-field{min-width:0}input,select,textarea{max-width:100%}select{white-space:nowrap;text-overflow:ellipsis}.btn{max-width:100%}

/* RTL */
html[dir="rtl"] body{text-align:right}html[dir="rtl"] .sidebar .nav.active::after{left:9px!important;right:auto!important}html[dir="rtl"] .panel-head>div,html[dir="rtl"] .smart-card-title,html[dir="rtl"] .customer-identity{direction:rtl}
html[dir="rtl"] .row-arrow .ui-icon-svg,html[dir="rtl"] .insight-arrow .ui-icon-svg{transform:scaleX(-1)}html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[id*="Search"],html[dir="rtl"] input[id*="search"]{direction:ltr;text-align:right}html[dir="rtl"] .sidebar-logo-full{direction:ltr}html[dir="rtl"] .top-actions{justify-content:flex-start}

@media(min-width:851px){body.sidebar-collapsed .sidebar-top{min-height:92px!important;padding:12px 8px 8px!important}body.sidebar-collapsed .brand-logo-wrap{width:60px!important;min-height:62px!important}body.sidebar-collapsed .sidebar-logo-mark{display:block!important;width:58px!important;height:58px!important}body.sidebar-collapsed .sidebar-action-label{display:none!important}body.sidebar-collapsed .sidebar-account,body.sidebar-collapsed .sidebar-logout{font-size:0!important;gap:0!important}body.sidebar-collapsed .sidebar-action-icon{width:19px;height:19px}}
@media(max-width:1280px) and (min-width:851px){:root{--lgo-sidebar:264px}.sidebar-logo-full{width:min(235px,100%)!important;height:90px!important}.sidebar-top{min-height:116px!important}.top-actions{max-width:56%}.dashboard-performance-grid{grid-template-columns:minmax(0,1.6fr) minmax(260px,.8fr)!important}.dashboard-bento-grid{grid-template-columns:minmax(0,1.5fr) minmax(270px,.8fr)!important}}
@media(max-width:850px){.app-shell,body.sidebar-collapsed .app-shell{display:block!important}.sidebar{width:min(88vw,326px)!important;max-width:326px!important;height:100dvh!important;grid-template-rows:auto minmax(0,1fr) auto!important}.sidebar-top{min-height:112px!important;padding:9px 16px 5px!important}.brand-logo-wrap{min-height:94px!important}.sidebar-logo-full,body.sidebar-collapsed .sidebar-logo-full{display:block!important;width:min(276px,100%)!important;height:92px!important}.sidebar-logo-mark{display:none!important}.topbar{min-height:72px!important;padding:10px 13px!important;gap:9px!important}.topbar-copy p{display:none}.top-actions{gap:6px!important}.top-actions .language-picker{order:10}.status-pill{padding-inline:9px!important}main{padding:14px 12px 32px!important}.page.active{gap:14px!important}.dashboard-performance-grid,.dashboard-bento-grid,.inventory-grid,.team-bottom-grid{grid-template-columns:1fr!important}.page-hero{padding:18px!important}.page-hero-icon{width:54px!important;height:54px!important;flex:0 0 54px}.panel{padding:16px!important}.customer-360-drawer{width:100vw!important;max-width:100vw!important}}
@media(max-width:600px){.topbar{align-items:flex-start!important}.topbar h1{font-size:21px!important}.top-actions{width:auto!important;flex:0 0 auto!important;display:flex!important}.top-actions .status-pill:not(.realtime-pill),.top-actions .language-picker{display:none!important}.realtime-pill b{display:none}.realtime-pill{width:38px!important;padding:0!important;justify-content:center}#refresh,.onboarding-help-btn{width:40px!important;height:40px!important;padding:0!important;font-size:0!important;border-radius:12px!important}.dashboard-filter-grid,.order-filter-grid{grid-template-columns:1fr!important}.dashboard-quick-dates,.quick-date-filters{overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px}.dashboard-quick-dates button,.quick-date{flex:0 0 auto}.hero-grid,.dashboard-executive-kpis,.team-kpi-grid{grid-template-columns:1fr!important}.stats-grid,.dashboard-secondary-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.page-hero{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important}.panel-head{align-items:flex-start!important}.panel-head>button{width:100%!important}.toolbar{display:grid!important;grid-template-columns:1fr!important}.toolbar>*,.team-head-actions,.live-detail-actions{width:100%!important}.team-head-actions,.live-detail-actions{display:grid!important;grid-template-columns:1fr!important}.modal{padding:0!important;align-items:flex-end!important}.modal-card{width:100vw!important;max-width:100vw!important;max-height:94dvh!important;border-radius:22px 22px 0 0!important}.drawer-card.customer-360-drawer{border-radius:0!important}.customer-360-stats{grid-template-columns:1fr 1fr!important}.customer-smart-grid,.customer-overview-grid{grid-template-columns:1fr!important}.roles-layout{grid-template-columns:1fr!important}.roles-layout>aside{border-right:0!important;border-bottom:1px solid #eee6f3;padding-right:0!important;padding-bottom:14px}}
@media(max-width:380px){main{padding-inline:9px!important}.panel{padding:13px!important;border-radius:17px!important}.stats-grid,.dashboard-secondary-kpis,.customer-360-stats{grid-template-columns:1fr!important}.sidebar{width:92vw!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* SVG close/action button finishing */
.modal-head>button .ui-icon-svg,.customer-close-btn .ui-icon-svg,.manual-remove-line .ui-icon-svg,.icon-only-inline .ui-icon-svg{width:18px;height:18px}
.modal-head>button,.customer-close-btn,.manual-remove-line,.icon-only-inline{display:grid!important;place-items:center!important}
.icon-only-inline{width:24px;height:24px;padding:0!important;border:0;background:transparent;color:inherit;cursor:pointer}


/* =========================================================
   LiveGoOrder CRM v4.11.4 — DASHBOARD LAYOUT HOTFIX
   Root cause: the generic v4.10 `.page.active{display:grid!important}`
   overrode the dashboard's dedicated flex-column architecture.
   The dashboard workbench could therefore shrink to intrinsic widths.
   This layer makes dashboard geometry authoritative again.
   ========================================================= */

/* Dashboard is a vertical document, NEVER a generic grid page. */
#page-dashboard.page.active{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  gap:14px!important;
}

/* Every direct dashboard block must occupy the full content width. */
#page-dashboard.page.active > *{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  justify-self:stretch!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
}

/* Dashboard sections and their working grids must never shrink-to-content. */
#page-dashboard .dashboard-zone,
#page-dashboard .dashboard-filter-card,
#page-dashboard .dashboard-performance-grid,
#page-dashboard .dashboard-bento-grid,
#page-dashboard .dashboard-bento-main,
#page-dashboard .dashboard-bento-side,
#page-dashboard .dashboard-recent-grid,
#page-dashboard .dashboard-insights,
#page-dashboard .dashboard-executive-kpis,
#page-dashboard .dashboard-secondary-kpis{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* Main dashboard content areas. */
#page-dashboard .dashboard-performance-grid{
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(300px,.78fr)!important;
  align-items:start!important;
  gap:12px!important;
}

#page-dashboard .dashboard-bento-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.85fr) minmax(320px,.85fr)!important;
  align-items:start!important;
  gap:12px!important;
}

#page-dashboard .dashboard-bento-main,
#page-dashboard .dashboard-bento-side,
#page-dashboard .dashboard-side-stack{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  align-items:start!important;
  gap:12px!important;
}

/* Explicitly prevent cards from becoming narrow intrinsic-width columns. */
#page-dashboard .panel,
#page-dashboard .dashboard-bento-card,
#page-dashboard .dashboard-panel-main,
#page-dashboard .dashboard-panel-compact,
#page-dashboard .chart-panel{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  justify-self:stretch!important;
  align-self:start!important;
}

/* Lists/tables inside cards must consume the card width. */
#page-dashboard #topProducts,
#page-dashboard #topCustomers,
#page-dashboard #topLives,
#page-dashboard #recentOrders,
#page-dashboard #dashboardStockAlerts,
#page-dashboard #statusBreakdown,
#page-dashboard #sourceBreakdown,
#page-dashboard #trendChart{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

#page-dashboard .table-wrap{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
}

#page-dashboard .table-wrap table{
  width:100%!important;
  min-width:620px!important;
}

/* Entity/list rows use the whole panel; text is allowed to wrap naturally. */
#page-dashboard .entity-list-row,
#page-dashboard .recent-order-card,
#page-dashboard .source-row,
#page-dashboard .status-row,
#page-dashboard .stock-alert-row{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

#page-dashboard .entity-list-row > *,
#page-dashboard .recent-order-card > *,
#page-dashboard .source-row > *,
#page-dashboard .status-row > *{
  min-width:0!important;
}

/* Make dashboard header/card text robust against long FR/EN/AR labels. */
#page-dashboard h2,
#page-dashboard h3,
#page-dashboard p,
#page-dashboard strong,
#page-dashboard small{
  overflow-wrap:anywhere;
}

#page-dashboard .panel-head > div{
  min-width:0!important;
  flex:1 1 auto!important;
}

#page-dashboard .panel-head > div > div:last-child{
  min-width:0!important;
}

/* The content shell itself must not participate in intrinsic shrink calculations. */
.content-shell{
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
}

.content-shell > main{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
}

/* Main desktop/laptop layout. */
@media(min-width:1081px){
  #page-dashboard .dashboard-performance-grid{
    grid-template-columns:minmax(0,2fr) minmax(300px,.78fr)!important;
  }
  #page-dashboard .dashboard-bento-grid{
    grid-template-columns:minmax(0,1.85fr) minmax(320px,.85fr)!important;
  }
}

/* Smaller laptop: keep useful proportions without squeezing the side rail. */
@media(min-width:851px) and (max-width:1280px){
  #page-dashboard .dashboard-performance-grid{
    grid-template-columns:minmax(0,1.55fr) minmax(280px,.8fr)!important;
  }
  #page-dashboard .dashboard-bento-grid{
    grid-template-columns:minmax(0,1.45fr) minmax(290px,.85fr)!important;
  }
}

/* Tablet: one column, side cards become a 2-column subgrid. */
@media(max-width:1080px){
  #page-dashboard .dashboard-performance-grid,
  #page-dashboard .dashboard-bento-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #page-dashboard .dashboard-side-stack,
  #page-dashboard .dashboard-bento-side{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #page-dashboard .dashboard-stock-panel{
    grid-column:1 / -1!important;
  }
}

/* Mobile: everything is a clean single column. */
@media(max-width:700px){
  #page-dashboard.page.active{
    gap:12px!important;
  }
  #page-dashboard .dashboard-side-stack,
  #page-dashboard .dashboard-bento-side,
  #page-dashboard .dashboard-recent-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #page-dashboard .dashboard-stock-panel{
    grid-column:auto!important;
  }
  #page-dashboard .table-wrap table{
    min-width:560px!important;
  }
}

/* Very small phones: keep cards readable and avoid accidental horizontal page scroll. */
@media(max-width:430px){
  #page-dashboard .dashboard-zone,
  #page-dashboard .dashboard-filter-card{
    padding:12px!important;
  }
  #page-dashboard .panel{
    padding:13px!important;
  }
  #page-dashboard .table-wrap{
    margin-inline:0!important;
  }
}


/* =========================================================
   LiveGoOrder CRM v4.11.5 — Mobile menu visibility fix
   The hamburger is a mobile/tablet control only.
   ========================================================= */

/* Desktop/laptop: the permanent sidebar is available, so the hamburger must not exist visually. */
.mobile-menu-btn{
  display:none!important;
}

/* Tablet/mobile only: expose the hamburger because the sidebar becomes an off-canvas drawer. */
@media(max-width:850px){
  .mobile-menu-btn{
    display:grid!important;
    place-items:center!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
  }
}

/* Very narrow phones keep the same compact control. */
@media(max-width:430px){
  .mobile-menu-btn{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
  }
}

/* LiveGoOrder CRM v4.12.0 */
.health-hero{grid-template-columns:auto minmax(0,1fr) auto!important}.health-score-ring{--score:0%;width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#6d32a6 var(--score),#eee6f3 0);position:relative;color:#552080}.health-score-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}.health-score-ring strong,.health-score-ring span{position:relative;z-index:1}.health-score-ring strong{font-size:29px}.health-score-ring span{font-size:11px;margin-top:-24px}.health-layout,.automation-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:14px}.health-checklist,.health-actions,.automation-rule-list,.automation-event-list{display:grid;gap:9px}.health-check{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:12px;border:1px solid #eee5f3;border-radius:14px;background:#fff}.health-check.done{background:#fbfffd;border-color:#daf0e5}.health-check-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#f3ebf8;color:#6b309e}.health-check strong,.health-check small{display:block}.health-check small{color:#85758e}.health-action{display:grid;grid-template-columns:30px minmax(0,1fr) 20px;gap:10px;align-items:center;border:1px solid #eee4f2;background:#fff;border-radius:13px;padding:11px;text-align:left}.health-action>span:first-child{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#f1e8f7;color:#6a319b;font-weight:900}.health-kpis,.automation-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.health-mini-kpi{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid #ece3f1;border-radius:15px;background:#fff}.health-mini-kpi>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#f1e8f8;color:#68309a}.import-type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.import-type-card{border:1px solid #e8deed;border-radius:17px;background:#fff;padding:18px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:5px 12px;text-align:left}.import-type-card>span{grid-row:1/3;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:#f3eafb;color:#6e33a1}.import-type-card.active{border-color:#9b68be;background:#fcf9ff}.import-dropzone{border:2px dashed #d9cbe2;border-radius:18px;padding:34px 18px;text-align:center;background:#fcfaff}.import-dropzone.drag{border-color:#7643a0;background:#f6effc}.import-drop-icon{width:58px;height:58px;margin:0 auto 10px;border-radius:17px;display:grid;place-items:center;background:#efe4f7;color:#6d329e}.import-summary{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;background:#f8f3fb;border:1px solid #eadff0;border-radius:14px;margin-bottom:14px}.import-mapping-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 14px}.import-mapping-grid label{display:grid;gap:5px}.import-result{margin-top:14px;padding:14px;border-radius:14px;background:#ecfaf3;border:1px solid #cfeedd}.import-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.automation-rule,.automation-event{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;border:1px solid #ece3f1;border-radius:14px;background:#fff;padding:12px}.automation-rule.inactive{opacity:.58}.automation-rule-icon,.automation-event-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f2eafa;color:#69319c}.automation-rule strong,.automation-rule small,.automation-event strong,.automation-event small,.automation-event em{display:block}.automation-rule small,.automation-event small{color:#83738c}.automation-event em{font-size:10px;color:#a092a8;font-style:normal}.switchline{position:relative;width:42px;height:24px}.switchline input{opacity:0;position:absolute}.switchline i{display:block;width:42px;height:24px;border-radius:999px;background:#d9cedf;position:relative}.switchline i::after{content:"";position:absolute;width:18px;height:18px;top:3px;left:3px;border-radius:50%;background:#fff;transition:.18s}.switchline input:checked+i{background:#6a329d}.switchline input:checked+i::after{left:21px}@media(max-width:1050px){.health-layout,.automation-layout{grid-template-columns:1fr}.health-kpis,.automation-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.import-mapping-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.health-hero{grid-template-columns:auto minmax(0,1fr)!important}.health-score-ring{grid-column:1/-1;justify-self:center}.health-kpis,.automation-kpis,.import-type-grid,.import-mapping-grid,.import-result-grid{grid-template-columns:1fr!important}.automation-rule,.automation-event{grid-template-columns:38px minmax(0,1fr)}}


/* =========================================================
   LiveGoOrder CRM v4.12.2 — MANUAL ORDER MODAL + SCROLLBARS
   Fixes nested scrollbars, horizontal overflow and responsive layout.
   ========================================================= */

:root{
  --lgo-scroll-track:rgba(91,50,116,.06);
  --lgo-scroll-thumb:#c6b5d2;
  --lgo-scroll-thumb-hover:#9c75b7;
}

/* ---------- Professional scrollbars ---------- */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--lgo-scroll-thumb) transparent;
}

.manual-order-layout,
.table-wrap,
.drawer-card,
.customer-suggestions,
.role-list,
.sidebar-nav,
.sidebar,
.modal-card:not(.manual-order-modal){
  scrollbar-width:thin;
  scrollbar-color:var(--lgo-scroll-thumb) transparent;
}

.manual-order-layout::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.drawer-card::-webkit-scrollbar,
.customer-suggestions::-webkit-scrollbar,
.role-list::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.modal-card:not(.manual-order-modal)::-webkit-scrollbar{
  width:9px;
  height:9px;
}

.manual-order-layout::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.drawer-card::-webkit-scrollbar-track,
.customer-suggestions::-webkit-scrollbar-track,
.role-list::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.modal-card:not(.manual-order-modal)::-webkit-scrollbar-track{
  background:transparent;
}

.manual-order-layout::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.drawer-card::-webkit-scrollbar-thumb,
.customer-suggestions::-webkit-scrollbar-thumb,
.role-list::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.modal-card:not(.manual-order-modal)::-webkit-scrollbar-thumb{
  background:var(--lgo-scroll-thumb);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}

.manual-order-layout::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.drawer-card::-webkit-scrollbar-thumb:hover,
.customer-suggestions::-webkit-scrollbar-thumb:hover,
.role-list::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.modal-card:not(.manual-order-modal)::-webkit-scrollbar-thumb:hover{
  background:var(--lgo-scroll-thumb-hover);
  border:2px solid transparent;
  background-clip:padding-box;
}

.manual-order-layout::-webkit-scrollbar-corner,
.table-wrap::-webkit-scrollbar-corner{
  background:transparent;
}

/* ---------- Modal shell: ONE vertical scroll area only ---------- */
#manualOrderModal{
  padding:clamp(12px,2vw,26px)!important;
  overflow:hidden!important;
}

#manualOrderModal .manual-order-modal{
  width:min(1180px,calc(100vw - 28px))!important;
  max-width:1180px!important;
  height:min(900px,calc(100dvh - 28px))!important;
  max-height:calc(100dvh - 28px)!important;
  padding:0!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(37,20,51,.28)!important;
}

#manualOrderModal .manual-order-head{
  position:relative!important;
  inset:auto!important;
  z-index:10!important;
  margin:0!important;
  padding:20px 24px 17px!important;
  min-width:0!important;
  background:
    radial-gradient(circle at 96% -20%,rgba(206,244,232,.85),transparent 34%),
    radial-gradient(circle at 74% 120%,rgba(229,205,247,.44),transparent 35%),
    linear-gradient(145deg,#fff,#fbf8fd)!important;
  border-bottom:1px solid #eee5f3!important;
}

#manualOrderModal .manual-order-head>div{
  min-width:0!important;
}

#manualOrderModal .manual-order-head h2{
  margin:2px 0 0!important;
  font-size:clamp(20px,2vw,27px)!important;
  line-height:1.15!important;
}

#manualOrderModal .manual-order-head p{
  max-width:760px;
  margin-top:7px!important;
  font-size:12px!important;
  line-height:1.5!important;
}

#manualOrderModal .manual-order-head>button{
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:14px!important;
  background:#f5eef9!important;
  color:#6d329e!important;
  box-shadow:none!important;
}

#manualOrderModal .manual-order-head>button:hover{
  background:#eee1f6!important;
  transform:none!important;
}

/* Body owns the scrolling. There is never a horizontal modal scrollbar. */
#manualOrderModal .manual-order-layout{
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  max-width:100%!important;
  max-height:none!important;
  padding:18px 22px 16px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}

/* ---------- Step cards ---------- */
#manualOrderModal .manual-step{
  width:100%!important;
  min-width:0!important;
  margin:0 0 14px!important;
  padding:17px!important;
  border-radius:18px!important;
  box-sizing:border-box!important;
}

#manualOrderModal .manual-step-head{
  min-width:0!important;
  align-items:center!important;
}

#manualOrderModal .manual-step-head>div{
  flex:1 1 auto!important;
  min-width:0!important;
}

#manualOrderModal .manual-step-head strong{
  font-size:15px!important;
}

#manualOrderModal .manual-step-head span:not(.step-number){
  font-size:11px!important;
  line-height:1.4!important;
}

#manualOrderModal .step-number{
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  font-size:13px!important;
}

#manualOrderModal #manualAddLine{
  margin-inline-start:auto!important;
  margin-left:0!important;
  flex:0 0 auto!important;
}

/* ---------- Article line: no intrinsic overflow ---------- */
#manualOrderModal .manual-lines{
  width:100%!important;
  min-width:0!important;
}

#manualOrderModal .manual-line{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:
    38px
    minmax(170px,1.25fr)
    minmax(190px,1.45fr)
    minmax(72px,.48fr)
    minmax(96px,.62fr)
    minmax(128px,.82fr)
    minmax(110px,.7fr)
    38px!important;
  gap:9px!important;
  align-items:end!important;
  padding:12px!important;
  border-radius:15px!important;
}

#manualOrderModal .manual-line>*{
  min-width:0!important;
}

#manualOrderModal .manual-line label{
  display:grid!important;
  gap:5px!important;
}

#manualOrderModal .manual-line select,
#manualOrderModal .manual-line input{
  width:100%!important;
  min-width:0!important;
  height:42px!important;
  margin:0!important;
  padding:8px 10px!important;
  font-size:11px!important;
  box-sizing:border-box!important;
}

#manualOrderModal .manual-line-number{
  width:38px!important;
  height:42px!important;
  border-radius:11px!important;
  font-size:12px!important;
}

#manualOrderModal .manual-line-stock,
#manualOrderModal .manual-line-total{
  min-width:0!important;
  min-height:42px!important;
}

#manualOrderModal .manual-stock{
  max-width:100%!important;
  min-height:32px!important;
  padding:6px 9px!important;
  font-size:9px!important;
  white-space:normal!important;
  line-height:1.25!important;
}

#manualOrderModal .manual-line-total strong{
  padding-top:7px!important;
  font-size:11px!important;
  white-space:nowrap;
}

#manualOrderModal .manual-remove-line{
  width:38px!important;
  height:42px!important;
  border-radius:11px!important;
  display:grid!important;
  place-items:center!important;
}

/* ---------- Order details ---------- */
#manualOrderModal .manual-details-grid{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}

#manualOrderModal .manual-details-grid>label{
  min-width:0!important;
}

#manualOrderModal .manual-details-grid input,
#manualOrderModal .manual-details-grid select,
#manualOrderModal .manual-details-grid textarea{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

#manualOrderModal .manual-note-field{
  grid-column:1 / -1!important;
}

#manualOrderModal .manual-note-field textarea{
  min-height:78px!important;
  resize:vertical!important;
}

/* ---------- Summary ---------- */
#manualOrderModal .manual-order-summary{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin:4px 0 0!important;
}

#manualOrderModal .manual-order-summary>div{
  min-width:0!important;
  padding:14px!important;
  border-radius:15px!important;
}

#manualOrderModal .manual-order-summary strong{
  overflow-wrap:anywhere;
}

/* ---------- Footer stays visible, never creates another scrollbar ---------- */
#manualOrderModal .manual-order-actions{
  position:relative!important;
  inset:auto!important;
  z-index:10!important;
  margin:0!important;
  padding:14px 22px calc(14px + env(safe-area-inset-bottom))!important;
  min-height:70px!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:10px!important;
  background:rgba(255,255,255,.97)!important;
  border-top:1px solid #eee5f3!important;
  backdrop-filter:blur(14px)!important;
}

#manualOrderModal .manual-order-actions .btn{
  flex:0 0 auto!important;
  min-height:44px!important;
}

#manualOrderModal .manual-order-actions #createManualOrder{
  min-width:190px!important;
}

/* ---------- RTL ---------- */
html[dir="rtl"] #manualOrderModal .manual-order-head,
html[dir="rtl"] #manualOrderModal .manual-step,
html[dir="rtl"] #manualOrderModal .manual-order-summary{
  text-align:right!important;
}

html[dir="rtl"] #manualOrderModal #manualAddLine{
  margin-inline-start:auto!important;
}

html[dir="rtl"] #manualOrderModal input[type="tel"],
html[dir="rtl"] #manualOrderModal input[type="email"],
html[dir="rtl"] #manualOrderModal input[type="number"],
html[dir="rtl"] #manualOrderModal input[type="datetime-local"]{
  direction:ltr!important;
}

/* ---------- Mid-size / small laptop ---------- */
@media(max-width:1120px){
  #manualOrderModal .manual-line{
    grid-template-columns:38px minmax(0,1fr) minmax(0,1fr) 38px!important;
    align-items:end!important;
  }

  #manualOrderModal .manual-line-number{
    grid-column:1!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-line>label:nth-of-type(1){
    grid-column:2!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-line>label:nth-of-type(2){
    grid-column:3!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-remove-line{
    grid-column:4!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-qty-field{
    grid-column:1 / 2!important;
    grid-row:2!important;
  }

  #manualOrderModal .manual-price-field{
    grid-column:2 / 3!important;
    grid-row:2!important;
  }

  #manualOrderModal .manual-line-stock{
    grid-column:3 / 4!important;
    grid-row:2!important;
  }

  #manualOrderModal .manual-line-total{
    grid-column:4 / 5!important;
    grid-row:2!important;
  }
}

/* ---------- Tablet ---------- */
@media(max-width:780px){
  #manualOrderModal{
    padding:0!important;
    align-items:stretch!important;
  }

  #manualOrderModal .manual-order-modal{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    border:0!important;
  }

  #manualOrderModal .manual-order-head{
    padding:15px 16px 13px!important;
  }

  #manualOrderModal .manual-order-layout{
    padding:13px 14px 14px!important;
    scrollbar-gutter:auto;
  }

  #manualOrderModal .manual-step{
    padding:13px!important;
  }

  #manualOrderModal .manual-line{
    grid-template-columns:34px minmax(0,1fr) 38px!important;
    gap:8px!important;
  }

  #manualOrderModal .manual-line-number{
    grid-column:1!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-line>label:nth-of-type(1){
    grid-column:2!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-remove-line{
    grid-column:3!important;
    grid-row:1!important;
  }

  #manualOrderModal .manual-line>label:nth-of-type(2){
    grid-column:1 / -1!important;
    grid-row:2!important;
  }

  #manualOrderModal .manual-qty-field{
    grid-column:1 / 2!important;
    grid-row:3!important;
  }

  #manualOrderModal .manual-price-field{
    grid-column:2 / -1!important;
    grid-row:3!important;
  }

  #manualOrderModal .manual-line-stock{
    grid-column:1 / -1!important;
    grid-row:4!important;
  }

  #manualOrderModal .manual-line-total{
    grid-column:1 / -1!important;
    grid-row:5!important;
    padding-top:3px!important;
  }

  #manualOrderModal .manual-details-grid{
    grid-template-columns:1fr 1fr!important;
  }

  #manualOrderModal .manual-details-grid>label:nth-child(3),
  #manualOrderModal .manual-note-field{
    grid-column:1 / -1!important;
  }

  #manualOrderModal .manual-order-summary{
    grid-template-columns:1fr 1fr!important;
  }

  #manualOrderModal .manual-order-actions{
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
  }
}

/* ---------- Phone ---------- */
@media(max-width:520px){
  #manualOrderModal .manual-order-head{
    padding:13px 12px 11px!important;
  }

  #manualOrderModal .manual-order-head h2{
    font-size:19px!important;
    padding-inline-end:46px!important;
  }

  #manualOrderModal .manual-order-head p{
    padding-inline-end:8px!important;
    font-size:11px!important;
  }

  #manualOrderModal .manual-order-head>button{
    position:absolute!important;
    top:10px!important;
    right:10px!important;
    width:40px!important;
    height:40px!important;
  }

  html[dir="rtl"] #manualOrderModal .manual-order-head>button{
    right:auto!important;
    left:10px!important;
  }

  #manualOrderModal .manual-order-layout{
    padding:10px!important;
  }

  #manualOrderModal .manual-step{
    padding:11px!important;
    border-radius:14px!important;
  }

  #manualOrderModal .manual-step-head{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }

  #manualOrderModal #manualAddLine{
    width:100%!important;
    margin:4px 0 0!important;
  }

  #manualOrderModal .customer-mode-switch{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
  }

  #manualOrderModal .customer-mode{
    width:100%!important;
  }

  #manualOrderModal .manual-line{
    grid-template-columns:1fr!important;
  }

  #manualOrderModal .manual-line-number,
  #manualOrderModal .manual-line>label:nth-of-type(1),
  #manualOrderModal .manual-line>label:nth-of-type(2),
  #manualOrderModal .manual-qty-field,
  #manualOrderModal .manual-price-field,
  #manualOrderModal .manual-line-stock,
  #manualOrderModal .manual-line-total,
  #manualOrderModal .manual-remove-line{
    grid-column:1!important;
    grid-row:auto!important;
  }

  #manualOrderModal .manual-line-number{
    width:100%!important;
    height:30px!important;
  }

  #manualOrderModal .manual-remove-line{
    width:100%!important;
    height:40px!important;
  }

  #manualOrderModal .manual-details-grid,
  #manualOrderModal .manual-order-summary{
    grid-template-columns:1fr!important;
  }

  #manualOrderModal .manual-details-grid>label,
  #manualOrderModal .manual-note-field{
    grid-column:1!important;
  }

  #manualOrderModal .manual-order-actions{
    display:grid!important;
    grid-template-columns:1fr 1.35fr!important;
    gap:8px!important;
  }

  #manualOrderModal .manual-order-actions .btn,
  #manualOrderModal .manual-order-actions #createManualOrder{
    width:100%!important;
    min-width:0!important;
  }
}

/* =========================================================
   v4.12.3 — Stock KPI single-row + responsive fix
   ========================================================= */
#page-stock .stock-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(8px,1vw,14px)!important;
  width:100%!important;
  min-width:0!important;
  margin-bottom:14px!important;
}

#page-stock .stock-kpi-grid>.hero-kpi{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:116px!important;
  padding:clamp(12px,1.15vw,17px)!important;
  gap:clamp(9px,.8vw,13px)!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

#page-stock .stock-kpi-grid>.hero-kpi>.kpi-icon{
  flex:0 0 clamp(44px,3.7vw,56px)!important;
  width:clamp(44px,3.7vw,56px)!important;
  height:clamp(44px,3.7vw,56px)!important;
}

#page-stock .stock-kpi-grid>.hero-kpi>div:last-child{
  min-width:0!important;
  flex:1 1 auto!important;
}

#page-stock .stock-kpi-grid>.hero-kpi span,
#page-stock .stock-kpi-grid>.hero-kpi small{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

@media(max-width:1100px){
  #page-stock .stock-kpi-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:8px!important;
  }

  #page-stock .stock-kpi-grid>.hero-kpi{
    min-height:104px!important;
    padding:11px!important;
    gap:8px!important;
  }

  #page-stock .stock-kpi-grid>.hero-kpi>.kpi-icon{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
  }
}

@media(max-width:900px){
  #page-stock .stock-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #page-stock .stock-kpi-grid>.hero-kpi{
    min-height:92px!important;
  }
}

@media(max-width:520px){
  #page-stock .stock-kpi-grid{
    grid-template-columns:1fr!important;
  }

  #page-stock .stock-kpi-grid>.hero-kpi{
    min-height:82px!important;
  }
}


/* v4.12.7 product duplication actions */
.product-card-actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.product-card-actions .btn{min-width:0}
@media(max-width:520px){.product-card-actions{display:grid;grid-template-columns:1fr}.product-card-actions .btn{width:100%}}

/* v4.12.8 catalogue / variant / stock management */
.inline-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.variant-row-actions{grid-template-columns:1.2fr repeat(5,1fr) minmax(250px,auto)}
.variant-modal-actions{align-items:center}
.variant-modal-actions .modal-action-spacer{flex:1}
#stockBody td:last-child{white-space:nowrap}
@media(max-width:900px){
  .variant-row-actions{grid-template-columns:1fr 1fr}
  .variant-row-actions .inline-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:520px){
  .variant-row-actions{display:flex;flex-direction:column;align-items:stretch}
  .variant-row-actions .inline-actions{display:grid;grid-template-columns:1fr 1fr}
  .variant-row-actions .inline-actions .btn{width:100%}
  .variant-modal-actions .modal-action-spacer{display:none}
}

/* v4.12.9 catalogue integrity hardening */
.variant-row-actions{grid-template-columns:minmax(220px,1.8fr) minmax(110px,.8fr) minmax(100px,.7fr) minmax(90px,.7fr) minmax(300px,auto)}
.variant-matrix-summary{padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft,#faf8fc);margin-bottom:14px}
.variant-attribute-chips{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0}
@media(max-width:1100px){.variant-row-actions{grid-template-columns:1fr 1fr}.variant-row-actions .inline-actions{grid-column:1/-1}}
@media(max-width:650px){.variant-row-actions{display:flex;flex-direction:column;align-items:stretch}.variant-row-actions .inline-actions{display:grid;grid-template-columns:1fr 1fr}}
.archived-variants{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.archived-variants summary{cursor:pointer;font-weight:700;color:var(--muted);padding:6px 0}
.archived-variants-list{margin-top:8px;opacity:.9}
.stock-movement-snapshot{margin:10px 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft,#faf8fc)}
.stock-snapshot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.stock-snapshot-grid span{font-size:12px}
@media(max-width:650px){.stock-snapshot-grid{grid-template-columns:1fr 1fr}}


/* =========================================================
   LiveGoOrder CRM v4.12.11 — ATTRIBUTE MODAL UX / RESPONSIVE
   Dedicated compact layout for attribute values. Avoids the
   generic variant-row grid that made actions stack vertically
   and prevents the sticky footer from covering the last value.
   ========================================================= */
#attributeModal .attribute-modal-card{
  width:min(980px,calc(100vw - 32px))!important;
  padding-bottom:0!important;
  overflow:auto!important;
}
#attributeModal .attribute-modal-card>.modal-head{
  margin-bottom:14px!important;
}
#attributeModal #attributeValuesSection{
  display:block;
  margin-top:14px;
  padding-bottom:18px;
}
#attributeModal #attributeValuesSection.hidden{display:none!important}
#attributeModal .section-title.with-action{
  position:sticky;
  top:66px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 12px;
  margin:0;
  background:#fff;
}
#attributeModal #attributeValuesList{
  display:grid;
  gap:9px;
  padding-bottom:84px;
}
#attributeModal .attribute-value-row{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(180px,.9fr) auto;
  align-items:center;
  gap:14px;
  min-height:72px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fcfafd;
  box-sizing:border-box;
}
#attributeModal .attribute-value-main{
  min-width:0;
  display:grid;
  gap:4px;
}
#attributeModal .attribute-value-main strong{
  font-size:13px;
  line-height:1.25;
  overflow-wrap:anywhere;
}
#attributeModal .attribute-value-code{
  color:var(--muted);
  font-size:11px;
  overflow-wrap:anywhere;
}
#attributeModal .attribute-value-meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
#attributeModal .attribute-value-order{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
#attributeModal .status-pill.compact{
  min-height:26px;
  padding:4px 9px;
  font-size:10px;
  white-space:nowrap;
}
#attributeModal .status-pill.compact.muted{
  background:#f3eff6;
  color:#7f7188;
  border-color:#e8dfea;
}
#attributeModal .attribute-value-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:nowrap;
}
#attributeModal .attribute-value-actions .btn{
  min-width:94px;
  width:auto;
  margin:0;
  white-space:nowrap;
}
#attributeModal .modal-actions{
  margin-left:-20px!important;
  margin-right:-20px!important;
  padding:14px 20px 20px!important;
  bottom:0!important;
  border-top:1px solid rgba(236,230,241,.85);
  background:#fff!important;
}
#attributeModal .attribute-values-empty{
  padding:18px;
  border:1px dashed var(--border);
  border-radius:14px;
  text-align:center;
}
@media(max-width:820px){
  #attributeModal .attribute-value-row{
    grid-template-columns:minmax(0,1fr) auto;
  }
  #attributeModal .attribute-value-meta{
    grid-column:1;
  }
  #attributeModal .attribute-value-actions{
    grid-column:2;
    grid-row:1/3;
    display:grid;
    grid-template-columns:1fr;
  }
  #attributeModal .attribute-value-actions .btn{min-width:110px}
}
@media(max-width:600px){
  #attributeModal .attribute-modal-card{
    width:100vw!important;
    max-width:100vw!important;
    padding:16px!important;
    padding-bottom:0!important;
  }
  #attributeModal .section-title.with-action{
    top:58px;
  }
  #attributeModal #attributeValuesList{
    padding-bottom:116px;
  }
  #attributeModal .attribute-value-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
  }
  #attributeModal .attribute-value-meta,
  #attributeModal .attribute-value-actions{
    grid-column:1;
    grid-row:auto;
  }
  #attributeModal .attribute-value-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #attributeModal .attribute-value-actions .btn{
    width:100%;
    min-width:0;
  }
  #attributeModal .attribute-value-actions .btn.danger{
    grid-column:1/-1;
  }
  #attributeModal .modal-actions{
    margin-left:-16px!important;
    margin-right:-16px!important;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;
  }
}

/* v4.12.12 — product category management */
.panel-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.category-manager-card{max-width:900px}
.category-form{padding-bottom:18px;border-bottom:1px solid var(--line,#eadff4);margin-bottom:18px}
.category-list{display:grid;gap:10px;max-height:42vh;overflow:auto;padding-right:4px}
.category-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line,#eadff4);border-radius:16px;background:#fff}
.category-main{display:flex;flex-direction:column;gap:4px;min-width:0}.category-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:720px){.panel-actions{width:100%}.panel-actions .btn{flex:1}.category-row{grid-template-columns:1fr auto}.category-actions{grid-column:1/-1;justify-content:stretch}.category-actions .btn{flex:1}.category-manager-card{width:min(96vw,900px)}}

/* =========================================================
   LiveGoOrder CRM v4.12.15 — Dashboard / Order status / Health UI fix
   ========================================================= */

/* Dashboard filters: never push the Reset button outside the viewport. */
#page-dashboard .dashboard-filter-card{
  overflow:visible!important;
}
#page-dashboard .dashboard-filter-grid{
  display:grid!important;
  grid-template-columns:minmax(240px,1.55fr) repeat(3,minmax(135px,1fr))!important;
  gap:10px!important;
  align-items:end!important;
  width:100%!important;
  max-width:100%!important;
}
#page-dashboard .dashboard-filter-grid > label,
#page-dashboard .dashboard-filter-grid > button{
  min-width:0!important;
  max-width:100%!important;
}
#page-dashboard .dashboard-filter-grid input,
#page-dashboard .dashboard-filter-grid select{
  width:100%!important;
  min-width:0!important;
}
#page-dashboard #dashboardReset{
  width:100%!important;
  min-width:0!important;
  justify-self:stretch!important;
  min-height:42px!important;
  white-space:nowrap!important;
}
@media (max-width:1180px){
  #page-dashboard .dashboard-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width:650px){
  #page-dashboard .dashboard-filter-grid{
    grid-template-columns:1fr!important;
  }
}

/* Orders: make every business status visually distinct and persistent. */
#page-orders .inline-status-select{
  min-width:142px!important;
  border-width:1px!important;
  border-style:solid!important;
  border-radius:999px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
#page-orders .inline-status-select.status-order-new{
  background:#eaf2ff!important;color:#2357c8!important;border-color:#bcd0ff!important;
}
#page-orders .inline-status-select.status-order-waiting{
  background:#fff1de!important;color:#b96100!important;border-color:#ffd3a0!important;
}
#page-orders .inline-status-select.status-order-confirmed{
  background:#f1e8ff!important;color:#6e3dcb!important;border-color:#d8c3ff!important;
}
#page-orders .inline-status-select.status-order-prepared{
  background:#fff8d8!important;color:#967000!important;border-color:#efdf93!important;
}
#page-orders .inline-status-select.status-order-delivered{
  background:#e7f9ef!important;color:#187c4f!important;border-color:#bdeacf!important;
}
#page-orders .inline-status-select.status-order-cancelled{
  background:#ffe8ee!important;color:#b83d60!important;border-color:#f4b8c9!important;
}
#page-orders .badge.status-order-new{background:#eaf2ff!important;color:#2357c8!important;border:1px solid #bcd0ff!important}
#page-orders .badge.status-order-waiting{background:#fff1de!important;color:#b96100!important;border:1px solid #ffd3a0!important}
#page-orders .badge.status-order-confirmed{background:#f1e8ff!important;color:#6e3dcb!important;border:1px solid #d8c3ff!important}
#page-orders .badge.status-order-prepared{background:#fff8d8!important;color:#967000!important;border:1px solid #efdf93!important}
#page-orders .badge.status-order-delivered{background:#e7f9ef!important;color:#187c4f!important;border:1px solid #bdeacf!important}
#page-orders .badge.status-order-cancelled{background:#ffe8ee!important;color:#b83d60!important;border:1px solid #f4b8c9!important}

/* Account health: readable hierarchy, spacing and no concatenated labels/values. */
#page-health .health-layout{
  align-items:start!important;
}
#page-health .health-check{
  min-height:68px!important;
  padding:13px 14px!important;
}
#page-health .health-check > div,
#page-health .health-action > div,
#page-health .health-mini-kpi > div{
  min-width:0!important;
}
#page-health .health-check strong,
#page-health .health-action strong,
#page-health .health-mini-kpi strong{
  display:block!important;
  line-height:1.3!important;
}
#page-health .health-check small,
#page-health .health-action small,
#page-health .health-mini-kpi small{
  display:block!important;
  line-height:1.45!important;
  margin-top:3px!important;
  overflow-wrap:anywhere!important;
}
#page-health .health-check-state{
  margin-left:10px!important;
  white-space:nowrap!important;
  line-height:1.3!important;
}
#page-health .health-actions{
  gap:10px!important;
}
#page-health .health-action{
  grid-template-columns:32px minmax(0,1fr) 20px!important;
  gap:11px!important;
  min-height:70px!important;
  padding:12px 13px!important;
}
#page-health .health-action strong{
  margin-bottom:2px!important;
}
#page-health .health-kpis{
  margin-top:14px!important;
}
#page-health .health-mini-kpi{
  min-height:74px!important;
  padding:14px 15px!important;
}
#page-health .health-mini-kpi small{
  color:#766780!important;
  margin-top:0!important;
}
#page-health .health-mini-kpi strong{
  margin-top:4px!important;
  font-size:16px!important;
}
@media(max-width:1050px){
  #page-health .health-layout{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  #page-health .health-check{
    grid-template-columns:36px minmax(0,1fr)!important;
  }
  #page-health .health-check-state{
    grid-column:2!important;
    margin-left:0!important;
    margin-top:4px!important;
  }
}

/* =========================================================
   v4.12.17 — Order lifecycle / delivery / return pipeline
   ========================================================= */
.badge.status-order-in-delivery,
.inline-status-select.status-order-in-delivery,
.status-row.status-order-in-delivery .progress i{background:#E8F4FF;color:#1469A8;border-color:#B8DAF3}
.badge.status-order-returned,
.inline-status-select.status-order-returned,
.status-row.status-order-returned .progress i{background:#FFF0E9;color:#B8572B;border-color:#F5C7B2}
.inline-status-select.status-order-in-delivery{background-color:#E8F4FF!important;color:#1469A8!important;border-color:#B8DAF3!important}
.inline-status-select.status-order-returned{background-color:#FFF0E9!important;color:#B8572B!important;border-color:#F5C7B2!important}
.status-row.status-order-in-delivery .progress,
.status-row.status-order-returned .progress{background:#F4F0F7}
.status-row.status-order-in-delivery .progress i{background:linear-gradient(90deg,#8BCBFA,#1469A8)}
.status-row.status-order-returned .progress i{background:linear-gradient(90deg,#F5B692,#B8572B)}
#page-orders .inline-status-select.status-order-in-delivery{background:#e8f4ff!important;color:#1469a8!important;border-color:#b8daf3!important}
#page-orders .inline-status-select.status-order-returned{background:#fff0e9!important;color:#b8572b!important;border-color:#f5c7b2!important}
#page-orders .badge.status-order-in-delivery{background:#e8f4ff!important;color:#1469a8!important;border:1px solid #b8daf3!important}
#page-orders .badge.status-order-returned{background:#fff0e9!important;color:#b8572b!important;border:1px solid #f5c7b2!important}

.order-lifecycle-wrap{margin:14px 0 16px;padding:16px;border:1px solid #e7dced;border-radius:18px;background:linear-gradient(135deg,#fff,#fbf8ff)}
.order-lifecycle{display:flex;flex-direction:column;gap:10px}
.lifecycle-main{display:flex;align-items:flex-start;gap:0;width:100%;overflow-x:auto;padding:4px 2px 8px}
.lifecycle-step{min-width:112px;display:flex;align-items:flex-start;gap:9px;position:relative}
.lifecycle-step>span{flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:12px;background:#f4eff8;color:#877b91;border:1px solid #e4d8ea}
.lifecycle-step>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lifecycle-step b{font-size:12px;line-height:1.25;color:#716678;white-space:nowrap}
.lifecycle-step small{font-size:9px;color:#9d91a5;white-space:nowrap}
.lifecycle-step.done>span{background:#e7f9ef;color:#198158;border-color:#bce7ce}
.lifecycle-step.done b{color:#216d4f}
.lifecycle-step.active>span{background:#6d2fb1;color:#fff;border-color:#6d2fb1;box-shadow:0 0 0 5px rgba(109,47,177,.09)}
.lifecycle-step.active b{color:#4e1e80}
.lifecycle-line{height:2px;flex:1 1 40px;min-width:26px;background:#eadff0;margin:13px 8px 0;border-radius:99px}
.lifecycle-line.done{background:#81d4aa}
.lifecycle-exception{margin-top:4px;padding:9px 11px;border-radius:11px;font-size:11px;font-weight:700}
.lifecycle-exception.waiting{background:#fff5df;color:#9a6100;border:1px solid #f3d89b}
.lifecycle-exception.cancelled{background:#ffeef2;color:#a33e5a;border:1px solid #f1c4d0}
.lifecycle-exception.returned{background:#fff0e9;color:#a84f29;border:1px solid #f2c5b1}

.order-logistics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 12px}
.order-logistics-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;color:#53465d}
.order-return-reason{grid-column:1/-1}
.order-payment-summary{margin:10px 0 16px}
.payment-state{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:14px;border:1px solid #eadff0;background:#faf8fc}
.payment-state>div:first-child{display:flex;flex-direction:column;gap:3px}
.payment-state strong{font-size:12px}.payment-state span{font-size:10px;color:#7c7085}
.payment-state.paid{background:#ecfaf2;border-color:#bde9ce}.payment-state.paid strong{color:#177249}
.payment-state.unpaid{background:#fff8e8;border-color:#f2ddac}.payment-state.unpaid strong{color:#9a6800}
.payment-finance{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}.payment-finance b{color:#2f2438}.payment-finance .loss,.payment-finance .loss b{color:#b44c36}
.stock-line-status.is-dispatched{background:#eef7ff;color:#17699e;border-color:#c7e2f5}
.stock-line-status.is-returned{background:#fff1eb;color:#a6512d;border-color:#efc8b7}
.order-stock-summary.dispatched{background:#eef7ff;border-color:#c7e2f5}.order-stock-summary.dispatched strong{color:#17699e}
.order-stock-summary.returned{background:#fff1eb;border-color:#efc8b7}.order-stock-summary.returned strong{color:#a6512d}

.dashboard-secondary-kpis{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:1350px){.dashboard-secondary-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.dashboard-secondary-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.order-logistics-grid{grid-template-columns:1fr}.order-return-reason{grid-column:auto}.payment-state{align-items:flex-start;flex-direction:column}.payment-finance{justify-content:flex-start}}
@media (max-width:620px){.dashboard-secondary-kpis{grid-template-columns:1fr}.order-lifecycle-wrap{padding:12px}.lifecycle-step{min-width:104px}.lifecycle-step b{font-size:11px}}
.order-loss-text{color:#b44c36!important;font-weight:800}.order-paid-text{color:#187c4f!important;font-weight:800}

/* ===== LiveGoOrder v4.13.0 · Livraison connectée ===== */
.shipping-hero{background:linear-gradient(135deg,#f5ecff 0%,#ecf8ff 55%,#edfff7 100%)}
.shipping-hero-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.shipping-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:16px 0}
.shipping-kpi{min-width:0;padding:18px;border:1px solid #eadff3;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(46,18,74,.04)}
.shipping-kpi span{display:block;color:#776884;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.shipping-kpi strong{display:block;font-size:30px;color:#231337;margin:6px 0 2px}.shipping-kpi small{color:#8c8096}.shipping-kpi.danger{background:#fff2f4;border-color:#ffd4dc}.shipping-kpi.warn{background:#fff9e9;border-color:#f8e7ab}
.shipping-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:16px;margin:16px 0}
.shipping-provider-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.shipping-provider-card{border:1px solid #e8dced;border-radius:20px;padding:16px;background:#fcfaff;display:flex;flex-direction:column;gap:13px;min-width:0;transition:.18s ease}.shipping-provider-card.connected{background:linear-gradient(145deg,#fff 20%,#f1fff8);border-color:#ccefe0}.shipping-provider-card:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(62,25,100,.07)}
.shipping-provider-head{display:flex;gap:12px;align-items:center}.shipping-provider-head h3{margin:0 0 3px;font-size:15px}.shipping-provider-head small{color:#8b7e95;line-height:1.35}.shipping-provider-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:11px;background:#efe3ff;color:#652ab2;flex:0 0 auto}.shipping-provider-mark.fdg{background:#eee7ff}.shipping-provider-mark.intigo{background:#dffbf0;color:#177d65}.shipping-provider-mark.aramex{background:#ffe9e7;color:#bf3e36}.shipping-provider-mark.colissimo{background:#e3f6ea;color:#157347}.shipping-provider-mark.zed{background:#e5f0ff;color:#2159a8}
.shipping-provider-tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.ship-tag,.ship-conn-test{font-size:10px;border-radius:999px;padding:5px 8px;background:#f2edf5;color:#74677c;font-weight:800}.ship-tag.default{background:#ede1ff;color:#6326aa}.ship-tag.active,.ship-conn-test.ok{background:#e4faef;color:#16785a}.ship-conn-test.bad{background:#ffe8eb;color:#b82c43}.shipping-conn-message{font-size:11px;color:#7c6d86;margin:0;word-break:break-word}.shipping-provider-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.shipping-smart-rules{display:grid;gap:10px}.shipping-smart-rules>div{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:14px;background:#faf7fc;border:1px solid #eee4f2}.shipping-smart-rules b{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eee0ff;color:#652bab}.shipping-smart-rules span{display:grid;gap:3px}.shipping-smart-rules small{color:#887a91;line-height:1.35}
.shipping-toolbar{grid-template-columns:minmax(180px,240px) minmax(180px,240px)!important}.shipping-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:900;white-space:nowrap}.shipping-status.success{background:#dff8ea;color:#15744f}.shipping-status.danger{background:#ffe4e9;color:#b22a43}.shipping-status.info{background:#e4f2ff;color:#2369a5}.shipping-status.purple{background:#f0e5ff;color:#6324a9}.shipping-status.warn{background:#fff3d5;color:#976318}.shipping-status.muted{background:#efedf1;color:#716776}.cell-sub{display:block;color:#958a9d;font-size:10px;margin-top:3px;max-width:250px}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.empty-cell{text-align:center!important;color:#8c8096;padding:28px!important}
.shipping-connection-card{max-width:900px}.shipping-form-section{padding:2px 0 16px}.field-help{font-size:11px;color:#887a91;margin:-5px 0 12px}
.order-shipping-panel{margin:14px 0;padding:14px 16px;border:1px solid #e3d6ec;border-radius:16px;background:linear-gradient(135deg,#fbf7ff,#f5fbff)}.order-shipping-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.order-shipping-head>div{display:grid;gap:3px}.order-shipping-head strong{font-size:14px}.order-shipping-head small{color:#877990;max-width:620px}.section-mini{font-size:9px;letter-spacing:.11em;font-weight:900;color:#8b71a0}.order-shipping-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.shipping-mini-timeline{margin-top:12px;border-top:1px solid #e8deee;padding-top:9px;display:grid;gap:7px}.shipping-mini-timeline>div{display:flex;gap:9px;align-items:flex-start}.shipping-mini-timeline>div>span{width:8px;height:8px;border-radius:50%;background:#7a36b7;margin-top:5px}.shipping-mini-timeline p{margin:0;display:grid;gap:1px}.shipping-mini-timeline small{color:#8c8096}.shipping-error-inline{color:#ae2b43;font-size:12px}
@media(max-width:1200px){.shipping-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.shipping-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.shipping-layout{grid-template-columns:1fr}}
@media(max-width:760px){.shipping-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.shipping-provider-grid{grid-template-columns:1fr}.shipping-toolbar{grid-template-columns:1fr!important}.order-shipping-head{flex-direction:column}.shipping-kpi:last-child{grid-column:1/-1}}
@media(max-width:470px){.shipping-kpis{grid-template-columns:1fr}.shipping-kpi:last-child{grid-column:auto}}
.fdg-locality-helper{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(180px,.8fr);gap:8px;align-items:end}.fdg-locality-helper label{margin:0}.fdg-locality-helper select,.fdg-locality-helper button{min-height:44px}@media(max-width:760px){.fdg-locality-helper{grid-template-columns:1fr}.fdg-locality-helper.span-2{grid-column:auto}}

.ship-tag.info{background:#e8f2ff;color:#245b9b;border-color:#c9def8}

/* =========================================================
   v4.14.1 — QA CSS 360° / layout hardening
   Objectif : éliminer les décalages, débordements et ruptures
   entre Dashboard, Lives, Livraison, Santé, Imports,
   Automatisations, Clients, Commandes, Produits, Stock,
   Attributs, Équipe, drawers et modales.
   ========================================================= */

/* ---------- 1. Socle viewport / anti-débordement ---------- */
html{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  scrollbar-gutter:stable;
}
body{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
}
#app,
.app-shell,
.content-shell,
main,
.page,
.page>*,
.panel,
.page-hero,
.welcome-banner{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
img,svg,video,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}

/* ---------- 2. Shell desktop fiable ---------- */
.app-shell{
  width:100%;
  grid-template-columns:clamp(232px,15vw,270px) minmax(0,1fr);
  align-items:start;
}
.sidebar{
  width:100%;
  min-width:0;
  overflow:hidden;
}
.sidebar-scroll{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
.nav,.workspace-pill,.profile-mini{min-width:0}
.nav-label,.workspace-copy,.profile-mini-copy{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.content-shell{width:100%;overflow:clip}
.topbar{
  width:100%;
  min-width:0;
  padding-inline:clamp(18px,2vw,32px);
  gap:16px;
}
.topbar-copy{min-width:0;flex:1 1 auto}
.topbar-copy h1,.topbar-copy p{overflow-wrap:anywhere}
.top-actions{min-width:0;flex:0 1 auto;justify-content:flex-end}
main{
  width:100%;
  min-width:0;
  padding:clamp(18px,2vw,30px) clamp(18px,2vw,32px) clamp(28px,3vw,44px);
}
.page.active{width:100%;min-width:0}

/* ---------- 3. En-têtes / panneaux / actions ---------- */
.page-hero{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.page-hero>div{min-width:0}
.page-hero>button,.page-hero>.btn{justify-self:end}
.panel{width:100%;overflow:visible}
.panel-head{
  width:100%;
  min-width:0;
  flex-wrap:wrap;
}
.panel-head>div:first-child{flex:1 1 280px;min-width:0}
.panel-head>.btn,.panel-head>.panel-actions{flex:0 0 auto}
.panel-actions{min-width:0;justify-content:flex-end}
.btn{min-height:38px;line-height:1.2;white-space:normal}
.btn.full{width:100%}

/* ---------- 4. Formulaires / toolbars ---------- */
.toolbar,
.team-toolbar,
.shipping-toolbar,
.order-filter-grid,
.dashboard-filter-grid,
.manual-details-grid,
.detail-grid{
  width:100%;
  min-width:0;
}
.toolbar{
  grid-template-columns:minmax(220px,1fr) repeat(3,minmax(140px,auto));
}
.toolbar.compact{grid-template-columns:minmax(180px,1fr) auto}
.toolbar label,.toolbar input,.toolbar select,.toolbar button,
.order-filter-grid label,.dashboard-filter-grid label,
.detail-grid label,.team-form-grid label{
  min-width:0;
}
label>input,label>select,label>textarea,
.detail-grid input,.detail-grid select,.detail-grid textarea,
.team-form-grid input,.team-form-grid select,.team-form-grid textarea{
  width:100%;
  min-width:0;
}
textarea{resize:vertical}

/* ---------- 5. Tables : jamais de page étirée ---------- */
.table-wrap{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{
  width:100%;
  max-width:none;
  border-collapse:separate;
  border-spacing:0;
}
.table-wrap th,.table-wrap td{vertical-align:middle}
.table-wrap th{white-space:nowrap}
.table-wrap td{overflow-wrap:anywhere}
.row-actions{min-width:max-content}

/* ---------- 6. Dashboard ---------- */
#page-dashboard,
.dashboard-zone,
.dashboard-bento-grid,
.dashboard-performance-grid,
.dashboard-side-stack,
.dashboard-bento-main,
.dashboard-bento-side,
.dashboard-recent-grid{
  min-width:0;
  max-width:100%;
}
.dashboard-executive-kpis,
.dashboard-secondary-kpis,
.hero-grid,
.stats-grid{
  width:100%;
  min-width:0;
}
.hero-kpi,.stat-card,.dashboard-bento-card,.recent-order-card{min-width:0}
.hero-kpi strong,.stat-card strong{overflow-wrap:anywhere}
.dashboard-panel-main .bar-chart{width:100%;min-width:0}
.dashboard-scroll-list{max-width:100%}

/* ---------- 7. Lives ---------- */
#page-lives .live-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.live-card,.live-detail-panel,.live-detail-grid,.detail-section{min-width:0}
.live-card .live-top>*{min-width:0}
.live-card h3,.live-card p{overflow-wrap:anywhere}
.live-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}
.capture-table{min-width:920px}
.capture-table .comments-column{min-width:300px}

/* ---------- 8. Livraison ---------- */
#page-shipping,.shipping-layout,.shipping-provider-grid,.shipping-kpis{min-width:0;max-width:100%}
.shipping-provider-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.shipping-provider-card,.shipping-provider-head>div{min-width:0}
.shipping-provider-head h3,.shipping-provider-head small,.shipping-conn-message{overflow-wrap:anywhere}
.shipping-provider-actions .btn{flex:1 1 120px}
.shipping-layout>.panel{min-width:0}
#page-shipping .table-wrap table{min-width:980px}

/* ---------- 9. Santé / Imports / Automatisations ---------- */
.health-layout,.automation-layout,.health-kpis,.automation-kpis,
.import-type-grid,.import-mapping-grid,.import-result-grid{min-width:0;max-width:100%}
.health-check,.health-action,.automation-rule,.automation-event,.import-type-card{min-width:0}
.health-check>div,.health-action>div,.automation-rule>div,.automation-event>div{min-width:0}
.import-summary{flex-wrap:wrap}
#importPreview .table-wrap table{min-width:720px}

/* ---------- 10. Clients + drawer 360 ---------- */
#page-customers .toolbar{grid-template-columns:minmax(220px,1fr) repeat(3,minmax(130px,auto))}
#page-customers .table-wrap table{min-width:900px}
.customer-360-drawer{
  width:min(920px,100vw);
  max-width:100vw;
  min-width:0;
}
.customer-360-hero,.customer-360-stats,.customer-smart-grid,.customer-overview-grid,
.customer-tabs,.customer-tab-panel,.customer-profile-grid{min-width:0;max-width:100%}
.customer-tabs{overflow-x:auto;overscroll-behavior-inline:contain}
.customer-tabs>*{flex:0 0 auto}
.customer-360-hero #dMeta{overflow-wrap:anywhere}

/* ---------- 11. Commandes ---------- */
#page-orders .order-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#page-orders .table-wrap table{min-width:1040px}
.order-logistics-grid,.order-payment-summary,.order-shipping-panel{min-width:0}
.order-shipping-head>div{min-width:0}
.lifecycle-main{max-width:100%}
#orderModal .modal-card{min-width:0}

/* ---------- 12. Produits ---------- */
#page-products .product-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.product-card,.product-body,.product-head,.product-head>div{min-width:0}
.product-head h3,.sku{overflow-wrap:anywhere}
.product-meta{grid-template-columns:repeat(3,minmax(0,1fr))}
.product-card-actions,.variant-row-actions{min-width:0}

/* ---------- 13. Stock ---------- */
#page-stock .stock-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
#page-stock .inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#page-stock .inventory-grid>.panel{min-width:0}
#page-stock .table-wrap table{min-width:900px}
#page-stock .waiting-list-table{min-width:860px}
#page-stock .stock-movements-table{min-width:760px}
.stock-kpi-grid .hero-kpi{min-width:0}

/* ---------- 14. Attributs / variantes ---------- */
#page-attributes .attribute-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.attribute-card,.product-attribute-block,.product-attribute-head{min-width:0}
.attribute-values,.value-check-grid{max-width:100%}
.attribute-value-chip,.value-check{max-width:100%;overflow-wrap:anywhere}

/* ---------- 15. Équipe / RBAC ---------- */
#page-team,.team-kpi-grid,.team-user-grid,.team-bottom-grid,.roles-layout,.permission-matrix{min-width:0;max-width:100%}
.team-user-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.team-user-card,.team-user-main,.team-user-main>div:last-child{min-width:0}
.team-user-actions .btn{flex:1 1 120px}
.team-user-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
.roles-layout{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}
.role-list-row{min-width:0}
.permission-matrix section{min-width:0}

/* ---------- 16. Modales / drawers ---------- */
.modal{overflow:hidden}
.modal-card,
.modal-card.wide,
.modal-card.extra-wide,
.modal-card.xl,
.shipping-connection-card,
.category-manager-card{
  min-width:0;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  overflow:auto;
  overscroll-behavior:contain;
}
.drawer{overflow:hidden}
.drawer-card{max-width:100vw;min-width:0;overscroll-behavior:contain}
.modal-head{gap:12px}
.modal-head>div{min-width:0;flex:1 1 auto}
.modal-head h2,.modal-head p{overflow-wrap:anywhere}
.modal-actions{flex-wrap:wrap}

/* ---------- 17. Login ---------- */
.login-screen{width:100%;min-width:0}
.login-visual,.login-card{min-width:0}
.login-card{max-width:calc(100vw - 32px)}
.login-brand-card h2{font-size:clamp(30px,3.2vw,42px)}

/* ---------- 18. Laptop ---------- */
@media(max-width:1280px){
  .app-shell{grid-template-columns:220px minmax(0,1fr)}
  .topbar{padding-inline:20px}
  main{padding-inline:20px}
  .shipping-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #page-stock .stock-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #page-stock .stock-kpi-grid>.hero-kpi:nth-last-child(-n+2){grid-column:auto}
  #page-orders .order-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .team-user-grid{grid-template-columns:1fr}
}

/* ---------- 19. Tablet / mobile nav ---------- */
@media(max-width:850px){
  html{scrollbar-gutter:auto}
  body{overflow-x:hidden}
  .app-shell{display:block;width:100%}
  .content-shell{width:100%;overflow:visible}
  .sidebar{
    position:fixed!important;
    inset:0 auto 0 0;
    width:min(86vw,320px)!important;
    height:100dvh!important;
    z-index:100!important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    border-radius:0 22px 22px 0;
  }
  body.mobile-nav-open .sidebar{transform:translateX(0)}
  html[dir="rtl"] .sidebar{inset:0 0 0 auto;border-radius:22px 0 0 22px;transform:translateX(105%)}
  html[dir="rtl"] body.mobile-nav-open .sidebar{transform:translateX(0)}
  .mobile-nav-backdrop{position:fixed;inset:0;z-index:95}
  .topbar{position:sticky!important;top:0;height:auto;min-height:74px;padding:12px 14px;gap:10px}
  .topbar-copy h1{font-size:20px}
  .topbar-copy p{display:none}
  .top-actions{gap:6px;flex-wrap:nowrap}
  main{padding:14px 12px 28px}
  .page-hero{grid-template-columns:minmax(0,1fr) auto;padding:15px!important}
  .page-hero-icon{width:46px!important;height:46px!important}
  .panel{padding:14px!important}
  .toolbar,.team-toolbar,#page-customers .toolbar,.shipping-toolbar,
  #page-orders .order-filter-grid,.dashboard-filter-grid{grid-template-columns:1fr 1fr!important}
  .toolbar>*{width:100%}
  .hero-grid,.stats-grid,.dashboard-executive-kpis,.dashboard-secondary-kpis,
  .shipping-kpis,.health-kpis,.automation-kpis,.team-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .shipping-layout,.health-layout,.automation-layout,.dashboard-performance-grid,.dashboard-bento-grid,
  #page-stock .inventory-grid,.team-bottom-grid,.roles-layout{grid-template-columns:1fr!important}
  .shipping-provider-grid{grid-template-columns:1fr}
  #page-stock .stock-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .product-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal-card,.modal-card.wide,.modal-card.extra-wide,.modal-card.xl{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
  }
}

/* ---------- 20. Téléphone ---------- */
@media(max-width:600px){
  .topbar{padding:10px 10px}
  .top-actions .status-pill:not(.realtime-pill),
  .top-language-picker{display:none!important}
  main{padding:11px 9px 24px}
  .page-hero{grid-template-columns:1fr!important;align-items:start!important;gap:10px!important}
  .page-hero>button,.page-hero>.btn{justify-self:stretch;width:100%}
  .panel-head{align-items:flex-start!important}
  .panel-head>.btn,.panel-head>.panel-actions{width:100%}
  .panel-actions{display:grid!important;grid-template-columns:1fr!important}
  .panel-actions .btn{width:100%}
  .toolbar,.team-toolbar,#page-customers .toolbar,.shipping-toolbar,
  #page-orders .order-filter-grid,.dashboard-filter-grid{grid-template-columns:1fr!important}
  .hero-grid,.stats-grid,.dashboard-executive-kpis,.dashboard-secondary-kpis,
  .shipping-kpis,.health-kpis,.automation-kpis,.team-kpi-grid,
  #page-stock .stock-kpi-grid{grid-template-columns:1fr!important}
  .live-metrics,.mini-stats,.team-user-meta,.customer-360-stats,
  .product-meta,.manual-order-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .team-user-actions{display:grid;grid-template-columns:1fr}
  .modal{padding:0!important;align-items:end!important}
  .modal-card,.modal-card.wide,.modal-card.extra-wide,.modal-card.xl,
  .shipping-connection-card,.category-manager-card{
    width:100vw!important;
    max-width:100vw!important;
    max-height:94dvh!important;
    border-radius:22px 22px 0 0!important;
  }
  .drawer-card{width:100vw!important;max-width:100vw!important;padding:15px!important}
  .capture-table{min-width:820px}
}

@media(max-width:400px){
  .live-metrics,.mini-stats,.team-user-meta,.customer-360-stats,
  .product-meta,.manual-order-summary{grid-template-columns:1fr!important}
  .btn{width:100%}
  .top-actions .onboarding-help-btn{display:none!important}
}

/* ---------- 21. Accessibilité / robustesse ---------- */
:focus-visible{outline:3px solid rgba(96,45,154,.28);outline-offset:2px}
button:disabled,.btn:disabled{cursor:not-allowed;opacity:.58;transform:none!important}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* =========================================================
   v4.14.2 — MODULE VISIBILITY / VERTICAL FLOW FIX
   Root cause fixed:
   - stale per-module window.scrollY restoration could reopen a module below its
     own content and make it look completely empty;
   - generic CSS Grid on every .page.active could stretch page tracks and make
     vertical geometry inconsistent between modules.
   Top-level CRM pages are now deterministic vertical documents.
   ========================================================= */

html,body{
  scroll-behavior:auto!important;
}

.content-shell{
  min-height:100dvh;
  overflow:visible!important;
}

.content-shell>main{
  display:block!important;
  min-height:0!important;
  overflow:visible!important;
}

.page{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
}

/* One authoritative layout for ALL top-level modules. */
.page.active{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  align-content:initial!important;
  gap:14px!important;
  width:100%!important;
  min-height:0!important;
}

.page.active>*{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  flex:0 0 auto!important;
  align-self:stretch!important;
  justify-self:auto!important;
  box-sizing:border-box!important;
}

.page.active>.page-hero,
.page.active>.welcome-banner,
.page.active>.panel,
.page.active>.stock-kpi-grid,
.page.active>.health-layout,
.page.active>.health-kpis,
.page.active>.automation-layout,
.page.active>.automation-kpis,
.page.active>.import-type-grid,
.page.active>.inventory-grid,
.page.active>.team-kpi-grid,
.page.active>.team-panel,
.page.active>.team-bottom-grid{
  margin-top:0!important;
  margin-bottom:0!important;
  transform:none!important;
}

/* Page hero must always occupy only the height of its content. */
.page.active>.page-hero{
  min-height:0!important;
  height:auto!important;
}

/* No module may create a phantom full-screen spacer before its real content. */
#page-orders,#page-health,#page-automations,#page-customers,#page-products,
#page-stock,#page-imports,#page-attributes,#page-team,#page-shipping,#page-lives{
  padding-top:0!important;
}

/* Sticky header remains stable while the document itself scrolls. */
.topbar{
  position:sticky!important;
  top:0!important;
}

/* Onboarding prompt is supplemental and must never affect document flow. */
.lo-guide-auto-prompt{
  position:fixed!important;
}


/* =========================================================
   v4.14.3 — AUTHORITATIVE CRM MODULE ROOT / CSS GEOMETRY FIX
   The visual blank-page defect was not a spacing tweak: several .page nodes
   were outside .content-shell > main in Chromium's parsed DOM. app.js now
   repairs that DOM invariant. This final layer makes the repaired geometry
   deterministic and prevents future legacy rules from reintroducing dead space.
   ========================================================= */
#app[data-dom-repaired="true"] .content-shell{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  align-self:stretch!important;
}
#app[data-dom-repaired="true"] .crm-module-root{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#app[data-dom-repaired="true"] .crm-module-root > .page{
  grid-column:auto!important;
  grid-row:auto!important;
  position:relative!important;
  inset:auto!important;
  translate:none!important;
}
#app[data-dom-repaired="true"] .crm-module-root > .page:not(.active){
  display:none!important;
}
#app[data-dom-repaired="true"] .crm-module-root > .page.active{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding-top:0!important;
  transform:none!important;
}
#app[data-dom-repaired="true"] .crm-module-root > .page.active > *{
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-top:0!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
}
#app[data-dom-repaired="true"] .crm-module-root > .page.active > .page-hero{
  height:auto!important;
  min-height:0!important;
}
/* Defensive fallback: a page must never become a third grid item of #app. */
#app[data-dom-repaired="true"] > section.page{
  display:none!important;
}

/* =====================================================================
   LiveGoOrder CRM v4.14.4 — structural page-flow fix
   Pages are real children of <main>; no viewport-sized spacer/grid row.
   ===================================================================== */
html, body { min-height: 100%; }
body { overflow-x: hidden !important; }
.app-shell { min-height: 100vh !important; align-items: stretch !important; }
.content-shell { min-width: 0 !important; width: auto !important; min-height: 100vh !important; }
.content-shell > main {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 0 !important;
}
.content-shell > main > .page {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.content-shell > main > .page:not(.active) { display: none !important; }
.content-shell > main > .page.active { display: block !important; }
.content-shell > main > .page.active > :first-child { margin-top: 0 !important; }
.page-hero, .panel, .stock-kpi-grid, .team-kpi-grid, .shipping-kpis,
.health-layout, .automation-layout, .import-type-grid, .product-grid,
.inventory-grid, .toolbar, .table-wrap { min-width: 0 !important; max-width: 100% !important; }
.page-hero { min-height: 0 !important; height: auto !important; }
.panel { min-height: 0 !important; height: auto !important; }
@media (max-width: 1100px) {
  .content-shell > main { overflow-x: hidden !important; }
}


/* =====================================================================
   LiveGoOrder CRM v4.15.0 — FRONT-END FINISH LAYER (authoritative, last)
   Fixes found by rendering every module at 1440 / 1100 / 820 / 390 / 320:
   1. Page blocks were glued together (display:block killed the flex gap).
   2. Dashboard/order filter cards: cramped title, over-wide label gaps.
   3. Inputs/placeholders too heavy and truncated on phones.
   4. Page heroes: icon dropped under the text on phones.
   5. Topbar language picker taller than neighbouring controls.
   6. Quick-date chip rows could push past the viewport on 320-390px.
   ===================================================================== */

/* 1 — one vertical rhythm for every module */
.content-shell > main > .page.active{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:16px !important;
}
.content-shell > main > .page.active > *{
  margin-top:0 !important;
  margin-bottom:0 !important;
  flex:0 0 auto;
  min-width:0;
}
.content-shell > main{ padding-top:16px !important; }

/* 2 — filter cards */
.dashboard-filter-head > div:first-child{ display:grid; gap:2px; }
.dashboard-filter-head .eyebrow{ margin:0 0 2px; line-height:1.2; }
.dashboard-filter-head strong{ font-size:15px; line-height:1.25; }
.dashboard-filter-grid,
.order-filter-grid{ row-gap:12px !important; column-gap:10px !important; }
.dashboard-filter-grid label,
.order-filter-field{ display:grid !important; gap:5px; align-content:end; }
.dashboard-filter-grid label > span,
.order-filter-field > span{ margin:0 !important; line-height:1.2; }
.dashboard-filter-grid input,.dashboard-filter-grid select,
.order-filter-grid input,.order-filter-grid select{ min-height:40px; }
.dashboard-filter-summary{ line-height:1.45; overflow-wrap:anywhere; }

/* 3 — form controls: calm weight, readable placeholders */
input,select,textarea{ font-weight:600; font-family:inherit; }
input::placeholder,textarea::placeholder{
  font-weight:400 !important; color:#9a90a3; opacity:1;
  text-overflow:ellipsis;
}
input[type="date"]{ min-width:0; }
@media (max-width:600px){
  input,select,textarea{ font-size:16px !important; } /* no iOS zoom on focus */
  input::placeholder{ font-size:14px; }
  .dashboard-filter-grid input,.dashboard-filter-grid select,
  .order-filter-grid input,.order-filter-grid select,
  .toolbar input,.toolbar select{ min-height:44px; }
}

/* 4 — page heroes keep text + icon on one row, on every width */
@media (max-width:600px){
  .page-hero{ flex-wrap:nowrap !important; align-items:flex-start !important; gap:12px !important; }
  .page-hero > div:not(.page-hero-icon){ flex:1 1 auto; min-width:0; }
  .page-hero p{ overflow-wrap:anywhere; }
  .page-hero-icon{ flex:0 0 44px; width:44px !important; height:44px !important; border-radius:14px !important; font-size:20px; }
}

/* 5 — topbar controls share one height */
.top-actions{ align-items:center; }
.top-actions .btn,
.top-actions .status-pill,
.top-actions .language-picker{ min-height:40px; }
.top-actions .language-picker{ padding-block:0; display:inline-flex; align-items:center; gap:8px; }
.top-actions .language-picker select{ min-height:0; height:auto; padding-block:4px; border:0; background:transparent; box-shadow:none; }

/* 6 — chip rows scroll inside themselves, never widen the page */
.dashboard-quick-dates,.quick-dates,.order-quick-dates{
  max-width:100%; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dashboard-quick-dates::-webkit-scrollbar,.quick-dates::-webkit-scrollbar,.order-quick-dates::-webkit-scrollbar{ display:none; }
.dashboard-quick-dates > *,.quick-dates > *,.order-quick-dates > *,.quick-date{ flex:0 0 auto; white-space:nowrap; }

/* 7 — accessibility finish */
:focus-visible{ outline:2px solid var(--primary,#6b2fa0); outline-offset:2px; }
.btn,button,[role="button"]{ touch-action:manipulation; }
@media (pointer:coarse){ .btn,.icon-button,.nav{ min-height:44px; } }


/* v4.15.1 — attributs : cartes à nombreuses valeurs (couleurs, tailles) */
.attribute-values{ max-height:168px; overflow-y:auto; overscroll-behavior:contain; align-content:flex-start; scrollbar-width:thin; padding-right:4px; }
.attribute-system-tag{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:rgba(107,47,160,.12); color:var(--primary,#6b2fa0); font-size:9px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }


/* v4.16.0 — Modifier produit : variante (liste) + attributs (multi-sélection) */
.attr-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:12px; align-items:end;
  padding:12px; margin-bottom:10px; border:1px solid var(--border,#e6dfee); border-radius:14px; background:#fcfafd; }
.attr-row-field{ display:grid; gap:5px; min-width:0; margin:0; }
.attr-row-field > span{ font-size:9px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#8c8095; }
.attr-row-select,.msel-btn{ width:100%; min-height:42px; padding:0 12px; border:1px solid var(--border,#e6dfee); border-radius:12px; background:#fff; font:inherit; font-weight:600; font-size:13px; text-align:left; color:inherit; }
.msel{ position:relative; min-width:0; }
.msel-btn{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; padding-right:30px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b2fa0' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.msel-btn:disabled,.attr-row-select:disabled,.msel.is-disabled .msel-btn{ background-color:#f1eef4; color:#a79fb0; cursor:not-allowed; }
.msel-panel{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px); padding:10px; border:1px solid var(--border,#e6dfee); border-radius:14px; background:#fff; box-shadow:0 18px 40px rgba(60,20,90,.18); }
.msel-panel.hidden{ display:none; }
.msel-tools{ display:flex; gap:6px; margin-bottom:8px; }
.msel-search{ flex:1 1 auto; min-width:0; min-height:36px; padding:0 10px; border:1px solid var(--border,#e6dfee); border-radius:10px; font-size:13px; }
.msel-list{ max-height:240px; overflow-y:auto; overscroll-behavior:contain; display:grid; gap:2px; }
.msel-opt{ display:flex !important; flex-direction:row !important; align-items:center; gap:10px; margin:0; padding:7px 8px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; }
.msel-opt:hover{ background:rgba(107,47,160,.08); }
.msel-opt.hidden{ display:none !important; }
.msel-opt input{ width:16px; height:16px; flex:0 0 16px; margin:0; accent-color:var(--primary,#6b2fa0); }
.attr-row-remove{ align-self:end; width:42px; height:42px; }
@media (max-width:700px){
  .attr-row{ grid-template-columns:1fr auto; }
  .attr-row > .attr-row-field:nth-child(2){ grid-column:1 / -1; order:3; }
  .attr-row-remove{ grid-column:2; grid-row:1; }
}
.attr-row-field > span{ margin:0 !important; line-height:1.2; display:block; }
.attr-row-field.attr-row-field{ align-content:end; }

/* v4.17.0 — stock : lignes archivées / non vendables */
.stock-archived-row td{ opacity:.62; }
.stock-archived-row td:last-child, .stock-archived-row td:first-child{ opacity:1; }

/* =====================================================================
   v4.18.0 — MODULE LIVRAISON (SaaS) : hero, onglets, KPI, alertes IA,
   classement, graphique, à expédier, expéditions, cartes transporteurs
   ===================================================================== */
.ship-hero{ display:flex !important; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ship-hero-main{ min-width:0; flex:1 1 320px; }
.ship-hero-main p{ max-width:760px; font-size:13px !important; line-height:1.45; }
.ship-hero-actions{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.ship-period{ display:grid; gap:4px; margin:0; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#8c8095; }
.ship-period select{ min-height:40px; }

.ship-tabs{ display:flex; gap:6px; overflow-x:auto; padding:5px; border:1px solid var(--border,#e6dfee); border-radius:16px; background:#fff; scrollbar-width:none; }
.ship-tabs::-webkit-scrollbar{ display:none; }
.ship-tab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border:0; border-radius:12px; background:transparent; font:inherit; font-size:13px; font-weight:700; color:#6d6277; cursor:pointer; white-space:nowrap; }
.ship-tab:hover{ background:rgba(107,47,160,.07); }
.ship-tab.active{ background:var(--primary,#6b2fa0); color:#fff; box-shadow:0 6px 16px rgba(107,47,160,.28); }
.ship-tab-count{ min-width:22px; padding:1px 7px; border-radius:999px; background:rgba(107,47,160,.12); color:var(--primary,#6b2fa0); font-size:11px; text-align:center; }
.ship-tab.active .ship-tab-count{ background:rgba(255,255,255,.25); color:#fff; }

.ship-pane{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.ship-pane.hidden{ display:none !important; }

.ship-kpis{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.ship-kpis .shipping-kpi{ display:grid; gap:2px; padding:14px 16px; border:1px solid var(--border,#e6dfee); border-radius:16px; background:#fff; box-shadow:0 2px 10px rgba(60,20,90,.04); }
.ship-kpis .shipping-kpi span{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8c8095; }
.ship-kpis .shipping-kpi strong{ font-size:24px; line-height:1.15; color:#1f1630; overflow-wrap:anywhere; }
.ship-kpis .shipping-kpi small{ font-size:11px; color:#8c8095; }
.ship-kpis .shipping-kpi.good strong{ color:#15803d; } .ship-kpis .shipping-kpi.warn strong{ color:#b45309; } .ship-kpis .shipping-kpi.danger strong{ color:#b91c1c; }

.ship-grid-2{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:1000px){ .ship-grid-2{ grid-template-columns:minmax(0,1fr); } }

/* alerts */
.ship-alerts{ display:grid; gap:8px; max-height:420px; overflow-y:auto; padding-right:2px; }
.ship-alert{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 12px; border:1px solid var(--border,#e6dfee); border-left-width:4px; border-radius:12px; background:#fff; }
.ship-alert.critical{ border-left-color:#b91c1c; background:#fef2f2; } .ship-alert.high{ border-left-color:#ef4444; } .ship-alert.medium{ border-left-color:#f59e0b; } .ship-alert.low{ border-left-color:#3b82f6; }
.ship-alert-body{ display:grid; gap:2px; min-width:0; } .ship-alert-body strong{ font-size:13px; } .ship-alert-body small{ font-size:12px; color:#6d6277; overflow-wrap:anywhere; }
.ship-all-good{ display:flex; gap:12px; align-items:center; padding:18px; border-radius:14px; background:#ecfdf5; color:#065f46; }
.ship-all-good b{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#10b981; color:#fff; font-size:18px; }
.ship-all-good small{ display:block; opacity:.85; }
@media (max-width:560px){ .ship-alert{ grid-template-columns:auto minmax(0,1fr); } .ship-alert .btn{ grid-column:1 / -1; } }

/* ranking */
.ship-ranking{ display:grid; gap:10px; }
.ship-rank{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--border,#e6dfee); border-radius:14px; background:#fff; }
.ship-rank.top{ border-color:#6b2fa0; box-shadow:0 0 0 3px rgba(107,47,160,.10); }
.ship-rank-pos{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#f1ecf6; font-size:12px; font-weight:800; color:#6b2fa0; }
.ship-rank-body{ display:grid; gap:5px; min-width:0; } .ship-rank-body small{ font-size:11px; color:#8c8095; }
.ship-rank-title{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .ship-rank-title strong{ font-size:13px; }
.ship-meter{ height:7px; border-radius:99px; background:#f1ecf6; overflow:hidden; }
.ship-meter i{ display:block; height:100%; border-radius:99px; } .ship-meter i.good{ background:#10b981; } .ship-meter i.warn{ background:#f59e0b; } .ship-meter i.bad{ background:#ef4444; }
.ship-score{ font-size:20px; } .ship-score.good{ color:#059669; } .ship-score.warn{ color:#d97706; } .ship-score.bad{ color:#dc2626; }
.ship-empty{ display:grid; gap:8px; justify-items:start; padding:18px; border:1px dashed var(--border,#d9cfe6); border-radius:14px; }

/* logos */
.carrier-logo{ display:block; width:96px; height:44px; object-fit:contain; }
.carrier-logo.sm{ width:64px; height:30px; } .carrier-logo.xs{ width:46px; height:22px; }
.carrier-logo-fallback{ display:grid; place-items:center; width:46px; height:22px; border-radius:6px; background:#f1ecf6; color:#6b2fa0; font-size:10px; font-weight:800; }

/* chart + funnel */
.ship-chart svg{ width:100%; height:auto; display:block; }
.ship-chart .grid{ stroke:#eee7f4; stroke-width:1; } .ship-chart text{ font-size:9px; fill:#8c8095; }
.ship-chart .c1{ fill:#8b5cf6; } .ship-chart .c2{ fill:#10b981; } .ship-chart .c3{ fill:#ef4444; }
.ship-legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11px; font-weight:700; color:#6d6277; }
.ship-legend span::before{ content:""; display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:3px; background:currentColor; }
.ship-legend .c1{ color:#8b5cf6; } .ship-legend .c2{ color:#10b981; } .ship-legend .c3{ color:#ef4444; }
.ship-funnel{ display:grid; gap:12px; }
.ship-funnel-row{ display:grid; grid-template-columns:150px minmax(0,1fr) 36px; gap:10px; align-items:center; font-size:12px; }
.ship-funnel-bar{ height:12px; border-radius:99px; background:#f1ecf6; overflow:hidden; } .ship-funnel-bar i{ display:block; height:100%; border-radius:99px; }
.ship-funnel-bar i.warn{ background:#f59e0b; } .ship-funnel-bar i.info{ background:#8b5cf6; } .ship-funnel-bar i.good{ background:#10b981; } .ship-funnel-bar i.bad{ background:#ef4444; }
.ship-funnel-row b{ text-align:right; }
@media (max-width:560px){ .ship-funnel-row{ grid-template-columns:110px minmax(0,1fr) 30px; } }

/* tables */
.ship-table td, .ship-table th{ vertical-align:middle; }
.ship-row-blocked{ background:#fffbeb; }
.ship-wait{ display:inline-block; padding:2px 9px; border-radius:99px; background:#f1ecf6; font-size:11px; font-weight:800; color:#6b2fa0; }
.ship-wait.late{ background:#fee2e2; color:#b91c1c; }
.ship-prov-cell{ display:flex; align-items:center; gap:8px; } .ship-carrier-select{ display:flex; align-items:center; gap:8px; } .ship-carrier-select select{ min-width:150px; min-height:36px; }
.ship-filters{ display:grid; gap:10px; margin-bottom:12px; }
.ship-filters input[type="search"]{ min-height:42px; }
.ship-chips{ display:flex; gap:6px; flex-wrap:wrap; }
.ship-chip{ display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px; border:1px solid var(--border,#e6dfee); border-radius:99px; background:#fff; font:inherit; font-size:12px; font-weight:700; color:#6d6277; cursor:pointer; }
.ship-chip b{ padding:0 6px; border-radius:99px; background:#f1ecf6; font-size:11px; color:#6b2fa0; }
.ship-chip:hover{ border-color:#c9b6dd; }
.ship-chip.active{ border-color:var(--primary,#6b2fa0); background:rgba(107,47,160,.09); color:var(--primary,#6b2fa0); }
.ship-count{ margin-top:10px; }

/* carrier cards */
.ship-carrier-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }
.ship-carrier-card{ display:grid; gap:10px; align-content:start; padding:18px; border:1px solid var(--border,#e6dfee); border-radius:18px; background:#fff; box-shadow:0 2px 12px rgba(60,20,90,.05); min-width:0; }
.ship-carrier-card.connected{ border-color:#bfe6cf; } .ship-carrier-card.recommended{ border-color:#6b2fa0; box-shadow:0 0 0 3px rgba(107,47,160,.10); }
.ship-carrier-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ship-carrier-logo{ display:grid; place-items:center; min-width:120px; height:60px; padding:6px 12px; border-radius:14px; background:#fff; border:1px solid #f0eaf5; }
.ship-carrier-logo .carrier-logo{ width:110px; height:46px; }
.ship-carrier-card h3{ margin:0; font-size:16px; } .ship-carrier-country{ color:#8c8095; }
.ship-carrier-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.ship-state{ padding:4px 10px; border-radius:99px; font-size:11px; font-weight:800; white-space:nowrap; }
.ship-state.ok{ background:#d1fae5; color:#047857; } .ship-state.warn{ background:#fef3c7; color:#b45309; } .ship-state.bad{ background:#fee2e2; color:#b91c1c; } .ship-state.off{ background:#f1ecf6; color:#6d6277; }
.ship-carrier-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; padding:10px; border-radius:12px; background:#faf7fd; text-align:center; }
.ship-carrier-stats b{ display:block; font-size:15px; } .ship-carrier-stats span{ font-size:10px; font-weight:700; text-transform:uppercase; color:#8c8095; }
.ship-carrier-pitch{ margin:0; font-size:12px; color:#6d6277; }
.ship-secret-note{ text-align:center; }

@media (max-width:700px){
  .ship-hero-actions{ width:100%; } .ship-hero-actions .btn{ flex:1 1 auto; }
  .ship-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ship-rank{ grid-template-columns:auto minmax(0,1fr) auto; } .ship-rank .carrier-logo{ display:none; }
  .ship-carrier-select select{ min-width:0; width:100%; }
}

/* v4.18.0 fixes */
.ship-tabs{ display:flex !important; flex-direction:row !important; align-items:center; }
.ship-pane .panel-head > div:first-child{ display:block !important; }
.ship-pane .panel-head .eyebrow{ display:block; margin-bottom:3px; }
.ship-pane .panel-head p{ margin:4px 0 0; }
.ship-kpis{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
.ship-kpis .shipping-kpi strong{ font-size:20px; }
@media (max-width:1250px){ .ship-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (max-width:700px){ .ship-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }

.ship-chip.has-logo{ padding:0 12px 0 8px; } .ship-chip.has-logo .carrier-logo{ flex:0 0 auto; }
@media (max-width:700px){
  .ship-hero{ flex-wrap:wrap !important; align-items:stretch !important; }
  .ship-hero-main{ flex:1 1 100% !important; }
  .ship-hero-actions{ display:grid !important; grid-template-columns:1fr 1fr; width:100%; align-items:end; }
  .ship-period{ grid-column:1 / -1; }
}
.ship-table td:nth-child(4), .ship-table td .ship-wait{ white-space:nowrap; }

/* v4.18.0 — .btn{display:inline-flex!important} (declared later) used to override .permission-hidden,
   so write buttons stayed visible for read-only roles. Higher specificity restores the intent. */
[data-permission].permission-hidden, .btn.permission-hidden, button.permission-hidden, .permission-hidden{ display:none !important; }
.ship-order-carrier{ display:inline-flex; align-items:center; gap:8px; }