@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&family=Roboto+Condensed:wght@400&display=swap');

:root {
  /* === Brand (prefer File 2 / Figma) === */
  --brand-primary: #1565C0;
  --brand-primary-dark: #0D47A1;
  --brand-primary-hover: #1976D2;
  --brand-primary-light: #E3F2FD;

  --brand-bg: #EFF2F5;            /* page */
  --brand-bg-secondary: #FFFFFF;  /* panels */
  --brand-bg-disabled: #DFE4EC;   /* table header */

  --brand-surface: #FFFFFF;       /* keep File 1 token, mapped to panel white */
  --brand-text: #364963;
  --brand-text-secondary: #495057;
  --brand-text-muted: #6c757d;
  --brand-muted: #6c757d;

  --brand-border: #CFD7E2;
  --brand-border-light: #E9ECEF;

  /* === State colors (prefer File 2) === */
  --state-error-bg: #FFEBEE;
  --state-error-border: #E53935;
  --state-warning-bg: #FFF8E1;
  --state-warning-border: #FFB300;
  --state-success-bg: #E8F5E9;
  --state-success-border: #2E7D32;

  /* Keep File 1 semantic tokens for compatibility */
  --brand-success: var(--state-success-border);
  --brand-error: #dc3545; /* used by some blocks; overridden below where needed */
  --brand-warning: #ffc107;
  --brand-info: #17a2b8;

  /* Header gradient tokens from File 1 (opt-in) */
  --brand-header-dark: #0f274a;
  --brand-header-dark-2: #122e57;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);

  /* Radii: default to Figma, allow elevated variant to feel like File 1 */
  --radius-sm: 4px;
  --radius-lg: 12px;

  --scaffold-footer-text: #8095B3;

  --alert-info-light: #B3E5FC;
  --alert-info-lightest: #E1F5FE;

  --action-warning: #FF6F00;
}

* { box-sizing: border-box; }

body {
  font-family: 'Open Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--brand-bg);
  color: var(--brand-text);
  font-size: 14px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* =========================
   Header (default = File 2)
   ========================= */
header {
  padding-inline: 32px;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  margin-bottom: 32px;
}

header img {
  width: 145px;
  height: 20px;
}

header h1 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 0px;
  margin: 0;
  color: var(--brand-text);
}

header a {
  color: var(--brand-primary);
}

header p {
  font-family: 'Open Sans', sans-serif;
  font: normal 400 14px/20px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--brand-text);
}

/* Layout */
main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-inline: 32px;
  width: 100%;
  flex-grow: 1;
  margin-bottom: 32px;
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-inline: 32px;
  padding-block: 12px;
  background-color: var(--brand-bg-disabled);
  flex-shrink: 0;
}

.footerText {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font: normal 400 12px/16px;
  color: var(--scaffold-footer-text);
  letter-spacing: 0.03em;
}

footer img {
  width: 24px;
  height: 24px;
}

/* Panels/Cards (default = File 2) */
.card,
.panel {
  background: var(--brand-bg-secondary);
  border-radius: var(--radius-sm);
  padding: 0;
  border: 1px solid var(--brand-border);
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.card h2,
.panel h2 {
  font-family: 'Roboto Condensed', sans-serif;;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  color: var(--brand-text);
  margin: 0;
}

.panelHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--brand-border);
}

.panelHeaderText {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--brand-text) !important;
  margin: 0 !important;
}

.panelMain {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 16px;
}

.card p,
.panel p {
  margin: .75rem 0;
  color: var(--brand-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

/* Opt-in: File 1 elevated look */
.card.card--elevated,
.panel.panel--elevated {
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(15, 39, 74, 0.08);
}
.card.card--elevated:hover,
.panel.panel--elevated:hover {
  box-shadow: 0 4px 12px rgba(15, 39, 74, 0.12);
  border-color: var(--brand-border-light);
}

/* Data section aliases from File 1 */
.card.data-section,

.card.data-section h2,

/* Section header aliases */
.section-header,
.sectionHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  color: var(--brand-text);
  font-size: 14px;
}

input[type="file"], input[type="number"], input[type="text"] {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--brand-border);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--brand-text);
  transition: border-color .2s ease, box-shadow .2s ease;
}

input[type="file"]:hover { border-color: var(--brand-primary); }

input[type="file"]:focus, input[type="number"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}

/* Alerts / Errors (merge) */
.error,
.alert.alert--error {
  color: var(--state-error-border);
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--state-error-bg);
  border-left: 4px solid var(--state-error-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
}

/* Buttons (merge) */
button,
.btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'Open Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 20px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: fit-content;
}

/* File 1 default .btn base (keep) */
.btn {
  background: var(--brand-bg);
  color: var(--brand-text);
}

/* Primary */
button.primary,
.btn.btn--primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
button.primary:hover,
.btn.btn--primary:hover {
  background: var(--brand-primary-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
button.primary:active,
.btn.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* Secondary */
button.secondary,
.btn.btn--secondary {
  background: #fff;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  font-weight: 700;
}
button.secondary:hover,
.btn.btn--secondary:hover {
  background: var(--brand-primary-light);
}
.btn.btn--secondary.is-active,
.filter-btn.active,
.btn--filter.is-active {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

/* Danger */
button.danger,
.btn.btn--danger {
  background: #fff;
  color: #D32F2F;
  border-color: #D32F2F;
  padding: 4px 12px;
  font-size: 13px;
  letter-spacing: 0.2px;
}
button.danger:hover,
.btn.btn--danger:hover {
  background: var(--state-error-bg);
}

/* Active hooks (both files) */
.active,
.is-active {}

/* =========================
   Tables (prefer File 2)
   ========================= */
#tableWrapper {
  overflow: auto;
}

#dataTable {
  box-sizing: border-box;
} 

#downloadBtn img {
  margin-right: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-top: 8px; /* small spacing like File 1 */
  font-size: 14px;
}

table th {
  background: var(--brand-bg-disabled);
  color: var(--brand-text);
  font-weight: 600;
  padding: 8px 16px;
  text-align: left;
  border: 1px solid var(--brand-border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

table td {
  background: #fff;
  border: 1px solid var(--brand-border);
  padding: 8px 16px;
  white-space: nowrap;
  color: var(--brand-text);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* editable cells */
table td[contenteditable="true"] {
  white-space: normal;
  max-width: none;
  cursor: text;
}
table td[contenteditable="true"]:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  z-index: 5;
}

/* Hover row (from File 1) */
table tbody tr { transition: background-color .15s; }
table tbody tr:hover { background: rgba(21, 101, 192, 0.05); }

/* Invalid cell (support both selectors) */
td.invalid,
td.cell--invalid {
  background: var(--state-error-bg) !important;
  color: var(--state-error-border);
  box-shadow: inset 0 0 0 1px var(--state-error-border);
}

/* Duplicate row (support both selectors) */
tr.duplicate-row td,
tr.row--duplicate td {
  background: var(--state-warning-bg);
  border: 1px solid var(--state-warning-border);
}
tr.duplicate-row td:first-child,
tr.row--duplicate td:first-child { border-left: 1px solid var(--state-warning-border); }
tr.duplicate-row td:last-child,
tr.row--duplicate td:last-child { border-right: 1px solid var(--state-warning-border); }

/* Rules grid (support both naming conventions) */
.rules-grid,
.rules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.rule-block,
.rules__card {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rule-block:hover,
.rules__card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.rule-block h3,
.rules__card h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text);
}

.rule-block label,
.rules__card label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  margin-bottom: 12px;
  gap: 6px;
  color: var(--brand-text-secondary);
  font-weight: 600;
}

.rule-inline,
.rules__inlineOption {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.rule-block input[type="checkbox"],
.rules__card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Actions bars (aliases) */
.rules-actions,
.actionsBar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.data-actions,
.actionsBar.actionsBar--data {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.inline-input,
.field.field--inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}
.inline-input input,
.field.field--inline input { width: 140px; }

/* Table actions */
.table-actions,
.table__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
}
.table-actions button,
.table__actions button {
  padding: 4px 10px;
  font-size: 13px;
  align-self: flex-start;
}
.dup-info,
.table__dupInfo {
  color: var(--action-warning);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  font-family: 'Open Sans', sans-serif;
  white-space: normal;
  width: 120px;
}

/* Example table */
.example-table,
.exampleTable {
  margin-top: 16px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.example-table table,
.exampleTable table { margin: 0; }
.example-table th,
.exampleTable th {
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
}
.exampleTable--scrollX,
.exampleTable { overflow-x: auto; }
.exampleTable th.is-required { font-weight: 800; }

.example-table .missing-field,
.exampleTable .cell--missing {
  background: var(--state-error-bg);
  color: var(--state-error-border);
  font-weight: 700;
}

/* Notices / status (support both) */
.status,
.notice {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  display: none;
}
.status:not(:empty),
.notice:not(:empty) { display: block; }

.status.ok,
.notice.notice--success,
.notice--success {
  background: var(--state-success-bg);
  color: var(--state-success-border);
  border: 1px solid var(--state-success-border);
}

.status.bad,
.notice.notice--error,
.notice--error {
  background: var(--state-error-bg);
  color: var(--state-error-border);
  border: 1px solid var(--state-error-border);
}

.status.info,
.notice.notice--info,
.notice--info {
  background: var(--brand-primary-light);
  color: var(--brand-primary-dark);
  border: 1px solid #BBDEFB;
  font-weight: 600;
}

/* Loading overlay (support both, default = File 2 light) */
.loading-overlay,
.loadingOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: var(--brand-text);
  backdrop-filter: blur(2px);
}
.loading-overlay.active,
.loadingOverlay.is-active { display: flex; }

.loading-spinner,
.loadingOverlay__spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--brand-border);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text,
.loadingOverlay__text {
  font-weight: 600;
  color: var(--brand-text);
}

/* Opt-in: File 1 dark overlay */
.loadingOverlay.loadingOverlay--dark,
.loading-overlay.loadingOverlay--dark {
  background: rgba(15, 39, 74, 0.85);
  color: #fff;
  backdrop-filter: blur(4px);
}
.loadingOverlay.loadingOverlay--dark .loadingOverlay__spinner,
.loading-overlay.loadingOverlay--dark .loading-spinner {
  border-color: rgba(255,255,255,.2);
  border-top-color: var(--brand-primary);
}
.loadingOverlay.loadingOverlay--dark .loadingOverlay__text,
.loading-overlay.loadingOverlay--dark .loading-text {
  color: #fff;
}

/* Helpers (both) */
.is-hidden { display: none !important; }
#rulesContent.collapsed,
#rulesContent.is-collapsed,
.is-collapsed { display: none; }

.u-break-word { word-break: break-word; }
.zipErrorBody { font-family: Arial, sans-serif; padding: 40px; }

/* Upload errors / callouts (merge) */
.uploadErrorDetails { margin-top: 24px; }

.callout {
  padding: 16px;
  border-left: 4px solid;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}

.callout--error {
  background: var(--state-error-bg);
  border-left-color: var(--state-error-border);
  color: #B71C1C;
}

.callout--warning {
  background: var(--state-warning-bg);
  border-left-color: var(--state-warning-border);
  color: #E65100;
  margin-top: 16px; /* keep File 1 spacing */
}

.callout__title {
  margin: 0;
  font-weight: 700;
}

.callout__text {
  margin: 8px 0 0 0;
}

.fieldsTitle {
  font-weight: 700;
  color: var(--brand-text);
  margin-bottom: 8px;
}
.fieldsTitle--extra { margin-top: 16px; }
.fieldsTitle--example { margin-top: 24px; }

.fieldsList { margin: 8px 0; padding-left: 20px; }
.fieldsList--missing { color: #D32F2F; }
.fieldsList--extra { color: #b45309; }

.foundFieldsPanel {
  margin-top: 16px;
  padding: 16px;
  background: var(--brand-primary-light);
  border: 1px solid #90CAF9;
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--brand-primary-dark);
}
.foundFieldsPanel__list { margin-top: 8px; word-break: break-word; }

.fieldChip {
  display: inline-block;
  margin: 4px 8px 4px 0;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
}
.fieldChip--extra { background: #FFF9C4; color: #F57F17; border-color: #FFF59D; }
.fieldChip--correct { background: #C8E6C9; color: #1B5E20; border-color: #A5D6A7; }
.fieldChip--wrong { background: #FFCDD2; color: #B71C1C; border-color: #EF9A9A; }
.fieldChip__extraTag { font-size: 0.85em; opacity: 0.8; }

.logo {
  user-select: none;
}

.alert {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 14px 16px;
  gap: 16px;
  border-radius: var(--radius-sm);
}

.alert.info {
  border: 1px solid var(--alert-info-light);
  background-color: var(--alert-info-lightest);
}

.table__dupInfo.hint {
  display: none;
}

.actionButton {
  display: flex;
  flex-direction: row;
  height: 36px;
  padding-inline: 12px;
}

.actionButton.default {
  background-color: var(--brand-bg-secondary);
  border: 1px solid var(--brand-primary);
}

.alertContent {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}