/* ═══════════════════════════════════════════════════════════════════════════
 * Classic Theme – Matches the original Gears Unlimited CloudFront design
 * Issue #1 fixes: larger title, black outer backgrounds, tab text, link fix
 * Issue #4c: gradient table header
 * Issue #6: print only selected transmission
 * ═══════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Issue #1c: Black background behind everything, white content area */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #000; color: #333; line-height: 1.6; }

/* Header – Issue #1b: larger title fills more of the band */
.app-header { background: linear-gradient(135deg, #1a2332, #2c3e50); color: #fff; padding: 25px 20px; text-align: center; }
.app-header h1 { font-size: 42px; margin-bottom: 3px; letter-spacing: 1px; }
.app-header .header-subtitle { font-size: 14px; opacity: 0.9; }
.app-header p { font-size: 14px; opacity: 0.9; }

/* Instructions */
.instructions-section { max-width: 960px; margin: 0 auto; padding: 15px 20px 0; }
.instructions-box { background: #007bff; color: #fff; border-radius: 8px; padding: 15px 20px; font-size: 14px; }
.instructions-box a { color: #ffe0b2; }

/* Config Section */
.config-section { max-width: 960px; margin: 0 auto; padding: 15px 20px; }

/* Panel Card */
.panel-card { background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1px solid #e0e0e0; }
.panel-card h3 { font-size: 18px; color: #343a40; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #e9ecef; }
.panel-card h4 { font-size: 15px; color: #495057; margin: 15px 0 10px; }
.panel-card.full-width { max-width: 100%; }

/* Input Layout */
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.input-group { display: flex; flex-direction: column; }
.input-group label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #495057; margin-bottom: 5px; }
.input-group input, .input-group select { padding: 10px 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 15px; background: #fff; transition: border-color 0.2s; }
.input-group input:focus, .input-group select:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0,123,255,0.15); }
.unit { font-size: 12px; color: #6c757d; margin-top: 3px; }
.input-help { font-size: 11px; color: #868e96; margin-top: 3px; font-style: italic; }

/* Result Items */
.result-row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.result-item { flex: 1; min-width: 150px; padding: 15px; border: 2px solid #28a745; border-radius: 8px; text-align: center; background: #f0fff4; }
.result-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #495057; }
.result-value { display: block; font-size: 28px; font-weight: 700; color: #28a745; }
.result-unit { font-size: 12px; color: #6c757d; }

.result-group { margin-bottom: 12px; }
.result-group label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #495057; display: block; margin-bottom: 5px; }
.calculated-value { font-size: 24px; font-weight: 700; color: #28a745; padding: 12px 15px; background: #f0fff4; border: 2px dashed #28a745; border-radius: 8px; }

/* Ratio Buttons */
.ratio-selection, .quick-ratio-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ratio-btn { padding: 8px 14px; border: 2px solid #007bff; border-radius: 6px; background: #fff; color: #007bff; font-weight: 600; cursor: pointer; transition: all 0.2s; font-size: 13px; }
.ratio-btn:hover { background: #e3f2fd; }
.ratio-btn.selected, .ratio-btn.closest { background: #007bff; color: #fff; }

/* Tab Navigation – Issue #1a: better sizing; Issue #1c: black background behind nav */
.tab-navigation { display: flex; flex-wrap: wrap; max-width: 960px; margin: 0 auto; padding: 0 20px; gap: 2px; background: #1a1a1a; border-radius: 8px 8px 0 0; overflow: hidden; }
.tab-btn { flex: 1; min-width: 110px; padding: 12px 8px; border: 1px solid rgba(0,123,255,0.5); background: #333; color: #ccc; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.2s; text-align: center; white-space: nowrap; }
.tab-btn:hover { background: #555; color: #fff; }
.tab-btn.active { background: #28a745; color: #fff; }

/* Tab Content */
.tab-content { max-width: 960px; margin: 0 auto; padding: 15px 20px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Panel Grid */
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* Tables – Issue #4c: gradient header */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: linear-gradient(90deg, #1a2332, #2c5282); color: #fff; padding: 10px 8px; text-align: left; font-weight: 600; }
td { padding: 8px; border-bottom: 1px solid #e9ecef; }
tr:nth-child(even) { background: #f8f9fa; }
.shift-table th { font-size: 12px; }

/* Shift RPM Input */
.shift-rpm-input { width: 80px; padding: 5px 8px; border: 1px solid #ced4da; border-radius: 4px; font-size: 13px; text-align: center; background: #f0fff4; }

/* Speed category colors */
.speed-normal { color: #28a745; font-weight: 600; }
.speed-moderate { color: #2196f3; font-weight: 600; }
.speed-high { color: #ff9800; font-weight: 600; }
.speed-extreme { color: #d32f2f; font-weight: 700; }

/* Speed Legend */
.speed-legend { margin: 20px 0; padding: 20px; background: linear-gradient(145deg, #f8f9fa, #e9ecef); border-radius: 12px; border: 1px solid #dee2e6; }
.speed-legend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.speed-legend-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border-radius: 6px; font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.speed-normal-dot { background: #28a745; }
.speed-moderate-dot { background: #2196f3; }
.speed-high-dot { background: #ff9800; }
.speed-extreme-dot { background: #d32f2f; }

/* Chart */
.chart-container { position: relative; height: 250px; margin: 15px 0; }

/* Tire Calculator */
.tire-format { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.tire-format input { width: 80px; padding: 10px; border: 1px solid #ced4da; border-radius: 6px; font-size: 15px; text-align: center; }
.tire-format span { font-size: 18px; font-weight: 700; color: #495057; }
.tire-result { margin: 20px 0; padding: 15px; background: #e8f5e8; border: 1px solid #28a745; border-radius: 5px; text-align: center; }
.tire-growth-info, .truck-tire-note { margin-top: 15px; padding: 10px; font-size: 13px; border-left: 4px solid #ffc107; background: #fff3cd; }

/* Gear inputs grid */
.gear-inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gear-inputs-column h4 { margin-bottom: 10px; }
.custom-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }

/* Buttons */
.btn { padding: 10px 20px; border: none; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.btn-primary { background: linear-gradient(135deg, #28a745, #218838); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(40,167,69,0.3); }
.btn-secondary { background: linear-gradient(135deg, #6c757d, #5a6268); color: #fff; }
.btn-secondary:hover { transform: translateY(-1px); }
.btn-info { background: linear-gradient(135deg, #17a2b8, #138496); color: #fff; }
.btn-info:hover { transform: translateY(-1px); }
.btn-success { background: linear-gradient(135deg, #28a745, #218838); color: #fff; }
.custom-transmission-actions { display: flex; gap: 10px; margin: 15px 0; flex-wrap: wrap; }

/* Action Bar */
.action-bar { max-width: 960px; margin: 0 auto; padding: 20px; text-align: center; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Shift info */
.shift-info { margin-top: 15px; padding: 12px; background: #f8f9fa; border-left: 4px solid #007bff; font-size: 13px; }

/* Diff Ratio Guide Table in Custom Diff Setup */
.diff-ratio-guide-table { margin-bottom: 15px; }
.diff-ratio-guide-table td { vertical-align: middle; }

/* Responsive */
@media (max-width: 768px) {
    .input-row, .panel-grid, .gear-inputs-grid, .custom-diff-grid { grid-template-columns: 1fr; }
    .tab-btn { min-width: 90px; font-size: 11px; padding: 10px 6px; }
    .result-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Print styles – Issue #6: Only print selected transmission tab data
 * ═══════════════════════════════════════════════════════════════════════════ */
@media print {
    body { background: #fff !important; }
    .tab-navigation, .action-bar, .btn, .shift-rpm-input, .instructions-section,
    .quick-ratio-buttons, .custom-transmission-actions { display: none !important; }

    /* Show only the active tab panel, hide all others */
    .tab-panel { display: none !important; }
    .tab-panel.active { display: block !important; }
    .tab-panel[data-print-active="true"] { display: block !important; }

    /* Show config and main results */
    .config-section { display: block !important; }
    .panel-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }

    /* Show the print header */
    .print-only-header { display: block !important; text-align: center; margin-bottom: 15px; }

    /* Hide transmission setup and diff setup tabs from print (they're config tabs) */
    #transmission-setup, #differential-setup { display: none !important; }
}