/* ═══════════════════════════════════════════════════════════════════
   form.css — FOC Calculator Page
   Uses CSS variables from base.css — no hardcoded dark colors
═══════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
/* Override container max-width for calculator page */
.foc-page {
  max-width : 100% !important;
  padding   : 0 8px 120px !important;
}

/* Also remove any container padding from base */
.foc-page ~ .container,
body > .container {
  max-width: 100% !important;
  padding  : 0 8px !important;
}
/* ════════════════════════════════════════════════════════════════════
   HERO HEADER — centered, gradient background
════════════════════════════════════════════════════════════════════ */
.foc-hero {
  background   : linear-gradient(135deg,#1a56db 0%,#3b82f6 60%,#60a5fa 100%);
  border-radius: 0 0 20px 20px;
  padding      : 28px 24px 22px;
  text-align   : center;
  color        : #fff;
  margin-bottom: 20px;
  box-shadow   : 0 6px 24px rgba(26,86,219,0.25);
}
.foc-hero-title {
  font-size  : 2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.foc-hero-sub {
  font-size  : 0.9rem;
  opacity    : 0.92;
  font-weight: 500;
}
.foc-period-badge {
  display      : inline-block;
  background   : rgba(255,255,255,0.22);
  border       : 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding      : 2px 12px;
  font-weight  : 700;
  font-size    : 0.85rem;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT TABLE CARD
════════════════════════════════════════════════════════════════════ */
.foc-table-card {
  background   : var(--bg-secondary);
  border       : 1px solid var(--border-color);
  border-radius: 14px;
  overflow     : hidden;
  box-shadow   : 0 4px 16px var(--shadow-color);
  margin-bottom: 16px;
}
.foc-table {
  width        : 100%;
  border-collapse: collapse;
  font-size    : 0.83rem;
  color        : var(--text-primary);
  margin       : 0;
}
.foc-table thead th {
  background    : var(--table-head-bg);
  color         : var(--table-head-text);
  border-bottom : 2px solid var(--border-color);
  font-size     : 0.76rem;
  font-weight   : 700;
  letter-spacing: 0.4px;
  padding       : 10px 12px;
  white-space   : nowrap;
}
.foc-table tbody td {
  background    : var(--table-bg);
  border-bottom : 1px solid var(--table-border);
  padding       : 7px 10px;
  vertical-align: middle;
  color         : var(--text-primary);
}
.foc-table tbody tr:hover td {
  background: var(--bg-hover);
}
.foc-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Table inputs ── */
.foc-input {
  background   : var(--input-bg)     !important;
  color        : var(--input-color)  !important;
  border       : 1px solid var(--input-border) !important;
  border-radius: 7px;
  font-size    : 0.82rem;
  padding      : 5px 9px;
  width        : 100%;
  transition   : border-color 0.15s, box-shadow 0.15s;
}
.foc-input:focus {
  border-color : #0d6efd !important;
  box-shadow   : 0 0 0 0.18rem rgba(13,110,253,0.2) !important;
  outline      : none;
}
.foc-input::placeholder { color: var(--text-muted) !important; }
.foc-input-sm           { max-width: 90px; }

/* valid / invalid states */
.foc-input.valid,
.itemCode.valid,
.itemDesc.valid,
.itemQty.valid,
.billQty.valid,
.freeQty.valid {
  border-color: #198754 !important;
  background  : rgba(25,135,84,0.06) !important;
}
.foc-input.invalid,
.itemCode.invalid,
.itemDesc.invalid,
.itemQty.invalid {
  border-color: #dc3545 !important;
  background  : rgba(220,53,69,0.06) !important;
}
.billQty.optimized,
.freeQty.optimized {
  border-color: #fd7e14 !important;
  background  : rgba(253,126,20,0.07) !important;
}
.itemQty.whole-optimized,
.billQty.whole-optimized,
.freeQty.whole-optimized {
  border-color: #0dcaf0 !important;
  background  : rgba(13,202,240,0.07) !important;
}

.foc-empty-cell {
  color    : var(--text-muted);
  font-size: 0.78rem;
}

/* ── Delete button ── */
.foc-del-btn {
  padding      : 4px 10px;
  font-size    : 0.78rem;
  border-radius: 7px;
}

/* ════════════════════════════════════════════════════════════════════
   ACTION BUTTONS ROW
════════════════════════════════════════════════════════════════════ */
.foc-btn-row {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 10px;
  margin     : 0 0 16px;
  justify-content: center;
}
.foc-btn {
  font-size    : 0.84rem;
  font-weight  : 600;
  border-radius: 10px;
  padding      : 9px 22px;
  transition   : transform 0.15s, box-shadow 0.15s;
  min-width    : 120px;
}
.foc-btn:hover {
  transform : translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* ════════════════════════════════════════════════════════════════════
   FOC INPUT SECTION
════════════════════════════════════════════════════════════════════ */
.foc-section {
  background   : var(--bg-secondary);
  border       : 1px solid var(--border-color);
  border-radius: 14px;
  padding      : 20px;
  margin-bottom: 16px;
  box-shadow   : 0 4px 12px var(--shadow-color);
}
.foc-section-title {
  font-size    : 1rem;
  font-weight  : 700;
  color        : var(--text-primary);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}
.foc-inputs-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap                  : 14px;
}
.foc-input-group {
  background   : var(--bg-primary);
  border       : 1px solid var(--border-color);
  border-radius: 10px;
  padding      : 14px;
}
.foc-input-group label {
  display      : block;
  font-size    : 0.8rem;
  font-weight  : 600;
  color        : var(--text-primary);
  margin-bottom: 8px;
}
.focInput {
  width        : 100%;
  background   : var(--input-bg)     !important;
  color        : var(--input-color)  !important;
  border       : 1px solid var(--input-border) !important;
  border-radius: 8px;
  font-size    : 1rem;
  font-weight  : 700;
  padding      : 8px 12px;
  transition   : border-color 0.15s, box-shadow 0.15s;
}
.focInput:focus {
  border-color : #0d6efd !important;
  box-shadow   : 0 0 0 0.2rem rgba(13,110,253,0.2) !important;
  outline      : none;
}
.focInput[readonly] {
  background  : rgba(25,135,84,0.07) !important;
  border-color: #198754 !important;
  cursor      : not-allowed;
}
.focInput.valid   { border-color:#198754 !important; background:rgba(25,135,84,0.07) !important; }
.focInput.invalid { border-color:#dc3545 !important; background:rgba(220,53,69,0.06) !important; }

/* DB badge + unlock link */
.foc-db-badge {
  display      : inline-block;
  font-size    : 0.68rem;
  font-weight  : 700;
  padding      : 2px 8px;
  border-radius: 999px;
  margin-left  : 6px;
  vertical-align: middle;
}
.foc-db-badge.from-db {
  background: rgba(25,135,84,0.12);
  color     : #198754;
  border    : 1px solid rgba(25,135,84,0.3);
}
.foc-db-badge.manual {
  background: rgba(255,193,7,0.12);
  color     : #856404;
  border    : 1px solid rgba(255,193,7,0.4);
}
.foc-unlock-link {
  font-size  : 0.7rem;
  color      : #0d6efd;
  cursor     : pointer;
  margin-left: 6px;
  text-decoration: underline;
}
.foc-unlock-link:hover { color: #0a58ca; }

/* ════════════════════════════════════════════════════════════════════
   ORDER TOTAL BAR — fixed at bottom
════════════════════════════════════════════════════════════════════ */
.foc-total-bar {
  display        : flex;
  justify-content: flex-end;   /* right align */
  padding        : 6px 14px;
  background     : var(--bg-secondary);
  border-top     : 1px solid var(--border-color);
  border-radius  : 0 0 10px 10px;
}
.foc-total-inner {
  margin-left: auto; 
  display    : flex;
  align-items: center;
  gap        : 10px;
}
.foc-total-item {
  display    : flex;
  align-items: baseline;
  gap        : 5px;
}
.foc-total-item--main {
  border-left: 2px solid rgba(255,255,255,0.35);
  padding-left: 24px;
}
.foc-total-label {
  font-size  : 0.68rem;
  color      : var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.foc-total-value {
  font-size           : 0.78rem;
  font-weight         : 600;
  color               : var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.foc-total-value--main {
  font-size  : 0.88rem;
  font-weight: 700;
  color      : #22c55e;
}
.foc-total-divider {
  width     : 1px;
  height    : 36px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

.foc-total-sep {
  font-size  : 0.65rem;
  color      : var(--text-muted);
  font-weight: 400;
  opacity    : 0.5;
}

.foc-total-item--main .foc-total-label { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════════
   STATUS TOASTS
════════════════════════════════════════════════════════════════════ */
.status-container {
  position      : fixed;
  top           : 70px;
  right         : 16px;
  z-index       : 9999;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  max-width     : 320px;
}

.status-message {
  display       : flex;
  align-items   : flex-start;
  gap           : 12px;
  padding       : 13px 16px;
  border-radius : 14px;
  font-size     : 0.82rem;
  font-weight   : 500;
  box-shadow    : 0 8px 24px rgba(0,0,0,0.18),
                  0 2px 6px  rgba(0,0,0,0.10);
  animation     : slideInRight 0.35s cubic-bezier(.34,1.56,.64,1);
  transition    : opacity 0.3s ease, transform 0.3s ease;
  color         : #fff;
  position      : relative;
  overflow      : hidden;
  border        : 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
}

/* Shimmer overlay */
.status-message::after {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.0)  60%
  );
  pointer-events: none;
  border-radius : inherit;
}

/* ── Gradient variants ── */
.status-message.success {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 60%, #166534 100%);
  box-shadow: 0 8px 24px rgba(22,163,74,0.35), 0 2px 6px rgba(0,0,0,0.1);
}
.status-message.error {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 60%, #991b1b 100%);
  box-shadow: 0 8px 24px rgba(220,38,38,0.35), 0 2px 6px rgba(0,0,0,0.1);
}
.status-message.warning {
  background: linear-gradient(135deg, #d97706 0%, #b45309 60%, #92400e 100%);
  box-shadow: 0 8px 24px rgba(217,119,6,0.35), 0 2px 6px rgba(0,0,0,0.1);
}
.status-message.info {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e40af 100%);
  box-shadow: 0 8px 24px rgba(37,99,235,0.35), 0 2px 6px rgba(0,0,0,0.1);
}
.status-message.primary {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 60%, #5b21b6 100%);
  box-shadow: 0 8px 24px rgba(124,58,237,0.35), 0 2px 6px rgba(0,0,0,0.1);
}

/* ── Icon ── */
.status-icon {
  font-size     : 1rem;
  flex-shrink   : 0;
  margin-top    : 1px;
  filter        : drop-shadow(0 1px 2px rgba(0,0,0,0.3));
}

/* ── Text ── */
.status-text {
  line-height: 1.45;
  flex       : 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ── Progress bar ── */
.status-progress {
  position     : absolute;
  bottom       : 0; left: 0;
  height       : 3px;
  width        : 100%;
  background   : rgba(255,255,255,0.4);
  border-radius: 0 0 14px 14px;
  transform-origin: left;
  animation    : statusProgress linear forwards;
}

/* ── Dismiss state ── */
.status-message.hiding {
  opacity  : 0;
  transform: translateX(40px) scale(0.95);
}

/* ── Animations ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0)    scale(1);   }
}

@keyframes statusProgress {
  from { width: 100%; }
  to   { width: 0%;   }
}

/* ════════════════════════════════════════════════════════════════════
   MODAL
════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position  : fixed;
  inset     : 0;
  background: rgba(0,0,0,0.55);
  z-index   : 10000;
  display   : flex;
  align-items: center;
  justify-content: center;
  animation : fadeIn 0.2s ease;
}
.modal-content {
  background   : var(--bg-secondary);
  border       : 1px solid var(--border-color);
  border-radius: 16px;
  padding      : 28px 24px;
  max-width    : 380px;
  width        : 90%;
  box-shadow   : 0 20px 60px rgba(0,0,0,0.3);
  animation    : scaleIn 0.2s ease;
}
.modal-message {
  font-size    : 0.92rem;
  color        : var(--text-primary);
  margin-bottom: 20px;
  line-height  : 1.5;
}
.modal-buttons {
  display        : flex;
  justify-content: flex-end;
  gap            : 10px;
}
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }

/* ════════════════════════════════════════════════════════════════════
   MRP MISMATCH BADGE (in lot-cell)
════════════════════════════════════════════════════════════════════ */
.mrp-mismatch-badge {
  display      : inline-block;
  font-size    : 0.68rem;
  font-weight  : 700;
  background   : #fff3cd;
  color        : #856404;
  border       : 1px solid #ffc107;
  border-radius: 5px;
  padding      : 2px 6px;
  margin-top   : 4px;
  white-space  : nowrap;
  line-height  : 1.5;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .foc-hero-title { font-size: 1.4rem; }
  .foc-table      { font-size: 0.76rem; }
  .foc-table thead th,
  .foc-table tbody td { padding: 5px 7px; }
  .foc-btn-row    { gap: 8px; }
  .foc-btn        { min-width: 0; flex: 1 1 calc(50% - 8px); }
  .foc-inputs-grid{ grid-template-columns: 1fr; }
  .foc-total-inner{ justify-content: center; gap: 8px; }
  .foc-total-item { padding: 0 12px; }
  .foc-total-value--main { font-size: 1.2rem; }
  .foc-input-sm   { max-width: 70px; }
  .status-container { right:8px; max-width:280px; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — FOC Calculator
   Target: 360px–768px (Android + iPhone)
════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Page ── */
  .foc-page {
    padding: 0 0 110px !important;
  }

  /* ── Hero ── */
  .foc-hero {
    border-radius: 0;
    padding      : 16px 14px 14px;
  }
  .foc-hero-title { font-size: 1.3rem; }
  .foc-hero-sub   { font-size: 0.78rem; }
  .foc-period-badge { font-size: 0.72rem; padding: 2px 8px; }

  /* ── Table — stack as cards on mobile ── */
  .foc-table-card {
    border-radius: 0;
    border-left  : none;
    border-right : none;
  }
  .foc-table thead { display: none; }  /* hide headers */
  .foc-table tbody tr {
    display      : block;
    border       : 1px solid var(--border-color);
    border-radius: 10px;
    margin        : 8px 10px;
    padding       : 10px;
    background   : var(--bg-secondary);
    box-shadow   : 0 2px 8px var(--shadow-color);
  }
  .foc-table tbody td {
    display      : flex;
    align-items  : center;
    justify-content: space-between;
    border       : none;
    border-bottom: 1px solid var(--border-color);
    padding      : 6px 4px;
    font-size    : 0.8rem;
  }
  .foc-table tbody td:last-child { border-bottom: none; }

  /* data-label as inline heading */
  .foc-table tbody td::before {
    content    : attr(data-label);
    font-size  : 0.7rem;
    font-weight: 700;
    color      : var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
    width      : 90px;
  }
  .foc-table tbody td input,
  .foc-table tbody td select {
    flex    : 1;
    max-width: 100% !important;
    text-align: right;
  }
  .foc-table tbody td.lot-cell,
  .foc-table tbody td.val-cell {
    justify-content: space-between;
  }

  /* ── Action buttons ── */
  .foc-btn-row {
    padding      : 0 10px;
    gap          : 8px;
    justify-content: stretch;
  }
  .foc-btn {
    flex        : 1 1 calc(50% - 8px);
    min-width   : 0;
    font-size   : 0.8rem;
    padding     : 10px 8px;
    text-align  : center;
  }

  /* ── FOC section ── */
  .foc-section {
    border-radius: 0;
    border-left  : none;
    border-right : none;
    margin       : 0 0 12px;
    padding      : 14px 12px;
  }
  .foc-inputs-grid {
    grid-template-columns: 1fr !important;
  }
  .foc-input-group {
    padding: 12px;
  }

  /* ── Total bar ── */
  .foc-total-bar { padding: 10px 12px; }
  .foc-total-inner {
    justify-content: space-between;
    gap            : 0;
  }
  .foc-total-item        { padding: 0 8px; }
  .foc-total-label       { font-size: 0.6rem; }
  .foc-total-value       { font-size: 0.95rem; }
  .foc-total-value--main { font-size: 1.15rem; }
  .foc-total-divider     { height: 28px; }

  /* ── Modal ── */
  .modal-content {
    width  : 92%;
    padding: 20px 16px;
  }

  /* ── Status toasts ── */
  .status-container {
    top      : 60px  !important;
    right    : 8px   !important;
    max-width: 260px !important;
  }
  .status-message { font-size: 0.78rem !important; padding: 10px 12px !important; }
}

/* ── Extra small — 360px phones ── */
@media (max-width: 400px) {
  .foc-hero-title { font-size: 1.1rem; }
  .foc-btn        { font-size: 0.74rem; padding: 8px 6px; }
  .foc-total-value--main { font-size: 1rem; }
  .foc-table tbody td::before { width: 76px; font-size: 0.65rem; }
}



/* ════════════════════════════════════════════════════════
   PATCH — All fixes
════════════════════════════════════════════════════════ */

/* ── Material col 2x, Qty col 0.5x ── */
#productTable { table-layout: fixed; width: 100%; }
#productTable th:nth-child(1), #productTable td:nth-child(1) { width: 90px; }
#productTable th:nth-child(2), #productTable td:nth-child(2) { width: 28%; }   /* Material 2x */
#productTable th:nth-child(3), #productTable td:nth-child(3) { width: 80px; }  /* Qty 0.5x */
#productTable th:nth-child(4), #productTable td:nth-child(4) { width: 72px; }
#productTable th:nth-child(5), #productTable td:nth-child(5) { width: 72px; }
#productTable th:nth-child(6), #productTable td:nth-child(6) { width: 90px; }
#productTable th:nth-child(7), #productTable td:nth-child(7) { width: 100px; }
#productTable th:nth-child(8), #productTable td:nth-child(8) { width: 54px; }
#productTable .itemDesc { width: 100%; min-width: 0; }
#productTable .itemQty  { width: 100%; max-width: 76px; }

/* ── Cost estimator inline after last row ── */
#orderTotalBar {
  position: relative !important; bottom: auto !important;
  left: auto !important; right: auto !important; width: 100% !important;
  margin-top: 8px; margin-bottom: 4px; padding: 14px 18px;
  border-radius: 14px; background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px var(--shadow-color);
}

/* ── FOC page bg — theme-adaptive ── */
.foc-page, body, main { background: var(--bg-primary) !important; }
.foc-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--bg-secondary) 90%, var(--bg-hover)),
    var(--bg-tertiary)) !important;
  border: 1px solid var(--border-color) !important;
}

/* ── Navbar font sharper/thinner ── */
.nav-link-custom {
  font-weight: 500 !important; letter-spacing: 0.01em !important;
  font-size: 0.82rem !important; -webkit-font-smoothing: antialiased;
}
.navbar-brand-text {
  font-weight: 700 !important; letter-spacing: -0.03em !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Light theme: active nav tab visible ── */
[data-theme="light"] .nav-link-custom.active,
[data-theme="light"] .nav-link-custom:hover {
  color: #0d6efd !important; background: #e8f0fe !important;
  border-color: #b6ccfe !important;
}

/* ── Light theme: THEME label + chips visible ── */
[data-theme="light"] .theme-toolbar-label { color: #495057 !important; }
[data-theme="light"] .theme-chip { color: #212529 !important; border-color: #ced4da !important; }
[data-theme="light"] .theme-chip:hover { background: #e8f0fe !important; color: #0d6efd !important; }
[data-theme="light"] .theme-chip.is-active { background: #0d6efd !important; color: #fff !important; }

/* ── Live clock pill ── */
.foc-clock {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-secondary); background: var(--bg-hover);
  border: 1px solid var(--border-color); border-radius: 999px;
  padding: 3px 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.foc-clock-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  animation: clockPulse 1s ease-in-out infinite; flex-shrink: 0;
}
@keyframes clockPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

@media (max-width: 768px) {
  #productTable { table-layout: auto; }
  #productTable th:nth-child(2), #productTable td:nth-child(2) { width: auto; }
  #orderTotalBar { border-radius: 0; margin: 6px 0; }
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL THEME FIX — All themes (Blue, Fiori, Teal, Slate, Dark)
   Paste at the VERY BOTTOM of form.css
════════════════════════════════════════════════════════════════ */

/* ── Hero / Header — force theme-adaptive colors ── */
.header {
  background : var(--bg-secondary)    !important;
  color      : var(--text-primary)    !important;
  border     : 1px solid var(--border-color) !important;
  box-shadow : 0 4px 16px var(--shadow-color) !important;
  text-shadow: none                   !important;
}

.header h1,
.header h2,
.header h3,
.header p,
.header span,
.header strong,
.header small,
.header a,
.foc-clock,
.foc-period-badge {
  color      : var(--text-primary)    !important;
  text-shadow: none                   !important;
  opacity    : 1                      !important;
}

/* Keep clock secondary color slightly muted */
.foc-clock {
  color: var(--text-secondary) !important;
}

/* ── Order Total Bar — all text theme-adaptive ── */
#orderTotalBar {
  background  : var(--bg-secondary)   !important;
  border-color: var(--border-color)   !important;
  color       : var(--text-primary)   !important;
}

/* Every div/span inside the bar */
#orderTotalBar *:not(#orderBasicAmt):not(#orderGstAmt):not(#orderTotalAmt) {
  color: var(--text-secondary) !important;
}

/* Value amounts — use accent color */
#orderBasicAmt,
#orderGstAmt {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
#orderTotalAmt {
  color: #0d6efd !important;
  font-weight: 800 !important;
}

/* Fix the hardcoded white divider line */
#orderTotalBar [style*="border-left"] {
  border-left-color: var(--border-color) !important;
}

/* ── Active nav tab — all light themes ── */
:not([data-theme="dark"]) .nav-link-custom.active {
  color           : var(--text-primary)  !important;
  background      : var(--bg-hover)      !important;
  border-color    : var(--border-color)  !important;
  font-weight     : 700                  !important;
}

/* ── Theme label + chips — all light themes ── */
:not([data-theme="dark"]) .theme-toolbar-label {
  color: var(--text-muted) !important;
}
:not([data-theme="dark"]) .theme-chip {
  color       : var(--text-secondary) !important;
  border-color: var(--border-color)   !important;
}
:not([data-theme="dark"]) .theme-chip:hover {
  color      : var(--text-primary) !important;
  background : var(--bg-hover)     !important;
}

/* ── Dark theme total amount — keep white ── */
[data-theme="dark"] #orderTotalAmt {
  color: #60a5fa !important;
}
[data-theme="dark"] #orderBasicAmt,
[data-theme="dark"] #orderGstAmt {
  color: var(--text-primary) !important;
}


/* ── Hero title & subtitle — all themes ── */
.foc-hero-title,
.foc-hero-sub,
.foc-hero-sub *,
.foc-hero .foc-period-badge {
  color      : var(--text-primary)   !important;
  text-shadow: none                  !important;
  opacity    : 1                     !important;
}

.foc-hero-sub {
  color: var(--text-secondary) !important;
}

/* ── Hero container background — ensure contrast ── */
.foc-hero {
  background: var(--bg-secondary)          !important;
  border    : 1px solid var(--border-color) !important;
}


/* ════════════════════════════════════════════════════════════
   MOBILE TABLE — Full-width card layout fix
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Reset ALL fixed column widths from desktop */
  #productTable,
  #productTable thead,
  #productTable tbody,
  #productTable tr,
  #productTable th,
  #productTable td {
    display   : block !important;
    width     : 100%  !important;
    max-width : 100%  !important;
    table-layout: auto !important;
  }

  /* Hide the thead — labels come from data-label */
  #productTable thead tr {
    display: none !important;
  }

  /* Each row = a card */
  #productTable tbody tr {
    display       : block !important;
    background    : var(--bg-secondary);
    border        : 1px solid var(--border-color);
    border-radius : 14px;
    margin        : 0 0 12px 0;
    padding       : 10px 12px;
    box-shadow    : 0 2px 8px var(--shadow-color);
    width         : 100% !important;
  }

  /* Each cell = a label:value row */
  #productTable tbody td {
    display        : flex !important;
    align-items    : center;
    justify-content: space-between;
    border         : none !important;
    border-bottom  : 1px solid var(--border-color) !important;
    padding        : 9px 4px !important;
    width          : 100% !important;
    box-sizing     : border-box;
  }

  #productTable tbody td:last-child {
    border-bottom: none !important;
  }

  /* Label from data-label attribute */
  #productTable tbody td::before {
    content       : attr(data-label);
    font-size     : 0.7rem;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color         : var(--text-muted);
    flex-shrink   : 0;
    width         : 80px;
    min-width     : 80px;
  }

  /* ALL inputs & selects fill remaining space */
  #productTable tbody td input,
  #productTable tbody td select,
  #productTable .itemCode,
  #productTable .itemDesc,
  #productTable .itemQty,
  #productTable .billQty,
  #productTable .freeQty {
    flex      : 1 !important;
    width     : 100% !important;
    max-width : 100% !important;
    min-width : 0   !important;
    text-align: right;
    font-size : 0.88rem;
    padding   : 8px 10px !important;
    border-radius: 8px !important;
    height    : 38px !important;
  }

  /* MRP/lot and Order Value spans */
  #productTable .lot-cell,
  #productTable .val-cell {
    justify-content: space-between;
  }
  #productTable .lot-cell span,
  #productTable .val-cell span {
    flex      : 1;
    text-align: right;
    font-size : 0.85rem;
    color     : var(--text-primary) !important;
  }

  /* Action button cell — full width centered */
  #productTable tbody td:last-child {
    justify-content: flex-end !important;
    padding-top    : 8px !important;
  }
  #productTable tbody td:last-child::before {
    display: none !important;  /* hide "Action" label */
  }
  #productTable .btn-danger.btn-sm {
    width     : 100% !important;
    padding   : 10px !important;
    border-radius: 10px !important;
  }
}

#productTable .itemQty {
  font-size  : 0.95rem  !important;
  font-weight: 600      !important;
  width      : 100%     !important;
  max-width  : 80px     !important;
  text-align : center   !important;
  padding    : 6px 8px  !important;
}

/* ── Qty EA — mobile ── */
@media (max-width: 768px) {
  #productTable .itemQty {
    font-size  : 1rem    !important;
    font-weight: 600     !important;
    max-width  : 100%    !important;
    width      : 100%    !important;
    height     : 42px    !important;
    text-align : right   !important;
    padding    : 10px 12px !important;
  }
}

/* ════════════════════════════════════════════════════════
   FOC HERO — Theme-adaptive backgrounds
════════════════════════════════════════════════════════ */

/* Base — applies to ALL themes via variables */
.foc-hero {
  background   : var(--hero-bg)      !important;
  border       : 1px solid var(--hero-border) !important;
  border-radius: 18px;
  padding      : 22px 24px 18px;
  margin-bottom: 16px;
}
.foc-hero-title,
.foc-hero-sub,
.foc-hero-sub *,
.foc-period-badge,
.foc-clock { color: var(--hero-text) !important; }

/* ── Blue (default) ── */
[data-theme="default"] {
  --hero-bg    : linear-gradient(135deg, #1a3a6b 0%, #0d2145 100%);
  --hero-border: #2a5298;
  --hero-text  : #e8f0ff;
}

/* ── Dark ── */
[data-theme="dark"] {
  --hero-bg    : linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
  --hero-border: #2e2e4a;
  --hero-text  : #e0e0ff;
}

/* ── Fiori ── */
[data-theme="fiori"] {
  --hero-bg    : linear-gradient(135deg, #f5f6f7 0%, #e8eaed 100%);
  --hero-border: #c8cacc;
  --hero-text  : #1a1f2e;
}

/* ── Teal ── */
[data-theme="teal"] {
  --hero-bg    : linear-gradient(135deg, #0d4a4a 0%, #062e2e 100%);
  --hero-border: #0d9488;
  --hero-text  : #d0f5f0;
}

/* ── Slate ── */
[data-theme="slate"] {
  --hero-bg    : linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  --hero-border: #4a5568;
  --hero-text  : #e2e8f0;
}

/* Clock dot stays green on all themes */
.foc-clock-dot { background: #22c55e !important; }

/* Period badge adapts per theme */
[data-theme="fiori"] .foc-period-badge {
  background: rgba(10, 110, 209, 0.12);
  border    : 1px solid #0a6ed1;
  color     : #0a6ed1 !important;
}
[data-theme="teal"] .foc-period-badge {
  background: rgba(13, 148, 136, 0.2);
  border    : 1px solid #0d9488;
  color     : #d0f5f0 !important;
}
[data-theme="slate"] .foc-period-badge {
  background: rgba(74, 85, 104, 0.3);
  border    : 1px solid #718096;
  color     : #e2e8f0 !important;
}


/* ── Lock/Unlock Button ─────────────────────────────────────── */
/* ── Lock Button — matches delete btn size ──────────────────── */
.freeUnrestrictedBtn {
    display       : none;
    background    : transparent;
    border        : 2px solid #adb5bd;
    border-radius : 6px;
    padding       : 0;
    font-size     : 1.1rem;        /* ← same size as 🗑️ */
    line-height   : 1;
    cursor        : pointer;
    transition    : all 0.2s ease;
    color         : #adb5bd;
    min-width     : 38px;   
    height        : 38px;
    text-align    : center;
}

.freeUnrestrictedBtn:hover {
    border-color  : #f0ad4e;
    color         : #f0ad4e;
    background    : rgba(240, 173, 78, 0.10);
}

/* ── Active state — bold amber, hard to miss ────────────────── */
.freeUnrestrictedBtn.active {
    border-color  : #f0ad4e;
    background    : rgba(240, 173, 78, 0.20);
    color         : #f0ad4e;
    box-shadow    : 0 0 0 3px rgba(240, 173, 78, 0.30),
                    inset 0 1px 3px rgba(0,0,0,0.2);
    font-size     : 1rem;
}

/* ── Pulse animation when active ────────────────────────────── */
@keyframes lockPulse {
    0%   { box-shadow: 0 0 0 0   rgba(240, 173, 78, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(240, 173, 78, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(240, 173, 78, 0);   }
}
.freeUnrestrictedBtn.active {
    animation: lockPulse 1.5s ease-out 1;  /* pulses once on activation */
}

/* ── Action TD ───────────────────────────────────────────────── */
td[data-label="Action"] {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    vertical-align  : middle;
}

/* ── Frozen qty input ────────────────────────────────────────── */
.itemQty.frozen-free {
    background    : repeating-linear-gradient(
                        45deg,
                        #2a2a2a, #2a2a2a 4px,
                        #1e1e1e 4px, #1e1e1e 8px
                    ) !important;
    color         : #888 !important;
    cursor        : not-allowed !important;
    border-color  : rgba(240, 173, 78, 0.4) !important;
}
body:not([data-theme="dark"]) .itemQty.frozen-free {
    background    : repeating-linear-gradient(
                        45deg,
                        #f0f0f0, #f0f0f0 4px,
                        #e4e4e4 4px, #e4e4e4 8px
                    ) !important;
    color         : #aaa !important;
}

#orderVolumeLT {
    color      : #5bc0de;   /* info blue — stands out from ₹ values */
    font-weight: 600;
}
#orderTotalBar .foc-total-label {
    letter-spacing: 0.04em;
}