/* ==========================================================================
   Design System & Variable Definitions — Light Theme (padrão)
   ========================================================================== */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #dde3ed;
    --panel-bg: rgba(255, 255, 255, 0.85);
    --panel-border: rgba(15, 23, 42, 0.09);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --accent-planned: #929090;
    --accent-actual: #492727;
    --accent-highlight: #d4cd02;
    --accent-interactive: #059669;/* Emerald */

    --grid-major: rgba(15, 23, 42, 0.12);
    --grid-minor: rgba(15, 23, 42, 0.04);
    --station-line: rgba(15, 23, 42, 0.08);

    /* Component-specific */
    --chart-bg: #e6e6e6;
    --title-gradient-start: #0f172a;
    --now-label-bg: rgba(0, 0, 0, 0.32);
    --tooltip-bg: rgba(255, 255, 255, 0.97);
    --tooltip-border: rgba(15, 23, 42, 0.12);
    --watermark-color: rgba(15, 23, 42, 0.08);

    /* Interactive surfaces */
    --surface-subtle: rgba(0, 0, 0, 0.04);
    --surface-mid: rgba(0, 0, 0, 0.06);
    --surface-hover: rgba(0, 0, 0, 0.09);
    --input-bg: rgba(0, 0, 0, 0.06);

    /* Train selection */
    --train-selected-bg: rgba(2, 132, 199, 0.09);
    --train-selected-border: rgba(2, 132, 199, 0.28);

    /* Scrollbar */
    --scrollbar-track: rgba(0, 0, 0, 0.08);
    --scrollbar-thumb: rgba(0, 0, 0, 0.16);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.26);

    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */
[data-theme="dark"] {
    --bg-primary: #060b16;
    --bg-secondary: #0b1220;
    --panel-bg: rgba(11, 18, 32, 0.82);
    --panel-border: rgba(120, 160, 220, 0.10);

    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;

    --accent-planned: #393737;
    --accent-actual: #8d8b8b;
    --accent-highlight: #76a003;
    --accent-interactive: #10b981;

    --grid-major: rgba(255, 255, 255, 0.15);
    --grid-minor: rgba(255, 255, 255, 0.04);
    --station-line: rgba(255, 255, 255, 0.08);

    --chart-bg: #04070f;
    --title-gradient-start: #ffffff;
    --now-label-bg: rgba(0, 0, 0, 0.5);
    --tooltip-bg: rgba(17, 24, 39, 0.95);
    --tooltip-border: rgba(255, 255, 255, 0.15);
    --watermark-color: rgba(255, 255, 255, 0.12);

    --surface-subtle: rgba(255, 255, 255, 0.04);
    --surface-mid: rgba(255, 255, 255, 0.07);
    --surface-hover: rgba(255, 255, 255, 0.11);
    --input-bg: rgba(0, 0, 0, 0.3);

    --train-selected-bg: rgba(0, 240, 255, 0.08);
    --train-selected-border: rgba(0, 240, 255, 0.2);

    --scrollbar-track: rgba(0, 0, 0, 0.2);
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .train-path-planned {
    stroke-dasharray: 10, 8;
}

[data-theme="dark"] .now-line {
    box-shadow: 0 0 8px rgba(118, 160, 3, 0.6);
}

/* ==========================================================================
   Base Elements & Reset
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    transition: background-color 0.3s ease, color 0.2s ease;
}

/* ==========================================================================
   Layout Containers
   ========================================================================== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 16px;
    gap: 16px;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
    transition: background-color 0.3s ease, border-color 0.2s ease;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-icon {
    font-size: 32px;
}

.title-group h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--title-gradient-start) 30%, var(--accent-planned));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.chart-action-buttons {
    display: flex;
    gap: 8px;
}

/* ==========================================================================
   Main Content Layout
   ========================================================================== */
.main-content {
    display: flex;
    flex: 1;
    gap: 16px;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.glass-panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.2s ease;
}

/* ==========================================================================
   Sidebar / Train list
   ========================================================================== */
.sidebar {
    width: 320px;
    flex-shrink: 0;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--panel-border);
}

.panel-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 9999px;
    background-color: var(--surface-mid);
    border: 1px solid var(--panel-border);
    color: var(--accent-planned);
}

.search-box {
    margin: 0 20px 12px 20px;
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-box input {
    width: 100%;
    background-color: var(--input-bg);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 10px 12px 10px 38px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.2s;
}

.search-box input:focus {
    border-color: var(--accent-planned);
}

.train-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 20px 12px;
}

.train-list {
    list-style: none;
}

.train-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
    margin-bottom: 6px;
}

.train-item:hover {
    background-color: var(--surface-subtle);
}

.train-item.selected {
    background-color: var(--train-selected-bg);
    border-color: var(--train-selected-border);
}

.train-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.train-code-label {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
}

.train-route-label {
    font-size: 11px;
    color: var(--text-secondary);
}

.train-time-label {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-planned);
}

/* ==========================================================================
   Graphic Display Area & Scroll Container
   ========================================================================== */
.graphic-area {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.line-style {
    display: inline-block;
    width: 20px;
    height: 3px;
}

.planned-dash {
    border-top: 3px dashed var(--accent-planned);
}

.programmed-dot {
    border-top: 2px dotted var(--text-secondary);
}

.actual-solid {
    border-top: 3px solid var(--accent-actual);
}

.node-style {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--accent-interactive);
}

.chart-scroll-container {
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow-x: scroll !important;
    overflow-y: hidden;
    background-color: var(--chart-bg);
    border-radius: 0 0 16px 16px;
    position: relative;
    cursor: grab;
    user-select: none;
    transition: background-color 0.3s ease;
}

.chart-scroll-container.is-panning {
    cursor: grabbing !important;
    user-select: none;
}

.chart-viewport {
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    display: flex;
    overflow: hidden;
}

.now-line-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 0;
    pointer-events: none;
    z-index: 10;
}

/* Always-visible label of the grade in effect, pinned to the visible viewport
 * (the SVG canvas is ~14.600px wide; anything drawn at a fixed canvas position
 * scrolls out of view). Sits above the chart, below the now-line. Color comes
 * from --watermark-color, tuned per theme (light/dark) for legibility. */
.watermark-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--watermark-color);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.now-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: var(--accent-highlight);
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

.now-line-label {
    position: absolute;
    top: 4px;
    left: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-highlight);
    background-color: var(--now-label-bg);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

/* ==========================================================================
   SVG Styling Rules
   ========================================================================== */
svg {
    display: block;
    user-select: none;
}

/* Grid & Axes */
.grid-line-minor {
    stroke: var(--grid-minor);
    stroke-width: 1;
    stroke-dasharray: 2, 2;
}

.grid-line-major {
    stroke: var(--grid-major);
    stroke-width: 1;
}

.station-grid-line {
    stroke: var(--station-line);
    stroke-width: 1.5;
}

.station-grid-line-marker {
    stroke: var(--station-line);
    stroke-width: 1;
    opacity: 0.4;
}

.station-label {
    fill: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.time-label {
    fill: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-mono);
}

.axis-line {
    stroke: var(--panel-border);
    stroke-width: 2;
}

/* Turnaround Connectors - 3 níveis acima da estação terminal */
.turnaround-connector {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    cursor: pointer;
    transition: stroke-width 0.2s, stroke 0.2s, opacity 0.2s;
}

/* Viagens Futuras: Tracejada */
.turnaround-connector.future {
    stroke: var(--accent-planned, #0284c7);
    stroke-width: 2.5;
    stroke-dasharray: 4 3;
}

.turnaround-connector.future:hover {
    stroke: #38bdf8;
    stroke-width: 4.5;
}

/* Viagens Realizadas (Passadas): Mesma cor do realizado */
.turnaround-connector.realized {
    stroke: var(--accent-actual);
    stroke-width: 2.5;
    stroke-dasharray: none;
}

.turnaround-connector.realized:hover {
    stroke: var(--accent-actual);
    stroke-width: 4.5;
}

/* Violações (Gap < Mínimo 3 min) */
.turnaround-connector.violation {
    stroke: #dc2626;
    stroke-width: 3.5;
    stroke-dasharray: 2 2;
}

.turnaround-connector.violation:hover {
    stroke: #b91c1c;
    stroke-width: 5.5;
}

/* Nós indicadores das extremidades do turnaround */
.turnaround-node {
    fill: var(--accent-planned, #0284c7);
    stroke: #ffffff;
    stroke-width: 1;
    pointer-events: none;
}

.turnaround-node.future {
    fill: var(--accent-planned, #0284c7);
}

.turnaround-node.realized {
    fill: var(--accent-actual);
}

.turnaround-node.violation {
    fill: #dc2626;
}

/* Floating Station Labels - Pinned to Vertical Hour / Now Line */
.floating-station-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-muted, #475569);
    paint-order: stroke;
    stroke: var(--bg-surface, #ffffff);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
    user-select: none;
}

/* Train Lines */
.train-path-programmed {
    fill: none;
    stroke: var(--text-secondary);
    stroke-width: 1.5;
    stroke-dasharray: 2, 4;
    pointer-events: none;
    opacity: 0.5;
}

.train-path-planned {
    fill: none;
    stroke: var(--accent-planned);
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    transition: stroke-width 0.2s, stroke 0.2s;
    cursor: pointer;
}

.train-path-planned:hover {
    stroke-width: 4;
    stroke: var(--text-primary);
}

.train-path-planned.highlighted {
    stroke-width: 4.5;
    stroke: var(--text-primary);
}

.train-path-actual {
    fill: none;
    stroke: var(--accent-actual);
    stroke-width: 2.5;
    pointer-events: none;
}

.train-path-past {
    fill: none;
    stroke: var(--accent-actual);
    stroke-width: 2.5;
    cursor: pointer;
    transition: stroke-width 0.2s;
}

.train-path-past:hover {
    stroke-width: 4;
}

/* Transparent wide polyline on top of each trip for easier mouse targeting */
.train-hit-area {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    cursor: pointer;
}

/* Draggable Nodes */
.time-node {
    fill: var(--accent-interactive);
    stroke: rgba(16, 185, 129, 0.4);
    stroke-width: 6;
    cursor: ew-resize;
    transition: r 0.2s, fill 0.2s, stroke-width 0.2s;
}

.time-node:hover {
    fill: var(--accent-highlight);
    stroke: rgba(255, 204, 0, 0.4);
    stroke-width: 10;
    r: 7;
}

.time-node.dragging {
    fill: var(--accent-highlight);
    stroke: rgba(255, 204, 0, 0.6);
    stroke-width: 14;
    r: 8;
}

.time-node.snap-target {
    fill: #ec4899;
    stroke: rgba(236, 72, 153, 0.7);
    stroke-width: 14;
    r: 9;
    animation: pulse-snap 0.8s infinite alternate;
}

@keyframes pulse-snap {
    from { stroke-width: 10; r: 8; }
    to { stroke-width: 18; r: 10; }
}

.time-node.locked {
    fill: var(--text-muted);
    stroke: rgba(107, 114, 128, 0.4);
    cursor: not-allowed;
}

/* Hover Node Labels (code + time shown at every stop while hovering a line) */
.hover-node-label-bg {
    fill: rgba(0, 0, 0, 0.75);
    stroke: var(--accent-highlight);
    stroke-width: 1;
    pointer-events: none;
}

.hover-node-label {
    fill: var(--accent-highlight);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
}

/* ==========================================================================
   UI Components (Buttons, Tabs, Inputs)
   ========================================================================== */
.btn {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background-color: var(--accent-interactive);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #047857;
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.35);
}

.btn-secondary {
    background-color: var(--surface-mid);
    border-color: var(--panel-border);
    color: var(--text-primary);
}

.btn-secondary:hover {
    background-color: var(--surface-hover);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 11px;
}

/* Theme toggle button */
.btn-theme-toggle {
    background-color: var(--surface-mid);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.btn-theme-toggle:hover {
    background-color: var(--surface-hover);
    transform: scale(1.08);
}

.btn-theme-toggle:active {
    transform: scale(0.95);
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.tab-btn:hover {
    color: var(--text-primary);
    background-color: var(--surface-subtle);
}

.tab-btn.active {
    color: var(--text-primary);
    background-color: var(--surface-mid);
    font-weight: 600;
}

.file-upload-wrapper {
    position: relative;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--surface-mid);
    border: 1px solid var(--panel-border);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.2s;
}

.upload-label:hover {
    background-color: var(--surface-hover);
}

/* ==========================================================================
   Tooltip Element
   ========================================================================== */
.tooltip {
    position: fixed;
    background-color: var(--tooltip-bg);
    border: 1px solid var(--tooltip-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    transition: opacity 0.15s;
    line-height: 1.5;
}

.tooltip.hidden {
    display: none;
    opacity: 0;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-planned, #0284c7);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #0369a1;
    background-clip: content-box;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--accent-planned, #38bdf8);
    background-clip: content-box;
}

/* ==========================================================================
   Dialog Component
   ========================================================================== */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.dialog-overlay.hidden { display: none; }
.dialog-box {
    background: var(--panel-bg, #fff);
    color: var(--text-primary, #111);
    border-radius: 8px;
    padding: 24px;
    min-width: 320px;
    max-width: 480px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.dialog-box h3 { margin: 0 0 16px; font-weight: 600; font-size: 1.1em; color: var(--title-gradient-start, #111); }
.dialog-field { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.dialog-field label { font-size: 0.85em; color: var(--text-secondary, #666); }
.dialog-field input {
    background: var(--input-bg, #fff);
    border: 1px solid var(--panel-border, #ccc);
    color: var(--text-primary, #111);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9em;
}
.dialog-field input:focus {
    outline: none;
    border-color: var(--accent-planned, #0284c7);
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ==========================================================================
   Context Menu Component
   ========================================================================== */
.context-menu {
    position: fixed;
    z-index: 1001;
    background: var(--panel-bg, #fff);
    color: var(--text-primary, #111);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    min-width: 180px;
}
.context-menu.hidden { display: none; }
.context-menu li {
    padding: 8px 16px;
    cursor: pointer;
    font-size: 0.9em;
}
.context-menu li:hover { background: var(--surface-hover, rgba(0,0,0,0.06)); }

.mode-tabs { display: flex; gap: 4px; }
#schedules-view.hidden, #operational-view.hidden { display: none !important; }
#operational-view, #schedules-view {
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    gap: 16px;
    min-height: 0;
    min-width: 0;
}

.schedules-actions { display: flex; flex-direction: column; gap: 6px; padding: 12px; }

.unresolved-trains-header {
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 10px;
    color: var(--text-secondary, #999);
}
.unresolved-trains-list {
    list-style: none;
    margin: 0;
    padding: 0 10px 10px;
}
.unresolved-trains-list li {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.unresolved-trains-list li:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.05));
}
.unresolved-train-code {
    font-weight: 600;
}

.train-path-suppressed {
    fill: none;
    stroke: var(--text-secondary, #999);
    stroke-width: 1.5;
    stroke-dasharray: 4, 4;
    opacity: 0.6;
}
.train-path-realized-suppressed {
    fill: none;
    stroke-width: 2.5;
    stroke-dasharray: 6, 6;
    opacity: 0.85;
}
.time-node.suppressed {
    fill: var(--text-secondary, #999);
    opacity: 0.5;
    cursor: default;
}

.turnaround-connector {
    stroke: var(--text-secondary, #999);
    stroke-width: 3;
    opacity: 0.5;
}
.turnaround-connector.violation {
    stroke: #dc2626;
    opacity: 0.9;
}

#btn-auto-regulation.active {
    background: var(--accent-planned, #0284c7);
    color: white;
}

.interdiction-rect {
    fill: rgba(220, 38, 38, 0.18);
    stroke: rgba(220, 38, 38, 0.6);
    stroke-width: 1;
    cursor: pointer;
}
.interdiction-rect-preview {
    stroke-dasharray: 5 3;
    cursor: crosshair;
    pointer-events: none;
}
.interdiction-label {
    font-size: 11px;
    fill: rgba(220, 38, 38, 0.9);
    pointer-events: none;
}

.interdiction-handle {
    fill: white;
    stroke: rgba(220, 38, 38, 0.8);
    stroke-width: 1.5;
    cursor: pointer;
    transition: transform 0.1s;
}
.interdiction-handle:hover {
    fill: rgba(220, 38, 38, 0.2);
    transform: scale(1.3);
}
.interdiction-handle.nwse {
    cursor: nwse-resize;
}
.interdiction-handle.nesw {
    cursor: nesw-resize;
}






/* ==========================================================================
   Tela cheia + gavetas (Operacional)
   O gráfico ocupa a tela inteira; listas e comandos ficam em gavetas que
   abrem no hover e podem ser fixadas abertas pelo checkbox "Fixar".
   ========================================================================== */
.app-container {
    padding: 0;
    gap: 0;
    position: relative;
    overflow: hidden;
}

.main-content { gap: 0; }
#operational-view { gap: 0; }

.graphic-area {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.chart-scroll-container { border-radius: 0; }

/* Modo Grades mantém o respiro que o container perdeu */
#schedules-view { padding: 16px; gap: 16px; }

/* --- Gaveta: estrutura comum --- */
.drawer {
    position: fixed;
    z-index: 120;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-tab {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s;
}

.drawer:hover .drawer-tab { color: var(--text-primary); }

.drawer-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* --- Dock inferior: comandos --- */
.drawer-bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: max-content;
    max-width: 96vw;
    z-index: 130;
}

.drawer-bottom .app-header {
    border-radius: 20px;
    border: 1px solid var(--panel-border);
    margin-bottom: 15px; /* Lift from screen edge */
    flex-wrap: wrap;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.drawer-bottom .header-controls { flex-wrap: wrap; }

.drawer-tab-bottom {
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    padding: 4px 18px 5px;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}

.drawer-tab-bottom::after { content: "\25B4"; font-size: 9px; }

.drawer-bottom:hover,
.drawer-bottom:focus-within,
.drawer-bottom:has(#pin-bottom:checked) { transform: translate(-50%, 0); }

.drawer-bottom:has(#pin-bottom:checked) .drawer-tab-bottom::after { content: "\25BE"; }

/* --- Gavetas laterais: listas de trens --- */
.drawer-left,
.drawer-right {
    top: 0;
    bottom: 0;
    width: 320px;
}

.drawer-left { left: 0; transform: translateX(-100%); }
.drawer-right { right: 0; transform: translateX(100%); }

.drawer-left .drawer-body {
    border-left: none;
    border-radius: 0 16px 16px 0;
}

.drawer-right .drawer-body {
    border-right: none;
    border-radius: 16px 0 0 16px;
}

.drawer-tab-side {
    top: 50%;
    writing-mode: vertical-rl;
    padding: 18px 5px;
    letter-spacing: 0.6px;
}

.drawer-left .drawer-tab-side {
    left: 100%;
    transform: translateY(-50%);
    border-left: none;
    border-radius: 0 10px 10px 0;
}

.drawer-right .drawer-tab-side {
    right: 100%;
    transform: translateY(-50%);
    border-right: none;
    border-radius: 10px 0 0 10px;
}

.drawer-left:hover,
.drawer-left:focus-within,
.drawer-left:has(#pin-left:checked),
.drawer-right:hover,
.drawer-right:focus-within,
.drawer-right:has(#pin-right:checked) { transform: translateX(0); }

/* --- Checkbox de fixar --- */
.drawer-pin {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.drawer-pin:hover { color: var(--text-primary); }

.drawer-pin input {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-planned);
    cursor: pointer;
    margin: 0;
}

.drawer-pin-footer {
    padding: 11px 20px;
    border-top: 1px solid var(--panel-border);
}

/* Gavetas escondidas fora do modo Operacional */
body:has(#operational-view.hidden) .drawer-left,
body:has(#operational-view.hidden) .drawer-right { display: none; }


/* Barra de comandos flutuante (dock); quando fixada, as
   laterais sobem para não ficarem encobertas na base. */

body:has(#pin-bottom:checked) .drawer-left,
body:has(#pin-bottom:checked) .drawer-right {
    bottom: var(--header-h, 0px);
}

/* ==========================================================================
   Grade Table Editor (Tabela view) & inserted-trip labels
   ========================================================================== */
.editor-view-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--surface-subtle); }
.editor-view-toggle button { border: none; background: transparent; color: var(--text-secondary); padding: 6px 16px; border-radius: 7px; cursor: pointer; font-size: 0.9em; font-weight: 500; transition: background-color .15s, color .15s; }
.editor-view-toggle button:hover { color: var(--text-primary); }
.editor-view-toggle button.active { background: var(--accent-interactive); color: #fff; font-weight: 600; }

.grade-table-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.services-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--panel-border); }
.services-bar-label { font-size: 0.85em; color: var(--text-secondary); }
.service-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 12px; background: var(--surface-subtle); font-size: 0.85em; }
.service-chip input[type='color'] { width: 18px; height: 18px; padding: 0; border: none; background: none; cursor: pointer; }
.service-chip-name { cursor: pointer; }
.service-chip-count { font-size: 0.8em; color: var(--text-secondary); }
.service-chip-del { border: none; background: none; color: var(--text-secondary); cursor: pointer; padding: 0 2px; font-size: 1em; line-height: 1; }
.service-chip-del:hover { color: var(--accent-actual); }
.service-pending { font-size: 0.8em; color: var(--text-secondary); opacity: 0.85; margin-left: auto; }

.table-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--panel-border); }
.table-toolbar input, .table-toolbar select { background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text-primary); border-radius: 6px; padding: 4px 8px; }
.table-select-all { display: flex; align-items: center; gap: 4px; font-size: 0.85em; color: var(--text-secondary); }
.bulk-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bulk-actions.disabled { opacity: 0.45; pointer-events: none; }

.grade-table-scroll { flex: 1; min-height: 0; overflow: auto; }
table.grade-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.grade-table th { position: sticky; top: 0; z-index: 1; background: var(--bg-secondary); text-align: left; padding: 6px 10px; white-space: nowrap; }
.grade-table td { padding: 3px 10px; border-top: 1px solid var(--panel-border); white-space: nowrap; }
.grade-table tr.selected td { background: var(--train-selected-bg); }
.prefix-input { width: 76px; background: var(--input-bg); border: 1px solid transparent; border-radius: 4px; color: var(--text-primary); padding: 2px 5px; }
.prefix-input:focus { outline: none; border-color: var(--accent-interactive); }
.row-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.return-btn { border: none; background: none; color: var(--text-secondary); cursor: pointer; font-family: inherit; font-size: inherit; }
.return-btn.manual { color: #d97706; font-weight: 600; }
.return-options { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.return-option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.return-option:hover { background: var(--surface-subtle); }

/* Operator prefix label plotted on ad hoc inserted trips */
.trip-code-label { font-family: var(--font-mono), monospace; font-size: 11px; font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--chart-bg); stroke-width: 3px; }

.live-color-picker { display: inline-flex; align-items: center; }
.live-color-picker input[type='color'] { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }