/* ═══════════════════════════════════════════════════════════
   E-3 Status Tool — Delta Hi-Tech  |  Brand Stylesheet
   Brand: #1e407e (navy) · #2590ed (blue) · #0e121d (dark)
   Font:  Titillium Web (loaded from Google Fonts)
═══════════════════════════════════════════════════════════ */

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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ─ Delta Brand ─ */
  --delta-navy:    #3d4449;
  --delta-blue:    #8cc63e;
  --delta-dark: #3d4449;
  --delta-navy2:   #23272b;
  --delta-light:   #f2f9e8;
  --delta-mid:     #6b6f78;

  /* ─ UI ─ */
  --sidebar-bg: #3d4449;
  --sidebar-w:     230px;
  --topbar-h: 58px;
  --topbar-bg:     #3d4449;
  --accent:        #8cc63e;
  --accent-dark:   #7a9e4d;
  --bg:            #f5f6f5;
  --white:         #ffffff;
  --border:        #d0d8e8;
  --text:          #1a2236;
  --text-muted:    #6b7a95;
  --danger:        #d63031;
  --success:       #00b894;
  --warning:       #e17055;
  --shadow-sm:     0 1px 4px rgba(14,18,29,.12);
  --shadow:        0 3px 12px rgba(14,18,29,.18);
  --shadow-lg:     0 8px 32px rgba(14,18,29,.22);
  --radius:        7px;
  --radius-sm:     4px;
}

html, body {
  height: 100%;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

/* ══════════════════════════════
   LAYOUT
══════════════════════════════ */
/* dvh tracks the real visible area on iPad/mobile Safari (toolbars shown);
   plain 100vh overshoots there and cuts off the bottom of the sidebar */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

#layout { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ══════════════════════════════
   TOP BAR
══════════════════════════════ */
#topbar { height: 58px; background: #ffffff; border-bottom: 3px solid #8cc63e; display: flex; align-items: center; padding: 0 1.25rem; gap: .75rem; flex-shrink: 0; z-index: 200; box-shadow: 0 2px 4px rgba(0,0,0,.08); }

#topbar .logo-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
}

#topbar .logo-img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

#topbar .logo-text {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#topbar .divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.25);
}

#topbar .system-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  letter-spacing: .5px;
  text-transform: uppercase;
}

#topbar .spacer { flex: 1; }

#topbar .user-info {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
}

#clock {
  color: rgba(255,255,255,.7);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: .5px;
}

/* ══════════════════════════════
   SIDEBAR
══════════════════════════════ */
#sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

#sidebar::-webkit-scrollbar { width: 4px; }
#sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.nav-section { padding: .6rem 0 .3rem; }

.nav-section-label {
  padding: .4rem .9rem .3rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.3);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem .55rem 1rem;
  cursor: pointer;
  transition: background .15s, border-left .15s;
  border-left: 3px solid transparent;
  color: rgba(255,255,255,.6);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: none;
  user-select: none;
}

.nav-item:hover {
  background: rgba(37,144,237,.12);
  color: rgba(255,255,255,.9);
  border-left-color: rgba(37,144,237,.4);
}

.nav-item.active {
  background: rgba(37,144,237,.2);
  color: #fff;
  border-left-color: var(--delta-blue);
}

.nav-item .nav-icon {
  font-size: 1.15rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.nav-badge.blue { background: var(--delta-blue); }
.nav-badge.yellow { background: #e17055; }

/* ══════════════════════════════
   MAIN CONTENT
══════════════════════════════ */
#mainContent {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.25rem;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

#mainContent::-webkit-scrollbar { width: 6px; }
#mainContent::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ══════════════════════════════
   MODULE HEADER
══════════════════════════════ */
.module-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.module-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--delta-navy);
  letter-spacing: .3px;
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ══════════════════════════════
   BUTTONS
══════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .9rem;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--delta-navy); color: #fff; }
.btn-primary:hover { background: var(--delta-navy2); box-shadow: 0 2px 8px rgba(30,64,126,.4); }

.btn-blue { background: var(--delta-blue); color: #fff; }
.btn-blue:hover { background: var(--accent-dark); box-shadow: 0 2px 8px rgba(37,144,237,.4); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #00a381; }

.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { background: #c45e45; }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b02020; }

.btn-secondary {
  background: var(--white);
  color: var(--delta-navy);
  border: 1.5px solid var(--delta-navy);
}
.btn-secondary:hover { background: var(--delta-light); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--white); color: var(--text); }

.btn-sm { padding: .28rem .6rem; font-size: 1.12rem; }
.btn-icon { padding: .3rem .45rem; font-size: 1.12rem; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: background .12s; }
.btn-icon:hover { background: var(--delta-light); }
.btn-icon.danger:hover { background: #fde8e8; }

/* ══════════════════════════════
   CARDS (Dashboard)
══════════════════════════════ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--delta-blue);
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-1px); }

.card.navy { border-left-color: var(--delta-navy); }
.card.red   { border-left-color: var(--danger); }
.card.green { border-left-color: var(--success); }
.card.orange { border-left-color: var(--warning); }
.card.gray  { border-left-color: #8e9cb0; }

.card-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--delta-navy);
  line-height: 1;
  margin-bottom: .25rem;
}
.card.red .card-value { color: var(--danger); }
.card.green .card-value { color: var(--success); }
.card.orange .card-value { color: var(--warning); }

.card-label {
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
}

/* ══════════════════════════════
   FILTER BAR
══════════════════════════════ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
  background: var(--white);
  padding: .6rem .8rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.filter-input, .filter-select {
  padding: .35rem .6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .15s;
  outline: none;
}
.filter-input:focus, .filter-select:focus { border-color: var(--delta-blue); }
.filter-input { min-width: 220px; }
.filter-select { min-width: 130px; }

.table-info {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: .4rem;
  font-weight: 600;
  letter-spacing: .3px;
}

/* ══════════════════════════════
   DATA TABLE
══════════════════════════════ */
.table-wrapper {
  overflow-x: auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  max-height: calc(100vh - 270px);
  max-height: calc(100dvh - 270px);
  overflow-y: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table th {
  background: var(--delta-navy);
  color: #fff;
  padding: .6rem .5rem;
  text-align: left;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.1);
}
.data-table th:hover { background: var(--delta-navy2); }
.data-table th.sorted-asc::after { content: ' ▲'; opacity: .7; }
.data-table th.sorted-desc::after { content: ' ▼'; opacity: .7; }

.data-table td {
  padding: .45rem .5rem;
  border-bottom: 1px solid #e8ecf3;
  vertical-align: middle;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.data-table tr:nth-child(even) td { background: #f7f9fd; }
.data-table tr:hover td { background: var(--delta-light) !important; }

/* ══════════════════════════════
   STATUS BADGES
══════════════════════════════ */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-stock     { background: #d4f6e9; color: #0a6640; }
.status-material  { background: #fff3d6; color: #8a5200; }
.status-invoiced  { background: #cce5ff; color: #0046a3; }
.status-shipped   { background: #e0e4ea; color: #445; }
.status-mrb       { background: #ffe0e0; color: #9a0000; border: 1px solid #f5c6c6; }
.status-ncr       { background: #ffe0e0; color: #9a0000; }
.status-inspection { background: #fff0d6; color: #8a4400; }
.status-approved  { background: #d4f6e9; color: #0a5c36; border: 1px solid #a8e6c8; }
.status-rejected  { background: #fde0e0; color: #8a0000; }
.status-planning  { background: #e8d8f8; color: #4a0082; }
.status-dept      { background: #d6ecff; color: #003d80; }
.status-op        { background: #fde8d8; color: #7a2800; }
.status-hold      { background: #fff0b3; color: #6b4800; border: 1px solid #ffe066; }
.status-default   { background: #e8ecf3; color: #445; }

/* HOT badge */
.hot-star { color: #e17055; font-size: 1.15rem; }

/* ══════════════════════════════
   PANELS / CARDS in content
══════════════════════════════ */
.panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.panel-header {
  padding: .7rem 1rem;
  border-bottom: 2px solid var(--delta-light);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--delta-navy);
  letter-spacing: .3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.panel-body { padding: 1rem; }

/* ══════════════════════════════
   DASHBOARD GRID
══════════════════════════════ */
.dash-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1rem;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════
   MODAL / DIALOG
══════════════════════════════ */
dialog {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0;
  max-width: 700px;
  width: 95vw;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;
  inset: 0;
  animation: fadeIn .18s ease;
}
/* Wide modal for column-heavy forms (RFQ line items, assessments) */
dialog.modal-wide { max-width: 1240px; width: 97vw; }
dialog::backdrop {
  background: rgba(14,18,29,.55);
  backdrop-filter: blur(2px);
}
@keyframes fadeIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.1rem;
  background: var(--delta-navy);
  background-image: linear-gradient(90deg, var(--delta-navy2), var(--delta-navy));
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
  position: sticky;
  top: 0;
  z-index: 5;
}
.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 1.2rem;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 3px;
  line-height: 1;
  transition: background .12s;
}
.modal-close:hover { background: rgba(255,255,255,.15); color: #fff; }

.modal-body { padding: 1.1rem; }
.modal-footer {
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  background: #f8fafd;
  border-radius: 0 0 var(--radius) var(--radius);
  position: sticky;
  bottom: 0;
}

/* ══════════════════════════════
   FORM
══════════════════════════════ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem .9rem;
}
.form-grid .full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group label {
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: .42rem .65rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--text);
  transition: border-color .15s;
  outline: none;
  background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--delta-blue); box-shadow: 0 0 0 3px rgba(37,144,237,.12); }

.form-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--delta-navy);
  cursor: pointer;
}
.form-group .checkbox-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding-top: .25rem;
}

/* ══════════════════════════════
   PAGINATION
══════════════════════════════ */
.pagination {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .6rem 0 0;
  justify-content: center;
}
.page-btn {
  padding: .28rem .6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 600;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.page-btn:hover { background: var(--delta-light); border-color: var(--delta-blue); }
.page-btn.active { background: var(--delta-navy); color: #fff; border-color: var(--delta-navy); }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
#toast-container {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  pointer-events: none;
}
.toast {
  padding: .65rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  min-width: 220px;
  max-width: 380px;
  box-shadow: var(--shadow);
  animation: slideIn .2s ease;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}
@keyframes slideIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } }
@keyframes slideOut { to { opacity:0; transform:translateX(30px); } }
.toast.success { background: #00b894; }
.toast.error   { background: var(--danger); }
.toast.info    { background: var(--delta-navy); }
.toast.warning { background: var(--warning); }

/* ══════════════════════════════
   LOADING
══════════════════════════════ */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 220px;
  gap: 1rem;
  color: var(--text-muted);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--delta-light);
  border-top-color: var(--delta-navy);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════
   EMPTY STATE
══════════════════════════════ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  text-align: center;
}
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: .6rem; opacity: .5; }
.empty-state h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.empty-state p { font-size: 1.15rem; }

/* ══════════════════════════════
   DETAIL ROW (inspection / maintenance)
══════════════════════════════ */
.detail-row {
  background: var(--delta-light);
  border-left: 3px solid var(--delta-blue);
  padding: .5rem .75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1.15rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .3rem;
}
.detail-row span { color: var(--text-muted); }
.detail-row strong { color: var(--delta-navy); display: block; font-size: 1.15rem; }

/* ══════════════════════════════
   ALERT ROW (overdue, warning)
══════════════════════════════ */
.row-alert td { background: #fff3cd !important; }
.row-danger td { background: #ffe0e0 !important; }
.row-hot td { background: #fff8f0 !important; }

/* ══════════════════════════════
   SECTION HEADER (sub-headings)
══════════════════════════════ */
.section-title {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--delta-navy);
  padding: .4rem 0;
  border-bottom: 2px solid var(--delta-light);
  margin-bottom: .6rem;
}

/* ══════════════════════════════
   MINI STATS (inline summary)
══════════════════════════════ */
.mini-stats {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.mini-stat {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .35rem .7rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.mini-stat .val { color: var(--delta-navy); font-size: 1.15rem; font-weight: 900; }

/* ══════════════════════════════
   INLINE EDIT
══════════════════════════════ */
.inline-status {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  width: 100%;
}
.inline-status:hover { background: var(--delta-light); }

/* ══════════════════════════════
   PROGRESS INDICATOR
══════════════════════════════ */
.workflow-steps {
  display: flex;
  gap: 0;
  margin: .5rem 0;
  overflow-x: auto;
}
.wf-step {
  flex: 1;
  text-align: center;
  padding: .3rem .4rem;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--text-muted);
  background: #edf0f5;
  border-right: 1px solid #fff;
  position: relative;
  white-space: nowrap;
}
.wf-step.done { background: var(--delta-light); color: var(--delta-navy); }
.wf-step.active { background: var(--delta-navy); color: #fff; }

/* ══════════════════════════════
   SCROLLBAR (global)
══════════════════════════════ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5cfe0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--delta-mid); }
/* ══════════════════════════════
   UTILITY CLASSES
══════════════════════════════ */
.text-muted  { color: var(--text-muted); }
.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-danger { color: var(--danger) !important; font-weight: 700; }
.text-success { color: var(--success) !important; }
.mono        { font-family: 'Consolas', 'Courier New', monospace; font-size: 1.15rem; }

/* ── Dashboard specific ── */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.card-blue   { border-left-color: var(--delta-blue); }
.card-navy   { border-left-color: var(--delta-navy); }
.card-red    { border-left-color: var(--danger); }
.card-red .card-value { color: var(--danger); }
.card-green  { border-left-color: var(--success); }
.card-green .card-value { color: var(--success); }
.card-orange { border-left-color: var(--warning); }
.card-orange .card-value { color: var(--warning); }
.card-purple { border-left-color: #7c3aed; }
.card-purple .card-value { color: #7c3aed; }
.card-gray   { border-left-color: #8e9cb0; }
.card-gray .card-value { color: #8e9cb0; }

.dashboard-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; } }

.dashboard-panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.dashboard-panel h3 {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--white);
  background: var(--delta-navy);
  padding: .55rem .85rem;
}
.dashboard-panel .search-box { padding: .75rem .85rem 0; }
.dashboard-panel .search-box input {
  width: 100%;
  padding: .4rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.15rem;
  outline: none;
}
.dashboard-panel .search-box input:focus { border-color: var(--delta-blue); }
#dashSearchResults { padding: 0 .5rem .5rem; }

/* ── Compact table ── */
table.compact-table td, table.compact-table th {
  padding: .35rem .55rem;
  font-size: 1.15rem;
}

/* ── Form control ── */
.form-control {
  width: 100%;
  padding: .42rem .65rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.15rem;
  color: var(--text);
  transition: border-color .15s;
  outline: none;
  background: #fff;
}
.form-control:focus { border-color: var(--delta-blue); box-shadow: 0 0 0 3px rgba(37,144,237,.12); }

/* ── Form grid wide ── */
.form-group-wide { grid-column: 1 / -1; }

/* ── Action cell ── */
.action-cell { white-space: nowrap; text-align: center; padding: .25rem !important; }

/* ── Settings ── */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.settings-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  padding: 1rem;
}
.settings-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--delta-navy);
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--delta-light);
}
.settings-card p { font-size: 1.15rem; margin-bottom: .3rem; }

/* ── Overdue row ── */
.row-overdue td { background: #fff5f5 !important; }

/* ── Inspection time elapsed ── */
.time-fresh  { color: var(--success); font-weight: 700; }
.time-medium { color: var(--warning); font-weight: 700; }
.time-late   { color: var(--danger);  font-weight: 700; }

/* ── Tab bar for sub-sections ── */
.tab-bar {
  display: flex;
  gap: .25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1rem;
}
.tab-btn {
  padding: .45rem 1rem;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--delta-navy); }
.tab-btn.active { color: var(--delta-navy); border-bottom-color: var(--delta-navy); }
/* ══════════════════════════════
   PRIORITY BADGES
══════════════════════════════ */
.priority-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.priority-1 { background: #ffe0e0; color: #9a0000; border: 1px solid #f5c6c6; }
.priority-2 { background: #fff3d6; color: #8a5200; }
.priority-3 { background: #e8f5e9; color: #1b5e20; }

/* ── Quick status select (inline) ── */
.status-cell:hover .badge { outline: 2px dashed rgba(37,144,237,.5); border-radius: 10px; }

/* ── Row alert ── */
.row-alert td { background: #fff8e1 !important; border-left: 3px solid var(--warning); }

/* ── Maintenance fixed ── */
.row-fixed td { background: #e8f5e9 !important; color: #1b5e20; }
/* ── OOR special row colors ── */
tr.row-invoiced td { background: #fff9c4 !important; }
tr.row-invoiced td .badge { opacity: .9; }
tr.row-meeting-out td { background: #ffe0e0 !important; border-left: 3px solid #e53e3e; }
tr.row-meeting-out td:first-child { border-left: 3px solid #e53e3e; }
/* ── Additional status badge colors for real OOR ── */
.status-lathe    { background: #dbeafe; color: #1e40af; font-weight:700; }
.status-mill     { background: #fce7f3; color: #9d174d; font-weight:700; }
.status-medical  { background: #d1fae5; color: #065f46; font-weight:700; }
.status-index    { background: #ede9fe; color: #5b21b6; font-weight:700; }
/* ══════════════════════════════════════════════════════
   EXACT COLORS FROM REAL E-3 GOOGLE SHEETS OOR
   Extracted directly from live spreadsheet
══════════════════════════════════════════════════════ */

/* ── Status badges — exact Google Sheets colors ── */
.status-shipping     { background: #f4cccc; color: #cc0000; font-weight: 700; }
.status-stock        { background: #00b050; color: #ffffff; font-weight: 700; }
.status-op-heat      { background: #d9d2e9; color: #674ea7; font-weight: 700; }
.status-op-anodize   { background: #d9d2e9; color: #674ea7; font-weight: 700; }
.status-op-generic   { background: #f9cb9c; color: #7f3f00; font-weight: 700; }
.status-order-proc   { background: #fff2cc; color: #7f6000; font-weight: 700; }
.status-planning     { background: #fff2cc; color: #7f6000; font-weight: 700; }
.status-index-badge  { background: #00bcd4; color: #ffffff; font-weight: 700; }
.status-review       { background: #b4a7d6; color: #20124d; font-weight: 700; }
.status-material-badge { background: #7f6000; color: #ffffff; font-weight: 700; }
.status-1st-insp     { background: #e69138; color: #ffffff; font-weight: 700; }
.status-mt8-badge    { background: #00bcd4; color: #ffffff; font-weight: 700; }
.status-lathe-badge  { background: #cfe2f3; color: #1c4587; font-weight: 700; }
.status-mill-badge   { background: #fce5cd; color: #7f3f00; font-weight: 700; }
.status-medical-badge { background: #d9ead3; color: #274e13; font-weight: 700; }
.status-deburring    { background: #d9ead3; color: #274e13; font-weight: 700; }
.status-assy-badge   { background: #d9d2e9; color: #20124d; font-weight: 700; }
.status-mrb-badge    { background: #f4cccc; color: #cc0000; font-weight: 700; border: 1.5px solid #cc0000; }
.status-ncr-badge    { background: #e06666; color: #ffffff; font-weight: 700; }
.status-invoiced-badge { background: #ffd700; color: #7a5a00; font-weight: 700; border: 1px solid #e6b800; }
.status-shipped-badge  { background: #cfe2f3; color: #1c4587; font-weight: 700; }
.status-final-insp   { background: #ffe599; color: #7f3f00; font-weight: 700; }
.status-on-hold      { background: #f4cccc; color: #990000; font-weight: 700; }
.status-rework-badge { background: #f4cccc; color: #990000; font-weight: 700; }
.status-approved-badge { background: #b6d7a8; color: #274e13; font-weight: 700; }
.status-rejected-badge { background: #e06666; color: #ffffff; font-weight: 700; }
.status-dmp-insp     { background: #ffe599; color: #7f3f00; font-weight: 700; }
.status-purchase     { background: #fff2cc; color: #7f6000; font-weight: 700; }
.status-default-badge { background: #efefef; color: #333; font-weight: 600; }

/* ── OOR Table — exact header green ── */
.oor-header-green {
  background: #00b050 !important;
  color: #ffffff !important;
}

/* ── OOR row stripe — light green like real sheet ── */
.oor-row-even td { background: #d9ead3 !important; }

/* ── Notes column yellow ── */
.oor-notes-cell { background: #fff2cc; }

/* ── Overdue date — red cell ── */
.oor-overdue-date { background: #e06666 !important; color: #fff !important; font-weight: 700; border-radius: 3px; padding: 1px 4px; }

/* ── Split# colors ── */
.split-m  { color: #cc0000; font-weight: 900; }
.split-no { color: #1c4587; font-weight: 900; }
/* ══════════════════════════════════════════════════════
   E3 POWER SHEET — EXACT BRAND COLORS
   Logo green: #8cc63e  |  Dark gray: #3d4449
   OOR green header: #00b050
══════════════════════════════════════════════════════ */

:root {
  --e3-green:   #8cc63e;
  --e3-gray:    #3d4449;
  --oor-green:  #00b050;
  --oor-orange: #e69138;
}

/* Topbar uses E3 gray */
#topbar { height: 58px; background: #ffffff; border-bottom: 3px solid #8cc63e; display: flex; align-items: center; padding: 0 1.25rem; gap: .75rem; flex-shrink: 0; z-index: 200; box-shadow: 0 2px 4px rgba(0,0,0,.08); }

/* Sidebar accent matches E3 green */
.nav-item.active {
  background: rgba(141, 198, 63, 0.2) !important;
  border-left-color: #8cc63e !important;
}
.nav-item:hover {
  background: rgba(141, 198, 63, 0.1) !important;
  border-left-color: rgba(141, 198, 63, 0.4) !important;
}

/* Primary buttons use E3 green */
.btn-primary {
  background: #3d4449 !important;
}
.btn-primary:hover {
  background: #23272b !important;
}
/* INVOICED rows — force strong yellow on ALL cells */
#oorBody tr.row-invoiced td {
  background: #fff176 !important;
}
#oorBody tr.row-invoiced td:first-child {
  background: #ffe900 !important;
  border-right: 1px solid #e6c200;
}
/* Invoiced nav item — always yellow */
.nav-item[data-module="invoiced"],
.nav-item[data-module="invoiced"]:hover,
.nav-item[data-module="invoiced"].active {
  color: #ffd700 !important;
}
.nav-item[data-module="invoiced"].active {
  background: rgba(255,215,0,.15) !important;
  border-left-color: #ffd700 !important;
}
.nav-item[data-module="invoiced"]:hover {
  background: rgba(255,215,0,.1) !important;
  border-left-color: rgba(255,215,0,.5) !important;
}
/* Live sync pulse animation */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}
#liveIndicator { animation: pulse 2.5s ease-in-out infinite; }

/* Flash when data syncs in */
@keyframes syncFlash {
  0%   { background: #8cc63e; box-shadow: 0 0 6px #8cc63e; }
  50%  { background: #fff; box-shadow: 0 0 10px #8cc63e; }
  100% { background: #8cc63e; box-shadow: none; }
}
#liveIndicator.syncing { animation: syncFlash .5s ease; }