:root{
  /* ===== ProSmart Brand ===== */
  --ps-primary:#0B5FFF;
  --ps-secondary:#00D4FF;
  --ps-dark:#07111F;
  --ps-surface:#0F1B2D;
  --ps-surface-2:#13243A;
  --ps-accent:#F5C542;
  --ps-text:#FFFFFF;
  --ps-muted:#9FB3C8;
  --ps-border:rgba(255,255,255,.10);
  --bg:var(--ps-dark);
  --surface:var(--ps-surface);
  --surface-2:var(--ps-surface-2);
  --sidebar:#06101D;
  --primary:var(--ps-primary);
  --primary-hover:#084BD0;
  --primary-soft:rgba(11, 95, 255, 0.14);
  --primary-border:rgba(0, 212, 255, 0.35);
  --border:rgba(255, 255, 255, 0.10);
  --ps-blue-dark:var(--bg);
  --ps-blue:var(--primary);
  --ps-orange:var(--primary);

  /* ===== Light theme (default) ===== */
  --bg0:var(--bg);
  --bg1:var(--surface);
  --card:var(--surface);
  --card2:var(--surface-2);
  --text:var(--ps-text);
  --muted:var(--ps-muted);
  --line:var(--border);

  /* Back-compat tokens used across UI */
  --brand:var(--ps-orange);
  --brand2:var(--ps-blue);
  --brand3:var(--ps-blue-dark);

  --good:#16a34a;
  --warn:var(--primary);
  --shadow: 0 12px 40px rgba(0,0,0,.34);
}
html,
body,
.app,
.main,
.content{
  direction:ltr;
}
table,
.table,
.modal,
.modalCard,
.modalBody,
.formGrid,
.excelImportModal{
  direction:ltr;
  text-align:left;
}

/* ===== Dark Mode (ProSmart) ===== */
body.theme-dark{
  --bg0:var(--bg);
  --bg1:var(--surface);
  --card:var(--surface);
  --card2:var(--surface-2);
  --text:#FFFFFF;
  --muted:#B8C0CC;
  --line:var(--border);
  --shadow: 0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(11,95,255,.12), transparent 55%),
              radial-gradient(900px 700px at 85% 0%, rgba(0,212,255,.08), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
}
.app{display:flex; min-height:100%}
.app{position:relative}
.sidebar{
  width:290px; flex:0 0 290px;
  background: linear-gradient(180deg, var(--sidebar), #0A101C);
  border-right:1px solid var(--line);
  padding:18px 14px;
  display:flex; flex-direction:column;
  gap:14px;
}

/* ===== Sidebar (desktop collapsed) ===== */
body.sidebarClosed .sidebar{
  width:86px; flex-basis:86px;
  padding:18px 10px;
}
body.sidebarClosed .brand{justify-content:center}
body.sidebarClosed .brandText,
body.sidebarClosed .sideSearch,
body.sidebarClosed .menuText,
body.sidebarClosed .menuChevron,
body.sidebarClosed .submenu,
body.sidebarClosed .sideFooter .muted{display:none !important}
body.sidebarClosed .menu{padding:0 2px}
body.sidebarClosed .menuItem{justify-content:center}

/* ===== Sidebar (mobile overlay) ===== */
@media (max-width: 900px){
  .sidebar{
    position:fixed;
    left:0; top:0; bottom:0;
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index:80;
    box-shadow: var(--shadow);
  }
  body.sidebarMobileOpen .sidebar{ transform: translateX(0); }

  /* Backdrop without extra HTML */
  body.sidebarMobileOpen::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:70;
  }

  .main{margin-left:0}
}
.brand{display:flex; gap:12px; align-items:center; padding:10px 10px 6px}
.brandLogoWrap{width:64px; height:42px; border-radius:12px; background:transparent; display:grid; place-items:center; overflow:hidden}
.brandLogo{width:100%; height:100%; object-fit:contain; padding:4px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));}
.brandLogoText{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--ps-primary),var(--ps-secondary));color:#fff;font-weight:950}
.brandLogoText.hasLogo{
  background:#071426;
  border:1px solid rgba(255,255,255,.08);
}
.sidebar .brand .brandLogoText.hasLogo{
  background:transparent;
  background-image:none;
  padding:0;
  overflow:hidden;
  border:0;
  box-shadow:none;
}
.sidebar .brand .brandLogoText.hasLogo > .brandLogo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  margin:0;
  padding:0;
  max-width:none;
  max-height:none;
  transform:none;
  filter:none;
}

.bulkActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.bulkActions.hidden{display:none}
.bulkSelectCell{
  width:42px;
  text-align:center;
}
.bulkSelectCell input{
  width:16px;
  height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}
.brandName{font-weight:800; letter-spacing:.2px}
.brandSub{font-size:12px; color:rgba(255,255,255,.78)}

.sideSearch{padding:0 10px}
.searchInputWrap{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 10px;
  display:flex; align-items:center; gap:10px;
}
body.theme-dark .searchInputWrap{
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.18);
}
.searchIcon{opacity:.9}
.searchIcon svg{width:16px; height:16px;}
.searchInput{
  all:unset;
  flex:1;
  font-size:14px;
  color:var(--text);
}
body.theme-dark .searchInput{color:white}
.kbd{
  font-size:11px;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.55);
  color:var(--muted);
}
body.theme-dark .kbd{border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.18); color:rgba(255,255,255,.85)}

.menu{padding:0 6px; display:flex; flex-direction:column; gap:8px; overflow:auto}
.menuGroupTitle{padding:10px 10px 6px; font-size:12px; color:rgba(255,255,255,.78); text-transform:uppercase; letter-spacing:.12em}
/* RH group collapse (same style as section dropdown) */
.menuGroupBody{display:none; flex-direction:column; gap:8px;}
.menuGroupTitle.open + .menuGroupBody{display:flex;}
.menuGroupTitle.rhGroupToggle{cursor:pointer; display:flex; align-items:center; justify-content:space-between;}
.menuGroupTitle.rhGroupToggle:focus{outline:2px solid var(--primary-border); outline-offset:2px; border-radius:10px;}
/* RH group title styled like menuItem (requested) */
.menuGroupTitle.psMenuItemLike{
  padding:10px 10px;
  border-radius:14px;
  text-transform:none;
  letter-spacing:0;
  font-size:16px;
  color:rgba(255,255,255,.92);
  border:1px solid transparent;
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.menuGroupTitle.psMenuItemLike:hover{ background:rgba(255,255,255,.08); border-color:var(--primary-border); }
.menuGroupTitle.psMenuItemLike.open{ background:var(--primary-soft); border-color:var(--primary-border); color:var(--primary); }
.menuGroupTitle.psMenuItemLike .psGroupLikeInner{ display:flex; align-items:center; gap:10px; min-width:0; }


.menuItem{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius:14px;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
}
.menuItem:hover{background:rgba(255,255,255,.08); border-color:var(--primary-border)}
.menuItem.active{background:var(--primary-soft); border-color:var(--primary-border); color:var(--primary)}
.menuIcon{width:22px; height:22px; display:grid; place-items:center; background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.16); border-radius:10px}
.menuIcon svg{width:16px; height:16px}
.menuIcon svg{width:16px; height:16px}
.menuItem.active .menuIcon{background:rgba(11,95,255,.16); border-color:var(--primary-border); color:var(--primary)}
.menuText{flex:1; font-weight:600; font-size:14px}
.menuChevron{opacity:.7}
.submenu{display:none; flex-direction:column; gap:6px; padding:0 0 0 14px}
.menuItem.open + .submenu{display:flex}
.subItem{padding:9px 10px; border-radius:12px; text-decoration:none; color:rgba(255,255,255,.9); border:1px solid transparent}
.subItem:hover{background:rgba(255,255,255,.06); border-color:var(--primary-border)}
.subItem.active{background:var(--primary-soft); border-color:var(--primary-border); color:var(--primary)}

.sideFooter{margin-top:auto; padding:10px; display:flex; justify-content:space-between; align-items:center}
.pill{font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.18)}
.muted{color:rgba(255,255,255,.75); font-size:12px}

.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  height:74px;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
}
body.theme-dark .topbar{background:rgba(8,11,18,.78)}
.topbarLeft{display:flex; align-items:center; gap:14px}
.topBrand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.04);
}
.topBrandLogo{
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg,var(--ps-primary),var(--ps-secondary));
  color:#fff;
  font-weight:950;
  flex:0 0 auto;
}
.topBrandLogoImg{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:4px;
}
.topBrandLogo.hasLogo{
  background:#071426;
  border:1px solid rgba(255,255,255,.08);
}
.topBrandName{
  font-size:12px;
  font-weight:850;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topBrandSub{
  font-size:10px;
  color:var(--muted);
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.iconBtn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.60);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}
body.theme-dark .iconBtn{background:rgba(255,255,255,.04)}
.iconBtn svg{width:18px; height:18px; display:block}
.iconBtn:hover{background:rgba(255,255,255,.06)}
.pageTitle{font-weight:800; font-size:18px}
.breadcrumb{font-size:12px; color:var(--muted); margin-top:2px}
.topbarRight{display:flex; align-items:center; gap:10px}
.chip{font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04)}
.user{display:flex; gap:10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.04)}
body:not(.theme-dark) .chip,
body:not(.theme-dark) .user{background:rgba(255,255,255,.70)}
.avatar{width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-weight:800; background:var(--primary-soft); color:var(--primary); border:1px solid rgba(255,255,255,.12)}
body:not(.theme-dark) .avatar{border:1px solid var(--line)}
body.theme-dark .avatar{border:1px solid rgba(255,255,255,.12)}
.avatar{background:var(--primary-soft)}
.userName{font-weight:700; font-size:13px}
.userRole{font-size:11px; color:var(--muted)}

.content{padding:18px; display:flex; flex-direction:column; gap:14px}
.appVersionFooter{
  margin-top:auto;
  padding:8px 18px 14px;
  color:var(--muted);
  font-size:11px;
}
.appVersionButton{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  cursor:pointer;
}
.appVersionButton:hover{
  color:var(--text);
  border-color:var(--primary-border);
  background:var(--primary-soft);
}
.appVersionName{
  color:var(--text);
  font-weight:800;
}
.settingsTabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:8px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.settingsTab{
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--muted);
  padding:11px 14px;
  cursor:pointer;
  font-weight:800;
  min-height:42px;
}
.settingsTab:hover,
.settingsTab.active{
  color:var(--text);
  border-color:var(--primary-border);
  background:var(--primary-soft);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.settingsTabBody{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.settingsPresetGrid,
.settingsCardGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.settingsHero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow:var(--shadow);
}
.settingsHeroTitle{
  font-size:22px;
  font-weight:950;
}
.settingsHeroSub{
  color:var(--muted);
  margin-top:5px;
  font-size:13px;
}
.settingsVersionBadge{
  border:1px solid var(--primary-border);
  background:var(--primary-soft);
  color:var(--primary);
  border-radius:999px;
  padding:7px 11px;
  font-weight:900;
  white-space:nowrap;
}
.settingsInfoCard{
  border-radius:20px;
}
.brandUploadDrop{
  border:1px dashed var(--primary-border);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.045);
}
.brandUploadHint{
  display:block;
  color:var(--text);
  font-weight:800;
  margin:4px 0 10px;
}
.systemInfoBox{
  white-space:pre-wrap;
  background:rgba(0,0,0,.18);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  color:var(--text);
  font-size:12px;
}
.appearancePanel{
  overflow:hidden;
}
.appearanceModeGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}
.appearanceModeCard{
  min-height:150px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  padding:16px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
}
.appearanceModeCard:hover,
.appearanceModeCard.active{
  border-color:var(--primary-border);
  background:var(--primary-soft);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.appearanceModeCard span:last-child{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}
.appearanceModeIcon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  font-weight:950;
}
.appearanceToggleCard input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.excelImportModal{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.excelImportDetected{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.excelImportPreview{
  max-height:320px;
  overflow:auto;
}
.tenantPickerUi{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tenantSearch{
  margin-top:4px;
}
.tenantCardGrid{
  display:grid;
  gap:10px;
}
.tenantCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}
.tenantCard.active{
  border-color:var(--primary-border);
  background:var(--primary-soft);
}
.tenantCardTitle{
  font-weight:900;
}
.tenantCardSub{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}
.settingsPreset{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:12px;
  text-align:left;
  cursor:pointer;
}
.settingsPreset span,
.settingsInfoList{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}
.settingsInfoList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.grid{display:grid; gap:14px}
.grid.cards{grid-template-columns: repeat(12, 1fr)}
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow)}
body.theme-dark .card{background:linear-gradient(180deg, rgba(16,24,39,.96), rgba(16,24,39,.72))}
.card.pad{padding:16px}
.cardTitle{font-weight:800; font-size:14px}
.cardSub{color:var(--muted); font-size:12px; margin-top:4px}
.stat{grid-column: span 3; padding:16px}
.kpiHead{display:flex; align-items:center; justify-content:space-between; gap:10px}
.kpiTrend{display:grid; place-items:center; width:34px; height:34px; border-radius:14px; border:1px solid var(--primary-border); background:var(--primary-soft); color:var(--primary)}
body.theme-dark .kpiTrend{background:var(--primary-soft)}
.kpiTrend svg{width:18px; height:18px}
.statVal{font-weight:900; font-size:26px; margin-top:10px}
.statTag{margin-top:8px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px}
.dot{width:8px; height:8px; border-radius:999px; background:var(--good)}

.lucideIcon,
[data-lucide],
.menuIcon,
.searchIcon,
.iconBtn,
.kpiTrend{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sidebar svg,
.menuIcon svg,
.searchIcon svg,
.iconBtn svg,
.card svg,
.kpiTrend svg,
.lucideIcon svg,
[data-lucide] svg{
  display:inline-block;
  opacity:1;
  color:currentColor;
  stroke:currentColor;
  fill:none;
  flex:0 0 auto;
}

.menuIcon,
.searchIcon{color:#B8C0CC}
.menuItem.active .menuIcon,
.menuItem.open .menuIcon,
.menuGroupTitle.psMenuItemLike.open .menuIcon,
.subItem.active,
.kpiTrend{color:var(--primary)}

.toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.input{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  color:var(--text);
  outline:none;
  min-width:220px;
}
body.theme-dark .input{background:rgba(0,0,0,.22)}
.input:focus{border-color:var(--primary-border); box-shadow:0 0 0 3px var(--primary-soft)}
.select{min-width:180px}
.btn{
  border:1px solid transparent;
  background:var(--brand-button, var(--primary));
  color:#080B12;
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 12px 24px rgba(11,95,255,.18);
}
.btn:hover{background:var(--primary-hover); filter:none}
.btn.secondary{background:rgba(255,255,255,.06); border:1px solid var(--primary-border); color:#FFFFFF; box-shadow:none}

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
  filter:saturate(.7);
}

/* ===== Dashboard layout tune-up (ProSmart) ===== */
.main,
.content,
.dashboardPage{
  width:100%;
  max-width:none;
}

.dashboardPage{
  min-width:0;
}

.dashboardPage .grid.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  align-items:stretch;
  width:100%;
}

.dashboardPage > .card,
.dashboardPage .grid.cards > .card,
.dashboardPage .kpi-card{
  grid-column:auto;
  min-width:0;
  min-height:140px;
  overflow:hidden;
  box-sizing:border-box;
}

.dashboardPage .grid.cards > .card{
  display:flex;
  flex-direction:column;
}

.dashboardPage .kpi-card{
  padding:18px;
}

.dashboardPage .card.pad{
  padding:20px;
}

.dashboardPage .card *,
.dashboardPage .kpi-card *{
  box-sizing:border-box;
  min-width:0;
}

.dashboardPage .cardTitle{
  line-height:1.25;
  overflow-wrap:normal;
  word-break:normal;
}

.dashboardPage .cardSub,
.dashboardPage .muted,
.dashboardPage .badge{
  line-height:1.35;
  overflow-wrap:anywhere;
}

.dashboardPage .toolbar{
  min-width:0;
  align-items:center;
}

.dashboardPage .toolbar > div[style*="flex:1"]{
  min-width:0;
}

.dashboardPage .btn,
.dashboardPage .card .btn,
.dashboardPage .kpi-card .btn{
  max-width:100%;
  width:auto;
  min-height:36px;
  padding:8px 14px;
  font-size:14px;
  border-radius:12px;
  line-height:1.2;
  white-space:normal;
  box-sizing:border-box;
}

.dashboardPage .card > .btn,
.dashboardPage .card > a.btn{
  align-self:flex-start;
  margin-top:auto;
  background:var(--primary-soft);
  color:var(--primary);
  border:1px solid var(--primary-border);
  box-shadow:none;
}

.dashboardPage .card > .btn:hover,
.dashboardPage .card > a.btn:hover{
  background:rgba(11,95,255,.22);
}

.dashboardPage .svgChart{
  min-width:0;
  max-width:100%;
}

.dashboardPage .barRow,
.dashboardPage .funnelRow{
  grid-template-columns:minmax(92px, 1.2fr) minmax(120px, 3fr) auto;
}

@media (min-width: 1180px){
  .dashboardPage .grid.cards > .card:not(.kpi-card){
    min-height:220px;
  }
}

@media (max-width: 768px){
  .dashboardPage .grid.cards{
    grid-template-columns:1fr;
  }

  .dashboardPage .btn,
  .dashboardPage .card > .btn,
  .dashboardPage .card > a.btn,
  .dashboardPage .kpi-card .btn{
    width:100%;
  }
}

/* Empty state */
.emptyState{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.emptyIcon{
  width:44px; height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  font-size:18px;
}

/* Lightweight skeleton */
.isLoading .statVal,
.isLoading .cardTitle,
.isLoading .cardSub{
  position:relative;
  color:transparent !important;
  user-select:none;
}
.isLoading .statVal::after,
.isLoading .cardTitle::after,
.isLoading .cardSub::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size:200% 100%;
  animation:skeleton 1.1s ease-in-out infinite;
}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

.tableWrap{overflow:auto; border-radius:18px; border:1px solid var(--line)}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:900px; background:rgba(0,0,0,.18)}
.table th, .table td{padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top}
.table th{position:sticky; top:0; background:rgba(16,18,26,.92); text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.82)}
.table td{font-size:13px; color:rgba(255,255,255,.92)}
.rowActions{display:flex; gap:8px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:12px; color:rgba(255,255,255,.9)}

.pager{display:flex; justify-content:space-between; align-items:center; gap:10px}

.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50}
.modal.open{display:flex}
.modalBackdrop{position:absolute; inset:0; background:rgba(0,0,0,.38)}
.modalCard{position:relative; width:min(820px, 92vw); max-height:86vh; overflow:auto; background:linear-gradient(180deg, rgba(20,24,39,.98), rgba(15,18,32,.92)); border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow: var(--shadow)}
.modalHeader{display:flex; justify-content:space-between; align-items:flex-start; padding:16px 16px 10px; border-bottom:1px solid var(--line)}
.modalHeader .iconBtn:hover{background:rgba(255,255,255,.12); border-color:var(--primary-border)}
.modalTitle{font-weight:900}
.modalSub{font-size:12px; color:var(--muted); margin-top:4px}
.modalBody{padding:16px}
.modalFooter{padding:14px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px}
.formGrid{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px}
.formField{grid-column: span 6; display:flex; flex-direction:column; gap:6px}
.label{font-size:12px; color:var(--muted)}
.modalBody .input{color:var(--text); background:rgba(255,255,255,.07)}
.bulkSelectInline{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}

/* ===== Action details, modals and toasts ===== */
.toastHost{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(360px, calc(100vw - 32px));
  pointer-events:none;
}
.toast{
  transform:translateY(10px);
  opacity:0;
  transition:opacity .18s ease, transform .18s ease;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(19,24,38,.96);
  color:var(--text);
  box-shadow:var(--shadow);
  font-weight:800;
  font-size:13px;
}
.toast.show{opacity:1; transform:translateY(0)}
.toast.success{border-color:rgba(40,209,124,.48); background:rgba(25,53,42,.96)}
.toast.error{border-color:rgba(255,64,121,.55); background:rgba(62,24,36,.96)}
.toast.warning{border-color:rgba(255,204,102,.55); background:rgba(55,44,24,.96)}
.toast.info{border-color:rgba(91,156,255,.45)}

.detailHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.detailCrumb{font-size:13px; color:var(--muted); margin-bottom:8px}
.detailTitle{font-size:26px; line-height:1.15; font-weight:950; color:var(--text)}
.detailActions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.detailActions .btn{min-height:44px}
.detailTabs{
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
  overflow:auto;
}
.detailTabs span{
  padding:0 0 10px;
  color:rgba(255,255,255,.84);
  font-weight:900;
  white-space:nowrap;
}
.detailTabs span.active{
  color:var(--primary);
  border-bottom:3px solid var(--primary);
}
.detailGrid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-bottom:18px;
}
.detailGrid.compact{grid-template-columns:repeat(3, minmax(0, 1fr)); margin-bottom:0}
.detailInfoCard{
  min-height:82px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.045);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
.detailInfoLabel{font-size:12px; color:var(--muted); font-weight:900}
.detailInfoValue{
  color:rgba(255,255,255,.92);
  font-size:18px;
  font-weight:850;
  overflow-wrap:anywhere;
}
.detailSection{margin-top:12px}
.detailSection .cardTitle{font-size:22px; margin-bottom:14px}
.detailEmpty{
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--muted);
  font-size:16px;
  font-weight:850;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.detailWarning{
  padding:12px;
  border:1px solid rgba(255,204,102,.42);
  border-radius:14px;
  background:rgba(255,204,102,.08);
  color:rgba(255,255,255,.9);
  font-weight:750;
}
.inventoryMovementBadge{
  border-color:rgba(148,163,184,.34);
  background:rgba(148,163,184,.10);
  color:#e2e8f0;
}
.inventoryMovementBadge.is-draft{
  border-color:rgba(148,163,184,.34);
  background:rgba(148,163,184,.10);
  color:#e2e8f0;
}
.inventoryMovementBadge.is-confirmed{
  border-color:rgba(56,189,248,.38);
  background:rgba(56,189,248,.12);
  color:#bae6fd;
}
.inventoryMovementBadge.is-done{
  border-color:rgba(34,197,94,.38);
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
}
.inventoryMovementBadge.is-cancelled{
  border-color:rgba(251,191,36,.40);
  background:rgba(251,191,36,.12);
  color:#fde68a;
}
.inventoryMovementActions{
  flex-wrap:wrap;
  min-width:220px;
}
.movementDetailPanel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.movementReadonlyNotice{
  border-radius:10px;
}
.movementDetailSection{
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  background:rgba(255,255,255,.03);
}
.movementDetailTitle{
  margin-bottom:10px;
  font-weight:900;
  color:var(--text);
}
.movementPrecheckStatus{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.movementPrecheckList{
  margin:0;
  padding-left:18px;
  color:var(--text);
}
.movementPrecheckList li{
  margin:6px 0;
}
.movementPrecheckList.is-blocking li{
  color:#fecaca;
}
.movementPrecheckList.is-warning li{
  color:#fde68a;
}
.modalFooter .danger, .btn.danger{
  background:linear-gradient(135deg, #ff2334, #d21434);
  color:#fff;
  border-color:rgba(255,255,255,.12);
}

@media (max-width: 1180px){
  .detailGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .detailGrid.compact{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 760px){
  .detailHeader{flex-direction:column}
  .detailActions{justify-content:flex-start}
  .detailGrid, .detailGrid.compact{grid-template-columns:1fr}
  .formField{grid-column:span 12}
}

/* ===== Évaluation Équipe (clone UI) ===== */
.evalHeader{display:flex; justify-content:space-between; align-items:flex-end; gap:14px}
.evalHeaderRight{display:flex; align-items:flex-end; gap:10px}
.evalLabelSmall{font-size:12px; color:var(--muted); margin-right:6px}

.evalGroup{margin-top:10px}
.evalGroupHeader{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.14);
  color:var(--text);
  cursor:pointer;
}
.evalGroupHeader:hover{background:rgba(0,0,0,.18)}
.evalGroupLeft{display:flex; align-items:center; gap:10px}
.evalChevron{opacity:.85}
.evalGroupTitle{font-weight:900; letter-spacing:.08em}
.evalGroup.closed .evalChevron{transform: rotate(-90deg)}
.evalGroup.closed .evalGrid{display:none}

.evalGrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px}
.evalCard{
  background:linear-gradient(180deg, rgba(20,24,39,.92), rgba(20,24,39,.62));
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px;
  box-shadow: var(--shadow);
}
.evalLine{display:flex; flex-direction:column; gap:4px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.evalLine:last-child{border-bottom:none}
.evalK{font-size:12px; color:rgba(255,255,255,.78); font-weight:800; text-transform:uppercase; letter-spacing:.06em}
.evalV{font-size:13px; color:rgba(255,255,255,.92); font-weight:700}

/* === Small stats list (TC stats) === */
.statList{display:flex; flex-direction:column; gap:8px}
.statRow{display:flex; align-items:center; justify-content:space-between; gap:10px}
.statRowK{font-size:13px; color:rgba(255,255,255,.88); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

@media (max-width: 980px){
  .evalGrid{grid-template-columns: repeat(1, minmax(0, 1fr))}
  .evalHeader{flex-direction:column; align-items:flex-start}
}

@media (max-width: 980px){
  .sidebar{position:fixed; left:0; top:0; bottom:0; transform: translateX(0); z-index:40}
  body.sidebarClosed .sidebar{transform: translateX(-105%)}
  .main{margin-left:290px}
  body.sidebarClosed .main{margin-left:0}
}
@media (min-width: 981px){
  body.sidebarClosed .sidebar{width:86px; flex-basis:86px}
  body.sidebarClosed .brandText, body.sidebarClosed .sideSearch, body.sidebarClosed .menuText, body.sidebarClosed .menuChevron, body.sidebarClosed .sideFooter .muted, body.sidebarClosed .kbd{display:none}
  body.sidebarClosed .submenu{display:none !important}
  body.sidebarClosed .main{margin-left:0}
}

/* ===== Custom pages (TC / Commercial) ===== */
.headerRow{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.filtersGrid{display:grid; grid-template-columns: repeat(12, 1fr); gap:10px}
.filtersGrid .input{grid-column: span 4; min-width:0; width:100%}
.filtersGrid .select{grid-column: span 4; min-width:0; width:100%}

.cardsGrid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px}
.itemCard{grid-column: span 4; background:rgba(0,0,0,.14); border:1px solid var(--line); border-radius:18px; padding:14px}
.itemTop{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.itemTitle{font-weight:900; font-size:14px; line-height:1.25}
.itemActions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.itemMeta{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin-top:12px}
.kv{display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.03)}
.k{font-size:11px; color:rgba(255,255,255,.74); font-weight:800; text-transform:uppercase; letter-spacing:.06em}
.v{font-size:13px; color:rgba(255,255,255,.92); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.tag{display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:12px; color:rgba(255,255,255,.9)}
.tag.good{border-color: rgba(40,209,124,.55); background:rgba(40,209,124,.12)}
.tag.warn{border-color: rgba(255,204,102,.55); background:rgba(255,204,102,.12)}
.tag.bad{border-color: rgba(255,45,141,.55); background:rgba(255,45,141,.12)}

.tabsRow{display:flex; gap:10px; flex-wrap:wrap}
.tabBtn{border:1px solid var(--line); background:rgba(0,0,0,.14); color:rgba(255,255,255,.92); padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:800}
.tabBtn.active{background:rgba(255,255,255,.08)}

.dealLayout{display:grid; grid-template-columns: 380px 1fr; gap:14px}
.dealList{min-height:420px}
.dealDetail{min-height:420px}
.dealItem{display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.03); cursor:pointer}
.dealItem:hover{background:rgba(255,255,255,.05)}
.dealItem.active{border-color: rgba(255,255,255,.22); background:rgba(255,255,255,.06)}
.dealItemTop{display:flex; justify-content:space-between; gap:10px}
.dealItemTitle{font-weight:900; font-size:13px}
.dealItemSub{color:var(--muted); font-size:12px}

@media (max-width: 1200px){
  .filtersGrid .input, .filtersGrid .select{grid-column: span 6}
  .itemCard{grid-column: span 6}
  .dealLayout{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .filtersGrid .input, .filtersGrid .select{grid-column: span 12}
  .itemCard{grid-column: span 12}
  .itemMeta{grid-template-columns: 1fr}
}

/* ===== Login page ===== */
.authWrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:radial-gradient(900px 600px at 20% 10%, rgba(11,95,255,.12), transparent 55%),
             linear-gradient(135deg, var(--bg), var(--surface));
}
.authCard{
  width:100%;
  max-width:420px;
  background:rgba(16,24,39,0.88);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 20px 45px rgba(0,0,0,0.35);
}
.authBrand{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.authLogo{width:96px;max-height:54px;border-radius:0;object-fit:contain;background:transparent;padding:0}
.authTitle{font-size:20px;font-weight:700;color:#fff;line-height:1}
.authSub{font-size:12px;color:rgba(255,255,255,0.7)}
.authForm{display:flex;flex-direction:column;gap:10px}
.authError{min-height:18px;color:#ffb4b4;font-size:12px;margin-top:6px}
.authHint{margin-top:10px;display:flex;flex-direction:column;gap:6px}


/* ===== Unified Test: Theme & Compact ===== */
body[data-theme="dark"]{
  background:var(--bg);
  color:var(--text);
}
body[data-theme="dark"] .card{ background:var(--surface); border-color:var(--border); }
body[data-theme="dark"] .sidebar{ background:var(--sidebar); border-color:var(--border); }
body[data-theme="dark"] .topbar{ background:rgba(8,11,18,.78); border-color:var(--border); }
body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea{
  background:var(--bg); color:var(--text); border-color:var(--border);
}
body[data-theme="dark"] .muted{ color:var(--muted); }

body[data-compact="1"] .card.pad{ padding:12px; }
body[data-compact="1"] .table td, body[data-compact="1"] .table th{ padding:6px 8px; }



/* ===== Dashboard Advanced ===== */
.svgChart{ display:block; width:100%; height:auto; }
.grid.charts2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 900px){ .grid.charts2{ grid-template-columns: 1fr; } }

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

.barList{ display:flex; flex-direction:column; gap:10px; }
.barRow{ display:grid; grid-template-columns: 1.2fr 3fr auto; gap:10px; align-items:center; }
.barLabel{ font-weight:600; font-size:12px; opacity:.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barTrack{ height:10px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.barFill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--brand2), var(--brand3)); }

.funnel{ display:flex; flex-direction:column; gap:10px; }
.funnelRow{ display:grid; grid-template-columns: 1.2fr 3fr auto; gap:10px; align-items:center; }
.funnelLabel{ font-weight:600; font-size:12px; opacity:.9; }
.funnelTrack{ height:12px; border-radius:12px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.funnelFill{ height:100%; border-radius:12px; background: linear-gradient(90deg, var(--good), var(--brand2)); }

.miniTable{ width:100%; border-collapse:collapse; }
.miniTable td{ padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.miniKey{ font-weight:700; opacity:.95; }
.miniVal{ text-align:right; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.table.mini td, .table.mini th{ padding:6px 8px; font-size:12px; }

/* --- ProSmart i18n (AR/FR) --- */
.langTag{margin-inline-start:8px;font-size:11px;font-weight:800;letter-spacing:.06em;opacity:.9}

/* Direction switching */
html[dir="rtl"] .app{direction:rtl}
html[dir="rtl"] .sideSearch .kbd{margin-left:0;margin-right:auto}
html[dir="rtl"] .submenu{padding:0 14px 0 0}
html[dir="rtl"] .menuItem{gap:10px}
html[dir="rtl"] .menuChevron{margin-left:0;margin-right:auto}
html[dir="rtl"] .topbarLeft{flex-direction:row-reverse}
html[dir="rtl"] .topbarRight{flex-direction:row-reverse}
html[dir="rtl"] .user{flex-direction:row-reverse}
html[dir="rtl"] .userMeta{text-align:right}

/* v4.2 Billing status banner */
.billingBanner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--primary-border);
  border-radius:14px;
  background:var(--primary-soft);
  color:var(--text);
}
.billingBannerText{
  color:var(--primary);
  font-weight:850;
  line-height:1.35;
}
@media(max-width:768px){
  .billingBanner{align-items:stretch;flex-direction:column}
  .billingBanner .btn{width:100%}
}

/* v4.3 Company users */
.pageShell{
  min-height:100vh;
  padding:24px;
  background:var(--bg);
}
.sectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}
.sectionHead h1{margin:0 0 4px}
.sectionHead p{margin:0;color:var(--muted)}
.btn.small{padding:6px 8px;font-size:12px}
.modalDialog{
  width:min(760px, calc(100vw - 28px));
  border:0;
  padding:0;
  background:transparent;
  color:var(--text);
}
.modalDialog::backdrop{background:rgba(0,0,0,.55)}
.userForm{margin:0}
.onboardingCard{margin-bottom:16px}
.onboardingGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;
  margin:14px 0;
}
.onboardingItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:750;
}
.onboardingItem input{width:auto}
.statusBadge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--primary-border);
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:850;
  font-size:12px;
}
@media(max-width:768px){
  .pageShell{padding:12px}
  .sectionHead{flex-direction:column}
  .sectionHead .rowActions{width:100%;flex-wrap:wrap}
}

/* v5.0.1 Commercial Reporting Pro */
.commercialReporting{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.commercialFilters{
  margin-top:12px;
  flex-wrap:wrap;
}
.commercialFilters .input{
  min-width:160px;
}
.commercialFilters label.badge{
  gap:8px;
  padding:6px 8px;
}
.commercialFilters label.badge .input{
  min-width:136px;
}
.commercialKpis .statVal{
  font-size:clamp(22px, 3vw, 34px);
  line-height:1.05;
}
.commercialCharts{
  align-items:stretch;
}
.commercialChart{
  display:block;
  width:100%;
  min-height:150px;
  color:var(--primary);
  margin-top:12px;
}
.commercialConversion{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.commercialBars{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.commercialBarRow{
  display:grid;
  grid-template-columns:minmax(120px, 1.1fr) minmax(120px, 2fr) auto;
  align-items:center;
  gap:10px;
}
.commercialBarLabel{
  font-size:13px;
  color:rgba(255,255,255,.9);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.commercialBarTrack{
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.commercialBarFill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--primary), var(--brand2));
}
.commercialReportTable{
  min-width:720px;
}
.sectorTable,
.sectorAssignmentTable{
  min-width:760px;
}
.commercialUniverse{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.universeFilterCard{
  margin-bottom:16px;
}
.universeTable{
  min-width:1120px;
}
.sectorCheckLine{
  flex-direction:row;
  align-items:center;
  gap:10px;
}
.sectorCheckLine input{
  width:auto;
}
.commercialSectorAssignments{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sectorAssignGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:12px;
  margin:14px 0;
}
.sectorAssignGrid .formField{
  grid-column:auto;
}
.sectorPills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.sectorPill{
  gap:8px;
}
.sectorPillRemove{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:inherit;
  cursor:pointer;
}
.sectorPillRemove:hover{
  background:rgba(255,255,255,.22);
}
@media(max-width:768px){
  .commercialFilters .input,
  .commercialFilters label.badge,
  .commercialFilters button{
    width:100%;
  }
  .sectorAssignGrid{
    grid-template-columns:1fr;
  }
  .commercialBarRow{
    grid-template-columns:1fr auto;
  }
  .commercialBarTrack{
    grid-column:1 / -1;
  }
}

/* v5.0.9 Commercial UI polish */
.commercial-page{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.commercial-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:0;
}
.commercial-title{
  font-size:20px;
  font-weight:900;
  letter-spacing:0;
}
.commercial-subtitle{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
  line-height:1.45;
}
.commercial-header-actions,
.commercial-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.commercial-filter-card,
.commercialFilterCard,
.universeFilterCard{
  border-color:rgba(255,255,255,.14);
}
.commercialFilters{
  gap:10px;
  align-items:end;
}
.commercialFilters .input,
.commercialFilters .select{
  min-height:40px;
}
.commercial-grid,
.commercialKpis,
.facturationPro > .grid.cards,
.commercialPlanning > .grid.cards{
  gap:12px;
}
.commercialKpis{
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.commercial-card,
.commercial-kpi,
.commercialKpis .card,
.facturationPro .grid.cards > .card,
.commercialPlanning .grid.cards > .card{
  border-radius:14px;
}
.commercialKpis .card,
.facturationPro .grid.cards > .card,
.commercialPlanning .grid.cards > .card{
  min-height:104px;
}
.commercialKpis .cardTitle,
.facturationPro .statLabel,
.commercialPlanning .statLabel{
  color:var(--muted);
  font-size:12px;
  text-transform:none;
}
.commercial-table,
.commercialReportTable,
.sectorTable,
.sectorAssignmentTable,
.universeTable,
.facturationPro .table,
.commercialPlanning .table{
  min-width:760px;
}
.commercial-audit-table{
  min-width:980px;
}
.commercial-permissions-table{
  min-width:980px;
}
.commercial-permission-card #commercialPermTable,
#commercialAuditRows{
  overflow:auto;
}
.commercial-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.92);
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  text-transform:none;
}
.commercial-status.status-actif,
.commercial-status.status-payee,
.commercial-status.status-termine,
.commercial-status.status-validee{
  background:rgba(21,185,121,.16);
  border-color:rgba(21,185,121,.35);
  color:#bff6df;
}
.commercial-status.status-inactif,
.commercial-status.status-annule,
.commercial-status.status-annulee{
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.28);
  color:#dbe4ef;
}
.commercial-status.status-en_cours,
.commercial-status.status-partielle,
.commercial-status.status-envoyee,
.commercial-status.status-haute{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.36);
  color:#ffe0a3;
}
.commercial-status.status-urgente,
.commercial-status.status-en_retard{
  background:rgba(239,68,68,.17);
  border-color:rgba(239,68,68,.38);
  color:#ffc7c7;
}
.commercial-status.status-planifie,
.commercial-status.status-brouillon,
.commercial-status.status-non_payee,
.commercial-status.status-normale{
  background:rgba(59,130,246,.15);
  border-color:rgba(59,130,246,.35);
  color:#cfe1ff;
}
.commercial-status.status-basse{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.3);
  color:#c8f7d6;
}
.commercial-empty,
.commercial-error,
.commercial-loading{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:86px;
  color:var(--muted);
}
.commercial-empty{
  justify-content:center;
  text-align:center;
  flex-direction:column;
  padding:18px;
}
.commercial-error{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
}
.commercial-spinner{
  width:24px;
  height:24px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--primary);
  animation:commercialSpin .8s linear infinite;
  flex:0 0 auto;
}
@keyframes commercialSpin{to{transform:rotate(360deg)}}
.commercial-modal .modalBody,
.modalBody .formGrid{
  gap:12px;
}
.modalFooter .btn,
.rowActions .btn{
  white-space:nowrap;
}
.commercial-permissions-table td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:rgba(16,18,26,.96);
}
.commercial-permissions-table label{
  min-height:30px;
  border-radius:8px;
  padding:3px 4px;
}
.commercial-permissions-table input:disabled + span{
  opacity:.72;
}
.commercial-audit-table td:nth-child(4){
  min-width:240px;
}

/* v5.1.0 Pipeline CRM Kanban */
.commercial-pipeline-page{
  overflow:hidden;
}
.pipelineFilters .input,
.pipelineFilters .select{
  min-width:180px;
}
.commercialPipeline{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pipelineKpis{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.pipelineBoard{
  display:grid;
  grid-template-columns:repeat(6,minmax(260px,1fr));
  gap:12px;
  align-items:start;
  overflow-x:auto;
  padding-bottom:8px;
}
.pipelineColumn{
  min-width:260px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.pipelineColumnHeader{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.1);
  position:sticky;
  top:0;
  background:rgba(18,22,32,.96);
  border-radius:14px 14px 0 0;
  z-index:1;
}
.pipelineColumnBody{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  min-height:180px;
}
.pipelineCard{
  display:flex;
  flex-direction:column;
  gap:8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(10,14,22,.88);
  padding:12px;
}
.pipelineCard[draggable="true"]{
  cursor:grab;
}
.pipelineCard:active{
  cursor:grabbing;
}
.pipelineCardTop,
.pipelineValueRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.pipelineCardTitle{
  font-weight:850;
  line-height:1.25;
}
.pipelineCardClient{
  color:rgba(255,255,255,.92);
  font-weight:700;
}
.pipelineCardCompany{
  color:var(--muted);
  min-height:18px;
}
.pipelineMeta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.pipelineMeta span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:var(--muted);
  font-size:12px;
}
.pipelineMoveRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.btn.tiny{
  min-height:26px;
  padding:3px 7px;
  font-size:11px;
}
.pipelineActions{
  border-top:1px solid rgba(255,255,255,.09);
  padding-top:8px;
}
.commercialPipelineDetails{
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media(max-width:1100px){
  .pipelineBoard{
    grid-template-columns:repeat(3,minmax(260px,1fr));
  }
}
@media(max-width:768px){
  .pipelineBoard{
    grid-template-columns:1fr;
    overflow-x:visible;
  }
  .pipelineColumn{
    min-width:0;
  }
  .pipelineFilters .input,
  .pipelineFilters .select{
    width:100%;
    min-width:0;
  }
  .pipelineCardTop,
  .pipelineValueRow{
    align-items:flex-start;
    flex-direction:column;
  }
}
.facturationPro,
.commercialPlanning{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.facturationPro .tableWrap,
.commercialPlanning .tableWrap,
.commercialSectorAssignments .tableWrap{
  max-width:100%;
}
@media(max-width:900px){
  .commercial-header{
    flex-direction:column;
  }
  .commercial-header-actions,
  .commercial-header-actions .btn{
    width:100%;
  }
  .commercial-header-actions .btn{
    justify-content:center;
  }
  .commercialKpis,
  .facturationPro > .grid.cards,
  .commercialPlanning > .grid.cards{
    grid-template-columns:1fr;
  }
  .commercialFilters{
    align-items:stretch;
  }
  .commercialFilters label.badge{
    justify-content:space-between;
  }
  .modalCard{
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:16px;
  }
  .modalFooter{
    flex-wrap:wrap;
  }
  .modalFooter .btn,
  .rowActions .btn{
    flex:1 1 140px;
  }
}
@media(max-width:560px){
  .commercial-title{
    font-size:18px;
  }
  .commercialFilters{
    gap:8px;
  }
  .commercial-badge{
    max-width:100%;
    white-space:normal;
    text-align:center;
  }
  .table th,
  .table td{
    padding:10px 9px;
  }
}

/* v5.1.0.1 Mobile app UX and PWA polish */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
.mobile-overlay{
  display:none;
}
.mobile-bottom-nav{
  display:none;
}
.responsive-table,
.tableWrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table{
  width:100%;
}
.btn,
.iconBtn,
.menuItem,
.subItem,
.mobile-bottom-nav a{
  min-height:44px;
}
.input,
.select,
textarea.input{
  max-width:100%;
}
.mobile-action-stack,
.rowActions{
  flex-wrap:wrap;
}
.brandSettingsGrid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:14px;
  align-items:start;
}
.brandSettingsForm .formField.full{
  grid-column:1 / -1;
}
.brandColorInput{
  min-height:44px;
  padding:4px;
}
.brandPreviewBox{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.brandPreviewLogo{
  width:86px;
  height:86px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--ps-secondary));
  color:white;
  font-weight:950;
  font-size:24px;
  overflow:hidden;
}
.brandPreviewLogo.hasLogo{
  background:#071426;
  border:1px solid rgba(255,255,255,.08);
}
.brandPreviewLogo img,
.brandLogoText .brandLogo{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6px;
}
.brandPreviewName{
  font-size:20px;
  font-weight:900;
}
.brandPreviewSampleCard{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
}
.brandSettingsActions{
  display:flex;
  gap:10px;
}
.brandIdentityPreview{
  min-height:280px;
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  overflow:hidden;
}
.brandPreviewWrap{
  min-width:0;
}
.brandPreviewWrap .brandIdentityPreview{
  margin-top:8px;
}
.brandPreviewSidebar{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  padding:16px 10px;
}
.brandPreviewMain{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.brandPreviewHeader{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  font-weight:900;
}
.brandPreviewBadge{
  border-radius:999px;
  padding:5px 9px;
  color:#07111F;
  font-size:11px;
}
.brandPreviewTable{
  margin-top:12px;
  min-width:100%;
}
.brandPreviewTable td{
  font-size:11px;
}
.brandPreviewMain .brandPreviewSampleCard{
  margin:14px;
}
@media(max-width:768px){
  body{
    background:linear-gradient(180deg, #07111F, #0F1B2D);
    padding-bottom:72px;
  }
  .app{
    display:block;
    min-height:100dvh;
  }
  .mobile-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.62);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
    z-index:70;
  }
  .mobile-overlay.open,
  body.sidebarMobileOpen .mobile-overlay{
    opacity:1;
    pointer-events:auto;
  }
  body.sidebarMobileOpen::before{
    display:none !important;
  }
  .sidebar,
  body.sidebarClosed .sidebar{
    position:fixed !important;
    left:0 !important;
    right:auto !important;
    top:0 !important;
    bottom:0 !important;
    width:min(88vw, 340px) !important;
    max-width:340px !important;
    flex-basis:auto !important;
    transform:translateX(-105%) !important;
    transition:transform .2s ease !important;
    z-index:80 !important;
    padding:14px 12px 86px !important;
    overflow:hidden !important;
  }
  body.sidebarMobileOpen .sidebar{
    transform:translateX(0) !important;
  }
  html[dir="rtl"] .sidebar,
  html[dir="rtl"] body.sidebarClosed .sidebar{
    left:auto !important;
    right:0 !important;
    transform:translateX(105%) !important;
  }
  html[dir="rtl"] body.sidebarMobileOpen .sidebar{
    transform:translateX(0) !important;
  }
  body.sidebarClosed .brandText,
  body.sidebarClosed .sideSearch,
  body.sidebarClosed .menuText,
  body.sidebarClosed .menuChevron,
  body.sidebarClosed .sideFooter .muted,
  body.sidebarClosed .kbd{
    display:block !important;
  }
  body.sidebarClosed .submenu{
    display:none;
  }
  .menu{
    overflow:auto;
    padding-bottom:24px;
  }
  .main,
  body.sidebarClosed .main{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    min-width:0;
  }
  .topbar{
    position:sticky;
    top:0;
    z-index:45;
    height:auto;
    min-height:58px;
    padding:8px 10px;
    gap:8px;
  }
  .topbarLeft{
    gap:8px;
    min-width:0;
    flex:1 1 auto;
  }
  .topBrand{
    padding:5px 7px;
    gap:6px;
  }
  .topBrandText{
    display:none;
  }
  .topBrandLogo{
    width:30px;
    height:30px;
  }
  .pageTitle{
    font-size:16px;
    max-width:42vw;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .breadcrumb{
    display:none;
  }
  .topbarRight{
    gap:6px;
    flex:0 0 auto;
  }
  .topbarRight #dbStatus,
  .topbarRight #themeToggle,
  .topbarRight #langToggle .langTag,
  .userMeta{
    display:none;
  }
  .chip{
    max-width:116px;
    min-height:38px;
    padding:7px 9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #tenantChip{
    max-width:132px;
  }
  .user{
    padding:4px;
    border-radius:14px;
  }
  .avatar{
    width:34px;
    height:34px;
  }
  .iconBtn{
    min-width:44px;
    min-height:44px;
    padding:10px;
    display:inline-grid;
    place-items:center;
  }
  .content{
    width:100%;
    padding:12px 10px 86px;
    gap:12px;
  }
  .settingsTabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    justify-content:flex-start;
    scrollbar-width:thin;
  }
  .settingsTab{
    white-space:nowrap;
    flex:0 0 auto;
  }
  .settingsPresetGrid,
  .settingsCardGrid{
    grid-template-columns:1fr;
  }
  .appearanceModeGrid{
    grid-template-columns:1fr;
  }
  .settingsHero{
    flex-direction:column;
    padding:15px;
  }
  .settingsHeroTitle{
    font-size:20px;
  }
  .brandSettingsGrid{
    grid-template-columns:1fr !important;
  }
  .brandIdentityPreview{
    min-height:240px;
  }
  .tenantCard{
    align-items:stretch;
    flex-direction:column;
  }
  .tenantCard .btn{
    width:100%;
    min-height:44px;
  }
  .appVersionFooter{
    padding:0 10px 86px;
  }
  .appVersionButton{
    gap:6px;
    font-size:10px;
    line-height:1.35;
  }
  .card,
  .commercial-card,
  .commercial-kpi{
    border-radius:14px;
  }
  .headerRow,
  .toolbar,
  .commercial-header,
  .commercial-toolbar{
    flex-direction:column;
    align-items:stretch !important;
  }
  .toolbar > *,
  .commercial-toolbar > *,
  .commercial-header-actions,
  .commercial-header-actions .btn{
    width:100%;
  }
  .btn{
    width:auto;
    justify-content:center;
    padding:10px 12px;
  }
  .toolbar .btn,
  .commercialFilters .btn,
  .rowActions .btn,
  .itemActions .btn,
  .modalFooter .btn{
    width:100%;
    flex:1 1 100%;
  }
  .rowActions,
  .itemActions,
  .modalFooter{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .filtersGrid,
  .formGrid,
  .commercialFilters,
  .sectorAssignGrid,
  .brandSettingsGrid,
  .cardsGrid,
  .grid.cards{
    display:grid;
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .filtersGrid .input,
  .filtersGrid .select,
  .formField,
  .formGrid > *,
  .itemCard{
    grid-column:1 / -1 !important;
    width:100%;
  }
  .commercialFilters{
    align-items:stretch;
  }
  .commercialFilters label.badge{
    display:flex;
    width:100%;
    min-height:44px;
    justify-content:space-between;
    gap:8px;
  }
  .commercialFilters .input,
  .commercialFilters .select,
  .filtersGrid .input,
  .filtersGrid .select,
  .formField .input,
  .formField .select,
  textarea.input{
    width:100%;
    min-width:0;
  }
  .tableWrap{
    border-radius:12px;
    width:100%;
  }
  .table,
  .commercial-table,
  .commercialReportTable,
  .sectorTable,
  .sectorAssignmentTable,
  .universeTable,
  .facturationPro .table,
  .commercialPlanning .table,
  .commercial-audit-table,
  .commercial-permissions-table{
    min-width:680px;
  }
  .table th,
  .table td{
    padding:10px 8px;
    font-size:13px;
    vertical-align:top;
  }
  .modal{
    align-items:flex-end;
    padding:0;
  }
  .modalCard{
    width:95vw !important;
    max-width:95vw !important;
    max-height:90vh !important;
    border-radius:18px 18px 0 0 !important;
    display:flex;
    flex-direction:column;
    overflow:hidden !important;
  }
  .modalHeader{
    flex:0 0 auto;
    padding:14px;
  }
  .modalBody{
    flex:1 1 auto;
    overflow:auto;
    padding:14px;
    -webkit-overflow-scrolling:touch;
  }
  .modalFooter{
    position:sticky;
    bottom:0;
    flex:0 0 auto;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
    background:rgba(15,18,32,.98);
    border-top:1px solid rgba(255,255,255,.12);
  }
  .commercialKpis,
  .pipelineKpis{
    grid-template-columns:1fr !important;
  }
  .pipelineBoard{
    display:flex !important;
    overflow-x:auto !important;
    gap:10px;
    scroll-snap-type:x mandatory;
    padding:2px 2px 10px;
  }
  .pipelineColumn{
    flex:0 0 min(86vw, 340px);
    min-width:min(86vw, 340px) !important;
    scroll-snap-align:start;
  }
  .pipelineColumnBody{
    min-height:160px;
  }
  .pipelineCard{
    width:100%;
    overflow:hidden;
  }
  .pipelineCardTop,
  .pipelineValueRow{
    flex-direction:column;
    align-items:flex-start;
  }
  .pipelineMoveRow{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .pipelineMoveRow .btn{
    width:100%;
    min-height:34px;
    white-space:normal;
  }
  .pipelineActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .pipelineActions .btn{
    width:100%;
    min-height:40px;
  }
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:60;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    min-height:64px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(7,17,31,.96);
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
  }
  .mobile-bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:var(--muted);
    text-decoration:none;
    border-radius:12px;
    font-size:11px;
    font-weight:750;
    min-width:0;
  }
  .mobile-bottom-nav a svg{
    width:18px;
    height:18px;
  }
  .mobile-bottom-nav a span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-bottom-nav a.active{
    background:var(--primary-soft);
    color:#fff;
  }
}
@media(min-width:769px){
  .mobile-overlay,
  .mobile-bottom-nav{
    display:none !important;
  }
}
@media(max-width:430px){
  .pageTitle{
    max-width:34vw;
  }
  #tenantChip{
    max-width:108px;
  }
  .content{
    padding-left:8px;
    padding-right:8px;
  }
  .pipelineColumn{
    flex-basis:88vw;
    min-width:88vw !important;
  }
}
@media(max-width:390px){
  .topbar{
    padding:7px 8px;
  }
  .chip{
    max-width:98px;
    font-size:11px;
  }
  .pageTitle{
    max-width:30vw;
  }
  .mobile-bottom-nav a{
    font-size:10px;
  }
}
@media(max-width:360px){
  .pageTitle{
    display:none;
  }
  .topbarLeft{
    flex:0 0 auto;
  }
  #tenantChip{
    max-width:104px;
  }
  .pipelineActions,
  .pipelineMoveRow{
    grid-template-columns:1fr;
  }
  .brandIdentityPreview{
    grid-template-columns:1fr;
  }
  .brandPreviewSidebar{
    flex-direction:row;
    justify-content:flex-start;
  }
}

/* Google Sheets Sync Pro */
.sheetsHero{
  margin-bottom:12px;
}
.sheetsStatus{
  display:block;
  margin:0 0 14px;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.sheetsSection{
  margin-bottom:14px;
}
.sheetsSectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.sheetsConfigGrid{
  margin-top:14px;
}
.sheetsToggle{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
}
.sheetsMappingGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:14px;
}
.sheetsMappingRow{
  display:grid;
  grid-template-columns:minmax(110px,1fr) 24px minmax(150px,1.2fr);
  align-items:center;
  gap:8px;
  padding:9px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(255,255,255,.025);
}
.sheetsHeaderName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}
.sheetsMappingArrow{
  color:var(--muted);
  text-align:center;
}
.sheetsActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0;
}
.sheetsPreviewGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:10px;
  margin:14px 0;
}
.sheetsPreviewMetric{
  min-height:92px;
}
.sheetsPreviewTable{
  margin-top:12px;
}
.sheetsSaveBar{
  position:sticky;
  bottom:10px;
  z-index:8;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:14px 0;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(7,17,31,.94);
  backdrop-filter:blur(12px);
}
.sheetsIntegrationList{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-top:14px;
}
.sheetsIntegrationCard{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.025);
}
.sheetsOverviewGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.sheetsOverviewItem{
  display:flex;
  min-height:78px;
  flex-direction:column;
  gap:8px;
  justify-content:center;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.03);
}
.sheetsOverviewItem span{
  color:var(--muted);
  font-size:12px;
}
.sheetsOverviewItem strong{
  font-size:14px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sheetsConflictsTable{
  min-width:980px;
}
.googleSheetsRecordBadge{
  align-self:flex-start;
  margin-top:-3px;
}
.commercial-badge.is-success{
  border-color:rgba(35,201,128,.4);
  background:rgba(35,201,128,.12);
  color:#8ff0c2;
}
.commercial-badge.is-danger{
  border-color:rgba(244,86,109,.45);
  background:rgba(244,86,109,.12);
  color:#ffabb8;
}
.commercial-badge.is-warning{
  border-color:rgba(245,197,66,.42);
  background:rgba(245,197,66,.12);
  color:#ffe7a3;
}

/* Data Connectors Hub */
.connectorsHub{
  gap:18px;
}
.connectorsHero{
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(11,95,255,.14), rgba(0,212,255,.06)), rgba(255,255,255,.035);
}
.connectorsKpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.connectorsKpis .commercial-kpi{
  position:relative;
  min-height:118px;
  padding:16px;
  overflow:hidden;
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.connectorsKpis .commercial-kpi::after{
  content:"";
  position:absolute;
  inset:auto 12px 0 12px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(35,201,128,.85), rgba(0,212,255,.75));
}
.commercial-kpi-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  margin-bottom:8px;
  border-radius:8px;
  color:#dff8ff;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
}
.commercial-kpi-icon svg{
  width:18px;
  height:18px;
}
.universalEnginePanel{
  overflow:hidden;
  border-color:rgba(35,201,128,.24);
  background:
    linear-gradient(135deg, rgba(35,201,128,.10), rgba(0,212,255,.06)),
    rgba(255,255,255,.035);
}
.universalEngineKpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.universalEngineComponents{
  margin-top:14px;
}
.connectorsMonitor{
  overflow:hidden;
}
.connectorsMonitorGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.connectorMonitorCard{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 10px;
  align-items:center;
  min-height:88px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.connectorMonitorCard strong{
  grid-column:1 / -1;
  font-size:22px;
}
.connectorProgress{
  height:10px;
  margin-top:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.connectorProgressBar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #23c980, var(--ps-secondary));
  transition:width .35s ease;
}
.connectorsCategory{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.connectorsCategoryTitle{
  color:rgba(255,255,255,.88);
  font-size:13px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.connectorsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.connectorCard{
  position:relative;
  display:flex;
  min-height:220px;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.connectorCard:hover{
  transform:translateY(-2px);
  border-color:rgba(0,212,255,.32);
  background:rgba(255,255,255,.055);
}
.connectorCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.connectorLogo{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(0,0,0,.2);
  color:#d9f7ff;
}
.connectorLogo svg{
  width:20px;
  height:20px;
}
.connectorName{
  font-size:17px;
  font-weight:900;
}
.connectorDesc{
  flex:1;
  color:var(--muted);
  line-height:1.45;
  font-size:13px;
}
.connectorFuture{
  color:#ffe7a3;
  font-size:12px;
}
.connectorActions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:4px;
}
.connectorActions .btn{
  justify-content:center;
  min-height:38px;
  padding:8px 10px;
}
.connectorStatus-connected{
  border-color:rgba(35,201,128,.26);
}
.connectorStatus-configuration_required{
  border-color:rgba(245,197,66,.24);
}
.connectorsGoogleInside,
.connectorsPanel{
  margin-top:2px;
}
.connectorsFeatureStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.connectorsHistoryTable,
.connectorsLogsTable{
  min-width:1050px;
}
.connectorsFilters{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  align-items:end;
  margin:14px 0;
}
.connectorsLogsBody{
  min-height:90px;
}
.connectorsSettingsGrid{
  margin:14px 0;
}

/* Workflow Automation Engine */
.workflowPage{ gap:18px; }
.workflowHero{
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(35,201,128,.13), rgba(0,212,255,.07)), rgba(255,255,255,.035);
}
.workflowHeroActions,.workflowBuilderTools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.workflowKpis{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.workflowKpis .commercial-kpi{
  min-height:116px;
  padding:16px;
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.workflowMainGrid{
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);
  gap:16px;
  align-items:start;
}
.workflowFilters{
  display:grid;
  grid-template-columns:1fr 160px auto;
  gap:10px;
  margin:14px 0;
}
.workflowRows{ display:flex; flex-direction:column; gap:10px; }
.workflowRow{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.workflowRow:hover,.workflowRow.active{
  transform:translateY(-1px);
  border-color:rgba(0,212,255,.32);
  background:rgba(255,255,255,.055);
}
.workflowRowTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.workflowRowTitle{ font-size:15px; font-weight:900; color:rgba(255,255,255,.92); }
.workflowRowSub{ margin-top:4px; color:var(--muted); font-size:13px; line-height:1.42; }
.workflowRowMeta{ display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.workflowActions{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.workflowActions .btn{ justify-content:center; }
.workflowPalette{ display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.workflowPaletteItem{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.045);
  cursor:pointer;
}
.workflowPaletteItem svg{ width:16px; height:16px; }
.workflowPaletteItem:disabled{ cursor:not-allowed; opacity:.55; }
.workflowCanvas{
  position:relative;
  min-height:340px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px), rgba(4,10,18,.42);
  background-size:28px 28px;
}
.workflowSvg{ position:absolute; inset:0; width:1100px; height:320px; pointer-events:none; }
.workflowEdge{
  fill:none;
  stroke:rgba(0,212,255,.68);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:6 7;
  animation:workflowDash 1.2s linear infinite;
}
@keyframes workflowDash{ to{ stroke-dashoffset:-26; } }
.workflowNode{
  position:absolute;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  width:170px;
  min-height:76px;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(11,18,31,.94);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}
.workflowNodeIcon{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:#dff8ff;
}
.workflowNodeIcon svg{ width:18px; height:18px; }
.workflowNode strong{ display:block; color:rgba(255,255,255,.92); font-size:13px; }
.workflowNode small{ display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.workflowNode-trigger{ border-color:rgba(35,201,128,.32); }
.workflowNode-condition{ border-color:rgba(245,197,66,.32); }
.workflowNode-action{ border-color:rgba(0,212,255,.32); }
.workflowNode-delay{ border-color:rgba(143,120,255,.32); }
.workflowNode-end{ border-color:rgba(255,255,255,.22); }
.workflowRunCards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0; }
.workflowRunCard{
  display:flex;
  min-height:104px;
  flex-direction:column;
  gap:7px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.workflowRunCard strong{ font-size:20px; }
.workflowRunCard small{ color:var(--muted); }
.workflowLogsTable{ min-width:920px; }
.workflowTemplatesGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.workflowTemplateCard{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.workflowToggleLine{ display:flex; flex-direction:row; align-items:center; gap:10px; }
.dangerText{ color:#ffabb8; }

/* Workflow Debugger */
.workflowDebuggerPage{ gap:18px; }
.workflowDebuggerHero{
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(143,120,255,.13), rgba(0,212,255,.07)), rgba(255,255,255,.035);
}
.workflowDebuggerKpis{
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:12px;
}
.workflowDebuggerKpis .commercial-kpi{
  min-height:116px;
  padding:16px;
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.workflowDebuggerGrid{
  display:grid;
  grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);
  gap:16px;
  align-items:start;
}
.workflowDebuggerFilters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.workflowExecutionCards{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.workflowExecutionCard{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.workflowExecutionCard:hover,
.workflowExecutionCard.active{
  transform:translateY(-1px);
  border-color:rgba(143,120,255,.38);
  background:rgba(255,255,255,.055);
}
.workflowDebuggerProgress{
  height:10px;
  margin:12px 0 16px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.workflowDebuggerProgressBar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #23c980, #00d4ff);
  transition:width .35s ease;
}
.workflowExecutionTimeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:14px 0;
}
.workflowExecutionTimeline::before{
  content:"";
  position:absolute;
  left:22px;
  top:20px;
  bottom:20px;
  width:2px;
  background:linear-gradient(180deg, rgba(0,212,255,.75), rgba(143,120,255,.3));
}
.workflowTimelineStep{
  position:relative;
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  align-items:center;
  min-height:62px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.035);
  text-align:left;
  cursor:pointer;
}
.workflowTimelineStep.active{
  border-color:rgba(0,212,255,.36);
  background:rgba(0,212,255,.08);
}
.workflowTimelineDot{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(11,18,31,.96);
}
.workflowTimelineDot svg{ width:18px; height:18px; }
.workflowTimelineName{
  display:block;
  font-weight:850;
}
.workflowTimelineStep small{
  grid-column:2;
  color:var(--muted);
}
.workflowTimelineStep.status-success .workflowTimelineDot{ color:#8ff0c2; border-color:rgba(35,201,128,.42); }
.workflowTimelineStep.status-running .workflowTimelineDot,
.workflowTimelineStep.status-waiting .workflowTimelineDot{ color:#ffe7a3; border-color:rgba(245,197,66,.42); }
.workflowTimelineStep.status-failed .workflowTimelineDot,
.workflowTimelineStep.status-cancelled .workflowTimelineDot{ color:#ffabb8; border-color:rgba(244,86,109,.48); }
.workflowTimelineStep.status-skipped .workflowTimelineDot{ color:var(--muted); }
.workflowStepInspector,
.workflowDebuggerLogs{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.workflowInspectorMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
  color:var(--muted);
  font-size:12px;
}
.workflowInspectorMeta span{
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.workflowInspectorGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.workflowInspectorBlock{
  min-width:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(0,0,0,.18);
  overflow:hidden;
}
.workflowInspectorTitle{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px;
  font-weight:850;
  color:rgba(255,255,255,.86);
}
.workflowJsonBlock{
  max-height:260px;
  margin:0;
  padding:12px;
  overflow:auto;
  color:#d9f7ff;
  font-size:12px;
  line-height:1.45;
  white-space:pre-wrap;
}
.workflowErrorAnalysis{
  display:grid;
  gap:6px;
  margin:12px 0;
  padding:12px;
  border:1px solid rgba(244,86,109,.28);
  border-radius:8px;
  background:rgba(244,86,109,.09);
}
.workflowErrorAnalysis code{
  white-space:pre-wrap;
  color:#ffccd4;
}
.workflowDebuggerLogsBody{
  margin-top:12px;
}

/* Business Rules Engine */
.businessRulesPage{ gap:18px; }
.businessRulesHero{
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(245,197,66,.12), rgba(35,201,128,.08)), rgba(255,255,255,.035);
}
.businessRulesKpis{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:12px;
}
.businessRulesKpis .commercial-kpi{
  min-height:116px;
  padding:16px;
  border-color:rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
}
.businessRulesGrid{
  display:grid;
  grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);
  gap:16px;
  align-items:start;
}
.businessRulesFilters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.businessRuleCards{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.businessRuleCard{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.businessRuleCard:hover,
.businessRuleCard.active{
  transform:translateY(-1px);
  border-color:rgba(245,197,66,.34);
  background:rgba(255,255,255,.055);
}
.businessRuleBuilderSteps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.businessRuleBuilderStep{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:center;
  min-height:78px;
  padding:12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.businessRuleBuilderStep strong{ display:block; font-size:13px; }
.businessRuleBuilderStep small{ display:block; margin-top:3px; color:var(--muted); }
.businessRuleConditionGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}
.businessRuleJsonBlock{
  min-width:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(0,0,0,.18);
  overflow:hidden;
}
.businessRulePayload{
  min-height:180px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.businessRuleTestPanel{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
}
.businessRuleTestResult{
  margin-top:10px;
}
.businessRulesHistory{
  margin-top:2px;
}
.businessRulesHistoryTable{
  min-width:1080px;
}
.businessRulesHistoryTable tbody tr{
  cursor:pointer;
}

@media (max-width: 1180px){
  .workflowKpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .workflowMainGrid{ grid-template-columns:1fr; }
  .workflowRunCards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workflowDebuggerKpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .workflowDebuggerGrid{ grid-template-columns:1fr; }
  .workflowInspectorGrid{ grid-template-columns:1fr; }
  .businessRulesKpis{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .businessRulesGrid{ grid-template-columns:1fr; }
  .businessRuleBuilderSteps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .businessRuleConditionGrid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .workflowHero{ align-items:flex-start; }
  .workflowKpis{ grid-template-columns:1fr; }
  .workflowFilters{ grid-template-columns:1fr; }
  .workflowActions{ grid-template-columns:1fr 1fr; }
  .workflowRunCards{ grid-template-columns:1fr; }
  .workflowCanvas{ min-height:420px; }
  .workflowNode{ width:156px; }
  .workflowDebuggerKpis{ grid-template-columns:1fr; }
  .workflowDebuggerFilters{ grid-template-columns:1fr; }
  .businessRulesKpis{ grid-template-columns:1fr; }
  .businessRulesFilters{ grid-template-columns:1fr; }
  .businessRuleBuilderSteps{ grid-template-columns:1fr; }
}

/* Notifications & Reminders Center */
.notificationBellWrap{
  position:relative;
}
.notificationBell{
  position:relative;
}
.notificationBadge{
  position:absolute;
  top:2px;
  right:2px;
  display:none;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:18px;
  text-align:center;
  border:2px solid rgba(7,17,31,.96);
}
.notificationBadge.show{
  display:block;
}
.notificationDropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:80;
  display:none;
  width:min(380px, calc(100vw - 24px));
  max-height:520px;
  overflow:auto;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:rgba(11,18,32,.98);
  box-shadow:0 20px 60px rgba(0,0,0,.42);
}
.notificationDropdown.open{
  display:block;
}
.notificationDropdownHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.notificationDropdownList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.notificationDropdownItem{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  width:100%;
  padding:10px;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.notificationDropdownItem small{
  display:block;
  margin-top:3px;
  color:var(--muted);
}
.notificationSeeAll{
  width:100%;
  margin-top:10px;
}
.priorityDot{
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:999px;
  background:#60a5fa;
}
.priority-low{ border-color:rgba(96,165,250,.24); }
.priority-normal{ border-color:rgba(35,201,128,.24); }
.priority-high{ border-color:rgba(245,197,66,.34); }
.priority-critical{ border-color:rgba(239,68,68,.42); }
.priorityDot.priority-low{ background:#60a5fa; }
.priorityDot.priority-normal{ background:#23c980; }
.priorityDot.priority-high{ background:#f5c542; }
.priorityDot.priority-critical{ background:#ef4444; }
.notificationsCenter{
  gap:16px;
}
.notificationsHero{
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:linear-gradient(135deg, rgba(35,201,128,.10), rgba(0,212,255,.06)), rgba(255,255,255,.035);
}
.notificationsFilters{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
  margin:14px 0;
}
.notificationsCards{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.notificationCard{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:start;
  padding:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.035);
}
.notificationCard.is-unread{
  background:rgba(35,201,128,.07);
}
.notificationCard.is-read{
  opacity:.78;
}
.notificationIcon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.07);
}
.notificationTitle{
  font-weight:850;
  color:var(--text);
}
.notificationMessage{
  margin-top:4px;
  color:var(--muted);
}
.notificationMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:9px;
}
.notificationActions{
  display:flex;
  gap:8px;
  align-items:center;
}
.reminderCard.status-overdue{
  border-color:rgba(239,68,68,.42);
  background:rgba(239,68,68,.08);
}
.notificationsPrefsGrid{
  margin:14px 0;
}

/* AI Copilot Platform */
.aiCopilotButton{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  display:inline-grid;
  place-items:center;
  width:58px;
  height:58px;
  border:1px solid rgba(0,212,255,.34);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(11,95,255,.96), rgba(35,201,128,.88));
  color:#fff;
  box-shadow:0 20px 55px rgba(0,0,0,.42);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.aiCopilotButton:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.aiCopilotButton .lucideIcon svg,
.aiHeaderButton .lucideIcon svg{
  width:21px;
  height:21px;
}
.aiCopilotBadge{
  position:absolute;
  top:-4px;
  right:-2px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#f5c542;
  color:#06101d;
  font-size:11px;
  font-weight:950;
  line-height:20px;
}
.aiHeaderButton{
  position:relative;
}
.aiCopilotPanel{
  position:fixed;
  top:0;
  right:0;
  z-index:95;
  display:grid;
  grid-template-rows:auto auto 1fr auto auto;
  width:min(520px, 100vw);
  min-width:340px;
  max-width:760px;
  height:100vh;
  resize:horizontal;
  overflow:auto;
  border-left:1px solid rgba(255,255,255,.14);
  background:rgba(8,16,29,.98);
  box-shadow:-28px 0 70px rgba(0,0,0,.45);
  transform:translateX(105%);
  transition:transform .24s ease;
}
.aiCopilotPanel.open{
  transform:translateX(0);
}
.aiCopilotPanel.collapsed{
  width:86px;
  min-width:86px;
}
.aiCopilotPanel.collapsed .aiPanelSub,
.aiCopilotPanel.collapsed .aiPanelContext,
.aiCopilotPanel.collapsed .aiPanelMessages,
.aiCopilotPanel.collapsed .aiPanelSuggestions,
.aiCopilotPanel.collapsed .aiComposer{
  display:none;
}
.aiPanelHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.aiPanelTitle{
  font-size:18px;
  font-weight:950;
}
.aiPanelSub,
.aiPanelContext{
  color:var(--muted);
  font-size:12px;
}
.aiPanelActions{
  display:flex;
  gap:8px;
}
.aiPanelContext{
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.aiPanelMessages{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  overflow:auto;
}
.aiMessage{
  max-width:92%;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  color:var(--text);
  background:rgba(255,255,255,.055);
}
.aiMessage.user{
  align-self:flex-end;
  background:rgba(11,95,255,.18);
}
.aiMessage.assistant{
  align-self:flex-start;
}
.aiMessage.error{
  border-color:rgba(239,68,68,.38);
  background:rgba(239,68,68,.1);
}
.aiMessage.typing{
  color:var(--muted);
}
.aiMarkdown{
  line-height:1.55;
}
.aiCodeBlock{
  overflow:auto;
  margin:8px 0 0;
  padding:10px;
  border-radius:8px;
  background:rgba(0,0,0,.28);
  color:#dbeafe;
}
.aiConfirmBox{
  display:grid;
  gap:4px;
  margin-top:10px;
  padding:9px;
  border:1px solid rgba(245,197,66,.32);
  border-radius:8px;
  background:rgba(245,197,66,.08);
  color:var(--muted);
}
.aiPanelSuggestions{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 16px 12px;
}
.aiComposer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:14px 16px 16px;
  border-top:1px solid rgba(255,255,255,.1);
}
.aiComposer textarea{
  min-height:48px;
  max-height:140px;
  resize:vertical;
}
.aiHero{
  align-items:center;
  background:linear-gradient(135deg, rgba(11,95,255,.15), rgba(35,201,128,.08)), rgba(255,255,255,.035);
}
.aiKpis{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.aiHomeGrid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.aiHomePanel{
  min-width:0;
}
.aiSuggestionList,
.aiConversationList,
.aiSearchResults{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.aiSuggestionCard,
.aiConversationItem,
.aiSearchResult{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  width:100%;
  padding:12px;
  text-align:left;
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  cursor:pointer;
}
.aiSuggestionCard.compact{
  padding:9px;
}
.aiSuggestionCard small,
.aiConversationItem small,
.aiSearchResult small{
  display:block;
  margin-top:4px;
  color:var(--muted);
}
.aiSuggestionIcon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:8px;
  background:rgba(0,212,255,.1);
}
.aiQuickCommands{
  display:grid;
  gap:9px;
  margin-top:12px;
}
.aiSearchBox{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  margin-top:12px;
}

/* Financial Suite Enterprise */
.financeSuite{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.financeHero{
  align-items:center;
  background:linear-gradient(135deg, rgba(245,197,66,.13), rgba(0,212,255,.07)), rgba(255,255,255,.035);
}
.financeHeroActions,
.financeReportActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.financeKpis{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.financePanel{
  overflow:hidden;
}
.financeTable th,
.financeTable td{
  vertical-align:middle;
}
.financeTable td:nth-child(1),
.financeTable td:nth-child(5),
.financeTable td:nth-child(6){
  font-weight:850;
}
.financeReportBody{
  margin-top:12px;
}
.financeJournalForm{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.financeLineHeader,
.financeLineRow{
  display:grid;
  grid-template-columns:1.2fr 1fr .55fr .55fr;
  gap:8px;
  align-items:center;
}
.financeLineHeader{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.financeLinesEditor{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.financeBalanceCheck{
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
  font-weight:900;
}
.financeBalanceCheck.ok{
  border-color:rgba(35,201,128,.35);
  background:rgba(35,201,128,.08);
  color:#9ff4c7;
}
.financeBalanceCheck.bad{
  border-color:rgba(239,68,68,.36);
  background:rgba(239,68,68,.08);
  color:#fecaca;
}

/* Event Bus & Realtime Engine */
.realtimeIndicator{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  background:rgba(255,255,255,.045);
  color:var(--text);
  font-size:12px;
  font-weight:800;
  cursor:default;
}
.realtimeStatusDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:#94a3b8;
  box-shadow:0 0 0 3px rgba(148,163,184,.12);
}
.realtimeIndicator.status-online .realtimeStatusDot,
.realtimeStatusDot.online{
  background:#23c980;
  box-shadow:0 0 0 3px rgba(35,201,128,.16);
}
.realtimeIndicator.status-reconnect .realtimeStatusDot{
  background:#f5c542;
  box-shadow:0 0 0 3px rgba(245,197,66,.16);
}
.realtimeIndicator.status-offline .realtimeStatusDot{
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}
.realtimeFeed{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:75;
  display:none;
  width:min(320px, calc(100vw - 24px));
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(11,18,32,.98);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.realtimeIndicator:hover .realtimeFeed{
  display:block;
}
.realtimeFeedTitle{
  margin-bottom:8px;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
}
.realtimeFeedBody{
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-weight:600;
}
.realtimeFeedItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
}
.realtimeFeedItem strong{
  color:var(--text);
  font-size:12px;
}
.eventBusPage{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.eventBusHero{
  align-items:center;
  background:linear-gradient(135deg, rgba(11,95,255,.16), rgba(35,201,128,.07)), rgba(255,255,255,.035);
}
.eventBusKpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.eventBusPanel{
  overflow:hidden;
}
.eventBusFilters{
  display:grid;
  grid-template-columns:2fr repeat(3,minmax(160px,1fr));
  gap:10px;
  margin:12px 0;
}
.eventBusTable th,
.eventBusTable td{
  vertical-align:middle;
}
.eventBusTable td:nth-child(2),
.eventBusTable td:nth-child(6){
  font-weight:800;
}
.eventBusJsonViewer{
  min-width:0;
}
.eventBusRealtimeBox{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid rgba(35,201,128,.2);
  border-radius:8px;
  background:rgba(35,201,128,.065);
  color:var(--muted);
}
.eventBusRealtimeBox strong{
  color:var(--text);
}
@media(max-width:900px){
  .universalEngineKpis,
  .connectorsKpis,
  .aiKpis,
  .financeKpis,
  .connectorsMonitorGrid,
  .eventBusKpis,
  .connectorsFilters,
  .notificationsFilters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .eventBusFilters{
    grid-template-columns:1fr 1fr;
  }
  .aiHomeGrid{
    grid-template-columns:1fr;
  }
  .financeLineHeader,
  .financeLineRow{
    grid-template-columns:1fr 1fr;
  }
  .sheetsMappingGrid{
    grid-template-columns:1fr;
  }
  .sheetsPreviewGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sheetsOverviewGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:600px){
  .connectorsHero{
    flex-direction:column;
  }
  .connectorsMonitorGrid,
  .universalEngineKpis,
  .connectorsKpis,
  .aiKpis,
  .financeKpis,
  .eventBusKpis,
  .eventBusFilters,
  .connectorsFilters,
  .notificationsFilters,
  .connectorActions{
    grid-template-columns:1fr;
  }
  .realtimeIndicator{
    min-width:36px;
    justify-content:center;
    padding-inline:9px;
  }
  .realtimeStatusText{
    display:none;
  }
  .eventBusHero{
    align-items:flex-start;
  }
  .eventBusRealtimeBox{
    align-items:flex-start;
    flex-direction:column;
  }
  .aiCopilotPanel{
    width:100vw;
    min-width:0;
    resize:none;
  }
  .aiComposer,
  .aiSearchBox{
    grid-template-columns:1fr;
  }
  .financeHero,
  .financeHeroActions,
  .financeReportActions{
    align-items:stretch;
    flex-direction:column;
  }
  .financeLineHeader{
    display:none;
  }
  .financeLineRow{
    grid-template-columns:1fr;
  }
  .notificationCard{
    grid-template-columns:1fr;
  }
  .notificationActions{
    flex-direction:column;
    align-items:stretch;
  }
  .notificationActions .btn{
    width:100%;
  }
  .connectorsGrid{
    grid-template-columns:1fr;
  }
  .sheetsSectionHead,
  .sheetsSaveBar{
    align-items:stretch;
    flex-direction:column;
  }
  .sheetsSectionHead .btn,
  .sheetsActions .btn,
  .sheetsSaveBar .btn{
    width:100%;
    min-height:44px;
  }
  .sheetsActions{
    display:grid;
    grid-template-columns:1fr;
  }
  .sheetsMappingRow{
    grid-template-columns:1fr;
  }
  .sheetsMappingArrow{
    display:none;
  }
  .sheetsPreviewGrid{
    grid-template-columns:1fr;
  }
  .sheetsOverviewGrid{
    grid-template-columns:1fr;
  }
}

/* ===== Enterprise UI/UX Redesign v6.0.1 ===== */
:root{
  --z-primary:#5b8cff;
  --z-primary-strong:#7c9cff;
  --z-secondary:#22d3ee;
  --z-success:#34d399;
  --z-danger:#fb7185;
  --z-warning:#fbbf24;
  --z-info:#38bdf8;
  --z-bg:#070a12;
  --z-bg-elevated:#0b1020;
  --z-surface:#101626;
  --z-surface-2:#151d31;
  --z-surface-3:#1b2540;
  --z-border:rgba(148,163,184,.18);
  --z-border-strong:rgba(148,163,184,.32);
  --z-text:#f8fafc;
  --z-muted:#94a3b8;
  --z-radius:10px;
  --z-radius-sm:8px;
  --z-shadow:0 18px 50px rgba(0,0,0,.32);
  --z-transition:160ms ease;
  --bg0:var(--z-bg);
  --bg1:#0b1220;
  --card:var(--z-surface);
  --card2:var(--z-surface-2);
  --text:var(--z-text);
  --muted:var(--z-muted);
  --line:var(--z-border);
  --primary:var(--z-primary);
  --primary-hover:#4778f0;
  --primary-soft:rgba(91,140,255,.14);
  --primary-border:rgba(91,140,255,.34);
  --sidebar:#090d18;
  --shadow:var(--z-shadow);
}
body.enterpriseRedesign{
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(91,140,255,.16), transparent 60%),
    radial-gradient(760px 520px at 85% 0%, rgba(34,211,238,.10), transparent 58%),
    linear-gradient(180deg, #070a12, #0b1220 48%, #070a12);
  color:var(--z-text);
  letter-spacing:0;
}
.enterpriseRedesign .sidebar{
  width:304px;
  flex-basis:304px;
  padding:16px 12px;
  gap:12px;
  background:linear-gradient(180deg, rgba(9,13,24,.98), rgba(8,13,23,.94));
  border-right:1px solid var(--z-border);
  box-shadow:8px 0 32px rgba(0,0,0,.2);
}
.enterpriseRedesign .brand{
  min-height:62px;
  padding:10px;
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  background:rgba(255,255,255,.035);
}
.enterpriseRedesign .brandLogoText,
.enterpriseRedesign .topBrandLogo,
.enterpriseRedesign .avatar{
  border-radius:8px;
  background:linear-gradient(135deg, var(--z-primary), var(--z-secondary));
  box-shadow:0 12px 26px rgba(91,140,255,.24);
}
.enterpriseRedesign .brandName,
.enterpriseRedesign .pageTitle{
  font-weight:850;
  letter-spacing:0;
}
.enterpriseRedesign .sideSearch{
  padding:0;
}
.enterpriseRedesign .searchInputWrap,
.enterpriseTopSearch{
  min-height:42px;
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  background:rgba(15,23,42,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.enterpriseTopSearch{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  max-width:520px;
  margin:0 18px;
  padding:0 12px;
}
.enterpriseTopSearchInput{
  all:unset;
  flex:1;
  min-width:120px;
  color:var(--z-text);
  font-size:14px;
}
.enterpriseRedesign .menu{
  gap:6px;
  padding:0 2px 10px;
}
.enterpriseRedesign .menuGroupTitle{
  margin-top:8px;
  padding:10px 10px 6px;
  color:#cbd5e1;
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
}
.enterpriseRedesign .menuItem,
.enterpriseRedesign .subItem{
  border-radius:var(--z-radius-sm);
  transition:background var(--z-transition), border-color var(--z-transition), color var(--z-transition), transform var(--z-transition);
}
.enterpriseRedesign .menuItem{
  min-height:42px;
  padding:9px 10px;
}
.enterpriseRedesign .menuItem:hover,
.enterpriseRedesign .subItem:hover{
  transform:translateX(2px);
  background:rgba(148,163,184,.10);
  border-color:var(--z-border-strong);
}
.enterpriseRedesign .menuItem.active,
.enterpriseRedesign .subItem.active{
  background:linear-gradient(135deg, rgba(91,140,255,.18), rgba(34,211,238,.08));
  color:#dbeafe;
  border-color:var(--primary-border);
}
.enterpriseRedesign .menuIcon{
  width:30px;
  height:30px;
  border-radius:8px;
  color:#cbd5e1;
  background:rgba(148,163,184,.08);
}
.enterpriseRedesign .submenu{
  padding:4px 0 4px 36px;
  animation:enterpriseFade .16s ease;
}
.enterpriseRedesign .sideFooter{
  margin-top:auto;
  padding:10px;
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  background:rgba(255,255,255,.035);
}
.enterpriseRedesign .topbar{
  min-height:72px;
  height:auto;
  padding:12px 18px;
  background:rgba(7,10,18,.78);
  border-bottom:1px solid var(--z-border);
  backdrop-filter:blur(18px);
}
.enterpriseRedesign .topbarLeft,
.enterpriseRedesign .topbarRight{
  gap:10px;
}
.enterpriseRedesign .iconBtn,
.enterpriseRedesign .btn{
  border-radius:var(--z-radius-sm);
  transition:transform var(--z-transition), background var(--z-transition), border-color var(--z-transition), box-shadow var(--z-transition);
}
.enterpriseRedesign .iconBtn{
  border:1px solid var(--z-border);
  background:rgba(15,23,42,.72);
}
.enterpriseRedesign .iconBtn:hover,
.enterpriseRedesign .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}
.enterpriseRedesign .btn{
  min-height:38px;
  border:1px solid rgba(91,140,255,.34);
  background:linear-gradient(135deg, var(--z-primary), #4778f0);
  color:#fff;
  font-weight:760;
}
.enterpriseRedesign .btn.secondary{
  color:#dbeafe;
  background:rgba(15,23,42,.72);
  border-color:var(--z-border);
}
.enterpriseRedesign .btn.danger{
  background:linear-gradient(135deg, #fb7185, #e11d48);
  border-color:rgba(251,113,133,.45);
}
.enterpriseRedesign .card,
.enterpriseRedesign .connectorsPanel,
.enterpriseRedesign .financePanel,
.enterpriseRedesign .eventBusPanel,
.enterpriseRedesign .aiHomePanel{
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  background:linear-gradient(180deg, rgba(16,22,38,.96), rgba(11,16,32,.94));
  box-shadow:0 1px 0 rgba(255,255,255,.04), var(--z-shadow);
}
.enterpriseRedesign .commercial-header,
.enterpriseRedesign .connectorsHero,
.enterpriseRedesign .financeHero,
.enterpriseRedesign .aiHero,
.enterpriseRedesign .eventBusHero,
.enterpriseRedesign .notificationsHero{
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  background:linear-gradient(135deg, rgba(91,140,255,.16), rgba(34,211,238,.07)), rgba(16,22,38,.86);
}
.enterpriseRedesign .commercialKpis > *,
.enterpriseRedesign .kpi,
.enterpriseRedesign .statCard{
  position:relative;
  overflow:hidden;
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  background:linear-gradient(180deg, rgba(21,29,49,.95), rgba(14,20,35,.95));
  transition:transform var(--z-transition), border-color var(--z-transition), box-shadow var(--z-transition);
}
.enterpriseRedesign .commercialKpis > *::after,
.enterpriseRedesign .kpi::after,
.enterpriseRedesign .statCard::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:12px;
  width:72px;
  height:24px;
  opacity:.32;
  background:linear-gradient(135deg, transparent 0 22%, var(--z-secondary) 22% 28%, transparent 28% 46%, var(--z-primary) 46% 52%, transparent 52% 70%, var(--z-success) 70% 76%, transparent 76%);
}
.enterpriseRedesign .commercialKpis > *:hover,
.enterpriseRedesign .kpi:hover,
.enterpriseRedesign .statCard:hover{
  transform:translateY(-2px);
  border-color:var(--primary-border);
  box-shadow:0 22px 58px rgba(0,0,0,.34);
}
.enterpriseRedesign .input,
.enterpriseRedesign select.input,
.enterpriseRedesign textarea.input{
  min-height:40px;
  border:1px solid var(--z-border);
  border-radius:var(--z-radius-sm);
  background:rgba(15,23,42,.74);
  color:var(--z-text);
  outline:none;
  transition:border-color var(--z-transition), box-shadow var(--z-transition), background var(--z-transition);
}
.enterpriseRedesign .input:focus,
.enterpriseRedesign select.input:focus,
.enterpriseRedesign textarea.input:focus{
  border-color:var(--primary-border);
  box-shadow:0 0 0 4px rgba(91,140,255,.14);
  background:rgba(15,23,42,.94);
}
.enterpriseRedesign .tableWrap{
  border:1px solid var(--z-border);
  border-radius:var(--z-radius);
  overflow:auto;
  background:rgba(15,23,42,.42);
}
.enterpriseRedesign .table{
  border-collapse:separate;
  border-spacing:0;
}
.enterpriseRedesign .table th{
  position:sticky;
  top:0;
  z-index:2;
  resize:horizontal;
  overflow:auto;
  background:#111827;
  color:#cbd5e1;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
}
.enterpriseRedesign .table td{
  border-top:1px solid rgba(148,163,184,.12);
}
.enterpriseRedesign .table tr:hover td{
  background:rgba(91,140,255,.06);
}
.enterpriseRedesign .commercial-badge,
.enterpriseRedesign .badge,
.enterpriseRedesign .pill,
.enterpriseRedesign .chip{
  border-radius:999px;
  border:1px solid var(--z-border);
  background:rgba(15,23,42,.72);
  color:#dbeafe;
}
.enterpriseRedesign .modal{
  backdrop-filter:blur(0);
}
.enterpriseRedesign .modal[aria-hidden="false"] .modalBackdrop,
.enterpriseRedesign .modal.open .modalBackdrop{
  backdrop-filter:blur(10px);
}
.enterpriseRedesign .modalCard{
  border:1px solid var(--z-border-strong);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(16,22,38,.98), rgba(11,16,32,.98));
  box-shadow:0 32px 90px rgba(0,0,0,.52);
  animation:enterpriseModalIn .18s ease;
  resize:both;
  overflow:auto;
}
.enterpriseRedesign .notificationDropdown,
.enterpriseRedesign .realtimeFeed,
.enterpriseRedesign .aiCopilotPanel{
  border-color:var(--z-border-strong);
  background:rgba(8,13,23,.98);
  box-shadow:0 24px 72px rgba(0,0,0,.46);
}
.enterpriseRedesign .connectorCard,
.enterpriseRedesign .aiSuggestionCard,
.enterpriseRedesign .notificationCard,
.enterpriseRedesign .workflowNode{
  border-radius:var(--z-radius);
  transition:transform var(--z-transition), border-color var(--z-transition), background var(--z-transition);
}
.enterpriseRedesign .connectorCard:hover,
.enterpriseRedesign .aiSuggestionCard:hover,
.enterpriseRedesign .notificationCard:hover{
  transform:translateY(-2px);
  border-color:var(--primary-border);
}
.skeletonLoader{
  min-height:14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(148,163,184,.08), rgba(148,163,184,.22), rgba(148,163,184,.08));
  background-size:220% 100%;
  animation:enterpriseShimmer 1.2s linear infinite;
}
.loadingSpinner{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(148,163,184,.32);
  border-top-color:var(--z-primary);
  animation:enterpriseSpin .8s linear infinite;
}
.emptyState{
  display:grid;
  place-items:center;
  min-height:140px;
  color:var(--z-muted);
  border:1px dashed var(--z-border);
  border-radius:var(--z-radius);
  background:rgba(15,23,42,.35);
}
@keyframes enterpriseFade{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes enterpriseModalIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes enterpriseShimmer{to{background-position:-220% 0}}
@keyframes enterpriseSpin{to{transform:rotate(360deg)}}
@media(max-width:1100px){
  .enterpriseTopSearch{max-width:360px;margin:0 10px}
  .enterpriseRedesign .topBrand{display:none}
}
@media(max-width:760px){
  .enterpriseTopSearch{display:none}
  .enterpriseRedesign .topbar{align-items:flex-start;gap:10px}
  .enterpriseRedesign .topbarRight{flex-wrap:wrap;justify-content:flex-end}
  .enterpriseRedesign .commercialKpis{grid-template-columns:1fr !important}
  .enterpriseRedesign .card.pad{padding:14px}
}

/* ===== Enterprise Design System & Layout Refactor v6.0.2 ===== */
:root{
  --zds-primary:#6d8dff;
  --zds-primary-hover:#5878f4;
  --zds-secondary:#20c7e8;
  --zds-accent:#f4c95d;
  --zds-success:#36d399;
  --zds-warning:#f6b73c;
  --zds-danger:#fb6478;
  --zds-info:#38bdf8;
  --zds-bg:#070b14;
  --zds-bg-soft:#0b1220;
  --zds-surface:#101827;
  --zds-surface-alt:#162033;
  --zds-card:#111a2b;
  --zds-header:rgba(7,11,20,.86);
  --zds-sidebar:#080d18;
  --zds-border:rgba(148,163,184,.18);
  --zds-border-strong:rgba(148,163,184,.34);
  --zds-text:#f8fafc;
  --zds-text-secondary:#a9b6c8;
  --zds-muted:#7f8ea3;
  --zds-shadow-sm:0 8px 24px rgba(0,0,0,.22);
  --zds-shadow-md:0 18px 50px rgba(0,0,0,.32);
  --zds-shadow-lg:0 28px 80px rgba(0,0,0,.48);
  --zds-radius-xs:6px;
  --zds-radius-sm:8px;
  --zds-radius-md:10px;
  --zds-radius-lg:12px;
  --zds-space-1:4px;
  --zds-space-2:8px;
  --zds-space-3:12px;
  --zds-space-4:16px;
  --zds-space-5:20px;
  --zds-space-6:24px;
  --zds-font-sans:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --zds-font-mono:"SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --zds-display:32px;
  --zds-h1:26px;
  --zds-h2:22px;
  --zds-h3:18px;
  --zds-h4:15px;
  --zds-body:14px;
  --zds-small:12px;
  --zds-caption:11px;
  --zds-transition:160ms ease;
}
.enterpriseRedesign{
  font-family:var(--zds-font-sans);
  font-size:var(--zds-body);
  line-height:1.55;
}
.enterpriseRedesign .pageTitle,
.z-display{font-size:var(--zds-h1);line-height:1.16;font-weight:850;color:var(--zds-text);letter-spacing:0}
.enterpriseRedesign .commercial-title,
.z-h1{font-size:var(--zds-h1);line-height:1.18;font-weight:850;letter-spacing:0}
.enterpriseRedesign .cardTitle,
.z-h2{font-size:var(--zds-h3);line-height:1.25;font-weight:800;letter-spacing:0}
.enterpriseRedesign .cardSub,
.enterpriseRedesign .breadcrumb,
.z-small{font-size:var(--zds-small);line-height:1.45;color:var(--zds-text-secondary)}
.z-caption{font-size:var(--zds-caption);line-height:1.35;color:var(--zds-muted)}
.z-mono{font-family:var(--zds-font-mono)}
.z-page-header,
.enterpriseRedesign .commercial-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--zds-space-4);
  padding:var(--zds-space-5);
}
.z-grid{display:grid;gap:var(--zds-space-4)}
.z-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.z-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.z-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.z-card,
.enterpriseRedesign .card,
.enterpriseRedesign .connectorCard,
.enterpriseRedesign .notificationCard,
.enterpriseRedesign .workflowRow,
.enterpriseRedesign .businessRuleCard,
.enterpriseRedesign .aiSuggestionCard,
.enterpriseRedesign .financePanel,
.enterpriseRedesign .connectorsPanel{
  border:1px solid var(--zds-border);
  border-radius:var(--zds-radius-md);
  background:linear-gradient(180deg, rgba(17,26,43,.98), rgba(11,18,32,.96));
  box-shadow:0 1px 0 rgba(255,255,255,.045), var(--zds-shadow-sm);
}
.z-card:hover,
.enterpriseRedesign .connectorCard:hover,
.enterpriseRedesign .workflowRow:hover,
.enterpriseRedesign .businessRuleCard:hover,
.enterpriseRedesign .aiSuggestionCard:hover{
  border-color:var(--zds-border-strong);
  box-shadow:0 1px 0 rgba(255,255,255,.06), var(--zds-shadow-md);
}
.z-btn,
.enterpriseRedesign .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 14px;
  border-radius:var(--zds-radius-sm);
  font-weight:760;
  white-space:nowrap;
}
.z-btn-outline{background:transparent;border:1px solid var(--zds-border);color:var(--zds-text)}
.z-btn-ghost{background:transparent;border-color:transparent;color:var(--zds-text-secondary)}
.z-btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:rgba(34,197,94,.45);color:#fff}
.z-btn-loading{position:relative;color:transparent !important}
.z-btn-loading::after{content:"";width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:enterpriseSpin .8s linear infinite}
.enterpriseRedesign .btn:disabled,
.enterpriseRedesign .iconBtn:disabled,
.z-btn:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
.z-input,
.enterpriseRedesign .input,
.enterpriseRedesign .searchInput,
.enterpriseRedesign .enterpriseTopSearchInput{
  font-size:14px;
  letter-spacing:0;
}
.enterpriseRedesign .formField,
.z-form-field{display:grid;gap:7px}
.enterpriseRedesign .label,
.z-label{font-size:12px;font-weight:760;color:#cbd5e1}
.z-required::after{content:" *";color:var(--zds-danger)}
.z-help{font-size:12px;color:var(--zds-muted)}
.z-inline-error{font-size:12px;color:#fecaca}
.enterpriseRedesign .input[disabled],
.enterpriseRedesign .input:disabled{opacity:.58;background:rgba(15,23,42,.45);cursor:not-allowed}
.z-badge,
.enterpriseRedesign .commercial-badge,
.enterpriseRedesign .badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:3px 9px;
  font-size:12px;
  font-weight:760;
}
.z-badge-success,
.enterpriseRedesign .commercial-badge.is-success,
.enterpriseRedesign .status-connected{border-color:rgba(54,211,153,.36);background:rgba(54,211,153,.10);color:#a7f3d0}
.z-badge-warning,
.enterpriseRedesign .commercial-badge.is-warning,
.enterpriseRedesign .status-pending{border-color:rgba(246,183,60,.38);background:rgba(246,183,60,.10);color:#fde68a}
.z-badge-danger,
.enterpriseRedesign .commercial-badge.is-danger,
.enterpriseRedesign .status-failed{border-color:rgba(251,100,120,.38);background:rgba(251,100,120,.10);color:#fecdd3}
.z-badge-info{border-color:rgba(56,189,248,.36);background:rgba(56,189,248,.10);color:#bae6fd}
.z-badge-neutral{border-color:var(--zds-border);background:rgba(148,163,184,.10);color:#cbd5e1}
.priority-low{border-color:rgba(56,189,248,.32)}
.priority-normal{border-color:rgba(54,211,153,.32)}
.priority-high{border-color:rgba(246,183,60,.38)}
.priority-critical{border-color:rgba(251,100,120,.44)}
.z-kpi,
.enterpriseRedesign .commercialKpis > .card,
.enterpriseRedesign .commercialKpis > .sheetsPreviewMetric,
.enterpriseRedesign .commercialKpis > *{
  display:grid;
  gap:8px;
  min-height:126px;
  padding:16px;
}
.enterpriseRedesign .commercialKpis .cardTitle,
.enterpriseRedesign .commercialKpis .cardSub,
.enterpriseRedesign .commercialKpis .statLabel,
.enterpriseRedesign .commercialKpis small{
  display:block;
  margin:0;
  color:var(--zds-text-secondary);
  font-size:12px;
  line-height:1.35;
}
.enterpriseRedesign .commercialKpis .statVal,
.enterpriseRedesign .commercialKpis .cardValue,
.enterpriseRedesign .commercialKpis strong{
  display:block;
  margin-top:4px;
  color:var(--zds-text);
  font-size:26px;
  line-height:1.05;
  font-weight:880;
}
.z-kpi-title{font-size:12px;color:var(--zds-text-secondary);font-weight:760}
.z-kpi-value{font-size:28px;line-height:1;font-weight:880;color:var(--zds-text)}
.z-kpi-subtitle{font-size:12px;color:var(--zds-muted)}
.z-kpi-trend{font-size:12px;color:var(--zds-success)}
.z-sparkline,
.enterpriseRedesign .commercialKpis > *::after{
  pointer-events:none;
}
.z-table,
.enterpriseRedesign .table{
  width:100%;
  font-size:13px;
}
.enterpriseRedesign .table th,
.enterpriseRedesign .table td{
  padding:11px 12px;
  white-space:nowrap;
}
.enterpriseRedesign .table th{
  box-shadow:0 1px 0 rgba(148,163,184,.18);
}
.enterpriseRedesign .tableWrap.compact .table th,
.enterpriseRedesign .tableWrap.compact .table td,
body.enterpriseRedesign[data-compact="1"] .table th,
body.enterpriseRedesign[data-compact="1"] .table td{
  padding:7px 10px;
}
.enterpriseRedesign .bulkActions{
  border-radius:var(--zds-radius-md);
  background:rgba(91,140,255,.09);
  border-color:rgba(91,140,255,.25);
}
.enterpriseRedesign .pagination,
.enterpriseRedesign .pager{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.z-modal,
.enterpriseRedesign .modalCard{
  max-height:min(88vh, 920px);
}
.enterpriseRedesign .modalHeader,
.enterpriseRedesign .modalFooter{
  position:sticky;
  z-index:2;
  background:rgba(16,22,38,.96);
  backdrop-filter:blur(12px);
}
.enterpriseRedesign .modalHeader{top:0}
.enterpriseRedesign .modalFooter{bottom:0;border-top:1px solid var(--zds-border)}
.enterpriseRedesign .modalBody{max-height:calc(88vh - 132px);overflow:auto}
.z-empty,
.enterpriseRedesign .commercial-empty,
.enterpriseRedesign .emptyState{
  display:grid;
  place-items:center;
  gap:10px;
  min-height:132px;
  padding:22px;
  text-align:center;
  color:var(--zds-text-secondary);
  border:1px dashed var(--zds-border);
  border-radius:var(--zds-radius-md);
  background:rgba(15,23,42,.36);
}
.z-empty-title{font-weight:800;color:var(--zds-text)}
.z-empty-description{font-size:12px;color:var(--zds-muted)}
.z-skeleton,
.z-skeleton-card,
.z-skeleton-table,
.z-skeleton-chart{
  position:relative;
  overflow:hidden;
  border-radius:var(--zds-radius-md);
  background:rgba(148,163,184,.10);
}
.z-skeleton-card{min-height:120px}
.z-skeleton-table{min-height:260px}
.z-skeleton-chart{min-height:320px}
.z-skeleton::after,
.z-skeleton-card::after,
.z-skeleton-table::after,
.z-skeleton-chart::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation:enterpriseShimmer 1.2s infinite;
}
.enterpriseRedesign .connectorsGrid{
  align-items:stretch;
}
.enterpriseRedesign .connectorCard{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  min-height:210px;
  gap:12px;
}
.enterpriseRedesign .connectorActions{
  margin-top:auto;
}
.enterpriseRedesign .connectorsFilters,
.enterpriseRedesign .eventBusFilters,
.enterpriseRedesign .notificationsFilters{
  padding:12px;
  border:1px solid var(--zds-border);
  border-radius:var(--zds-radius-md);
  background:rgba(15,23,42,.36);
}
.enterpriseRedesign .connectorsMonitorGrid,
.enterpriseRedesign .financeKpis,
.enterpriseRedesign .aiKpis,
.enterpriseRedesign .eventBusKpis,
.enterpriseRedesign .workflowKpis,
.enterpriseRedesign .businessRulesKpis{
  gap:var(--zds-space-4);
}
.enterpriseRedesign .financeTable th,
.enterpriseRedesign .financeTable td,
.enterpriseRedesign .eventBusTable th,
.enterpriseRedesign .eventBusTable td{
  font-variant-numeric:tabular-nums;
}
.enterpriseRedesign .aiCopilotButton{
  border-radius:14px;
  width:56px;
  height:56px;
}
.enterpriseRedesign .aiCopilotPanel{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
}
.enterpriseRedesign .aiPanelMessages{
  gap:14px;
}
.enterpriseRedesign .aiMessage{
  border-radius:12px;
  line-height:1.55;
}
.enterpriseRedesign .aiComposer{
  background:rgba(8,13,23,.96);
}
.enterpriseRedesign .workflowCanvas,
.enterpriseRedesign .businessRulesGrid,
.enterpriseRedesign .financeReportBody{
  border-radius:var(--zds-radius-md);
}
@media(max-width:1200px){
  .z-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .enterpriseRedesign .commercialKpis,
  .enterpriseRedesign .financeKpis,
  .enterpriseRedesign .eventBusKpis,
  .enterpriseRedesign .aiKpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:900px){
  .enterpriseRedesign .sidebar{
    width:min(316px, 86vw);
    flex-basis:min(316px, 86vw);
  }
  .enterpriseRedesign .topbar{
    padding:10px 12px;
  }
  .enterpriseRedesign .topbarLeft{
    min-width:0;
  }
  .enterpriseRedesign .pageTitle{
    font-size:20px;
  }
  .enterpriseRedesign .topbar{
    min-width:0;
  }
  .enterpriseRedesign .topbarRight{
    min-width:0;
    max-width:100%;
  }
  .z-grid-2,
  .z-grid-3,
  .z-grid-4{grid-template-columns:1fr}
}
@media(max-width:640px){
  .enterpriseRedesign .commercial-header,
  .enterpriseRedesign .z-page-header{
    flex-direction:column;
    padding:14px;
  }
  .enterpriseRedesign .topbarRight .chip,
  .enterpriseRedesign .topbarRight .userMeta{
    display:none;
  }
  .enterpriseRedesign .commercial-title,
  .enterpriseRedesign .pageTitle{
    overflow-wrap:anywhere;
  }
  .enterpriseRedesign .table th,
  .enterpriseRedesign .table td{
    padding:9px 10px;
  }
  .enterpriseRedesign .modalCard{
    width:calc(100vw - 20px);
    max-height:92vh;
    resize:none;
  }
  .enterpriseRedesign .modalBody{
    max-height:calc(92vh - 132px);
  }
}