/* =========================================================
   Pedro Organiza — Color Palette
   ========================================================= */

/* ---------- Base / Background ---------- */
:root {
  --color-bg-primary: #0b0e1a;
  --color-bg-secondary: #14182c;
  --color-bg-tertiary: #1e2442;

  /* ---------- Brand ---------- */
  --color-brand-blue: #3fa9f5;
  --color-brand-purple: #7b4fe9;

  /* ---------- Accent ---------- */
  --color-accent-orange: #ff8a00;
  --color-accent-yellow: #ffd34d;

  /* ---------- Text ---------- */
  --color-text-primary: #ffffff;
  --color-text-secondary: #b8c6ff;
  --color-text-muted: #8a90b8;
  --color-text-inverse: #0b0e1a;

  /* ---------- UI ---------- */
  --color-border: #2a3160;
  --color-divider: #1f2547;
  --color-shadow: rgba(0, 0, 0, 0.45);

  --gradient-brand-primary: linear-gradient(
    135deg,
    var(--color-brand-blue),
    var(--color-brand-purple)
  );

  /* ---------- Sticky Metrics ---------- */
  --pedro-filter-height: 96px;
  --pedro-bulk-height: 88px;
  --pedro-header-height: 40px;
}

/* =========================================================
   Global
   ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

html, body, #root {
  height: 100%;
  margin: 0;
}

/* =========================================================
   Side Panel
   ========================================================= */

aside {
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
}

.side-panel-logo {
  padding: 18px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--color-border);
}

.side-panel-logo img {
  max-width: 140px;
  opacity: 0.95;
}

/* =========================================================
   FileTable Layout
   ========================================================= */

.file-table-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  width: 100%;
}

/* =========================================================
   Fixed Header Stack
   ========================================================= */

.pedro-fixed-header {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--color-bg-primary);
}

/* ---------- Filter Bar ---------- */
.pedro-sticky-filter {
  flex-shrink: 0;
  padding: 8px 10px;
  background: var(--pedro-bg);
  border-bottom: 1px solid var(--color-border);
}

.pedro-sticky-filter input {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

/* ---------- Bulk Edit ---------- */
.pedro-sticky-bulk {
  min-height: var(--pedro-bulk-height);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: 8px;
}

.pedro-sticky-bulk.is-hidden {
  visibility: hidden;
}

.pedro-sticky-bulk input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pedro-sticky-bulk button {
  background: var(--gradient-brand-primary);
  border: none;
  color: var(--color-text-inverse);
}

.pedro-sticky-bulk button:disabled {
  opacity: 0.4;
}

/* ---------- Column Header ---------- */
.pedro-sticky-header {
  height: var(--pedro-header-height);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* =========================================================
   Scroll Area
   ========================================================= */

.pedro-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.pedro-scroll-body table {
  width: 100%;
  border-collapse: collapse;
}

/* =========================================================
   Tables
   ========================================================= */

table {
  color: var(--color-text-primary);
}

table td {
  border-bottom: 1px solid var(--color-divider);
  padding: 6px 8px;
}

table tr {
  transition: background-color 0.15s ease;
}

table tr:hover {
  background: rgba(63, 169, 245, 0.08);
}

table tr.row-selected {
  background: rgba(123, 79, 233, 0.15);
}

/* Expanded editor row */
table tr.expanded {
  background: var(--color-bg-tertiary);
}

/* =========================================================
   Inputs
   ========================================================= */

input,
select,
textarea {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 13px;
}

input::placeholder {
  color: var(--color-text-muted);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-brand-blue);
  box-shadow: 0 0 0 1px rgba(63, 169, 245, 0.35);
}

/* =========================================================
   Buttons
   ========================================================= */

button {
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

button.preview {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

button.preview:hover {
  background: var(--color-bg-tertiary);
}

button.preview.playing {
  background: var(--gradient-brand-primary);
  color: var(--color-text-inverse);
}

/* =========================================================
   Checkboxes
   ========================================================= */

label {
  user-select: none;
}

label.mark-delete {
  color: #ff6b6b;
  opacity: 0.85;
}

label.mark-delete:hover {
  opacity: 1;
}

/* =========================================================
   Dirty / Pending Changes
   ========================================================= */

.row-dirty {
  box-shadow: inset 4px 0 0 rgba(255, 100, 120, 0.7);
}

.input-dirty {
  background-color: rgba(255, 100, 120, 0.12);
  border-color: rgba(255, 100, 120, 0.6);
}

.input-dirty:focus {
  box-shadow: 0 0 0 0.15rem rgba(255, 100, 120, 0.25);
}

.dirty-star {
  color: orange;
  margin-left: 4px;
}

.bulk-apply-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: #181818;
  border-bottom: 1px solid #333;
}


/* ===============================
   App shell layout
   =============================== */

.app-root {
  min-height: 100vh;        /* allow it to grow */
  display: flex;
  flex-direction: column; /* make it explicit */
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  overflow: auto;         /* allow scrolling */
}

/* ===============================
   Side panel
   =============================== */

.side-panel {
  width: 260px;
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.side-panel-logo {
  padding: 20px 12px;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-panel-logo img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.side-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* ===============================
   Main content
   =============================== */

.main-content {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
}

/* ===============================
   Bulk edit rows
   =============================== */

.bulk-row {
  display: grid;
  gap: 8px;
  margin-bottom: 6px;
}

.bulk-row.primary {
  grid-template-columns: 150px 150px 150px 70px 70px 70px;
}

.bulk-row.secondary {
  display: flex;
  gap: 16px;
  align-items: center;
}

.bulk-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ===============================
   Table header + columns
   =============================== */

.table-header {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  font-weight: bold;
}

.col-check { width: 32px; }
.col-id { width: 60px; }
.col-text { flex: 2; }
.col-preview { width: 100px; }

/* ===============================
   Table rows
   =============================== */

tr {
  border-bottom: 1px solid var(--color-divider);
}

.row-selected {
  background: rgba(63, 169, 245, 0.12);
}

/* ===============================
   Expanded row
   =============================== */

tr.expanded td {
  background: var(--color-bg-tertiary);
}

.expanded-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 8px;
}

.expanded-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.expanded-actions .mark-delete {
  color: #ff6b6b;
}

.expanded-path {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: monospace;
}

.side-panel-controls {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--color-divider);
}

.side-panel-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.side-panel-switch input {
  accent-color: var(--color-brand-blue);
}

.side-panel-handle {
  position: absolute;
  top: 100px;
  width: 20px;
  height: 60px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 50;
}

.side-panel-handle:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.panel-chevron {
  transition: transform 0.2s ease;
}

/* Direction awareness */
.side-panel-handle.left .panel-chevron {
  transform: rotate(0deg);
}

.side-panel-handle.right .panel-chevron {
  transform: rotate(180deg);
}

.side-panel.collapsed:hover {
  width: 200px !important;
}

/* ===============================
   FILTER BAR LAYOUT
   =============================== */

.filter-bar {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px;
}

/* LEFT — text inputs */
.filter-group {
  display: flex;
  gap: 8px;
}

.filter-group input {
  width: 160px;
  height: 32px;
  font-size: 13px;
}

.filter-row-primary input {
  width: 180px;
  height: 32px;
}

.filter-row-secondary {
  justify-content: space-between;
}

/* CENTER — alphabet */
.alphabet-group {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.alpha-btn {
  min-width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.alpha-btn:hover {
  background: var(--color-bg-tertiary);
}

.alpha-all {
  padding: 0 8px;
}

/* RIGHT — commands */
.command-group {
  display: flex;
  gap: 10px;
}

.btn-write-db {
  height: 32px;
  padding: 0 14px;
  font-weight: 600;
  background: var(--gradient-accent-warm);
  border: none;
  border-radius: 6px;
  color: var(--color-text-inverse);
  opacity: 0.5;
}

.btn-write-db:enabled {
  opacity: 1;
  cursor: pointer;
}

.btn-clear-filters {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
}

/* ===============================
   Startup UI — Pedro Native Look
   =============================== */

.startup-root {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.startup-header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.startup-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.startup-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.startup-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.startup-stepper {
  width: 220px;
  border-right: 1px solid var(--color-border);
  padding: 18px;
  background: var(--color-bg-secondary);
}

.startup-step {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.startup-step.active {
  color: var(--color-text-primary);
  font-weight: 600;
}

.startup-step.done {
  color: var(--color-brand-blue);
}

.startup-step-index {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.startup-content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.startup-card {
  max-width: 620px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 28px 32px;
  box-shadow: 0 12px 24px var(--color-shadow);
}

.startup-checklist {
  list-style: none;
  padding: 0;
  margin: 18px 0;
}

.startup-checklist li {
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}

.startup-actions {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

/* ===================== STARTUP SUMMARY (SCAN STEP) ===================== */

.startup-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.summary-block {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 14px;
}

.summary-block strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-weight: 600;
}

.summary-block div,
.summary-block ul {
  color: #111;
}

.summary-mono {
  font-family: monospace;
  background: #f0f0f0;
  padding: 6px 8px;
  border-radius: 4px;
  color: #000;
  word-break: break-all;
}

/* ===================== STARTUP STATUS PANELS ===================== */

.startup-info {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f0f6ff;
  border: 1px solid #cfe0ff;
  color: #123;
  border-radius: 6px;
}

.startup-success {
  margin-top: 16px;
  padding: 12px 14px;
  background: #e8f6ec;
  border: 1px solid #bfe5c9;
  color: #124d2a;
  border-radius: 6px;
  font-weight: 600;
}

.startup-error {
  margin-top: 16px;
  padding: 12px 14px;
  background: #fdecec;
  border: 1px solid #f5bcbc;
  color: #7a1c1c;
  border-radius: 6px;
  font-weight: 600;
}

/* Slightly dim secondary error details */
.startup-error div + div {
  font-weight: normal;
  color: #555;
}

/* =========================
   Buttons
   ========================= */

.btn-primary {
  background: var(--gradient-brand-primary);
  border: none;
  color: var(--color-text-inverse);
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 10px 18px;
  border-radius: 6px;
}

.startup-logo {
  width: 196px;
  height: 196px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}

/* =========================
   LayoutStep Base
   ========================= */

.startup-step-root {
  background: #0f1115;
  color: #e6e6e6;
  border-radius: 8px;
  padding: 24px;
}

/* Two main panels */
.startup-step-root .layout-panel {
  background: #1a1d24;
  color: #e6e6e6;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  padding: 16px;
}

/* Section titles */
.startup-step-root h3 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #ffffff;
}

/* =========================
   Fields & selects
   ========================= */

.startup-step-root label {
  color: #cfcfcf;
}

.startup-step-root select,
.startup-step-root input[type="text"] {
  background: #0f1115;
  color: #e6e6e6;
  border: 1px solid #3a3f4a;
  border-radius: 4px;
  padding: 6px 8px;
}

.startup-step-root select option {
  background: #0f1115;
  color: #e6e6e6;
}

/* =========================
   Available chips
   ========================= */

.startup-step-root .layout-available {
  background: #13161c;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}

.startup-step-root .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.startup-step-root .chip {
  background: #2a5bd7;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 13px;
  cursor: grab;
  user-select: none;
}

.startup-step-root .chip.sep {
  background: #555b66;
}

/* =========================
   Directory tree (left)
   ========================= */

.startup-step-root .layout-tree {
  background: #0f1115;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
}

.startup-step-root .tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1f2330;
  color: #e6e6e6;
  padding: 6px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.startup-step-root .tree-node span {
  color: #ffffff;
}

.startup-step-root .tree-node button {
  background: transparent;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
}

/* =========================
   Filename sequence
   ========================= */

.startup-step-root .layout-sequence {
  background: #0f1115;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 10px;
}

.startup-step-root .sequence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.startup-step-root .sequence-part {
  background: #1f2330;
  color: #e6e6e6;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.startup-step-root .sequence-part button {
  background: transparent;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
}

/* =========================
   Preview panel (right)
   ========================= */

.startup-step-root .layout-preview-tree {
  background: #13161c;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
  padding: 12px;
  color: #e6e6e6;
}

.startup-step-root .preview-box {
  background: #0f1115;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 8px;
  margin-top: 6px;
  font-family: monospace;
  color: #e6e6e6;
}

/* =========================
   Actions
   ========================= */

.startup-step-root .startup-actions {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
}

.startup-step-root .startup-actions .btn-secondary {
  background: transparent;
  border: 1px solid #3a3f4a;
  color: #cfcfcf;
}

.review-summary {
  background: var(--panel-bg);
  padding: 16px;
  border-radius: 8px;
}

.review-block {
  background: rgba(255,255,255,0.03);
  padding: 8px 12px;
  border-radius: 6px;
}

.review-warning {
  margin-top: 16px;
  padding: 10px;
  background: rgba(255, 165, 0, 0.15);
  border-left: 4px solid orange;
  border-radius: 4px;
  font-weight: 600;
}

.mono {
  font-family: monospace;
  font-size: 12px;
  opacity: 0.9;
}

/* ===================== REVIEW STEP ===================== */

.review-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.review-section h3 {
  margin-bottom: 12px;
  color: #222;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

.review-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: start;
  column-gap: 12px;
  margin-bottom: 6px;
}

.review-row span {
  color: #666;
  font-weight: 500;
}

.review-row strong {
  color: #111;
  font-weight: 600;
}

.review-row code {
  font-family: monospace;
  background: #f5f5f5;
  padding: 4px 6px;
  border-radius: 4px;
  color: #000;
  word-break: break-all;
}

.review-json {
  background: #f5f5f5;
  color: #111;
  padding: 12px;
  border-radius: 6px;
  max-height: 300px;
  overflow: auto;
}

.review-note {
  margin-top: 8px;
  font-size: 0.9em;
  color: #555;
  font-style: italic;
}

/* ===================== SPINNER ===================== */

.spinner {
  width: 18px;
  height: 18px;
  border: 3px solid #cfd8ff;
  border-top: 3px solid #3a5bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ===================== BULK SELECTION TOOLBAR ===================== */

.bulk-toolbar {
  background: #fff3cd;            /* soft warning yellow */
  border-bottom: 1px solid #e0c97f;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}

.bulk-toolbar .form-control-sm {
  height: 26px;
  font-size: 0.85rem;
  padding: 2px 6px;
}

.bulk-toolbar .btn-sm {
  padding: 2px 8px;
  font-size: 0.8rem;
}

.bulk-toolbar strong {
  font-weight: 600;
}

.bulk-toolbar .text-muted {
  color: #666 !important;
}
/* Dirty star */
.dirty-star {
  color: #d39e00;
  margin-left: 4px;
}
/* Expanded grid inputs */
.expanded-grid input {
  margin: 4px;
  padding: 4px 6px;
  font-size: 0.85rem;
}

/* =========================
   Screenshot Thumbnails
   ========================= */

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.screenshot-thumb {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.screenshot-thumb:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 24px var(--color-shadow);
}

/* =========================
   Modal Overlay
   ========================= */

.screenshot-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 26, 0.85); /* dark transparent overlay */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.screenshot-modal img {
  max-width: 92%;
  max-height: 92%;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

.screenshot-modal.show {
  display: flex;
}

.screenshot-close {
  position: absolute;
  top: 24px;
  right: 32px;
  font-size: 32px;
  color: var(--color-text-primary);
  cursor: pointer;
  opacity: 0.8;
}

.screenshot-close:hover {
  opacity: 1;
}