/* MOOD ERP — ui.css · design system do redesign "fácil pro Maor" (25.09.2026)
   Carregado depois do CSS inline do index.html; sobrescreve tokens e componentes. */

/* ---------- tokens (tema claro) ---------- */
:root{
  --bg:#F2F3F5;
  --bg-card:#FFFFFF;
  --bg-el:#F7F8FA;
  --bg-in:#EEF0F3;
  --bdr:#E5E7EB;
  --bdr-h:#D1D5DB;
  --txt:#0A0A0A;
  --muted:#4B5563;
  --dim:#6B7280;
  --acc:#22C55E;
  --acc-d:#16A34A;
  --acc-g:rgba(34,197,94,.12);
  --acc-rgb:34,197,94;
  --blu:#1FA8E0;
  --brand:#1FA8E0;
  --brand-ink:#0775A8; /* azul da marca para texto: contraste ≥ 4.5:1 sobre branco */
  --brand-bg:#E6F6FC;
  --amber:#A16207;
  --amber-2:#F59E0B;
  --amber-bg:#FEF3C7;
  --red:#DC2626;
  --r:16px;
  --rs:10px;
  --f:'Heebo',system-ui,-apple-system,sans-serif;
  --sb-bg:#FFFFFF;
  --sb-bg-solid:#FFFFFF;
  --sb-border:#E5E7EB;
  --sb-txt:#0A0A0A;
  --sb-muted:#4B5563;
  --sb-hover:#F2F3F5;
  --sb-active-bg:#0A0A0A;
  --sb-active-txt:#FFFFFF;
  --bn-h:64px;
}
body[data-theme="dark"]{ --brand:#1FA8E0; --brand-ink:#7DD3FC; --brand-bg:rgba(31,168,224,.15); --amber:#F59E0B; --amber-2:#F59E0B; --amber-bg:rgba(245,158,11,.15); --r:16px; --f:'Heebo',system-ui,sans-serif; }

body{font-family:var(--f);background:var(--bg);color:var(--txt)}
button,input,select,textarea{font-family:var(--f)}

/* ---------- componentes base ---------- */
.card,.sc{border:1px solid var(--bdr);border-radius:var(--r);box-shadow:none;background:var(--bg-card)}
.btn{border-radius:12px;font-weight:700}
.btn-p{background:var(--acc);color:#0A0A0A;border-color:var(--acc)}
.btn-p:hover{background:var(--acc-d);color:#0A0A0A}
.btn .ico{flex-shrink:0}
dialog{border-radius:var(--r)}
.ico{display:inline-block;vertical-align:middle}
.mono,.num,[dir="ltr"]{unicode-bidi:isolate}

/* título + "מה עושים כאן" */
.pg-h{margin:0 0 18px}
.pg-t{font-size:26px;font-weight:900;line-height:1.15;margin:0 0 4px;letter-spacing:-.2px}
.pg-d{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
.sec-h{font-size:17px;font-weight:900;margin:22px 0 10px}
/* o título antigo de cada tela sai: o cabeçalho novo já diz o nome */
.sec > .sh > div:first-child:has(> .tg){display:none}
.sec > .sh{justify-content:flex-end}
/* topo: o título vira o cabeçalho da própria tela */
.topbar .tb-title,.topbar [data-i18n="topbar_subtitle"]{visibility:hidden;height:0;overflow:hidden}
body.mode-simple .topbar .lang-switch,body.mode-simple .sb-lang-row{display:none!important}
/* lembrete de backup é assunto do admin; no modo simples não aparece */
body.mode-simple #backup-reminder{display:none!important}

/* controle segmentado (abas) */
.seg{display:inline-flex;gap:4px;background:var(--bg-in);border:1px solid var(--bdr);border-radius:12px;padding:4px;margin-top:12px;flex-wrap:wrap;max-width:100%}
.seg button{border:0;background:transparent;border-radius:9px;padding:8px 14px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;min-height:36px}
.seg button.on{background:var(--bg-card);color:var(--txt);box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* pills */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.4}
.pill-auto{background:var(--brand-ink);color:#fff}
.pill-ok{background:#DCFCE7;color:#166534}
.pill-warn{background:var(--amber-bg);color:var(--amber)}
.pill-gray{background:var(--bg-in);color:var(--muted)}
.pill-ready{background:var(--brand-bg);color:#075985}
.pill-cancel{background:#FEE2E2;color:#991B1B}
body[data-theme="dark"] .pill-ok{background:rgba(34,197,94,.18);color:#86EFAC}
body[data-theme="dark"] .pill-ready{color:#7DD3FC}
body[data-theme="dark"] .pill-cancel{background:rgba(220,38,38,.2);color:#FCA5A5}

.ui-link{background:none;border:0;color:var(--brand-ink);font-weight:700;font-size:14px;cursor:pointer;padding:8px 0;display:inline-flex;align-items:center;gap:4px;min-height:44px}
.ui-icon-btn{background:var(--bg-in);border:0;border-radius:12px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt)}

/* botão "לחזור לתצוגה המלאה" (admin vendo como o Maor): no topo fixo, à esquerda do título */
.ui-preview-exit{order:99;margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;background:#0A0A0A;color:#fff;border:0;border-radius:999px;padding:0 16px;min-height:44px;font-size:14px;font-weight:900;cursor:pointer;white-space:nowrap;flex-shrink:0}
.ui-preview-exit .ico{color:#fff}

/* ---------- sidebar ---------- */
#sidebar{background:var(--sb-bg-solid)}
.sb-nav{padding:8px 0}
.ui-grp{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:16px 20px 6px;font-size:12px;font-weight:900;color:var(--muted)}
.ui-grp-note{font-size:11px;font-weight:700;background:var(--amber-bg);color:var(--amber);padding:1px 8px;border-radius:999px}
.ni.ui-ni{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:2px 10px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--sb-txt);border:0;min-height:44px}
.ni.ui-ni .ico{color:var(--muted)}
.ni.ui-ni.active{background:#0A0A0A;color:#fff;border:0}
.ni.ui-ni.active .ico{color:#fff}
.ni.ui-ni.active::before{display:none}
.ui-ni-l{flex:1;min-width:0}
.ui-badge{background:var(--brand-ink);color:#fff;font-size:11px;font-weight:900;border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
#ui-sb-extra{border-block-start:1px solid var(--sb-border);padding:8px 0}
/* desktop (mouse): menu um pouco mais compacto para caber sem rolar */
@media (min-width:901px){.ni.ui-ni{min-height:38px;padding:7px 12px;font-size:14px}.ui-grp{padding:12px 20px 4px}.ui-switch{min-height:38px;padding:6px 22px}.sb-lang-row{padding:6px 16px}}
.ui-switch{display:flex;align-items:center;gap:10px;padding:10px 22px;font-size:14px;font-weight:700;cursor:pointer;min-height:44px}
.ui-switch input{position:absolute;opacity:0;pointer-events:none}
.ui-switch-t{width:38px;height:22px;border-radius:999px;background:var(--bdr-h);position:relative;flex-shrink:0;transition:background .2s}
.ui-switch-t::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.ui-switch input:checked + .ui-switch-t{background:var(--acc)}
.ui-switch input:checked + .ui-switch-t::after{transform:translateX(-16px)}
[dir="ltr"] .ui-switch input:checked + .ui-switch-t::after{transform:translateX(16px)}
.ui-foot-link{display:flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-size:12px;padding:10px 22px;cursor:pointer;text-align:start;min-height:44px}

/* ---------- barra de navegação embaixo (celular) ---------- */
#ui-bnav{display:none}
@media (max-width:900px){
  #sidebar,#sb-backdrop,.topbar .hamburger{display:none!important}
  #main{margin-inline-start:0!important}
  body:has(#lp[style*="none"]) #ui-bnav{display:grid}
  #ui-bnav{position:fixed;inset-inline:0;bottom:0;z-index:300;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--bg-card);border-block-start:1px solid var(--bdr);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.05)}
  .ui-bn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:0;color:var(--muted);font-size:11.5px;font-weight:700;min-height:52px;border-radius:12px;cursor:pointer;padding:4px 2px}
  .ui-bn.active{color:var(--txt)}
  .ui-bn.active .ico{color:var(--brand-ink)}
  .ui-bn .ui-badge{position:absolute;top:2px;inset-inline-start:calc(50% + 6px);min-width:18px;height:18px;font-size:10px}
  .content{padding:16px 16px calc(var(--bn-h) + 28px + env(safe-area-inset-bottom))!important}
  .topbar{padding:8px 16px!important}
  .btn{min-height:44px}
  /* etiquetas de envio: as duas colunas viram uma, a prévia cabe na tela */
  #s-sh > div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  #s-sh .lp-prev{width:100%;max-width:360px}
  /* posts: no celular o botão principal é o flutuante */
  body:has(#s-cn.active) #tba{display:none!important}
  .fi,.fsl,.fta{min-height:44px;font-size:16px}
  /* avisos (toast) acima da barra de baixo, sem sair da tela */
  #tc{top:auto!important;bottom:calc(var(--bn-h) + 24px + env(safe-area-inset-bottom))!important;left:16px!important;right:16px!important;inset-inline:16px!important;width:auto!important;transform:none!important}
  #tc .toast{max-width:100%;text-align:center}
}

/* folha "עוד" */
#ui-sheet{display:none}
#ui-sheet.open{display:block;position:fixed;inset:0;z-index:900}
.ui-sheet-bd{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.ui-sheet-p{position:absolute;inset-inline:0;bottom:0;max-height:85vh;overflow:auto;background:var(--bg-card);border-radius:20px 20px 0 0;padding:8px 0 calc(16px + env(safe-area-inset-bottom))}
.ui-sheet-h{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 4px;font-size:17px}

/* ---------- tabelas viram cartões ---------- */
@media (max-width:900px){
  .content .tw{overflow:visible!important;border:0!important}
  table.ui-cards,table.ui-cards tbody,table.ui-cards tr,table.ui-cards td{display:block;width:100%}
  table.ui-cards{min-width:0!important;width:100%!important;table-layout:auto}
  table.ui-cards thead{display:none}
  table.ui-cards tr{background:var(--bg-card);border:1px solid var(--bdr);border-radius:14px;padding:10px 14px;margin-bottom:10px}
  table.ui-cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0!important;border:0!important;text-align:start;white-space:normal!important;max-width:none!important;min-height:0}
  table.ui-cards td[data-label]::before{content:attr(data-label);font-size:12px;font-weight:700;color:var(--muted);flex-shrink:0}
  table.ui-cards td[data-label=""]::before{display:none}
  table.ui-cards td[data-label=""]{justify-content:flex-end;flex-wrap:wrap}
  table.ui-cards td[colspan]{justify-content:center;text-align:center}
  .card:has(> .tw > table.ui-cards),.card:has(> .cb > .tw > table.ui-cards){background:transparent;border:0;overflow:visible}
}

/* ---------- login ---------- */
#lp{background:var(--bg)}
#lp .lbox{border-radius:20px;border:1px solid var(--bdr);box-shadow:0 8px 32px rgba(0,0,0,.06)}
#lp .lbl{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted)}
#lp .li{min-height:52px;font-size:17px;border-radius:12px;background:var(--bg-el);border:1px solid var(--bdr);color:var(--txt)}
#lp .lbtn{min-height:54px;font-size:17px;font-weight:900;background:var(--acc);color:#0A0A0A;border-radius:12px}
.ui-remember{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin:-4px 0 14px;cursor:pointer;min-height:44px}
.ui-remember input{width:20px;height:20px;accent-color:#0A0A0A}

/* ---------- HOME ---------- */
.hm-greet{margin-bottom:16px}
.hm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hm-card{padding:18px;margin-bottom:12px;overflow:visible}
.hm-lbl{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}
.hm-num{font-size:30px;font-weight:900;line-height:1.1;direction:ltr;text-align:start;unicode-bidi:isolate}
.hm-sub{font-size:13px;color:var(--muted);margin-top:4px}
.hm-sub .up{color:var(--acc-d);font-weight:700}.hm-sub .dn{color:var(--red);font-weight:700}
.hm-when{font-size:22px;font-weight:900;margin-bottom:4px}
.hm-what{font-size:15px;margin-bottom:10px}
.hm-note{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.hm-note.warn{color:var(--amber);font-weight:700}
.hm-post{cursor:pointer;border-inline-start:4px solid var(--brand)}
.hm-empty{font-size:14px;color:var(--muted);padding:6px 0}
.hm-black{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.hm-black .hm-lbl,.hm-black .hm-note,.hm-black .hm-empty{color:#D1D5DB}
.hm-task-t{font-size:19px;font-weight:900;line-height:1.3;margin-bottom:6px}
.hm-task-m{font-size:14px;color:#D1D5DB;display:flex;align-items:center;gap:6px;margin-bottom:14px}
.hm-go{width:100%;justify-content:center;min-height:48px;font-size:16px}
.hm-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-2 .hm-card{margin-bottom:12px}
.hm-line{font-size:14.5px;line-height:1.5}.hm-line.muted{color:var(--muted);font-size:13.5px;margin-top:4px}
.hm-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.hm-kpi{padding:16px 18px;cursor:pointer;margin:0}
.hm-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start}
.hm-tline{display:flex;justify-content:space-between;gap:10px;width:100%;background:rgba(255,255,255,.07);border:0;color:#fff;border-radius:12px;padding:12px 14px;margin-bottom:8px;text-align:start;cursor:pointer;font-size:14.5px;font-weight:700;min-height:44px}
.hm-tline small{color:#D1D5DB;font-weight:500;white-space:nowrap}
@media (max-width:1100px){.hm-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-grid{grid-template-columns:1fr}}

/* gráfico */
.ui-chart{width:100%;height:180px;display:block}
.ui-chart-ax{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);direction:ltr;margin-top:2px}
.ui-chart-empty{font-size:14px;color:var(--muted);padding:28px 0;text-align:center;background:var(--bg-el);border-radius:12px}
.ui-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.ui-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-inline-end:5px;vertical-align:middle}
.ui-legend i.sq{border-radius:3px}

/* ---------- הזמנות ומלאי ---------- */
.om-card{padding:14px 16px;margin-bottom:10px}
.om-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:15px}
.om-c{font-size:16px;font-weight:900}
.om-items{font-size:14px;margin-top:2px}
.om-d{font-size:12.5px;color:var(--muted);margin-top:4px}
.om-ship{width:100%;justify-content:center;margin-top:12px;min-height:46px}
.om-low{border-inline-start:4px solid var(--amber-2)}
.om-sizes{display:flex;flex-wrap:wrap;gap:6px}
.om-sz{background:var(--bg-el);border:1px solid var(--bdr);border-radius:10px;padding:5px 10px;font-size:14px;direction:ltr;unicode-bidi:isolate}
.om-sz.low{background:var(--amber-bg);border-color:var(--amber-2);color:var(--amber);font-weight:700}