/* Utility and preview styles moved from import.html */
.muted-note { margin-top: 10px; color: #999; }
.processing-note { margin-top: 15px; }
.mt-8 { margin-top: 8px; }
.mr-8 { margin-right: 8px; }
.ml-8 { margin-left: 8px; }
.preview-container { max-height: 360px; overflow: auto; margin-top: 10px; border: 1px solid #eee; padding: 8px; background: #fafafa; }
.preview-table { width: 100%; border-collapse: collapse; }
.preview-table th { border-bottom: 1px solid #ddd; text-align: left; padding: 6px; }
.preview-table td { padding: 6px; border-bottom: 1px solid #f0f0f0; }
.preview-header { margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.preview-controls { display:flex; gap:8px; align-items:center; }
.pager { margin-top:8px; display:flex; gap:8px; align-items:center; }
.btn-danger { background: #dc3545; }
.btn-success { background: #28a745; }
.btn-outline { background: #fff; color: #333; border: 1px solid #ccc; }

/* === Import page UI: upload area, file info, and loading spinner === */
#uploadArea.upload-area {
  border: 2px dashed var(--border-gray);
  padding: 24px;
  text-align: center;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  margin: 16px 0;
  color: #555;
}
#uploadArea .upload-icon { font-size: 40px; margin-bottom: 8px; }
#uploadArea.dragover { border-color: var(--context-blue); background: #f0f7ff; }
/* Hide native file input; the area is clickable to trigger it */
#fileInput { display: none; }
/* Hide file info until a file is chosen */
#fileInfo { display: none; margin-top: 8px; }
/* Hide loading section until JS shows it */
#loading { display: none; margin-top: 12px; }

/* Export status banner and spinner used during CSV export */
.export-status-banner {
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 12px;
  font-size: 13px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.export-status-success { background: #e6ffed; border: 1px solid #c6f6d5; color: #155724; }
.export-status-error { background: #fff3f0; border: 1px solid #ffd1d1; color: #721c24; }
.export-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.08);
  border-top: 2px solid var(--context-blue);
  border-radius: 50%;
  animation: export-spin 0.8s linear infinite;
}

/* Export row error highlighting */
.export-row-error { background: #ffecec !important; }
.export-row-error-badge { display:inline-block; margin-left:8px; padding:2px 6px; background:#d9534f; color:#fff; border-radius:12px; font-size:12px; vertical-align:middle; }

/* Server validation modal (reuses smoke modal look-and-feel) */
.server-validation-pre { max-height: 380px; overflow:auto; background:#f7f7f9; padding:12px; border-radius:6px; border:1px solid #e1e1e8; font-size:13px; }

@keyframes export-spin { to { transform: rotate(360deg); } }

.export-status-actions { margin-left: auto; display:flex; gap:8px; }

/* Footer layout: left copyright, right nav on same row */
.footer-row { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; }
.footer-right nav { margin-top:0; }
.upload-summary { padding: 8px; margin-top: 8px; background: #e6ffed; border: 1px solid #c6f6d5; }
.error-number { color: #f44336; }
.small-label { font-size: 13px; }
.btn-failure { background: #f8d7da; color: #721c24; }
.hidden { display: none !important; }
/* Top-right action buttons row used on import page */
.top-actions { display:flex; justify-content:flex-end; gap:8px; margin-bottom:8px; }
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
legend {
  font-family: 'Montserrat',sans-serif;
  color: var(--deep-navy);
  font-size: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  font-weight: 600;
}
legend::before {
  content: '';
  width: 30px;
  height: 3px;
  background: var(--network-green);
  margin-right: 15px;
}
/* Spinner for async actions */
.spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--border-gray);
  border-top: 3px solid var(--context-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Error icon for inline error messages */
.error-icon {
  color: var(--error-red);
  margin-right: 4px;
  font-size: 16px;
  vertical-align: middle;
}
/* Margin for latitude/longitude form grid */
.latlong-form-grid {
  margin-top: 15px;
}
/* Error message styles */
.error-message {
  color: var(--error-red);
  font-size: 12px;
  margin-top: 4px;
  /* default visible state is controlled by the utility .hidden class; remove hard hide */
  display: block;
}

#casinoCmsGroup {
  display: none;
}

#venueCategoryError {
  color: var(--error-red);
  font-size: 12px;
  margin-top: 4px;
  display: none;
}

#gpsResult {
  margin-top: 10px;
  color: var(--network-green);
  display: block;
}

/* GPS button inline style moved here */
#gpsLookupBtn { opacity: 1; }

/* Copy targets label / select spacing previously inline in index.html */
#copyTargets { margin-left: 8px; min-width: 160px; }
#copyTargets + button { margin-left: 8px; }

/* Initially hide auth buttons; JS will show as needed */
#logoutBtn { display: none; }

/* Label used for the Copy Monday control */
.copy-label { margin-left: 12px; font-weight: 600; }

/* Helper class for elements that previously used inline min-width:150px */
.min-width-150 { min-width: 150px; }

/* Ensure UID preview centers vertically when used in grid */
.uid-preview { align-self: center; }

.auth-name { margin-left: 12px; color: #fff; font-weight: 600; }
.copy-select { margin-left: 8px; min-width: 160px; }
.copy-monday-btn { margin-left: 8px; }
.footer-nav { margin-top: 6px; }

/* Responsive tweaks: make layout stack nicely on smaller screens */
@media (max-width: 1000px) {
  :root { --container-width: 960px; }
  .header img { height: 120px; }
  .form-container { padding: 20px; }
  .display-inventory-column { width: 100%; min-width: 0; }
}

@media (max-width: 700px) {
  :root { --container-width: 100%; }
  .header-inner { flex-direction: column; align-items: center; gap: 10px; }
  .header img { height: 90px; }
  .header-inner h1 { text-align: center; font-size: 20px; }
  .form-grid { grid-template-columns: repeat(6, 1fr); }
  .publisher-row .wide { grid-column: span 6; }
  .publisher-row .form-group { grid-column: span 6; }
  .uid-display { font-size: 14px; padding: 10px; }
  #exportButtonContainer { padding-bottom: 12px; }
}

@media (max-width: 420px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-group { grid-column: span 2 !important; }
  .btn { padding: 10px 14px; }
  .header img { height: 72px; }
  .header h1 { font-size: 18px; }
}

/* UID preview display box */
.uid-display { padding: 12px; background: #f7f9fa; border: 2px dashed var(--network-green); border-radius: 6px; text-align: center; font-size: 15px; font-weight: 700; color: var(--deep-navy); }

footer nav { margin-top: 6px; }
footer a { color: var(--deep-navy); text-decoration: underline; margin: 0 6px; }

#operatingHoursSection {
  /* show hours section by default; JS still controls the helper buttons */
  display: block;
}

.operating-hours-controls {
  margin-bottom: 15px;
}

.operating-hours-controls .btn {
  margin-right: 10px;
  padding: 8px 16px;
  font-size: 14px;
}
/* Dark theme: make Operating Hours control buttons readable */
:root[data-theme='dark'] .operating-hours-controls .btn {
  background: #1b2434;
  color: #e8ecf3;
  border: 1px solid #2b3952;
}
:root[data-theme='dark'] .operating-hours-controls .btn:hover {
  background: #222c40;
}
/* Accessible dark-mode button contrast refinements (override any conflicting styles) */
:root[data-theme='dark'] .operating-hours-controls .btn,
:root[data-theme='dark'] .hours-table td .clear-day-btn,
:root[data-theme='dark'] .operating-hours-controls .copy-monday-btn {
  background: #243044 !important; /* slightly lighter than panel for differentiation */
  color: #f5f8fc !important; /* high-contrast light text */
  border: 1px solid #3b4d68 !important;
  box-shadow: 0 0 0 1px #1a2535 inset !important; /* subtle inner edge for definition */
  text-shadow: 0 1px 0 rgba(0,0,0,0.25) !important; /* reinforce glyph edges */
}
:root[data-theme='dark'] .operating-hours-controls .btn:hover,
:root[data-theme='dark'] .hours-table td .clear-day-btn:hover,
:root[data-theme='dark'] .operating-hours-controls .copy-monday-btn:hover {
  background: #2d3b52 !important;
  border-color: #455a78 !important;
}
:root[data-theme='dark'] .operating-hours-controls .btn:active,
:root[data-theme='dark'] .hours-table td .clear-day-btn:active,
:root[data-theme='dark'] .operating-hours-controls .copy-monday-btn:active {
  background: #1e2936 !important;
  border-color: #3b4d68 !important;
  box-shadow: 0 0 0 2px rgba(74,144,226,0.35) inset !important;
}
:root[data-theme='dark'] .operating-hours-controls .btn:focus-visible,
:root[data-theme='dark'] .hours-table td .clear-day-btn:focus-visible,
:root[data-theme='dark'] .operating-hours-controls .copy-monday-btn:focus-visible {
  outline: 2px solid #4A90E2 !important;
  outline-offset: 2px !important;
}
:root[data-theme='dark'] .operating-hours-controls .btn:disabled,
:root[data-theme='dark'] .hours-table td .clear-day-btn:disabled,
:root[data-theme='dark'] .operating-hours-controls .copy-monday-btn:disabled {
  background: #1a1f28 !important;
  color: #5b6b80 !important;
  border-color: #2b3952 !important;
  text-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important; /* keep legible even when disabled */
}

#displayInventorySection {
  display: none;
}

#exportButtons {
  display: none;
  margin-top: 20px;
}

#exportButtons h3 {
  color: var(--deep-navy);
  margin-bottom: 10px;
}

#bulkStructureType, #bulkPlacementType {
  font-size: 12px;
  margin-top: 4px;
  width: 100%;
}
/* Font import removed due to CSP restrictions - using system fonts as fallback */

:root {
  /* Brand tokens from Context Networks Brand Identity */
  --context-blue: #4A90E2; /* primary */
  --network-green: #7ED321; /* accent */
  --deep-navy: #2C3E50; /* headings/text */
  --light-gray: #F8F9FA; /* background */
  --white: #FFFFFF;
  --border-gray: #dcdde1;
  --error-red: #e74c3c;

  /* Typography scale */
  --font-head: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --radius: 8px;
  --container-width: 1200px;
}
* { margin:0; padding:0; box-sizing:border-box; }
.body {
  font-family: var(--font-body);
}

body {
  font-family: var(--font-body);
  background: var(--light-gray);
  min-height: 100vh;
  padding: 20px;
  color: var(--deep-navy);
}

/* --- Dark theme overrides (app pages) --- */
:root[data-theme='dark'] body { background: #0b0d12; color: #e8ecf3; }
:root[data-theme='dark'] .container { background: #0f1420; box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
:root[data-theme='dark'] .header { background: #121621; border-bottom-color: #2b3952; }
:root[data-theme='dark'] .header h1 { color: #e8ecf3; }
:root[data-theme='dark'] .auth-name { color: #e8ecf3; }
:root[data-theme='dark'] .btn { color: #e8ecf3; }
:root[data-theme='dark'] .btn.btn-secondary { background: #1b2434; color: #e8ecf3; border: 1px solid #2b3952; }
:root[data-theme='dark'] .btn.btn-secondary:hover { background: #222c40; }
:root[data-theme='dark'] .btn.btn-outline { background: transparent; color: #c9d6ea; border: 1px solid #2b3952; }
:root[data-theme='dark'] .btn.btn-primary { background: #2c6caf; }
:root[data-theme='dark'] .form-container { color: #e5e7eb; }
:root[data-theme='dark'] .form-section { background: #121826; border-left-color: var(--context-blue); }
:root[data-theme='dark'] .form-section h2 { color: #e5e7eb; }
:root[data-theme='dark'] .form-group label { color: #e5e7eb; }
:root[data-theme='dark'] .form-group input, :root[data-theme='dark'] .form-group select { background: #0f1420; color: #e5e7eb; border-color: #2b3952; }
:root[data-theme='dark'] .form-group input:focus, :root[data-theme='dark'] .form-group select:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.18); }
:root[data-theme='dark'] .uid-display { background: #0f1420; color: #e5e7eb; border-color: #2b3952; }
:root[data-theme='dark'] .display-inventory { background: #121826 !important; }
:root[data-theme='dark'] .display-inventory .display-type { background: #0f1420 !important; }
:root[data-theme='dark'] .displays-table { background: #0f1420; }
:root[data-theme='dark'] .displays-table thead th { background: #1b2434; color: #e5e7eb; }
:root[data-theme='dark'] .displays-table tbody td { color: #e5e7eb; border-bottom-color: #2b3952; }
:root[data-theme='dark'] .displays-table tbody tr:nth-child(even) { background: #141c29; }
:root[data-theme='dark'] .displays-table tbody tr:nth-child(odd) { background: #0f1420; }
:root[data-theme='dark'] .displays-table tbody tr:hover { background: #1d2736; }
/* Improve inventory item contrast in dark theme */
:root[data-theme='dark'] .display-inventory .display-type { background: #16202e !important; border: 1px solid #2b3952 !important; color: #f5f8fc !important; }
/* Increase label contrast inside inventory items */
:root[data-theme='dark'] .display-inventory .display-type h4,
:root[data-theme='dark'] .display-inventory .display-type span,
:root[data-theme='dark'] .display-inventory .display-type label { color: #f5f8fc !important; }
/* Additional dark mode refinement: brighten inventory card + resolution text */
:root[data-theme='dark'] .display-inventory .display-type { background:#1b2533 !important; color:#f8fbff !important; }
:root[data-theme='dark'] .display-inventory .display-type .display-type-resolution { color:#d0d9e4 !important; }
/* Placeholder text visibility */
:root[data-theme='dark'] input::placeholder, :root[data-theme='dark'] select:invalid { color: #7b8da7; }
:root[data-theme='dark'] .hours-table { background: #0f1420; }
:root[data-theme='dark'] .hours-table thead th { background: #1b2434; color: #e5e7eb; }
:root[data-theme='dark'] .hours-table tbody td { color: #e5e7eb; border-bottom-color: #2b3952; }
:root[data-theme='dark'] footer a { color: #c9d6ea; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  background: var(--white);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
  overflow: hidden;
}

.header {
  background: var(--deep-navy);
  padding: 28px 24px;
  text-align: center;
  border-bottom: 4px solid var(--context-blue);
}

.header img { height: 140px; margin-bottom: 8px; }

/* Header internal layout: left logo, centered title, right auth controls */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.header-inner h1 { flex: 1; text-align: center; margin-left: 8px; }
.auth-controls { display: flex; align-items: center; gap: 8px; }
.auth-controls .btn { padding: 8px 12px; font-size: 14px; }
.auth-controls #authName { margin-left: 6px; color: #fff; font-weight: 600; }

/* Explicit logo rule: prefer a larger, responsive display while preserving image aspect ratio.
   If the source PNG is very small, consider replacing it with a higher-resolution asset in
   frontend/images/context-networks-logo.png. */
.logo {
  height: 180px; /* larger display height for a more prominent header */
  max-height: 220px;
  width: auto;
  display: inline-block;
  object-fit: contain;
}

.header h1 {
  font-family: var(--font-head);
  color: var(--white);
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.form-container { padding: 36px; }

.form-section {
  margin-bottom: 36px;
  /* slightly reduced left padding so sections align consistently (nudged -10px) */
  padding: 22px 22px 22px 12px;
  background: var(--light-gray);
  border-radius: var(--radius);
  border-left: 4px solid var(--context-blue);
}

.form-section h2 {
  font-family: var(--font-head);
  color: var(--deep-navy);
  font-size: 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
}
.form-section h2::before { content:''; width:30px; height:3px; background:var(--network-green); margin-right:15px; }
.form-grid { display:grid; grid-template-columns:repeat(12, 1fr); gap:12px; align-items:start; }
.form-group { display:flex; flex-direction:column; }
.form-group label { color:var(--deep-navy); font-weight:600; margin-bottom:8px; font-size:14px; }

/* Inline layout replacements previously in index.html */
.publisher-row {
  display: contents; /* allow form-grid to manage columns; children will place into the 12-column grid */
}
/* Venue row should participate in the form-grid like the publisher row */
.venue-row { display: contents; }
.venue-row > .form-group:first-child { grid-column: 1 / span 3; }
.publisher-row .form-group { min-width: 0; }
.publisher-row .wide { grid-column: span 6; }
.publisher-row .form-group { grid-column: span 4; }
.publisher-row .form-group[style*="min-width:150px"] { grid-column: span 2; }

/* Grid span utility classes (12-column grid) */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-9 { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

.display-inventory { padding: 16px; background: #fff; border-radius:8px; border: 1px solid var(--border-gray); margin-bottom: 16px; }
.display-type { display: grid; grid-template-columns: auto 1fr max-content; align-items: center; gap: 12px; padding: 12px 12px; border-bottom: 1px solid #f0f0f0; width:100%; box-sizing:border-box; }
.display-type:last-child { border-bottom: none; }
.display-type .display-type-name { font-weight:600; min-width:180px; margin-right:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Ensure display-type labels remain visible and aligned after JS changes */
.display-type .display-type-name {
  display: block !important;
  color: var(--deep-navy) !important;
  text-align: right !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.display-type .display-type-resolution { color:#666; font-size:13px; min-width:100px; margin-right:12px; }
.display-type .quantity-input { width:90px; margin-left:8px; }
.vendor-select { min-width:120px; margin-left:6px; }

/* Operating hours clear button */
.hours-table td .clear-day-btn { padding:6px 10px; font-size:13px; background:#f3f4f6; color:#1f2937; border:1px solid var(--border-gray); border-radius:6px; cursor:pointer; }
:root[data-theme='dark'] .hours-table td .clear-day-btn { background:#1b2434; color:#e8ecf3; border:1px solid #2b3952; }
:root[data-theme='dark'] .hours-table td .clear-day-btn:hover { background:#22304b; }
.publisher-row #cmsGroup { min-width: 0; display: none; }
/* CMS vendor should use same label-over-field layout like other fields */
:root .hours-rule-hint {
  font-size: 12px;
  color: var(--deep-navy);
  opacity: 0.75;
}
:root #operatingHoursSection h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
:root #operatingHoursSection h2 .hours-rule-hint {
  margin: 0; /* inline in header */
}
:root[data-theme='dark'] .hours-rule-hint {
  color: #c9d6ea;
  opacity: 0.8;
}
#cmsGroup { display: none; }
#cmsGroup label { display: block; margin-bottom: 8px; }
#cmsGroup select { width: 100%; }
/* CMS Device Type group hidden by default; shown via JS when a casino CMS is selected */
#cmsVariantGroup { display: none; }
#cmsVariantGroup label { display: block; margin-bottom: 8px; }
#cmsVariantGroup select { width: 100%; }

/* Parent publisher should be at least as wide as contact email */
.publisher-row-bottom .form-group.col-span-4 { grid-column: span 4; }
.publisher-row-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: flex-start;
  margin-top: 12px;
}
/* Make Parent Publisher select match width of domain/contact fields above
   Use a sensible minimum width on wide displays while staying responsive. */
#parentPublisher { width: 100%; min-width: 320px; max-width: 100%; display: block; box-sizing: border-box; }
.publisher-row .form-group, .publisher-row-bottom .form-group { display: flex; flex-direction: column; }
/* Ensure inputs/selects inside the publisher row fill their column and match sibling widths */
#contactEmail, #domainName, #parentPublisher { width: 100%; box-sizing: border-box; }
.publisher-row-bottom .form-group { min-width: 0; }
@media (max-width: 800px) {
  /* On narrow screens, allow fluid width without forcing min-width */
  #parentPublisher { min-width: 0; }
}
.uid-preview { margin-left:8px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; }

/* small star used for required field labels when added manually */
.required-star { color: var(--context-blue); margin-left:6px; font-weight:700; }

#formErrors { margin-bottom: 12px; display: block; }
.form-group input, .form-group select { padding: 12px; border: 2px solid var(--border-gray); border-radius: 6px; font-size: 14px; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; font-family: var(--font-body); }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--context-blue); box-shadow: 0 0 0 4px rgba(74,144,226,0.08); }
.form-group.full-width { grid-column: 1 / -1; }
.uid-display { padding: 15px; background: var(--white); border: 2px dashed var(--network-green); border-radius: 6px; text-align: center; font-size: 18px; font-weight: 600; color: var(--deep-navy); letter-spacing: 1px; }
.btn { padding: 12px 28px; border: none; border-radius: calc(var(--radius) - 2px); font-size: 15px; font-weight: 600; cursor: pointer; transition: box-shadow 0.18s ease, transform 0.18s ease, filter 0.18s ease; font-family: var(--font-head); }
.btn-primary { background: var(--context-blue); color: var(--white); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--network-green); color: var(--white); }
.btn-secondary:hover { filter: brightness(0.95); }
.display-inventory { background:white; padding:20px; border-radius:8px; margin-top:20px; }
.display-inventory-columns { display:flex; gap:12px; flex-wrap:wrap; }
.display-inventory-column { width:50%; min-width:220px; }
.display-inventory-table { width:100%; border-collapse:collapse; }
.display-inventory-table td, .display-inventory-table th { padding:8px; }
.display-type { padding:12px 16px; margin-bottom:10px; background:var(--light-gray); border-radius:6px; width:100%; box-sizing:border-box; }
.display-type input[type="checkbox"] { margin-right:12px; }
.display-type-info { flex:1 1 auto; min-width:0; max-width:56%; padding-right:18px; }
.display-type-name { font-weight:600; color:var(--deep-navy); margin-bottom:4px; min-width:120px; }
.display-type-name.iptv { text-transform: uppercase; }
.display-type-resolution { font-size:12px; color:#718093; min-width:80px; }
.display-type .right-controls { display:flex; gap:8px; align-items:center; justify-self: end; min-width:220px; }
.display-type .right-controls select, .display-type .right-controls .inv-cat { max-width:160px; min-width:110px; }
.quantity-input { width:86px; margin-left:6px; flex: 0 0 auto; background: #fff; border: 1px solid var(--border-gray); padding:8px; border-radius:6px; }
.display-type .qty-label { margin-right:6px; }

/* Ensure the grey background in each display-type card extends to include the Qty input region */
.display-inventory .display-type {
  /* Use flex layout per-row to ensure stable left/middle/right positioning across browsers */
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 16px !important;
}
.display-inventory .display-type .display-type-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding-right: 12px !important;
}
.display-inventory .display-type .display-type-name {
  /* allow wrapping so long names remain visible rather than being ellipsed to the end */
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  width: 100% !important;
  margin-bottom: 4px !important;
}
.display-inventory .display-type .display-type-resolution {
  color: #666 !important;
  font-size: 12px !important;
  margin-top: 0 !important;
}
.display-inventory .display-type .right-controls {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}
/* Ensure quantity sits inside the right-controls and does not overflow the grey card */
.display-inventory .display-type .quantity-input { width:86px; flex: 0 0 auto; }
.display-type .quantity-input, .display-type .qty-label { z-index: 1; flex: 0 0 auto; }
.display-type .quantity-input { order: 2; }
/* Prevent the first dropdown/label from being overlapped by long option lists
  and ensure the grey background visually covers the quantity region. */
.display-type .display-type-info { padding-right: 12px; min-width: 0; overflow: hidden; display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.display-type .display-type-name { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Strong override: ensure display inventory labels are always visible and readable.
   This targets the inventory container specifically and uses !important to override
   third-party or injected styles that may hide these labels. */
.display-inventory .display-type .display-type-name,
#displayInventory .display-type .display-type-name {
  display: block !important;
  color: var(--deep-navy) !important;
  font-weight: 600 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Apply a simple, robust background on the inventory row itself so the grey card
   consistently spans the control area (including Qty) and the layout doesn't
   depend on pseudo-elements. This keeps markup untouched and aligns with the
   rest of the form sections. */
.display-inventory .display-type {
  position: relative !important;
  background: var(--light-gray) !important;
  padding: 12px 12px !important;
  margin-bottom: 10px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

/* Left checkbox column: keep compact and aligned */
.display-inventory .display-type input[type="checkbox"] { margin-left: 6px !important; margin-right: 6px !important; }
/* Reserve a small visual column for the checkbox so the label/text doesn't shift under it */
.display-inventory .display-type .inv-cb {
  flex: 0 0 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure name and resolution stack and labels are fully visible */
.display-inventory .display-type .display-type-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-width: 180px !important; max-width: 60% !important; }
.display-inventory .display-type .display-type-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; color: var(--deep-navy) !important; font-weight: 600 !important; font-size: 14px !important; }
.display-inventory .display-type .display-type-resolution { margin-top: 2px !important; color: #6b6b6b !important; font-size: 12px !important; }

/* Right controls: keep compact and aligned to right */
.display-inventory .display-type .right-controls { margin-left: auto !important; display: flex !important; gap: 8px !important; align-items: center !important; flex: 0 0 auto !important; min-width: 180px !important; }
.display-inventory .display-type .quantity-input { width: 86px !important; }

/* Stabilize label column so long names don't collapse to a few characters */
.display-inventory .display-type .display-type-info {
  min-width: 220px !important;
  max-width: 46% !important;
}

/* Limit right-controls so they don't steal all horizontal space */
.display-inventory .display-type .right-controls {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 180px !important;
  max-width: 360px !important;
}

/* Small spacing fix so the inventory section aligns with sections above */
.display-inventory { margin-top: 8px !important; }
.display-type .inv-placement, .display-type .inv-structure, .display-type select { max-width: 160px; }
.display-type .quantity-input { background: #fff; }

@media (max-width: 700px) {
  .display-type { grid-template-columns: 1fr; grid-auto-rows: auto; padding-right:16px; }
  .display-type .right-controls { width: 100%; justify-content:flex-end; margin-top:8px; grid-column: 1 / -1; }
  .display-type .display-type-info { min-width: 0; grid-column: 1 / -1; margin-bottom: 8px; }
}

/* Ensure export button is right-aligned reliably within generated displays */
#exportButtonContainer { display:flex; justify-content:flex-end; align-items:center; width:100%; box-sizing:border-box; padding-bottom:96px; margin-top:20px; }

/* Diagnostic helper: when present, bulk-controls should appear immediately after the header */
.display-bulk-controls { width:100%; box-sizing:border-box; }

/* Make bulk selects show a disabled placeholder when empty so UI indicates why they are disabled */
#bulkStructureType:empty::before, #bulkPlacementType:empty::before { content: 'Loading options...'; color: #666; }
.display-type .qty-label { font-size:13px; margin-left:8px; font-weight:600; }
.vendor-select { margin-left:6px; display:none; }
.vendor-select.active { display:block; }
.submit-section { text-align:right; padding:20px 30px; background:var(--light-gray); border-top:2px solid var(--border-gray); }
.generated-displays { display: none; margin-top:16px; }
.generated-displays.active { display:block; }
.displays-table { width:100%; border-collapse: collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.displays-table thead th { background: var(--deep-navy); color: #fff; text-align:left; padding:12px 14px; font-weight:600; font-size:14px; letter-spacing:0.2px; }
.displays-table tbody td { padding:12px 14px; border-bottom:1px solid var(--border-gray); vertical-align:middle; font-size:14px; color:#2d3436; word-break:break-word; }
.displays-table tbody tr:hover { background: var(--light-gray); }
/* Hide UUID column in the UI to save space; CSV will still include the UUID column (blank for offline fill) */
.displays-table .uuid-col { display: none; }
#downloadCsvBtn.btn.btn-secondary { display:inline-block; margin-top:12px; }

/* Export button container alignment when moved below table */
/* Provide ~1in (96px) bottom padding so export has breathing room above the footer */
#exportButtonContainer { display:flex; justify-content:flex-end; margin-top:20px; padding-bottom:96px; width:100%; box-sizing:border-box; }

/* Ensure the wrapper inside generated displays is full width so right alignment works reliably */
.generated-displays, #generatedDisplaysSection { width:100%; box-sizing:border-box; }

/* Bulk apply button next to bulk selects */
.bulk-apply-btn { margin-top:6px; margin-left:8px; padding:6px 10px; font-size:13px; }
.hours-table { width:100%; border-collapse:collapse; background:white; border-radius:8px; overflow:hidden; }
.hours-table thead th { background: var(--deep-navy); color:#fff; text-align:left; padding:12px 14px; font-weight:600; font-size:14px; }
.hours-table tbody td { padding:10px 14px; border-bottom:1px solid var(--border-gray); vertical-align:middle; font-size:14px; color:#2d3436; }
.hours-table tbody tr:hover { background: var(--light-gray); }
.hours-table input[type="time"] { width:100%; padding:8px 10px; border:2px solid var(--border-gray); border-radius:6px; font-size:14px; box-sizing:border-box; }
.hours-table input[type="time"]:disabled { background:#f0f0f5; color:#888; cursor:not-allowed; }
.hours-table input[type="checkbox"] { width:18px; height:18px; vertical-align:middle; }
/* Dark theme: ensure time inputs are readable inside hours table */
:root[data-theme='dark'] .hours-table input[type="time"] { background:#0f1420; color:#e5e7eb; border-color:#2b3952; }
/* Improve native time picker icon visibility in WebKit (Chrome/Safari) for dark mode */
:root[data-theme='dark'] .hours-table input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.85) brightness(1.3); opacity:0.9; }

/* Dark mode: prevent hover row from washing out text in Operating Hours */
:root[data-theme='dark'] .hours-table tbody tr:hover { background: #1b2434 !important; }

/* Helper for inline input + button groups (used for GPS lookup) */
.input-with-button { display:flex; align-items:center; gap:10px; }
.input-with-button .flex-input { flex:1; }
/* Spacer used when a control row has a button and no visible label; keeps grid alignment */
.label-spacer { height: 20px; margin-bottom: 8px; }
/* Screen-reader only utility for hidden labels, when needed */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Styles moved from inline JS injections for consistent theming */
.required-hint {
  color: var(--error-red);
  font-size: 12px;
  margin-top: 4px;
}
.required-invalid {
  border-color: var(--error-red) !important;
  box-shadow: 0 0 0 3px rgba(231,76,60,0.06) !important;
}

/* Smoke modal overlay & box */
.smoke-modal-overlay {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.smoke-modal-box {
  width: 720px;
  max-width: 95%;
  max-height: 80%;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
.smoke-modal-box h3 { margin-top: 0; }
.smoke-modal-errors { color: crimson; margin-bottom: 8px; }
.smoke-modal-warnings { color: #b36b00; margin-top: 8px; }

.btn-warning { background: #f39c12; color: #fff; }
.btn-warning:hover { filter: brightness(0.95); }

/* Forced Colors Mode: replace deprecated -ms-high-contrast with standard media query
   See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors */
@media (forced-colors: active) {
  /* ensure focus and important UI elements remain visible in forced-colors contexts */
  /* forced-color-adjust omitted for Safari compatibility */
  body { background: ButtonFace; color: ButtonText; }
  .header { background: ButtonFace; color: ButtonText; }
  a { color: LinkText; }
  .btn { background: ButtonFace; color: ButtonText; border-color: Highlight; }
  .required-hint, .error-message { color: CanvasText; }
}

/* Shared button variants used across pages */
.btn-success { background: #28a745; color: #fff; }
.btn-danger { background: #dc3545; color: #fff; }
.btn-outline { background: #fff; color: #333; border: 1px solid #ccc; }

/* === Inventory visual alignment fixes (scoped overrides) === */
/* Match the left padding used by other form sections so the inventory card lines up */
.display-inventory {
  /* match the visual offset and left accent used by .form-section so content aligns */
  padding: 22px 22px 22px 12px !important;
  /* remove extra top offset so the top border lines up with other sections */
  margin-top: 0 !important;
  /* keep the same bottom spacing as other form sections */
  margin-bottom: 36px !important;
  box-sizing: border-box !important;
  background: var(--light-gray) !important;
  /* do not apply a left border here — the surrounding .form-section already provides the accent
     applying another border caused a doubled blue edge in some layouts */
}

/* Force the inventory column to use full width so each grey row can span to the right-controls */
.display-inventory-columns, .display-inventory-column { width: 100% !important; min-width: 0 !important; }

/* Make each inventory row reliably fill its container and ensure the grey background
   extends beneath the right-controls (including Qty). Keep padding roomy on the right. */
.display-inventory .display-type {
  width: 100% !important;
  padding: 14px 20px !important; /* more right padding to visually include Qty */
  background: var(--light-gray) !important;
  box-sizing: border-box !important;
}

/* Add a little extra horizontal gap between the name label and the first dropdown */
.display-inventory .display-type .display-type-info { margin-right: 24px !important; }
.display-inventory .display-type .display-type-name { margin-right: 12px !important; }

/* Ensure right-controls can't be pushed outside the grey background by reserving space */
.display-inventory .display-type .right-controls { min-width: 220px !important; max-width: 420px !important; }

/* Defensive: allow names to wrap if needed but keep reasonable left alignment */
.display-inventory .display-type .display-type-name { white-space: normal !important; }

/* Dark theme: ensure inventory labels and resolutions are legible on dark background */
:root[data-theme='dark'] .display-inventory .display-type .display-type-name { color:#f8fafc !important; }
:root[data-theme='dark'] .display-inventory .display-type .display-type-resolution { color:#d1d5db !important; }

/* Edge-specific hard override: target the live Display Inventory container so label
   text is guaranteed bright in dark mode, even if earlier rules or UA quirks apply. */
:root[data-theme='dark'] #displayInventory .display-type-name,
:root[data-theme='dark'] #displayInventory .display-type .display-type-info .display-type-name {
  color: #f9fafb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}

:root[data-theme='dark'] #displayInventory .display-type-resolution {
  color: #e5e7eb !important;
}