/* ════════════════════════════════════════════════════════════════════════
   TAWJEH Warehouse Dashboard — polished theme
   Brand orange  : #F39200
   Brand dark    : #2E4057
   Cream surface : #F5F3EE
   ════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');

:root {
  --orange: #F39200;
  --orange-soft: #FFB73D;
  --orange-dark: #D97E00;
  --orange-50: #FFF7EC;
  --orange-100: #FFE9C7;
  --dark: #2E4057;
  --dark-2: #25334B;
  --dark-3: #1A2536;
  --cream: #F5F3EE;
  --cream-2: #FAF8F2;
  --green: #27AE60;
  --green-soft: #2ECC71;
  --red: #E74C3C;
  --red-soft: #FF6B5B;
  --blue: #3498DB;
  --blue-soft: #5DADE2;
  --gray: #95A5A6;
  --border: #ECE7DD;
  --border-strong: #D9D2C2;
  --text: #1A2233;
  --text-soft: #44566E;
  --text-muted: #6B7A8F;

  --shadow-sm: 0 1px 2px rgba(28, 35, 51, 0.06);
  --shadow-md: 0 4px 14px rgba(28, 35, 51, 0.08);
  --shadow-lg: 0 12px 30px rgba(28, 35, 51, 0.12);
  --shadow-orange: 0 8px 22px rgba(243, 146, 0, 0.28);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --t-fast: 120ms ease;
  --t: 200ms ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: 'Cairo', 'Segoe UI', -apple-system, system-ui, sans-serif;
  background: var(--cream);
  background-image:
    radial-gradient(1200px 600px at 100% -200px, rgba(243, 146, 0, 0.06), transparent 60%),
    radial-gradient(1000px 500px at -100px 100%, rgba(46, 64, 87, 0.05), transparent 60%);
  min-height: 100vh;
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.1px;
  -webkit-font-smoothing: antialiased;
}

/* ── Login page ───────────────────────────────────────────────────────── */
.login-page, .app-page { display: none; min-height: 100vh; }
.login-page.active, .app-page.active { display: flex; }

.login-page {
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(243, 146, 0, 0.18), transparent 50%),
    radial-gradient(900px 600px at 100% 100%, rgba(243, 146, 0, 0.08), transparent 60%),
    linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%);
  padding: 24px;
}

.login-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 30px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35), 0 6px 18px rgba(0, 0, 0, 0.18);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.login-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--orange-soft));
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; }
.brand-mark { width: 88px; height: auto; }
.brand-title {
  color: var(--orange);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
}
.brand-tag { font-size: 12px; color: var(--text-muted); margin: 0; }

.login-card input {
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  background: var(--cream-2);
  direction: ltr;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.login-card input:focus {
  border-color: var(--orange);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.12);
}
.login-card button {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.4px;
  box-shadow: var(--shadow-orange);
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t);
}
.login-card button:hover { filter: brightness(1.05); box-shadow: 0 12px 28px rgba(243, 146, 0, 0.36); }
.login-card button:active { transform: translateY(1px); }
.login-error { color: var(--red); font-size: 13px; margin-top: 10px; min-height: 20px; font-weight: 500; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark-2) 60%, var(--dark-3) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06);
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(243, 146, 0, 0.35), transparent);
}
.sidebar-header { padding: 22px 18px 18px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-header img { filter: drop-shadow(0 4px 10px rgba(243, 146, 0, 0.35)); }
.sidebar-header h2 {
  color: var(--orange);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-top: 6px;
}
.sidebar-header p {
  font-size: 11.5px;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  font-weight: 500;
}

.sidebar-nav { padding: 12px 10px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  padding: 11px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
  transition: background var(--t), color var(--t), transform var(--t-fast);
  border-radius: var(--radius);
  font-weight: 500;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active {
  background: rgba(243, 146, 0, 0.15);
  color: var(--orange);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(243, 146, 0, 0.25);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  right: -10px;
  top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--orange);
  box-shadow: 0 0 12px rgba(243, 146, 0, 0.7);
}
.nav-item .icon { font-size: 17px; width: 22px; text-align: center; }

.sidebar-footer {
  padding: 14px 14px 16px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-brand .footer-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(243, 146, 0, 0.4));
  flex-shrink: 0;
}
.footer-brand .footer-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.footer-brand .footer-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer-brand .footer-copy {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.footer-brand .footer-logout {
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.3);
  color: var(--red-soft);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.footer-brand .footer-logout:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.footer-brand .footer-logout:active { transform: scale(0.94); }

/* ── Main area ─────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  padding: 26px 28px 36px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.main-header {
  margin-bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.main-header h1 {
  font-size: 24px;
  color: var(--dark);
  font-weight: 800;
  letter-spacing: 0.2px;
}
.main-header p { font-size: 13px; color: var(--text-soft); margin-top: 2px; }

/* ── Stats grid ───────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
  border: 1px solid var(--border);
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-soft));
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .num {
  font-size: 32px;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.stat-card .lbl { font-size: 12.5px; color: var(--text-soft); margin-top: 6px; font-weight: 500; }

.stat-card.orange::before { background: linear-gradient(90deg, var(--orange), var(--orange-soft)); }
.stat-card.green::before  { background: linear-gradient(90deg, var(--green), var(--green-soft)); }
.stat-card.blue::before   { background: linear-gradient(90deg, var(--blue), var(--blue-soft)); }
.stat-card.red::before    { background: linear-gradient(90deg, var(--red), var(--red-soft)); }
.stat-card.orange .num { color: var(--orange-dark); }
.stat-card.green .num  { color: var(--green); }
.stat-card.blue .num   { color: var(--blue); }
.stat-card.red .num    { color: var(--red); }
.stat-card.purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.stat-card.purple .num { color: #7c3aed; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
  overflow-x: auto;
  border: 1px solid var(--border);
}
.card h3 {
  font-size: 15px;
  margin-bottom: 14px;
  color: var(--dark);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}
.card h3::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--orange);
  border-radius: 2px;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.card table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.card th, .card td {
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid #F4F0E6;
  white-space: nowrap;
}
.card thead th {
  background: var(--cream-2);
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.card thead th:first-child { border-top-right-radius: var(--radius); }
.card thead th:last-child  { border-top-left-radius: var(--radius); }
.card tbody tr { transition: background var(--t-fast); }
.card tbody tr:hover td { background: #FCFAF4; }
.card tbody tr:last-child td { border-bottom: none; }
.card .empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
}
.badge-green  { background: #E9F8EE; color: #1F8A4C; border-color: #C9EBD5; }
.badge-orange { background: #FFF3DD; color: #B86A00; border-color: #FFD79A; }
.badge-red    { background: #FDECEA; color: #B43B2C; border-color: #F7C7BF; }
.badge-blue   { background: #E3F2FD; color: #1F6FAA; border-color: #C8E2F5; }
.badge-gray   { background: #F1F1ED; color: #777; border-color: #E5E5DF; }

/* ── Forms (legacy class names) ───────────────────────────────────────── */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.form-row input, .form-row select {
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  width: 100%;
  background: var(--cream-2);
  font-family: inherit;
  color: var(--text);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.form-row input:focus, .form-row select:focus {
  border-color: var(--orange);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.10);
}
.form-row-2 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 10px; }
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1.5fr 0.5fr; gap: 10px; }

/* ── Assignments / inline grids ────────────────────────────────────── */
.assign-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.assign-grid select, .assign-grid input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--cream-2);
  color: var(--text);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.assign-grid select:focus, .assign-grid input:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.10);
}
.assign-qty { display: flex; gap: 8px; align-items: center; }
.assign-qty input {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--cream-2);
}
.assign-qty input:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.10); }
.assign-qty .btn { padding: 11px 16px; font-size: 13px; white-space: nowrap; }
.assign-totp {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cream-2);
  text-align: center;
  direction: ltr;
  letter-spacing: 6px;
  font-weight: 700;
  margin-bottom: 12px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.assign-totp:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.12); }
.assign-items {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  min-height: 50px;
  background: var(--cream-2);
}
.assign-items .empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.assign-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  transition: background var(--t-fast), box-shadow var(--t);
}
.assign-item:last-child { margin-bottom: 0; }
.assign-item:hover { box-shadow: var(--shadow-sm); background: var(--cream-2); }
.assign-item .model { flex: 1; font-weight: 600; color: var(--dark); }
.assign-item .qty-wrap { display: flex; align-items: center; gap: 4px; color: var(--text-soft); font-size: 12px; }
.assign-item .qty-wrap .num { font-weight: 800; color: var(--orange); font-size: 14px; }
.assign-item .rm-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
  transition: background var(--t-fast);
}
.assign-item .rm-btn:hover { background: #FDECEA; }

/* ── Edit row inline ──────────────────────────────────────────────── */
.edit-row { display: flex; gap: 6px; align-items: center; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.2px;
  transition: transform var(--t-fast), filter var(--t), box-shadow var(--t);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(243, 146, 0, 0.25);
}
.btn-primary:hover { box-shadow: 0 6px 16px rgba(243, 146, 0, 0.35); }
.btn-success {
  background: linear-gradient(135deg, var(--green-soft) 0%, var(--green) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.25);
}
.btn-danger {
  background: linear-gradient(135deg, var(--red-soft) 0%, var(--red) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.22);
}
.btn-secondary {
  background: var(--cream);
  color: var(--text-soft);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }
.btn-sm { padding: 5px 11px; font-size: 11.5px; border-radius: 7px; }
.btn-sm[disabled] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }
.btn:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 2px; }

/* ── Views ────────────────────────────────────────────────────────── */
.view { display: none; animation: fadeIn 0.22s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── Warehouse switcher ──────────────────────────────────────────── */
.wh-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  width: fit-content;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.wh-btn {
  padding: 7px 16px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  color: var(--text-soft);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.wh-btn:hover { background: var(--cream-2); color: var(--orange-dark); }
.wh-btn.active {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(243, 146, 0, 0.28);
}

/* ── Loading ─────────────────────────────────────────────────────── */
.loading {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2.5px solid var(--border);
  border-top-color: var(--orange);
  border-radius: 50%;
  vertical-align: -3px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error {
  text-align: center;
  padding: 32px 20px;
  color: var(--red);
  background: #FDECEA;
  border: 1px solid #F7C7BF;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
}

/* ── Inline form ─────────────────────────────────────────────────── */
.inline-form { display: flex; gap: 4px; }
.inline-form input { width: 64px; padding: 5px 8px; border: 1.5px solid var(--border); border-radius: 6px; font-size: 12px; text-align: center; }

/* ── Modals ──────────────────────────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeBg 0.18s ease;
}
.modal-bg.show { display: flex; }
@keyframes fadeBg { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: #fff;
  border-radius: var(--radius-xl);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.1);
  animation: pop 0.22s cubic-bezier(.18,.89,.32,1.25);
  border: 1px solid rgba(0, 0, 0, 0.04);
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--cream-2);
}
.modal-hd h3 { font-size: 15.5px; font-weight: 800; color: var(--dark); }
.modal-x {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-x:hover { background: var(--cream); color: var(--red); }

.modal-body { padding: 18px 20px 22px; overflow-y: auto; }
.modal-lbl {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 14px;
  margin-bottom: 7px;
  font-weight: 600;
}
.modal-lbl:first-child { margin-top: 0; }

.modal-body input, .modal-body select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cream-2);
  color: var(--text);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.modal-body input:focus, .modal-body select:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.10);
}
.modal-body textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cream-2);
  resize: vertical;
}
.modal-body textarea:focus { outline: none; border-color: var(--orange); background: #fff; box-shadow: 0 0 0 4px rgba(243, 146, 0, 0.10); }

/* ── Edit modal grid ─────────────────────────────────────────────── */
.edit-modal .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-bottom: 8px; }
.edit-modal .field { display: flex; flex-direction: column; }
.edit-modal .field-full { grid-column: 1 / -1; }
.edit-modal .modal-lbl { margin: 0 0 6px; font-weight: 700; color: var(--text-soft); font-size: 12px; }
.edit-modal .readonly-field {
  padding: 11px 13px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-soft);
  font-weight: 600;
}
.edit-modal .switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: var(--cream-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  height: 44px;
}
.edit-modal .switch-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer; }
.edit-modal .switch-text { font-size: 14px; color: var(--text); font-weight: 600; }
.edit-modal .modal-submit { width: 100%; padding: 13px; margin-top: 16px; font-size: 14px; }
.field-error { color: var(--red); font-size: 12.5px; margin-top: 6px; min-height: 18px; font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .assign-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .sidebar { width: 64px; }
  .sidebar .nav-text, .sidebar-header p, .footer-meta { display: none; }
  .sidebar-header h2 { font-size: 14px; letter-spacing: 1px; }
  .sidebar-header img { width: 38px !important; }
  .nav-item { padding: 12px; justify-content: center; }
  .nav-item.active::before { display: none; }
  .footer-brand { flex-direction: column; gap: 8px; padding: 8px 4px; }
  .footer-brand .footer-logo { width: 28px; height: 28px; }
  .footer-brand .footer-logout { width: 30px; height: 30px; }
  .main { padding: 16px 14px 24px; }
  .main-header h1 { font-size: 20px; }
  .stat-card .num { font-size: 26px; }
  .card { padding: 16px; }
}

@media (max-width: 520px) {
  .edit-modal .form-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Accessibility ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* v5 logo reliability fixes */
.login-brand .brand-mark,
.sidebar-header img,
.footer-brand .footer-logo {
  object-fit: contain !important;
  display: block !important;
  background: rgba(255,255,255,.92) !important;
  border-radius: 10px !important;
  padding: 4px !important;
}
.login-brand .brand-mark { width: 170px !important; max-width: 80% !important; height: auto !important; margin: 0 auto 10px !important; }
.sidebar-header img { width: 120px !important; max-height: 68px !important; }
.footer-brand .footer-logo { width: 42px !important; height: 42px !important; }


/* v10 modern UI/UX polish */
.brand-title-ar{letter-spacing:0;font-size:28px;line-height:1.3;background:linear-gradient(135deg,var(--orange),var(--orange-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-mark,.brand-tag{display:none!important}
.login-card{animation:cardIn .45s cubic-bezier(.22,1,.36,1);border:1px solid rgba(255,255,255,.5)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.app-page.active{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sidebar{background:linear-gradient(180deg,#233247 0%,#172234 100%);box-shadow:18px 0 50px rgba(22,31,47,.18)}
.sidebar-logo-box{width:120px;height:72px;margin:0 auto 10px;background:#fff;border-radius:18px;padding:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.16)}
.sidebar-logo-box img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sidebar-header h2{font-size:18px;letter-spacing:1.6px;color:#fff}
#sidebarUser{font-weight:700;color:#fff;opacity:.95}
.footer-role:empty{display:none}
.nav-item{position:relative;border-radius:16px;margin:4px 12px;transition:transform .18s ease,background .18s ease,box-shadow .18s ease;color:rgba(255,255,255,.82)}
.nav-item:hover{transform:translateX(-3px);background:rgba(255,255,255,.09)}
html[dir="ltr"] .nav-item:hover{transform:translateX(3px)}
.nav-item.active{background:linear-gradient(135deg,var(--orange),var(--orange-dark));box-shadow:0 12px 28px rgba(243,146,0,.28);color:#fff}
.nav-item.active::before{content:'';position:absolute;inset:10px auto 10px -3px;width:5px;border-radius:10px;background:#fff}
.nav-item .icon{width:32px;height:32px;border-radius:12px;background:rgba(255,255,255,.10);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;transition:transform .18s ease,background .18s ease}
.nav-item:hover .icon,.nav-item.active .icon{transform:scale(1.08) rotate(-2deg);background:rgba(255,255,255,.22)}
.main-header{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);border:1px solid rgba(233,223,209,.9);border-radius:24px;padding:18px 22px;margin-bottom:18px;box-shadow:var(--shadow-md)}
.stat-card,.card,table,.modal-card{border-radius:22px!important;box-shadow:0 14px 38px rgba(30,39,58,.08)!important;border:1px solid rgba(233,223,209,.9)}
.stat-card,.card{transition:transform .18s ease,box-shadow .18s ease}
.stat-card:hover,.card:hover{transform:translateY(-3px);box-shadow:0 18px 46px rgba(30,39,58,.13)!important}
.btn{transition:transform .14s ease,box-shadow .18s ease,filter .18s ease;border-radius:13px!important}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn:active{transform:translateY(0) scale(.98)}
.modal-bg.show .modal-card{animation:modalIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.loading{position:relative;overflow:hidden;border-radius:18px;background:#fff;padding:18px;color:var(--text-muted)}
.loading::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(243,146,0,.12),transparent);animation:shimmer 1.1s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(243,146,0,.12)!important}


/* ════════════════════════════════════════════════════════════════════════
   TAWJEH v11 premium UI layer — inspired by approved HTML preview
   Applies a modern glass dashboard, animated cards, responsive sidebar,
   clearer interactive icons, and improved modal/form UX.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --twj-orange:#F39200;
  --twj-orange-2:#FFB73D;
  --twj-ink:#24201D;
  --twj-brown:#6F4A23;
  --twj-bg:#FFF8EF;
  --twj-card:rgba(255,255,255,.82);
  --twj-border:rgba(111,74,35,.14);
  --twj-muted:#5E4E3F;
  --twj-shadow:0 22px 70px rgba(61,38,13,.13);
  --twj-shadow-soft:0 10px 30px rgba(61,38,13,.08);
  --twj-radius:24px;
}
body{
  color:var(--twj-ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,177,95,.34), transparent 28%),
    radial-gradient(circle at 85% 0%, rgba(243,146,0,.22), transparent 30%),
    linear-gradient(135deg,#fffaf2 0%,#fff3df 45%,#f7efe3 100%) !important;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  left:-170px;
  bottom:-190px;
  width:430px;
  height:430px;
  border-radius:999px;
  background:rgba(243,146,0,.16);
  z-index:0;
  pointer-events:none;
  animation:twjFloat 8s ease-in-out infinite;
}
.login-page{
  background:
    radial-gradient(circle at 15% 10%,rgba(255,177,95,.42),transparent 32%),
    radial-gradient(circle at 85% 0%,rgba(243,146,0,.28),transparent 36%),
    linear-gradient(135deg,#2a241f 0%,#6c431e 100%) !important;
}
.login-card{
  max-width:430px;
  border-radius:32px !important;
  padding:38px 34px 34px !important;
  box-shadow:0 36px 90px rgba(0,0,0,.34) !important;
  animation:twjFadeUp .55s ease both;
}
.login-card::after{
  content:"";
  position:absolute;
  width:190px;height:190px;border-radius:999px;
  background:rgba(243,146,0,.12);
  left:-80px;bottom:-80px;
}
.login-brand{margin-bottom:20px!important;}
.brand-title{font-size:28px!important;letter-spacing:-.4px!important;color:var(--twj-orange)!important;}
.brand-tag,.login-brand p{display:none!important;}
.lang-toggle-header{
  border-radius:999px!important;
  border-color:var(--twj-border)!important;
  background:#fff8ef!important;
  box-shadow:var(--twj-shadow-soft);
}
.lang-toggle-header button{border-radius:999px!important;transition:.2s ease!important;}
.lang-toggle-header button:hover{background:#fff0dc!important;color:var(--twj-orange)!important;}
.login-card input,
.modal-card input,
.modal-card select,
.modal-card textarea{
  border-radius:16px!important;
  background:#fffdf9!important;
  border:1.5px solid var(--twj-border)!important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease!important;
}
.login-card input:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus{
  border-color:var(--twj-orange)!important;
  box-shadow:0 0 0 4px rgba(243,146,0,.13)!important;
  transform:translateY(-1px);
}
.login-card button,.btn-primary,.primary,.modal-submit{
  background:linear-gradient(135deg,var(--twj-orange),var(--twj-orange-2))!important;
  color:#2c1805!important;
  font-weight:900!important;
  border-radius:16px!important;
  box-shadow:0 15px 30px rgba(243,146,0,.25)!important;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease!important;
}
.login-card button:hover,.btn-primary:hover,.primary:hover,.modal-submit:hover{
  transform:translateY(-2px) scale(1.01)!important;
  box-shadow:0 20px 36px rgba(243,146,0,.32)!important;
}
.app-page.active{
  display:grid!important;
  grid-template-columns:292px 1fr;
  gap:0;
  padding:0;
  min-height:100vh;
  position:relative;
  z-index:1;
  background:var(--cream);
}
.app-page.active .sidebar{
  border-radius:0!important;
  box-shadow:none!important;
  padding:30px 24px!important;
  height:100vh;
  top:0;
}
.app-page.active .main{
  padding:30px 30px 30px 8px!important;
}
.sidebar{
  width:auto!important;
  border-radius:32px;
  padding:20px;
  height:calc(100vh - 44px);
  position:sticky;
  top:22px;
  background:var(--cream)!important;
  box-shadow:0 8px 30px rgba(111,74,35,.10)!important;
  animation:twjSlideIn .55s ease both;
}
.sidebar::after{display:none!important;}
.sidebar-header{
  padding:8px 8px 18px!important;
  display:grid;
  grid-template-columns:72px 1fr;
  text-align:start!important;
  gap:14px;
  align-items:center;
  border-bottom:1px solid var(--twj-border)!important;
}
.sidebar-logo-box{
  width:72px!important;
  height:72px!important;
  background:#fff!important;
  border-radius:20px!important;
  display:grid!important;
  place-items:center!important;
  padding:10px!important;
  box-shadow:0 8px 20px rgba(111,74,35,.12)!important;
  grid-row:1 / span 2;
}
.sidebar-logo-box img{width:100%!important;max-height:100%!important;object-fit:contain!important;filter:none!important;}
.sidebar-header h2{font-size:18px!important;color:var(--twj-orange)!important;letter-spacing:.2px!important;margin:0!important;align-self:end;}
.sidebar-header p{font-size:13px!important;color:var(--text-soft)!important;margin:0!important;align-self:start;}
#sidebarUser{font-weight:700;color:var(--text)!important;}
.sidebar-nav{padding:14px 0!important;gap:8px!important;}
.nav-item{
  padding:12px 13px!important;
  border-radius:18px!important;
  gap:12px!important;
  color:var(--text)!important;
  overflow:hidden;
  transition:transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease!important;
}
.nav-item .icon{
  width:34px!important;height:34px!important;
  border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:rgba(36,32,29,.06)!important;
  font-size:17px!important;
  transition:transform .22s ease, background .22s ease!important;
  flex:0 0 34px;
}
.nav-item:hover{background:rgba(243,146,0,.08)!important;transform:translateX(-4px);color:var(--twj-orange)!important;}
html[dir="ltr"] .nav-item:hover{transform:translateX(4px);}
.nav-item:hover .icon{background:rgba(243,146,0,.15)!important;transform:rotate(-4deg) scale(1.04);}
.nav-item.active{
  background:linear-gradient(90deg,var(--twj-orange),#ffab4c)!important;
  color:#24180f!important;
  font-weight:900!important;
  box-shadow:0 14px 30px rgba(243,146,0,.26)!important;
}
.nav-item.active .icon{background:rgba(255,255,255,.35)!important;}
.nav-item.active::before{display:none!important;}
.nav-sep{background:var(--twj-border)!important;}
.nav-chevron{font-size:8px;transition:transform .22s ease;opacity:.5;}
.nav-parent{display:flex;align-items:center;gap:8px;margin-top:4px;}
.nav-parent>.nav-chevron{margin-left:auto;}
.nav-item[data-section="overview"]{margin-bottom:4px;border-bottom:1px solid var(--twj-border);padding-bottom:16px!important;}
.nav-sub{overflow:hidden;transition:max-height .3s ease;padding-right:12px;}
html[dir="ltr"] .nav-sub{padding-right:0;padding-left:12px;}
.nav-child{padding:9px 13px!important;border-radius:16px!important;font-size:13px!important;color:var(--text)!important;opacity:.82;}
.nav-child .icon{width:28px!important;height:28px!important;font-size:14px!important;border-radius:10px!important;flex:0 0 28px!important;}
.nav-child:hover{background:rgba(243,146,0,.06)!important;opacity:1;color:var(--twj-orange)!important;}
.nav-child.active{background:rgba(243,146,0,.1)!important;color:var(--twj-orange)!important;font-weight:700!important;}
.nav-parent.expanded{background:rgba(243,146,0,.06)!important;border-radius:18px!important;}
.nav-parent.expanded .nav-chevron{opacity:1;}
.sidebar-footer{padding:12px 0 0!important;}
.footer-brand{
  padding:14px 0!important;
}
.footer-logo{background:#fff;border-radius:14px;padding:6px;box-shadow:0 8px 18px rgba(0,0,0,.12);}
.footer-role{display:none!important;}
.main{padding:0!important;display:flex!important;flex-direction:column!important;gap:18px!important;min-width:0;}
.main-header{
  display:grid!important;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:8px 18px;
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  backdrop-filter:blur(18px);
  border-radius:30px!important;
  padding:18px 22px!important;
  box-shadow:var(--twj-shadow-soft)!important;
  animation:twjFadeUp .5s ease both;
}
.main-header h1{font-size:30px!important;letter-spacing:-.7px!important;color:var(--twj-ink)!important;}
.main-header p{color:var(--twj-muted)!important;}
.wh-switcher{grid-column:2;grid-row:1 / span 2;}
.view{animation:twjFadeUp .42s ease both;}
.card,.stat-card,.panel,.data-card,.list-card,.table-card{
  background:var(--twj-card)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px);
  border-radius:var(--twj-radius)!important;
  box-shadow:var(--twj-shadow-soft)!important;
  transition:transform .24s ease, box-shadow .24s ease!important;
}
.card:hover,.stat-card:hover,.panel:hover,.data-card:hover,.list-card:hover,.table-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--twj-shadow)!important;
}
.stats-grid,.cards-grid,.overview-grid{gap:16px!important;}
.table-row,.row,.list-item,.item-row,.product-row,.assignment-row,.sim-row,.quote-row,.invoice-row{
  border-radius:18px!important;
  background:rgba(255,250,244,.86)!important;
  border:1px solid var(--twj-border)!important;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease!important;
}
.table-row:hover,.row:hover,.list-item:hover,.item-row:hover,.product-row:hover,.assignment-row:hover,.sim-row:hover,.quote-row:hover,.invoice-row:hover{
  transform:translateX(-3px);
  background:#fff!important;
  box-shadow:var(--twj-shadow-soft)!important;
}
html[dir="ltr"] .table-row:hover,html[dir="ltr"] .row:hover,html[dir="ltr"] .list-item:hover,html[dir="ltr"] .item-row:hover,html[dir="ltr"] .product-row:hover,html[dir="ltr"] .assignment-row:hover,html[dir="ltr"] .sim-row:hover,html[dir="ltr"] .quote-row:hover,html[dir="ltr"] .invoice-row:hover{transform:translateX(3px);}
.badge,.status,.chip{
  border-radius:999px!important;
  font-weight:800!important;
  padding:7px 10px!important;
}
.modal-bg{backdrop-filter:blur(12px);background:rgba(36,32,29,.44)!important;}
.modal-card{
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 30px 90px rgba(36,32,29,.24)!important;
  animation:twjModalIn .25s ease both;
}
.modal-hd{
  background:linear-gradient(135deg,#fff,#fff8ef)!important;
  border-bottom:1px solid var(--twj-border)!important;
}
.modal-x{border-radius:14px!important;transition:.2s ease!important;}
.modal-x:hover{background:#fff1dd!important;transform:rotate(4deg) scale(1.04);}
.btn,.icon-btn,.action-btn,.footer-logout{
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease!important;
}
.btn:hover,.icon-btn:hover,.action-btn:hover,.footer-logout:hover{transform:translateY(-2px);}
.loading,.skeleton,.shimmer{
  background:linear-gradient(90deg,#f4e7d4,#fff9f0,#f4e7d4)!important;
  background-size:200% 100%!important;
  animation:twjShimmer 1.2s linear infinite!important;
}
@keyframes twjFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes twjSlideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}}
@keyframes twjFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes twjShimmer{to{background-position:-200% 0}}
@keyframes twjModalIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (max-width:1100px){
  .app-page.active{grid-template-columns:1fr;padding:16px;}
  .app-page.active .sidebar{border-radius:26px!important;height:auto;padding:20px!important;position:relative;top:auto;}
  .app-page.active .main{padding:16px!important;}
  .sidebar-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
  .sidebar-nav{grid-template-columns:1fr;}
  .main-header{grid-template-columns:1fr;}
  .wh-switcher{grid-column:auto;grid-row:auto;}
  .main-header h1{font-size:24px!important;}
  .sidebar-header{grid-template-columns:62px 1fr;}
  .sidebar-logo-box{width:62px!important;height:62px!important;}
}

/* ───────── Stock Transfer Workflow (v12) ───────── */

.transfer-toolbar { padding: 12px 16px; }
.transfer-toolbar .tt-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between;
}
.transfer-toolbar .tt-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.transfer-toolbar .tt-tab {
  padding: 6px 12px; border: 1px solid #d6e2db; background: #fff;
  border-radius: 999px; font-size: 13px; cursor: pointer;
  transition: all .15s ease;
}
.transfer-toolbar .tt-tab:hover { border-color: #1a5632; color: #1a5632; }
.transfer-toolbar .tt-tab.active {
  background: #1a5632; color: #fff; border-color: #1a5632;
}
.transfer-toolbar .tt-actions { display: flex; gap: 8px; align-items: center; }
.transfer-toolbar .tt-search {
  padding: 10px 14px 10px 38px; border: 1.5px solid var(--border);
  border-radius: var(--radius, 12px); font-size: 14px; font-family: inherit;
  width: 240px; max-width: 100%; box-sizing: border-box; outline: none;
  background: var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 12px 50% no-repeat;
  color: var(--text); transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.transfer-toolbar .tt-search:focus {
  background-color: #fff; border-color: var(--twj-orange, #F39200);
  box-shadow: 0 0 0 4px rgba(243,146,0,.12);
}
.muted { color: #888; font-size: 13px; font-weight: normal; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.transfer-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.transfer-table th, .transfer-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid #eee; }
.transfer-table th { background: #f6faf7; color: #1a5632; font-weight: 600; }
.transfer-table tr.clickable { cursor: pointer; transition: background .12s ease; }
.transfer-table tr.clickable:hover { background: #f6faf7; }
.transfer-table .t-items { text-align: start; max-width: 320px; }

/* Modal sizing helpers (works alongside existing .modal-bg/.modal-card) */
.modal-bg.active { display: flex; }
.tj-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tj-line-form {
  display: grid; grid-template-columns: 2fr 80px 1fr 1fr auto;
  gap: 6px; margin: 10px 0;
}
.tj-line-form input, .tj-line-form select { padding: 8px; border: 1px solid #d6e2db; border-radius: 6px; }
.tj-lines { margin-bottom: 10px; max-height: 180px; overflow-y: auto; }
.tj-line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 12px; background: #f6faf7; border-radius: 6px;
  margin-bottom: 4px; font-size: 13px;
}
.tj-line .model { font-weight: 600; color: #1a5632; }
.tj-line .meta { flex: 1; color: #555; font-size: 12px; }
.tj-line .rm-btn {
  border: none; background: transparent; color: #c00; cursor: pointer;
  font-size: 16px;
}
.tj-btn-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 14px;
}
.btn.btn-warn { background: #e8a93b; color: #fff; }
.btn.btn-warn:hover { background: #ce9024; }

.td-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
  background: #f6faf7; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; margin-bottom: 12px;
}
.td-meta > div { display: flex; flex-direction: column; }
.td-meta .k { color: #1a5632; font-weight: 600; font-size: 12px; }
.td-meta .v { color: #222; }
.td-h { margin: 14px 0 8px; font-size: 14px; color: #1a5632; }
.td-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sig-card {
  border: 1px solid #d6e2db; border-radius: 8px; padding: 10px;
  text-align: center; background: #fff;
}
.sig-card.empty { background: #fafafa; }
.sig-card .sig-img { min-height: 70px; display: flex; align-items: center; justify-content: center; }
.sig-card .sig-img img { max-width: 220px; max-height: 70px; }
.sig-card .sig-empty { color: #bbb; font-size: 16px; }
.sig-card .who { font-weight: 600; color: #222; margin-top: 4px; }
.sig-card .when { font-size: 11px; color: #777; }
.td-note { background: #fff8e5; border: 1px solid #f0e5c2; padding: 8px 12px; border-radius: 6px; margin-top: 8px; font-size: 13px; }
.td-note.err { background: #fbeaea; border-color: #f1c2c2; }
.td-audit { list-style: none; padding: 0; margin: 0; max-height: 200px; overflow-y: auto; border: 1px solid #eee; border-radius: 6px; }
.td-audit li { padding: 6px 10px; border-bottom: 1px solid #f3f3f3; font-size: 12px; }
.td-audit li:last-child { border-bottom: none; }
.td-audit li.empty { color: #aaa; text-align: center; }
.td-audit .t { color: #777; font-size: 11px; }
.td-audit .b { font-weight: 600; }
.td-audit .a { color: #1a5632; }

/* Signature canvas */
.sig-wrap { position: relative; border: 1px dashed #c9d6cc; border-radius: 8px; background: #fff; height: 130px; }
.sig-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.sig-clear {
  position: absolute; top: 6px; inset-inline-end: 6px;
  background: #fff; border: 1px solid #ddd; border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; font-size: 14px;
}

textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #d6e2db;
  border-radius: 6px; font-family: inherit; font-size: 13px; resize: vertical;
}

@media (max-width: 720px) {
  .tj-grid-2 { grid-template-columns: 1fr; }
  .tj-line-form { grid-template-columns: 1fr 1fr; }
  .td-meta { grid-template-columns: 1fr; }
  .td-sigs { grid-template-columns: 1fr; }
  .transfer-toolbar .tt-search { width: 100%; }
  .transfer-toolbar .tt-row { flex-direction: column; align-items: stretch; }
}

/* ───────── v12 UI/UX unification + toasts + customer-profile tabs ───────── */

/* Toast */
.tj-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #1a5632; color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 9999;
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  max-width: 80vw;
}
.tj-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.tj-toast.tj-toast-err  { background: #a02525; }
.tj-toast.tj-toast-warn { background: #b07c1c; }

/* Customer-profile tab bar (re-uses .tt-tab) */
.cust-tabs { margin-bottom: 12px; }
.cust-pane { animation: tj-fade .22s ease; }
@keyframes tj-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Active sidebar item: stronger pill */
.sidebar-nav .nav-item.active {
  background: linear-gradient(90deg, rgba(26,86,50,.10), rgba(26,86,50,0));
  border-inline-end: 4px solid #1a5632;
}
[dir="ltr"] .sidebar-nav .nav-item.active {
  border-inline-end: 0;
  border-inline-start: 4px solid #1a5632;
}

/* Stat-card pointer when clickable */
.stat-card.purple { background: var(--twj-card)!important; }

/* Two-column overview grid for tiles */
.overview-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 760px) { .overview-grid { grid-template-columns: 1fr; } }

/* Redesigned overview cards */
.ov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px;}
.ov-card{
  background:var(--twj-card)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px);
  border-radius:20px!important;
  box-shadow:0 2px 8px rgba(111,74,35,.06)!important;
  padding:20px;
  display:flex;align-items:center;gap:16px;
  transition:transform .24s ease, box-shadow .24s ease!important;
  position:relative;overflow:hidden;
}
.ov-card::before{
  content:'';position:absolute;top:0;bottom:0;right:0;width:4px;border-radius:0 4px 4px 0;
}
.ov-card.green::before{background:linear-gradient(180deg,#2d8a4e,#1a5632);}
.ov-card.blue::before{background:linear-gradient(180deg,#3a7ca5,#1e405c);}
.ov-card.orange::before{background:linear-gradient(180deg,#f3a629,#c98810);}
.ov-card.purple::before{background:linear-gradient(180deg,#9270d6,#5a3fa6);}
.ov-card.red::before{background:linear-gradient(180deg,#d65a5a,#a02525);}
.ov-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(111,74,35,.12)!important;}
.ov-card-icon{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  font-size:24px;flex-shrink:0;
}
.ov-card.green .ov-card-icon{background:linear-gradient(135deg,rgba(26,86,50,.12),rgba(26,86,50,.06));}
.ov-card.blue .ov-card-icon{background:linear-gradient(135deg,rgba(30,64,92,.12),rgba(30,64,92,.06));}
.ov-card.orange .ov-card-icon{background:linear-gradient(135deg,rgba(243,146,0,.14),rgba(243,146,0,.07));}
.ov-card.purple .ov-card-icon{background:linear-gradient(135deg,rgba(122,94,201,.12),rgba(122,94,201,.06));}
.ov-card.red .ov-card-icon{background:linear-gradient(135deg,rgba(214,90,90,.12),rgba(214,90,90,.06));}
.ov-card-body{min-width:0;}
.ov-card .num{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.5px;}
.ov-card .lbl{font-size:12px;margin-top:3px;font-weight:500;color:var(--twj-muted);}
.ov-card.green .num{color:#1a5632;}
.ov-card.blue .num{color:#1e405c;}
.ov-card.orange .num{color:#b87800;}
.ov-card.purple .num{color:#5a3fa6;}
.ov-card.red .num{color:#a02525;}
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:960px){.ov-stats{grid-template-columns:repeat(2,1fr);}.ov-grid{grid-template-columns:1fr;}}
@media(max-width:540px){.ov-stats{grid-template-columns:1fr;}}

/* Modal sizing baseline */
.modal-card { width: 90vw; }
.modal-body { max-height: 78vh; overflow-y: auto; }

/* Make every table row clickable hover consistent */
table tr.clickable:hover { background: #f6faf7; cursor: pointer; }

/* Mobile/tablet table overflow + smaller font */
@media (max-width: 600px) {
  .transfer-table { font-size: 12px; }
  .transfer-table th, .transfer-table td { padding: 6px 6px; }
  .stat-card .num { font-size: 18px; }
  .stat-card .lbl { font-size: 11px; }
  .overview-stats { gap: 6px; }
  .modal-card { width: 96vw; }
}

/* ── Warehouse Cards ──────────────────────────────────────────────────── */
.wh-card {
  background: #fff;
  border-radius: var(--twj-radius);
  box-shadow: var(--twj-shadow-soft);
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease;
  border: 1px solid rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
}
.wh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--twj-shadow);
}
.wh-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--twj-orange), var(--twj-orange-2));
}
.wh-card .wh-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--twj-ink);
  margin-bottom: 2px;
}
.wh-card .wh-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
  margin-bottom: 10px;
}
.wh-card .wh-location {
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wh-card .wh-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--twj-border);
}
.wh-card .wh-stat {
  text-align: center;
}
.wh-card .wh-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--twj-ink);
  line-height: 1.2;
}
.wh-card .wh-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.wh-card .wh-actions {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  display: flex;
  gap: 4px;
}
html[dir="ltr"] .wh-card .wh-actions {
  left: auto;
  right: 12px;
}
.wh-card .wh-action-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.wh-card .wh-action-btn:hover {
  transform: scale(1.1);
}
.wh-card .wh-action-btn.edit {
  background: rgba(243,146,0,.12);
  color: var(--twj-orange);
}
.wh-card .wh-action-btn.edit:hover {
  background: rgba(243,146,0,.22);
}
.wh-card .wh-action-btn.del {
  background: rgba(231,76,60,.1);
  color: var(--red);
}
.wh-card .wh-action-btn.del:hover {
  background: rgba(231,76,60,.2);
}
@media (max-width: 520px) {
  .wh-card .wh-stats { grid-template-columns: 1fr 1fr; }
}

/* Sidebar section separators */
.nav-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 4px 16px;
  flex-shrink: 0;
}

/* ── Search inputs ─────────────────────────────────────────────── */
.tb-search {
  padding: 10px 14px 10px 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius, 12px);
  font-size: 14px;
  font-family: inherit;
  background: var(--cream-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 12px 50% no-repeat;
  color: var(--text);
  width: 100%;
  max-width: 320px;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  box-sizing: border-box;
  outline: none;
}
.tb-search:focus {
  background-color: #fff;
  border-color: var(--twj-orange, #F39200);
  box-shadow: 0 0 0 4px rgba(243,146,0,.12);
  transform: translateY(-1px);
}
.tb-search::placeholder {
  color: var(--text-muted, #6B7A8F);
  font-weight: 400;
}
.tb-search-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.tb-search-wrap .tb-search {
  max-width: none;
  flex: 1;
  margin-bottom: 0;
}

/* Tawjeh v12 — Professional dashboard installation edit UI */
.dash-install-edit-btn{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
  border-radius:999px!important;
  padding:7px 12px!important;
  border:1px solid rgba(240,151,20,.28)!important;
  background:linear-gradient(135deg,#fff8ec,#ffffff)!important;
  color:#b86b00!important;
  font-weight:900!important;
  box-shadow:0 8px 18px rgba(240,151,20,.13)!important;
}
.dash-install-edit-btn span{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(240,151,20,.14);
}
.dash-install-edit-btn b{font-size:12px;line-height:1}
.dash-edit-card{max-width:920px!important;width:min(94vw,920px)!important;overflow:hidden!important}
.dash-edit-card .modal-body{max-height:78vh;overflow:auto;background:linear-gradient(180deg,#fff,#fffaf3)}
.dash-edit-hero{
  border:1px solid rgba(240,151,20,.22);
  background:linear-gradient(135deg,#fff8eb,#ffffff);
  border-radius:24px;
  padding:18px 20px;
  margin-bottom:14px;
  box-shadow:0 12px 28px rgba(30,39,58,.06);
}
.dash-edit-hero h3{margin:0 0 6px;color:#1f2937;font-size:22px;font-weight:900}
.dash-edit-hero p{margin:0;color:#7b8190;font-size:13px;line-height:1.8}
.dash-edit-number{display:inline-flex;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid rgba(240,151,20,.22);color:#b86b00;font-size:12px;font-weight:900;margin-bottom:8px}
.dash-edit-panel,.dash-edit-section{
  background:#fff;
  border:1px solid rgba(233,223,209,.95);
  border-radius:22px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:0 10px 25px rgba(30,39,58,.06);
}
.dash-edit-title{font-weight:900;color:#263244;margin-bottom:12px;border-inline-start:4px solid #f59e0b;padding-inline-start:10px}
.dash-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dash-edit-grid.two{grid-template-columns:1.4fr .6fr}
.dash-edit-grid label,.dash-edit-wide{display:block;margin:0}
.dash-edit-grid label span,.dash-edit-wide span{display:block;font-size:12px;color:#6b7280;font-weight:800;margin-bottom:6px}
.dash-edit-hint{display:block;margin-top:6px;font-size:11px;color:#9ca3af;font-weight:800}
.dash-edit-hint.ok{color:#15803d}
.dash-device-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.dash-device-summary div{background:#fff8eb;border:1px solid rgba(240,151,20,.22);border-radius:16px;padding:10px;min-width:0}
.dash-device-summary span{display:block;color:#8b8f99;font-size:11px;font-weight:800;margin-bottom:4px}
.dash-device-summary b{display:block;color:#1f2937;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr;text-align:start}
.dash-soft-btn{margin-top:12px;background:#fff!important;border:1px solid rgba(240,151,20,.35)!important;color:#b86b00!important;font-weight:900!important;border-radius:14px!important;box-shadow:0 8px 18px rgba(240,151,20,.10)!important}
.dash-edit-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,250,243,.85),#fffaf3);padding-top:12px;border-top:1px solid rgba(233,223,209,.9)}
.dash-edit-empty{padding:14px;border-radius:16px;background:#f9fafb;color:#7b8190;text-align:center;font-weight:800}
@media(max-width:760px){
  .dash-edit-grid,.dash-edit-grid.two,.dash-device-summary{grid-template-columns:1fr}
  .dash-edit-card{width:96vw!important}
  .dash-install-edit-btn b{display:none}
}


/* Tawjeh v12 device/accessory linked edit polish */
.edit-actions.inline,.dash-edit-actions.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.edit-actions.inline button,.dash-edit-actions.inline .btn{width:auto;min-width:140px}
.device-linked-section,.accessory-linked-section{border:1px solid rgba(230,150,0,.22)!important;background:linear-gradient(180deg,#fff,#fffaf2)!important}
.edit-device-summary .edit-chip,.dash-device-summary>div{border:1px solid rgba(26,86,50,.10);background:#fff;border-radius:12px;padding:10px}
@media(max-width:560px){.edit-actions.inline button,.dash-edit-actions.inline .btn{width:100%;min-width:0}}

.dash-edit-hint.err{color:#c62828;font-weight:800}
.dash-soft-btn.mini{margin-top:6px;padding:7px 10px;font-size:12px;border-radius:10px;width:auto;display:inline-flex}

.secondary.danger,.dash-soft-btn.danger{border-color:#fecaca!important;background:#fff5f5!important;color:#b91c1c!important;}
.secondary.danger:hover,.dash-soft-btn.danger:hover{background:#fee2e2!important;}

/* v12 reopen approved installation for edit */
.reopen-warning{
  background:#fff8e6;
  border:1px solid #f4d48a;
  color:#6b4b00;
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:14px;
  line-height:1.7;
}
.reopen-warning b{display:block;color:#243043;margin-bottom:4px}
.reopen-warning p{margin:0;color:#6b7280;font-size:13px}
.btn-warning{background:#f59e0b!important;color:#111827!important;border:0!important}
.btn-warning:hover{filter:brightness(.96)}