/* ==========================================================================
   LOFTREK „In producție” – Interfața nouă (v2)
   Totul e scopat sub html[data-ui="v2"], deci interfața clasică rămâne
   neatinsă. Comutare din antet (buton „Interfață”), memorată per browser.
   ========================================================================== */

html[data-ui="v2"]{
  /* tokens */
  --r-sm:6px; --r-md:10px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --row-h:38px;
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow-1:0 1px 2px rgb(16 24 40 / .06), 0 1px 3px rgb(16 24 40 / .08);
  --shadow-2:0 12px 32px rgb(16 24 40 / .18);
  --hover:color-mix(in srgb, var(--accent) 6%, var(--surface));
  --toph:112px;
  --bg:#f4f5f8;
}
@media (prefers-color-scheme: dark){ html[data-ui="v2"]:not([data-theme="light"]){ --bg:#15172b; } }

/* ---------- tipografie ---------- */
html[data-ui="v2"] body{font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[data-ui="v2"] .board,
html[data-ui="v2"] .eta,
html[data-ui="v2"] .cell input{font-variant-numeric:tabular-nums}

/* ---------- focus vizibil, doar la tastatură ---------- */
html[data-ui="v2"] :where(button,input,select,textarea,a):focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
@media (prefers-reduced-motion: reduce){ html[data-ui="v2"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }

/* ---------- antet: 2 rânduri clare (navigare / acțiuni + filtre) ---------- */
html[data-ui="v2"] .top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding-block:var(--sp-3);box-shadow:var(--shadow-1);border-bottom:0}
html[data-ui="v2"] .top .row1,
html[data-ui="v2"] .top .tools{display:contents}
html[data-ui="v2"] .top h1{order:1;font-size:1.25rem;letter-spacing:-.01em}
html[data-ui="v2"] #srcTag{display:none}
html[data-ui="v2"] .top .tabs{order:2;flex:1 1 auto;margin:0;border:0;gap:2px;padding:3px;background:var(--surface2);border-radius:var(--r-md);overflow-x:auto;scrollbar-width:none;max-width:max-content}
html[data-ui="v2"] .top .tabs button{border:0;border-radius:calc(var(--r-md) - 3px);padding:5px 12px;white-space:nowrap;font-weight:500}
html[data-ui="v2"] .top .tabs button:hover{color:var(--fg)}
html[data-ui="v2"] .top .tabs button[aria-selected=true]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-1);font-weight:600}
html[data-ui="v2"] #syncState{order:3;margin-left:auto}
html[data-ui="v2"] #uiBtn{order:4}
html[data-ui="v2"] #meBtn{order:5}
html[data-ui="v2"] .brk{display:block;order:6;flex-basis:100%;height:0}
html[data-ui="v2"] #newItem{order:7}
html[data-ui="v2"] #q{order:8;flex:1 1 220px;max-width:380px}
html[data-ui="v2"] #fPerson{order:9}
html[data-ui="v2"] #fStatus{order:10}
html[data-ui="v2"] .top .chk{order:11}
html[data-ui="v2"] #summary{order:12;margin-left:auto}

html[data-ui="v2"] .btn,
html[data-ui="v2"] .tools input[type=search],
html[data-ui="v2"] .tools select{border-radius:var(--r-sm);min-height:34px;padding-inline:10px}
html[data-ui="v2"] .btn{font-weight:500;transition:background-color .12s, border-color .12s}
html[data-ui="v2"] .btn.primary:hover{background:color-mix(in srgb, var(--accent) 88%, #000)}
html[data-ui="v2"] #uiBtn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
html[data-ui="v2"] #q{padding-left:32px;background:var(--surface) no-repeat 10px 50% / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676879' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}

/* sumar: pastile discrete, cele de alertă sunt clicabile (filtrează) */
html[data-ui="v2"] #summary{gap:6px}
html[data-ui="v2"] #summary span{background:var(--surface2)!important;color:var(--muted);border-radius:var(--r-pill);padding:4px 10px;font-weight:500;font-size:12px;display:inline-flex;align-items:center;gap:6px}
html[data-ui="v2"] #summary span::before{content:"";width:8px;height:8px;border-radius:50%;background:#a5a8b5}
html[data-ui="v2"] #summary .sev-c{color:#a3303f;background:#fbe9eb!important;cursor:pointer}
html[data-ui="v2"] #summary .sev-c::before{background:#d04a59}
html[data-ui="v2"] #summary .sev-a{color:#8a5a12;background:#fdf1de!important;cursor:pointer}
html[data-ui="v2"] #summary .sev-a::before{background:#e39a2e}
html[data-ui="v2"] #summary [data-sumf]:hover{filter:brightness(.97)}

/* ---------- grupuri ---------- */
html[data-ui="v2"] main{padding-top:var(--sp-4)}
html[data-ui="v2"] .group{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--shadow-1);padding:var(--sp-2) 0 0;margin-bottom:var(--sp-5)}
html[data-ui="v2"] .ghead{position:sticky;top:var(--toph);z-index:6;background:var(--surface);padding:var(--sp-2) var(--sp-3);margin:0;border-radius:var(--r-md) var(--r-md) 0 0}
html[data-ui="v2"] .ghead button.tog{font-size:1.05rem;color:var(--fg)!important}
html[data-ui="v2"] .ghead button.tog::after{content:"";order:-1;width:10px;height:10px;border-radius:3px;background:var(--gc)}
html[data-ui="v2"] .ghead .cnt{font-size:.8rem}
html[data-ui="v2"] .scroll{border-radius:0 0 var(--r-md) var(--r-md);scrollbar-width:thin}

/* ---------- tabel ---------- */
html[data-ui="v2"] .board th,
html[data-ui="v2"] .board td{height:var(--row-h);border-right-color:color-mix(in srgb, var(--line) 55%, transparent);border-bottom-color:color-mix(in srgb, var(--line) 70%, transparent)}
html[data-ui="v2"] .board th{height:32px;font-size:11.5px;font-weight:600;text-transform:none;color:var(--muted);background:var(--surface);border-bottom:1px solid var(--line)}
html[data-ui="v2"] .board td.name,
html[data-ui="v2"] .board th.name{border-left-width:4px;box-shadow:6px 0 8px -8px rgb(0 0 0 / .25)}
html[data-ui="v2"] .board tr[data-row]:hover > td{background:var(--hover)}
html[data-ui="v2"] .board tr[data-row]:hover > td .st{filter:brightness(1.04)}
html[data-ui="v2"] .namewrap input{font-weight:500}
html[data-ui="v2"] .board td.name{min-width:320px;max-width:380px}

/* mânerul de drag apare la hover (rămâne accesibil prin Alt+↑/↓) */
html[data-ui="v2"] .drag{opacity:0;transition:opacity .12s}
html[data-ui="v2"] tr:hover .drag,
html[data-ui="v2"] .drag:focus-visible{opacity:1}

/* status: aceleași culori monday, celule pline; textul e calculat pentru contrast */
html[data-ui="v2"] .st{height:var(--row-h);font-weight:500;letter-spacing:.005em;min-width:136px}
html[data-ui="v2"] .st.empty{background:color-mix(in srgb, var(--line) 45%, var(--surface))}
html[data-ui="v2"] table.sub .st{height:32px}

/* săptămâni până la livrare: fără blocuri pline; accent lateral + text colorat */
html[data-ui="v2"] .eta{height:var(--row-h);justify-content:flex-start;padding-left:12px;font-weight:600;background:transparent!important;box-shadow:inset 4px 0 0 currentColor}
html[data-ui="v2"] .eta.ok{color:#3f7f53}
html[data-ui="v2"] .eta.soon{color:#8a7a1f}
html[data-ui="v2"] .eta.now{color:#b56a18;background:#fdf3e6!important}
html[data-ui="v2"] .eta.late{color:#b4423a;background:#fcecea!important}
html[data-ui="v2"] .eta.late.old{color:#9a5a55;background:transparent!important;font-weight:500}
html[data-ui="v2"] .eta.none{box-shadow:none;color:var(--muted);font-weight:400}
@media (prefers-color-scheme: dark){ html[data-ui="v2"]:not([data-theme="light"]) .eta.ok{color:#7cc493}
  html[data-ui="v2"]:not([data-theme="light"]) .eta.soon{color:#d8c35a}
  html[data-ui="v2"]:not([data-theme="light"]) .eta.now{color:#f0a85a;background:#3a2c1c!important}
  html[data-ui="v2"]:not([data-theme="light"]) .eta.late{color:#f08a80;background:#3a2023!important}
  html[data-ui="v2"]:not([data-theme="light"]) .eta.late.old{color:#c99591} }

/* câmpuri dată/săptămână: iconița de calendar doar la hover/focus */
html[data-ui="v2"] .cell input::-webkit-calendar-picker-indicator{opacity:0;transition:opacity .12s;cursor:pointer}
html[data-ui="v2"] tr:hover .cell input::-webkit-calendar-picker-indicator,
html[data-ui="v2"] .cell input:focus::-webkit-calendar-picker-indicator{opacity:.6}
html[data-ui="v2"] .cell input{color:var(--fg)}

/* iconițe SVG consistente în locul emoji-urilor (care arată diferit pe Windows/Mac) */
html[data-ui="v2"] .ic{display:inline-block;width:16px;height:16px;font-size:0;vertical-align:-3px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
html[data-ui="v2"] .bub .ic{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E")}
html[data-ui="v2"] .fileicon .ic{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m20 11-8.5 8.5a5 5 0 0 1-7-7L13 4a3.3 3.3 0 0 1 4.7 4.7L9.2 17.2a1.7 1.7 0 0 1-2.4-2.4L14.5 7'/%3E%3C/svg%3E");width:14px;height:14px}
html[data-ui="v2"] .bub,
html[data-ui="v2"] .fileicon{border-radius:var(--r-sm);padding:3px 5px;display:inline-flex;align-items:center;gap:3px;color:var(--muted)}
html[data-ui="v2"] .bub:hover,
html[data-ui="v2"] .fileicon:hover{background:var(--surface2);color:var(--accent)}
html[data-ui="v2"] .bub .c{position:static;font-size:10.5px;font-weight:600;background:var(--accent);padding:0 5px;line-height:16px}
html[data-ui="v2"] .iss{border-radius:var(--r-pill);font-size:10.5px;min-width:18px;line-height:16px}

/* subitems */
html[data-ui="v2"] tr.subwrap > td{background:var(--surface2)!important}
html[data-ui="v2"] table.sub{border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--shadow-1)}

/* ---------- drawer ---------- */
html[data-ui="v2"] #drawer{border-left:0;box-shadow:var(--shadow-2);width:min(780px,100%)}
html[data-ui="v2"] .dh{padding:var(--sp-4) var(--sp-5) 0;position:sticky;top:0;background:var(--surface);z-index:2}
html[data-ui="v2"] .dh .tabs{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
html[data-ui="v2"] .dh .tabs button{white-space:nowrap}
html[data-ui="v2"] .db{padding:var(--sp-4) var(--sp-5)}
html[data-ui="v2"] .upd{border-radius:var(--r-md);box-shadow:var(--shadow-1);border-color:transparent;padding:var(--sp-3) var(--sp-4)}
html[data-ui="v2"] textarea{border-radius:var(--r-md)}
html[data-ui="v2"] #pop{border-radius:var(--r-md);box-shadow:var(--shadow-2)}

/* ---------- carduri din celelalte view-uri ---------- */
html[data-ui="v2"] .card2,
html[data-ui="v2"] .box{border-radius:var(--r-md)}
html[data-ui="v2"] .cal .chip{border-radius:var(--r-sm)}

/* ---------- mobil ---------- */
@media (max-width: 720px){
  html[data-ui="v2"] .top{gap:var(--sp-2);position:static}
  html[data-ui="v2"] .ghead{top:0}
  html[data-ui="v2"] #fPerson,
  html[data-ui="v2"] #fStatus{flex:1 1 40%;min-width:0}
  html[data-ui="v2"] #summary span:not([data-sumf]){display:none}
  html[data-ui="v2"] .top h1{font-size:1.05rem}
  html[data-ui="v2"] .top .tabs{order:20;flex-basis:100%;max-width:none}
  html[data-ui="v2"] #syncState{display:none}
  html[data-ui="v2"] #q{flex-basis:100%;max-width:none}
  html[data-ui="v2"] #summary{margin-left:0}
  html[data-ui="v2"] #meBtn{margin-left:auto}
  html[data-ui="v2"] .board td.name{min-width:220px;max-width:240px}
  html[data-ui="v2"] .dh{padding-inline:var(--sp-4)}
  html[data-ui="v2"] .db{padding:var(--sp-3) var(--sp-4)}
}
@media (prefers-color-scheme: dark){
  html[data-ui="v2"]:not([data-theme="light"]) #summary .sev-c{color:#f3a3ab;background:#3a2025!important}
  html[data-ui="v2"]:not([data-theme="light"]) #summary .sev-a{color:#f2c17a;background:#3a2d1a!important}
}