/* ═══════════════════════════════════════════════════════════
   מערכת עיצוב משותפת — SAY SOLUTIONS
   צבעים נטענים כ-tokens ונדרסים ע"י branding.js לכל לקוח.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1f2a37; --muted:#6b7280;
  --brand:#1d64d0; --brand-dark:#154a9c;
  --accent:#1faa54; --accent-dark:#178544;
  --line:#e5e7eb; --danger:#d33;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* ─── כפתורים ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 18px;border:none;border-radius:10px;font-size:16px;background:var(--brand);color:#fff}
.btn:hover{background:var(--brand-dark)}
.btn.block{width:100%}
.btn.green{background:var(--accent)}
.btn.green:hover{background:var(--accent-dark)}
.btn.ghost{background:#eef2f7;color:var(--ink)}
.btn.ghost:hover{background:#e2e8f0}
.btn.small{padding:7px 12px;font-size:14px}
.btn.danger{background:var(--danger)}

/* ─── שדות ─── */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:16px}
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px #fff inset;-webkit-appearance:none}
.pwwrap{position:relative}
.pwwrap .eye{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;color:var(--muted)}
.err{color:var(--danger);font-size:14px;margin-top:10px;text-align:center;min-height:18px}

/* ─── מסך התחברות (כרטיס זכוכית על רקע מלא) ─── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;
  background:linear-gradient(135deg,rgba(17,34,64,.72),rgba(17,34,64,.5)),url('/warehouse.jpg') center/cover no-repeat,#16233f}
.login-card{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.4);
  padding:40px 34px;width:100%;max-width:400px}
.login-card .brand-logo{display:block;margin:0 auto 14px;height:88px;width:auto}
.login-card h1{margin:0 0 4px;font-size:28px;text-align:center;color:#12233f}
.login-card .sub{color:#3a4a63;text-align:center;margin:0 0 24px;font-size:14px}
.login-card .login-submit{background:var(--accent);font-size:17px;padding:13px}
.login-card .login-submit:hover{background:var(--accent-dark)}

/* ─── מסך ראשי ─── */
#appView{min-height:100vh;background:linear-gradient(rgba(244,246,249,.94),rgba(244,246,249,.965)),url('/warehouse.jpg') center/cover fixed,var(--bg)}
header{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:5;box-shadow:0 2px 12px rgba(0,0,0,.06)}
header .header-logo{height:36px;width:auto}
header .title{font-weight:700;font-size:18px;margin-inline-end:auto;color:var(--brand-dark)}
header .who{color:var(--muted);font-size:14px}
main{max-width:820px;margin:0 auto;padding:20px 16px}

/* ─── רכיבי תוכן לשימוש חוזר ─── */
.panel{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.6);border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.1);padding:20px}
.card{background:rgba(255,255,255,.96);border-radius:14px;box-shadow:0 6px 20px rgba(0,0,0,.08);padding:16px;border-inline-start:5px solid var(--brand);transition:transform .12s,box-shadow .12s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.12)}
.empty{color:var(--muted);text-align:center;padding:30px}

/* ─── מודאל ─── */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal{background:var(--card);border-radius:18px;max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:24px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.modal h2{margin:0 0 16px;font-size:20px;color:var(--brand-dark)}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th,table.data td{padding:8px;border-bottom:1px solid var(--line);text-align:right}
.row-inline{display:flex;gap:6px;align-items:center}