/* ============================================================
   GL page redesign — floating cards, hierarchy, softer surfaces
   Loads AFTER the main stylesheet, wins on cascade ordering.
   Scoped to body.theme-light primarily; dark-mode inheriting.
   ============================================================ */

/* -------- App-wide page background — slightly cooler grey-blue -------- */
html body.theme-light {
  background:
    radial-gradient(circle at 14% -10%, rgba(124,92,255,.06), transparent 22%),
    radial-gradient(circle at 90% 110%, rgba(56,108,255,.05), transparent 30%),
    linear-gradient(180deg, #f4f6fb 0%, #eef1f7 100%) !important;
  background-image:
    radial-gradient(circle at 14% -10%, rgba(124,92,255,.06), transparent 22%),
    radial-gradient(circle at 90% 110%, rgba(56,108,255,.05), transparent 30%),
    linear-gradient(180deg, #f4f6fb 0%, #eef1f7 100%) !important;
}
html body.theme-light::before { display: none !important; }
html body.theme-light .app,
html body.theme-light .app.background-image-off {
  background: transparent !important;
  background-image: none !important;
}

/* -------- Page-head — flat title row, no card chrome -------- */
html body.theme-light.theme-light.theme-light .app .page-head {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 2px 4px 8px !important;
  margin-bottom: 0 !important;
  align-items: flex-start !important;
}
html body.theme-light.theme-light.theme-light .app .page-head h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: #0b1430 !important;
  line-height: 1.15 !important;
}
html body.theme-light.theme-light.theme-light .app .page-head .subtitle {
  display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

/* -------- GL workflow stack — compact spacing between sections -------- */
html body.theme-light .gl-workflow-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* -------- All panels inside GL workflow — floating cards, tight -------- */
html body.theme-light .gl-workflow-stack section.panel,
html body.theme-light .gl-workflow-stack > .panel,
html body.theme-light .gl-workflow-stack > .gl-minimal-bar,
html body.theme-light .gl-workflow-stack > .gl-format-panel {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #ecf0f6 !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.03),
    0 6px 16px rgba(15,23,42,.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 14px 18px !important;
}

/* -------- GL minimal bar (file identity) -------- */
html body.theme-light .gl-minimal-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 16px !important;
}
html body.theme-light .gl-minimal-bar__identity {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
html body.theme-light .gl-minimal-bar__identity strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0b1430 !important;
  letter-spacing: -.005em !important;
}
html body.theme-light .gl-minimal-bar__identity span {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* -------- Panel titles — calm and sharp -------- */
html body.theme-light .gl-workflow-stack .panel-title-row,
html body.theme-light .gl-workflow-stack .compact-panel-title {
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
html body.theme-light .gl-workflow-stack .panel-title {
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -.005em !important;
  color: #0b1430 !important;
  margin: 0 !important;
}
html body.theme-light .gl-workflow-stack .panel-title-row .muted {
  font-size: 13px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

/* -------- Pills inside panel titles — soft, not loud -------- */
html body.theme-light .gl-workflow-stack .pill {
  background: rgba(124,92,255,.08) !important;
  color: #6d4ce8 !important;
  border: 1px solid rgba(124,92,255,.18) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* -------- GL Summary stat tiles — clean, subtle, accent strip -------- */
html body.theme-light .gl-workflow-stack .preview-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)) !important;
  gap: 10px !important;
}
html body.theme-light .gl-workflow-stack .preview-summary > div {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px 12px 10px 16px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
  border: 1px solid #eef0f6 !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.02),
    0 4px 14px rgba(15,23,42,.04) !important;
  overflow: hidden !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
html body.theme-light .gl-workflow-stack .preview-summary > div:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 8px 20px rgba(15,23,42,.06) !important;
}
html body.theme-light .gl-workflow-stack .preview-summary > div::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #94a3b8 !important;
}
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+1)::before { background: #22c55e !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+2)::before { background: #3b82f6 !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+3)::before { background: #8b5cf6 !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+4)::before { background: #f59e0b !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+5)::before { background: #10b981 !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+6)::before { background: #a78bfa !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+7)::before { background: #f43f5e !important; }
html body.theme-light .gl-workflow-stack .preview-summary > div:nth-child(8n+8)::before { background: #06b6d4 !important; }

html body.theme-light .gl-workflow-stack .preview-summary > div strong {
  font-size: 18px !important;
  font-weight: 650 !important;
  color: #0b1430 !important;
  letter-spacing: -.015em !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: none !important;
  filter: none !important;
  line-height: 1.15 !important;
}
html body.theme-light .gl-workflow-stack .preview-summary > div span {
  font-size: 11.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 1px !important;
  line-height: 1.25 !important;
}

/* -------- GL Layout — calmer toolbar -------- */
html body.theme-light .gl-format-panel .toolbar,
html body.theme-light .gl-format-panel .gl-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: flex-end !important;
  background: transparent !important;
  margin-bottom: 8px !important;
}
html body.theme-light .gl-format-panel label {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  min-width: 160px !important;
  flex: 1 1 160px !important;
}
html body.theme-light .gl-format-panel label > span.muted,
html body.theme-light .gl-format-panel label > span {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* -------- Inputs & selects across GL — softer, larger radius -------- */
html body.theme-light .gl-workflow-stack input:not([type="file"]),
html body.theme-light .gl-workflow-stack select,
html body.theme-light .gl-workflow-stack textarea {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e3e8f3 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #0b1430 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  min-height: 32px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
html body.theme-light .gl-workflow-stack input:not([type="file"]):focus,
html body.theme-light .gl-workflow-stack select:focus {
  border-color: #7a4dff !important;
  box-shadow: 0 0 0 3px rgba(122,77,255,.10) !important;
  outline: none !important;
}

/* -------- Buttons -------- */
html body.theme-light .gl-workflow-stack .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  min-height: 38px !important;
  letter-spacing: -.005em !important;
  text-shadow: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease !important;
}
html body.theme-light .gl-workflow-stack .btn.btn-compact {
  min-height: 32px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
}
html body.theme-light .gl-workflow-stack .btn.primary {
  background: linear-gradient(135deg, #6d4ce8 0%, #4f6dff 100%) !important;
  background-image: linear-gradient(135deg, #6d4ce8 0%, #4f6dff 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(109,76,232,.22) !important;
}
html body.theme-light .gl-workflow-stack .btn.primary:hover {
  box-shadow: 0 6px 18px rgba(109,76,232,.32) !important;
  transform: translateY(-1px) !important;
}
html body.theme-light .gl-workflow-stack .btn.secondary {
  background: #ffffff !important;
  background-image: none !important;
  color: #334155 !important;
  border: 1px solid #e3e8f3 !important;
}
html body.theme-light .gl-workflow-stack .btn.secondary:hover {
  background: #f5f7fb !important;
  border-color: #cdd6e8 !important;
}

/* -------- Uploaded GL columns chips -------- */
html body.theme-light .gl-workflow-stack [class*="chip"],
html body.theme-light .gl-workflow-stack .gl-stepline span {
  background: rgba(124,92,255,.06) !important;
  color: #6d4ce8 !important;
  border: 1px solid rgba(124,92,255,.16) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* -------- GL Preview table — clean & light -------- */
html body.theme-light .gl-workflow-stack .table-scroll {
  background: transparent !important;
  border: 1px solid #eef0f6 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body.theme-light .gl-workflow-stack table.grid {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  min-width: 100% !important;
}
html body.theme-light .gl-workflow-stack table.grid thead th {
  background: #f5f7fb !important;
  background-image: none !important;
  color: #6b7280 !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-bottom: 1px solid #eaecf2 !important;
  padding: 8px 14px !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}
html body.theme-light .gl-workflow-stack table.grid tbody td {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f4f8 !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html body.theme-light .gl-workflow-stack table.grid tbody td:first-child,
html body.theme-light .gl-workflow-stack table.grid tbody td:last-child { border-left: 0 !important; border-right: 0 !important; }
html body.theme-light .gl-workflow-stack table.grid tbody tr:nth-child(even) td {
  background: #fafbfd !important;
}
html body.theme-light .gl-workflow-stack table.grid tbody tr:hover td {
  background: rgba(124,92,255,.04) !important;
}
html body.theme-light .gl-workflow-stack table.grid tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* -------- "UPLOADED GL COLUMNS" / "APP GL MAPPING" mini section labels -------- */
html body.theme-light .gl-workflow-stack .gl-section-label,
html body.theme-light .gl-workflow-stack .uploaded-columns-label,
html body.theme-light .gl-workflow-stack .gl-toolbar > label > span.muted {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #94a3b8 !important;
}

/* -------- Approve Upload primary button — keep prominent but softer -------- */
html body.theme-light .gl-minimal-bar .btn.primary {
  padding: 7px 16px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  min-height: 34px !important;
}

/* -------- Status badges (Approved pill etc.) -------- */
html body.theme-light .gl-minimal-bar .pill,
html body.theme-light .gl-minimal-bar .workflow-pill.ready,
html body.theme-light .gl-minimal-bar .status-badge.mapped {
  background: rgba(34,197,94,.10) !important;
  color: #15803d !important;
  border: 1px solid rgba(34,197,94,.22) !important;
}

/* -------- GL top header (consolidated top panel = page header) -------- */
.gl-top-header{ flex-wrap:wrap; }
.gl-top-header .gl-minimal-bar__identity{
  flex-direction:row !important;
  align-items:center;
  gap:16px;
  min-width:0;
  flex:1 1 auto;
}
.gl-top-header .gl-company-field{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.gl-top-header .gl-company-field > .muted{
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#94a3b8;
}
.gl-top-header .gl-company-field select{
  min-width:180px;
  max-width:280px;
  height:36px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:0 10px;
  font-weight:700;
  color:#0b1430;
  background:#fff;
}
.gl-top-header .gl-minimal-bar__file{
  font-size:12.5px;
  color:#64748b;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:280px;
}
.gl-top-header .gl-minimal-bar__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
@media (max-width: 720px){
  .gl-top-header .gl-minimal-bar__identity{ flex-direction:column !important; align-items:flex-start; gap:6px; }
  .gl-top-header .gl-minimal-bar__actions{ justify-content:flex-start; }
}