/* ============================================================
   YABOX OS — THEME KIT  (yabox-theme.css)
   Couche présentation uniquement. Aucune dépendance backend.
   Tokens: clair par défaut via :root, nuit via data-theme="nuit".
   Switch : document.documentElement.setAttribute('data-theme','nuit')
   Bilingue FR + AR (.ar = RTL + police Cairo).
   ============================================================ */

/* Theme variables come from yabox-tokens.css. */`r`n*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
:root{--yabox-sidebar-width:280px}
body{
  font-family:'Sora',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease,color .25s ease;
}

/* Delivery Companies Hub */
.delivery-companies-page .module-head,
.module-page .module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.delivery-companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.delivery-company-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.delivery-company-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border-radius: 12px;
  color: #fff;
  background: var(--accent);
  font-weight: 800;
  letter-spacing: 0;
}
.delivery-company-body {
  min-width: 0;
  flex: 1;
}
.delivery-company-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.delivery-company-title h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.delivery-company-card p,
.delivery-meta {
  color: var(--text2);
  font-size: 13px;
}
.delivery-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.delivery-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text2);
  font-size: 11px;
  font-weight: 700;
}
.pill.green { background: rgba(22,163,74,.12); color: var(--green); }
.pill.blue { background: rgba(33,85,224,.12); color: var(--blue); }
.pill.red { background: rgba(239,68,68,.12); color: var(--red); }
.pill.muted { background: var(--bg-hover); color: var(--text2); }
.topbar-btn {
  position: relative;
}
.notif-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--on-accent);
  border: 2px solid var(--white);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.inline-error { color: var(--red); font-size: 13px; }
.success-text { color: var(--green); font-size: 13px; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.45);
}
.modal-card {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow);
}
.modal-head,
.modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-actions {
  border-top: 1px solid var(--border);
  border-bottom: 0;
  justify-content: flex-end;
}
.modal-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.modal-body label {
  display: grid;
  gap: 6px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 700;
}
.modal-body .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.insight-list {
  display: grid;
  gap: 8px;
}
.insight-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
}
@media (max-width: 720px) {
  .delivery-company-card,
  .delivery-company-title,
  .module-page .module-head {
    flex-direction: column;
  }
  .insight-row {
    grid-template-columns: 1fr;
  }
}
.ar{font-family:'Cairo',sans-serif;direction:rtl;color:var(--ar-color)}

/* ============ LAYOUT ============ */
.shell{display:flex;min-height:100vh}

@media (min-width: 901px) {
  #app .sidebar,
  .app-shell .sidebar {
    width: var(--yabox-sidebar-width) !important;
    flex: 0 0 var(--yabox-sidebar-width) !important;
  }
  #app .main-area,
  #app .main-content,
  .app-shell .main-area,
  .app-shell .main-content {
    margin-left: var(--yabox-sidebar-width) !important;
    width: calc(100% - var(--yabox-sidebar-width)) !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  #app .main-area,
  #app .main-content,
  .app-shell .main-area,
  .app-shell .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);background:var(--bg-sidebar);
  border-right:1px solid var(--border);display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:40;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar__brand{
  height:var(--topbar-h);display:flex;align-items:center;gap:11px;
  padding:0 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.brand__mark{
  width:30px;height:30px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--text)));
  display:grid;place-items:center;color:var(--on-accent);font-weight:800;font-size:15px;
  box-shadow:0 2px 10px var(--accent-soft);
}
.brand__name{font-weight:800;font-size:17px;letter-spacing:-.4px}
.brand__name span{color:var(--accent)}

.nav{flex:1;overflow-y:auto;padding:14px 12px;scrollbar-width:thin}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.nav__section{
  font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-faint);padding:16px 12px 7px;
}
.nav__item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;margin-bottom:2px;
  border-radius:10px;cursor:pointer;color:var(--text-dim);text-decoration:none;
  position:relative;transition:background .15s,color .15s;
}
.nav__item:hover{background:var(--bg-hover);color:var(--text)}
.nav__item.is-active{background:var(--bg-active);color:var(--accent)}
.nav__item.is-active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent);
}
.nav__icon{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center}
.nav__icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9}
.nav__labels{display:flex;flex-direction:column;line-height:1.15;flex:1;min-width:0}
.nav__fr{font-size:14px;font-weight:500;white-space:nowrap}
.nav__ar{font-size:11.5px}
.nav__badge{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;
  background:var(--danger);color:var(--on-accent);font-family:'JetBrains Mono',monospace;
}
.nav__badge--soft{background:var(--accent-soft);color:var(--accent)}
.nav__footer{border-top:1px solid var(--border);padding:10px 12px;flex-shrink:0}

/* MAIN */
.main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{
  height:var(--topbar-h);background:color-mix(in srgb,var(--bg-elev) 80%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:30;
}
.burger{
  display:none;width:38px;height:38px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg-elev);color:var(--text);cursor:pointer;place-items:center;
}
.burger svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none}
.topbar__title{font-weight:700;font-size:16px;margin-right:auto}
.topbar__title small{display:block;font-weight:400;font-size:11px;color:var(--text-dim)}
.search{
  display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--border);
  border-radius:9px;padding:7px 12px;width:230px;max-width:32vw;
}
.search input{border:none;background:none;outline:none;color:var(--text);font-size:13px;width:100%;font-family:inherit}
.search svg{width:16px;height:16px;stroke:var(--text-dim);fill:none;stroke-width:2;flex-shrink:0}
.icon-btn{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;border:1px solid var(--border);
  background:var(--bg-elev);color:var(--text-dim);cursor:pointer;display:grid;place-items:center;transition:.15s;
}
.icon-btn:hover{color:var(--accent);border-color:var(--accent)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
.avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 50%,var(--text)));
  color:var(--on-accent);display:grid;place-items:center;font-weight:700;font-size:13px;cursor:pointer;
}
.content{padding:26px 22px;flex:1}

/* COMPONENTS RÉUTILISABLES */
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card h1{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
.card p{color:var(--text-dim);font-size:14px;line-height:1.6}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:24px}
.kpi{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px}
.kpi__label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.kpi__value{font-size:26px;font-weight:800;margin-top:6px;font-family:'JetBrains Mono',monospace}
.kpi__value.ok{color:var(--success)}
.kpi__value.warn{color:var(--warn)}
.kpi__value.bad{color:var(--danger)}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:9px;
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-weight:600;
  font-size:13px;cursor:pointer;font-family:inherit;transition:.15s;
}
.btn:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:var(--accent)}
.skeleton{background:linear-gradient(90deg,var(--bg-hover) 25%,var(--border) 50%,var(--bg-hover) 75%);background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* BACKDROP MOBILE */
.backdrop{display:none;position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}

/* RESPONSIVE */
@media(max-width:980px){
  .sidebar{transform:translateX(-100%)}
  body.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow)}
  body.nav-open .backdrop{display:block}
  .main{margin-left:0}
  .burger{display:grid}
  .search{display:none}
}

/* YABOX OS KIT - compatibility layer for the existing vanilla SPA.
   UI-only: tokens, shell polish, responsive behavior, and cards. */
.yabox-os-kit {
}

.yabox-os-kit body,
body.yabox-os-kit,
.yabox-os-kit #app,
.yabox-os-kit .main-area,
.yabox-os-kit .content,
.yabox-os-kit #cnt {
  background: var(--kit-bg);
  color: var(--kit-text);
}

.yabox-os-kit .topbar {
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--kit-border) !important;
  color: var(--kit-text);
  backdrop-filter: blur(12px);
}

.yabox-os-kit .topbar-title,
.yabox-os-kit #page-title {
  color: var(--kit-text);
  letter-spacing: 0;
}

.yabox-os-kit .page-sub,
.yabox-os-kit #page-sub {
  color: var(--kit-muted);
}

.yabox-os-kit .sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--kit-border);
}

.yabox-os-kit .nav-section[data-kit-section="1"] {
  margin: 0;
}

.yabox-os-kit .nav-section-title {
  color: var(--text3);
  font-family: var(--font-mono, monospace);
  letter-spacing: .12em;
}

.yabox-os-kit .nav-item {
  border-radius: 0;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.yabox-os-kit .nav-item:hover {
  background: var(--bg-hover);
}

.yabox-os-kit .nav-item.active {
  background: var(--accent-soft);
  border-left-color: var(--kit-accent);
}

.yabox-os-kit .kpi,
.yabox-os-kit .kpi-card,
.yabox-os-kit .card,
.yabox-os-kit .cbox,
.yabox-os-kit .yabox-card,
.yabox-os-kit .empty-state,
.yabox-os-kit .modal-card {
  background: var(--kit-panel) !important;
  border-color: var(--kit-border) !important;
  color: var(--kit-text);
  box-shadow: none;
}

.yabox-os-kit .data-table,
.yabox-os-kit table {
  background: var(--kit-panel);
  color: var(--kit-text);
}

.yabox-os-kit .data-table th,
.yabox-os-kit table th {
  background: var(--kit-panel-2);
  color: var(--kit-muted);
}

.yabox-os-kit .data-table td,
.yabox-os-kit table td {
  border-color: var(--kit-border);
}

.yabox-os-kit .yabox-input,
.yabox-os-kit .ninp,
.yabox-os-kit .cinp,
.yabox-os-kit .linp,
.yabox-os-kit select,
.yabox-os-kit textarea {
  background: var(--kit-panel-2) !important;
  border-color: var(--kit-border) !important;
  color: var(--kit-text) !important;
}

.yabox-os-kit .yabox-input::placeholder,
.yabox-os-kit .ninp::placeholder,
.yabox-os-kit .cinp::placeholder,
.yabox-os-kit .linp::placeholder,
.yabox-os-kit textarea::placeholder {
  color: var(--kit-muted);
}

.yabox-os-kit .filters,
.yabox-os-kit .filters-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.yabox-os-kit .filters .yabox-input,
.yabox-os-kit .filters select,
.yabox-os-kit .filters input,
.yabox-os-kit .filters-row .yabox-input,
.yabox-os-kit .filters-row select,
.yabox-os-kit .filters-row input {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 140px;
  max-width: 220px;
}

@media (min-width: 901px) {
  .yabox-os-kit .filters,
  .yabox-os-kit .filters-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 900px) {
  .yabox-os-kit .sidebar {
    position: fixed;
    left: -250px;
    top: 0;
    bottom: 0;
    height: 100vh;
    z-index: 100;
    transition: left .2s ease;
  }

  .yabox-os-kit .sidebar.open {
    left: 0;
  }

  .yabox-os-kit .content {
    padding: 14px;
  }

  .yabox-os-kit .topbar {
    padding-inline: 12px;
  }
}

/* V3400 UI migration layout guard: variables come from yabox-tokens.css. */`r`n.yabox-os-kit #app {
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.yabox-os-kit .sidebar {
  width: var(--yabox-sidebar-width) !important;
  min-width: var(--yabox-sidebar-width) !important;
  flex: 0 0 var(--yabox-sidebar-width) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
  transform: none !important;
}

.yabox-os-kit .main-area {
  margin-left: var(--yabox-sidebar-width) !important;
  width: calc(100% - var(--yabox-sidebar-width)) !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
}

.yabox-os-kit .topbar,
.yabox-os-kit .content,
.yabox-os-kit #cnt {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  .yabox-os-kit #app {
    display: block;
  }

  .yabox-os-kit .sidebar {
    width: var(--yabox-sidebar-width) !important;
    min-width: var(--yabox-sidebar-width) !important;
    left: 0 !important;
    transform: translateX(-100%) !important;
    transition: transform .2s ease !important;
  }

  body.nav-open .yabox-os-kit .sidebar,
  .yabox-os-kit .sidebar.open {
    transform: translateX(0) !important;
  }

  .yabox-os-kit .main-area {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* V3400 responsive containment guard:
   prevents inner legacy blocks from keeping viewport-sized widths after
   the sidebar has reserved desktop space. */
.yabox-os-kit .main-area,
.yabox-os-kit .topbar,
.yabox-os-kit .content,
.yabox-os-kit #cnt,
.yabox-os-kit .kpis,
.yabox-os-kit .filters,
.yabox-os-kit .filters-row,
.yabox-os-kit .cbox,
.yabox-os-kit .yabox-card,
.yabox-os-kit .ocard,
.yabox-os-kit .sec-wrap {
  box-sizing: border-box;
  max-width: 100% !important;
}

.yabox-os-kit .content {
  width: 100% !important;
  overflow-x: clip !important;
}

.yabox-os-kit #cnt {
  width: 100% !important;
  overflow-x: visible !important;
  transform: none !important;
}

.yabox-os-kit .kpis {
  width: 100% !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  overflow: hidden !important;
}

.yabox-os-kit .kpi {
  min-width: 0 !important;
}

.yabox-os-kit .filters,
.yabox-os-kit .filters-row {
  width: 100% !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.yabox-os-kit .filters > *,
.yabox-os-kit .filters-row > * {
  max-width: min(220px, 100%) !important;
}

.yabox-os-kit .ocard {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--text) !important;
}

.yabox-os-kit .ocard .otop {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  width: 100% !important;
}

.yabox-os-kit .ocard .oinfo {
  min-width: 0 !important;
  max-width: 100% !important;
}

.yabox-os-kit .ocard .ometa,
.yabox-os-kit .ocard .oprod,
.yabox-os-kit .ocard .odetails,
.yabox-os-kit .ocard .olast {
  color: var(--text) !important;
  max-width: 100% !important;
}

.yabox-os-kit .ocard .oprod,
.yabox-os-kit .ocard .ometa {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.yabox-os-kit .ocard .owner-meta {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-top: 4px !important;
  padding: 3px 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg-hover) !important;
  color: var(--text2) !important;
  font-size: 11px !important;
}

.yabox-os-kit .ocard .octas {
  min-width: 92px !important;
}

@media (max-width: 1200px) {
  .yabox-os-kit .kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .yabox-os-kit .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .yabox-os-kit .ocard .otop {
    grid-template-columns: 1fr !important;
  }

  .yabox-os-kit .ocard .octas {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    min-width: 0 !important;
  }

  .yabox-os-kit .ocard .octa {
    flex: 1 1 96px !important;
  }
}