/* ==========================================================================
   1. BASE APPLICATION CANVAS & STRUCTURE
   ========================================================================== */
body { 
    font-family: sans-serif; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    margin: 0; 
    background-color: #262c3a; 
    color: #ecf0f1; 
}

.container { 
    display: flex; 
    flex: 1; 
    overflow: hidden; 
    gap: 15px; 
    padding: 15px; 
    box-sizing: border-box; 
}

.pane { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    border-radius: 6px; 
    overflow: hidden; 
    background-color: #2d3446; 
}

.pane-header { 
    padding: 15px; 
    background: #262c3a; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    border-bottom: 1px solid #3d465d; 
}

.content { 
    flex: 1; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Lock viewport from spilling, let grid scale */
    padding: 15px; 
}

/* ==========================================================================
   2. HORIZONTAL ACTION BARS & SETTINGS WIDGETS
   ========================================================================== */
.action-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 4px;
}

.main-mode-select {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e293b;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #334155;
}

.main-mode-select label {
    font-weight: bold;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.main-mode-select select {
    background: #0f172a;
    color: #38bdf8;
    border: 1px solid #475569;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
}

.horizontal-settings-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    background: #1a1f2c;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #2d3446;
}

.param-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.param-cell .cell-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Intelligent Fluid Grid Sizing Assignments */
#leftPane .param-cell { flex: 1 1 25%; min-width: 0; }
#rightPane .param-cell { flex: 1 1 25%; min-width: 0; }

.mini-num { flex: 0.6 1 80px !important; }
.wide-select { flex: 1.4 1 150px !important; }

.param-cell input[type="number"],
.param-cell select {
    background: #2d3446;
    color: #ffffff;
    border: 1px solid #4f5b78;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}

.param-cell select:focus,
.param-cell input[type="number"]:focus {
    border-color: #38bdf8;
    outline: none;
}

/* ==========================================================================
   3. MANUAL HIGHLIGHTING & GRID TUNING PANELS
   ========================================================================== */
.config-panel {
    background: #1e293b;
    color: #f8fafc;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #334155;
    margin: 4px 0;
    font-family: system-ui, -apple-system, sans-serif;
}

.inputs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px;
    margin-top: 14px;
}

.grid-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111827;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #1e293b;
}

.grid-item label {
    font-size: 0.9em;
    color: #cbd5e1;
}

.grid-item input[type="number"] {
    width: 60px;
    text-align: center;
    background-color: #0f172a !important;
    color: #38bdf8 !important;
    border: 1px solid #475569 !important;
    border-radius: 4px;
    padding: 4px;
    font-weight: bold;
}

.preview-box-container { 
    background: #1e222b; 
    padding: 8px; 
    border-radius: 4px; 
    border: 1px solid #4f5b78; 
}

.preview-title { 
    font-size: 0.8rem; 
    color: #95a5a6; 
    margin-bottom: 4px; 
}

.line-preview { 
    font-family: monospace; 
    font-size: 1.05rem; 
    white-space: pre; 
    overflow-x: auto; 
    color: #f1c40f; 
    background: #11141a; 
    padding: 6px; 
    border-radius: 3px; 
}

.selection-controls { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 6px; 
}

.selection-controls button { 
    background: #34495e; 
    color: white; 
    border: none; 
    padding: 6px; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 0.85rem; 
}

.selection-controls button:hover { background: #415b76; }
/*.error-action-btn { background: #e67e22 !important; color: white; }
.error-action-btn:hover { background: #d35400 !important; }*/
.ranges-status { font-size: 0.85rem; color: #bdc3c7; background: #232834; padding: 8px; border-radius: 4px; line-height: 1.4; }

/* ==========================================================================
   4. CHROMATIC DESIGN LINKING SYSTEM (LABELS & MATRIX SPANS)
   ========================================================================== */
/* Horizontal Configuration Header Text Labels Linked Color Enforcements */
.horizontal-settings-bar .param-cell:nth-of-type(1) .cell-label { color: #38bdf8; } /* Date / Skipped */
.horizontal-settings-bar .param-cell:nth-of-type(2) .cell-label { color: #4ade80; } /* Time / Global Error */
.horizontal-settings-bar .param-cell:nth-of-type(3) .cell-label { color: #f87171; } /* Declination / Type */
.horizontal-settings-bar .param-cell:nth-of-type(4) .cell-label { color: #c084fc; } /* RA / Coord Format */

/* Dropdown Choice Content Theme Connections */
.col-highlight-date {
    background: rgba(56, 189, 248, 0.18) !important; 
    color: #38bdf8 !important;
    border: 1px solid rgba(56, 189, 248, 0.5) !important;
}
.col-highlight-time {
    background: rgba(34, 197, 94, 0.18) !important;  
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.5) !important;
}
.col-highlight-decl {
    background: rgba(239, 68, 68, 0.18) !important;  
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
}
.col-highlight-ra {
    background: rgba(168, 85, 247, 0.18) !important; 
    color: #c084fc !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
}
.col-highlight-err {
    background: rgba(249, 115, 22, 0.18) !important; 
    color: #fb923c !important;
    border: 1px solid rgba(249, 115, 22, 0.5) !important;
}

/* Secondary Selector Panel Grid Accents Hooks */
#columnInputs1 .grid-item:nth-of-type(1), #columnInputs2 .grid-item:nth-of-type(1) { border-left: 4px solid #38bdf8 !important; }
#columnInputs1 .grid-item:nth-of-type(2), #columnInputs2 .grid-item:nth-of-type(2) { border-left: 4px solid #22c55e !important; }
#columnInputs1 .grid-item:nth-of-type(3), #columnInputs2 .grid-item:nth-of-type(3) { border-left: 4px solid #ef4444 !important; }
#columnInputs1 .grid-item:nth-of-type(4), #columnInputs2 .grid-item:nth-of-type(4) { border-left: 4px solid #a885f7 !important; }
#columnInputs2 .grid-item:nth-of-type(5) { border-left: 4px solid #f97316 !important; }

/* ==========================================================================
   5. LIVE HIGH-SPEED PARSED SCROLLABLE WORKSPACE
   ========================================================================== */
.parsed-data-workspace {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    background: #090d16;
    border: 1px solid #1e222b;
    border-radius: 4px;
    padding: 8px;
    margin-top: 10px;
}

.parsed-scroll-row {
    display: flex;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #151c2c;
    align-items: center;
}

.row-index-label {
    font-family: monospace;
    font-size: 0.75rem;
    color: #475569;
    min-width: 35px;
    text-align: right;
    padding-right: 8px;
    user-select: none;
}

.preview-token {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
    cursor: help;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ==========================================================================
   6. GLOBAL PROCESS FOOTER BAR
   ========================================================================== */
.global-footer {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 20px; 
    background: #2c3e50; 
    padding: 15px;
    border-top: 1px solid #3d465d;
}

.footer-group {
    display: flex; 
    align-items: center; 
    gap: 10px; 
    color: white;
}

.global-footer input[type="number"] {
    background: #34495e; 
    color: white; 
    border: 1px solid #7f8c8d; 
    padding: 6px; 
    border-radius: 3px; 
    width: 120px;
    font-weight: bold;
}

#compareBtn { 
    background-color: #2ecc71; 
    color: white; 
    border: none; 
    padding: 10px 30px; 
    font-size: 1.1rem; 
    border-radius: 5px; 
    cursor: pointer; 
    font-weight: bold;
}

#compareBtn:hover { background-color: #27ae60; }


/* ==========================================================================
   7. SURGICAL LAYOUT PATCHES & COLUMN UNIFORMITY
   ========================================================================== */

/* 1. Neutralize the empty .content div so it stops stealing vertical room */
.pane .content {
    display: none !important; 
}

/* 2. Force the data workspace to absorb 100% of the remaining pane space */
.parsed-data-workspace {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    background: #090d16 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
}

/* 3. Set a rigid, fixed width for the line numbers column */
.row-index-label {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    text-align: right;
    padding-right: 8px;
    flex-shrink: 0;
}

/* 4. Force every data column badge to align perfectly into uniform fields */
.parsed-scroll-row .preview-token {
    display: inline-block !important;
    width: 115px !important;       /* Adjust this number if you want columns wider/narrower */
    min-width: 115px !important;
    max-width: 115px !important;
    text-align: center !important;  /* Center the data text inside the badge */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Gracefully clip numbers if they overflow the field */
    box-sizing: border-box !important;
    flex-shrink: 0;
}

/* 5. Optional: Give columns 1 and 2 (Date and Time) slightly more breathing room */
.parsed-scroll-row .preview-token:nth-of-type(1),
.parsed-scroll-row .preview-token:nth-of-type(2) {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
}


/* ==========================================================================
   8. MANUAL SELECTION STRIPE RESPONSIVENESS PATCH
   ========================================================================== */

/* Expand the box and give the text structural immunity from the scrollbar */
.line-preview {
    font-size: 1.15rem !important;          /* Make characters slightly larger for easier aiming */
    padding: 12px 12px 20px 12px !important; /* 🟢 Deep bottom padding drops the scrollbar completely below the data */
    line-height: 1.4 !important;
    letter-spacing: 1px !important;         /* Micro-spacing makes highlight dragging incredibly precise */
    overflow-x: auto !important;
    background: #0b0e14 !important;          /* Deeper black background for high selection contrast */
}

/* Force a high-visibility container border when manual mode is active */
.preview-box-container {
    border-color: #f1c40f !important;        /* Matches your yellow theme to alert user it's ready */
    padding: 12px !important;
}

/* Modern, ultra-thin scrollbar engine for the selection stripe (Linux Mint / WebKit) */
.line-preview::-webkit-scrollbar {
    height: 6px !important;                 /* Shrinks the default bulky 15px track to a sleek 6px line */
}

.line-preview::-webkit-scrollbar-track {
    background: #0b0e14 !important;
    border-radius: 4px !important;
}

.line-preview::-webkit-scrollbar-thumb {
    background: #3d465d !important;         /* Subtle matching gray slider */
    border-radius: 4px !important;
}

.line-preview::-webkit-scrollbar-thumb:hover {
    background: #38bdf8 !important;         /* Turns neon blue when your cursor is near it */
}