/*
 * ACE (Automation Control Engineering) Suite
 * Copyright (c) 2026 ACE Systems. All rights reserved.
 * Property of ACE Systems - Whakatane, Bay of Plenty, New Zealand.
 *
 * Proprietary and confidential. Unauthorised copying, distribution or
 * modification of this file, in whole or in part, is prohibited.
 */
/* --- NEW: Branch Color Definitions (CSS Variables New) --- */
:root {
    --branch-color-A-text: #007a7c;
    --branch-color-A-bg: #e6f7f7;
    --branch-color-A-border: #b3e0e0;

    --branch-color-B-text: #8e44ad;
    --branch-color-B-bg: #f5edfa;
    --branch-color-B-border: #e6d9f0;

    --branch-color-C-text: #d35400;
    --branch-color-C-bg: #fdf2ed;
    --branch-color-C-border: #f7d9ca;

    --branch-color-D-text: #2980b9;
    --branch-color-D-bg: #edf5fa;
    --branch-color-D-border: #c9e1f0;
}
/* --- END NEW --- */

#routine-quick-links h4 {
    margin: 10px 0 5px 0;
    color: #007a7c;
}

#routine-quick-links h4 a {
    color: #007a7c;
    font-size: 1.05em;
}
/* --- END NEW --- */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f7f6;
    color: #333;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #005a9c;
    margin-bottom: 5px;
}

/* --- MODIFIED: Make file H1 smaller, same as routine H2 --- */
.file-fd-container > h1 {
     font-size: 0.9em; /* Same size as H2 */
     margin-top: 15px;
     margin-bottom: 15px;
     border-bottom: 1px solid #ccc;
     padding-bottom: 5px;
}

/* --- *** NEW: Merged Standard Header Style *** --- */
.standard-header-merged {
    text-align: center;
    font-size: 1.0em; /* Slightly smaller to fit in box */
    font-weight: bold;
    color: #333;
    background-color: #f0f7ff;
    border: 1px solid #005a9c;
    padding: 8px;
    border-radius: 4px;
    margin: 5px 0 10px 0; /* Spacing inside the info box */
}
/* --- *** END NEW *** --- */


/* --- NEW: Controller Info Box --- */
.controller-info-box {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.8em;
    background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 15px;
    margin-bottom: 20px;
}
.controller-info-box h3 {
    margin: 0 0 10px 0;
    color: #005a9c;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.controller-info-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    column-count: 2; /* Display in two columns */
}
.controller-info-list li {
    margin-bottom: 5px;
}
.controller-info-list strong {
    color: #333;
    display: inline-block;
    width: 160px; /* Align the values */
}

/* --- Static Resource Profile (extends the controller-info-box) --- */
.resource-profile-heading {
    margin: 15px 0 8px 0;
    padding-bottom: 4px;
    color: #005a9c;
    border-bottom: 1px solid #eee;
    font-size: 1em;
}
.resource-profile-note {
    font-size: 0.88em;
    color: #666;
    background: #fff8e1;
    border: 1px solid #ffe89a;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 0 0 10px 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
}
.resource-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin: 0 0 10px 0;
}
.resource-item {
    background: #f8fbff;
    border: 1px solid #cfe2ff;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: "Segoe UI", Tahoma, sans-serif;
}
.resource-item.resource-item-warn {
    background: #fff3cd;
    border-color: #ffe89a;
}
.resource-item .resource-label {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #446;
    margin-bottom: 2px;
}
.resource-item .resource-value {
    font-size: 1em;
    font-weight: 700;
    color: #005a9c;
}
.resource-item .resource-sub {
    display: block;
    font-size: 0.78em;
    font-weight: 400;
    color: #555;
    margin-top: 1px;
}
.task-config-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 0.85em;
    margin-top: 4px;
}
.task-config-table thead tr {
    background: #f0f0f0;
    border-bottom: 2px solid #b0b0b0;
}
.task-config-table th {
    text-align: left;
    padding: 5px 8px;
    color: #333;
    font-weight: 700;
    border: 1px solid #d0d0d0;
}
.task-config-table td {
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    color: #333;
}
.task-config-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.task-config-table tbody tr:nth-child(even) { background: #f8fbff; }
.task-config-table .task-state-active { color: #0f5132; font-weight: 600; }
.task-config-table .task-state-inhibited { color: #842029; font-weight: 700; }
/* --- End Static Resource Profile --- */

/* --- Online Snapshot (from L_CPU_20 AOI) --- */
.online-snapshot-heading { color: #7a3ea3; border-bottom-color: #e6d9f0; }
.online-snapshot-badge {
    display: inline-block;
    font-size: 0.68em;
    font-weight: 700;
    background: #f5edfa;
    color: #7a3ea3;
    border: 1px solid #e6d9f0;
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}
.online-snapshot-note {
    background: #f5edfa;
    border-color: #e6d9f0;
    color: #5a3a72;
}
.snapshot-item { border-color: #e6d9f0; background: #fbf8fd; }
.snapshot-value.snapshot-hi  { color: #9c0006; }
.snapshot-value.snapshot-mid { color: #9c5700; }
.snapshot-value.snapshot-lo  { color: #006100; }

.cpu-breakdown-table,
.memory-detail-table,
.conn-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 0.85em;
    margin-top: 4px;
}
.cpu-breakdown-table thead tr,
.memory-detail-table thead tr,
.conn-detail-table thead tr {
    background: #f0f0f0;
    border-bottom: 2px solid #b0b0b0;
}
.cpu-breakdown-table th, .cpu-breakdown-table td,
.memory-detail-table th, .memory-detail-table td,
.conn-detail-table th, .conn-detail-table td {
    text-align: left;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    color: #333;
}
.cpu-breakdown-table th,
.memory-detail-table th,
.conn-detail-table th { font-weight: 700; border-color: #d0d0d0; }
.cpu-breakdown-table td.num,
.memory-detail-table td.num,
.conn-detail-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cpu-breakdown-table tbody tr:nth-child(even),
.memory-detail-table tbody tr:nth-child(even),
.conn-detail-table tbody tr:nth-child(even) { background: #fbf8fd; }

.cpu-breakdown-table .bar-cell { width: 45%; padding: 4px 8px; }
.cpu-bar {
    height: 10px;
    background: linear-gradient(90deg, #7a3ea3 0%, #a877cb 100%);
    border-radius: 3px;
    min-width: 2px;
}
.memory-detail-table .mem-pct { color: #888; font-size: 0.88em; }
.conn-detail-table .conn-total-row { background: #f0e6ff !important; border-top: 2px solid #b09ac4; }
.conn-detail-table td.snapshot-hi  { color: #9c0006; font-weight: 700; }
.conn-detail-table td.snapshot-mid { color: #9c5700; font-weight: 700; }
.conn-detail-table td.snapshot-lo  { color: #006100; font-weight: 600; }
/* --- End Online Snapshot --- */
/* --- END NEW --- */

.help-link-container {
    text-align: center;
    margin-bottom: 20px;
}

.help-btn {
    display: inline-block;
    background-color: #005a9c;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.help-btn:hover {
    background-color: #003366;
    color: white;
}

/* --- START: Modified Search & New Find Next Button --- */
#search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

#search-box {
    width: 50%;
    padding: 10px;
    font-size: 0.8em;
    border: 1px solid #ccc;
    border-radius: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}

#find-next-btn {
    background-color: #007a7c;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 0.8em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 42px;
    box-sizing: border-box;
}

#find-next-btn:hover {
    background-color: #005a9c;
}

#find-next-btn:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

.highlight-active {
    outline: 3px solid #007a7c;
    box-shadow: 0 0 10px rgba(0, 122, 124, 0.5);
}
/* --- END: Modified Search & New Find Next Button --- */

/* --- START: Sticky FD tag-search bar (shared by both FD tools) --- */
#search-container.fd-search-sticky {
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0 0 16px;
    background: #ffffff;
    border-bottom: 1px solid #d9e2ec;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.fd-search-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    max-width: 1100px;
    margin: 0 auto;
}
#fd-search-input {
    flex: 1 1 280px;
    max-width: 460px;
    padding: 9px 12px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 6px;
}
#fd-search-input:focus {
    outline: none;
    border-color: #007a7c;
    box-shadow: 0 0 0 2px rgba(0,122,124,0.15);
}
.fd-search-count {
    min-width: 66px;
    text-align: center;
    font-size: 0.85em;
    color: #555;
    font-variant-numeric: tabular-nums;
}
.fd-search-btn {
    background: #007a7c;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.85em;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.fd-search-btn:hover:not(:disabled) { background: #005a9c; }
.fd-search-btn:disabled { background: #b7c2cc; cursor: not-allowed; }
.fd-search-return { background: #4a6491; }
.fd-search-return:hover:not(:disabled) { background: #384f74; }

/* Clickable tags in the FD output */
#output .fd-tag {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    border-radius: 2px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
#output .fd-tag:hover {
    background: #eaf3ff;
    border-bottom-color: #3b82f6;
}

/* Rung containing the current active match */
.fd-match-active {
    outline: 3px solid #007a7c;
    box-shadow: 0 0 10px rgba(0, 122, 124, 0.35);
    scroll-margin-top: 84px; /* keep active match clear of the sticky bar */
}

@media print {
    #search-container.fd-search-sticky { display: none !important; }
}
/* --- END: Sticky FD tag-search bar --- */

/* --- START: Code-view tag highlighting (ladder / FBD "which block uses it") --- */
.fd-code-find {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
}
.fd-code-find label {
    font-size: 0.85em;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
}
.fd-code-find input {
    flex: 1;
    min-width: 180px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: Consolas, monospace;
}
.fd-code-find input:focus {
    outline: none;
    border-color: #17a2b8;
    box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.18);
}
.fd-code-hint {
    max-width: 100%;
    margin: 0 0 8px;
    padding: 6px 10px;
    background: #fffdf0;
    border: 1px solid #f0e3a0;
    border-radius: 6px;
    font-size: 0.85em;
    color: #6a5a10;
}
.fd-code-hint:empty { display: none; }
/* SVG text sitting on its yellow backing rect */
text.fd-code-hit { font-weight: 700 !important; fill: #1a1a00 !important; }
rect.fd-code-hl { pointer-events: none; }
mark.fd-code-mark {
    background-color: #fffb00;
    color: #333;
    font-weight: bold;
    padding: 0 1px;
    border-radius: 2px;
}
/* --- END: Code-view tag highlighting --- */

/* --- START: Schneider FBD "Visualize" (shared FBD diagram styles) --- */
.sch-visualize-btn {
    font-size: 0.72em;
    font-weight: 600;
    background: #17a2b8;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 12px;
    margin-left: 10px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color 0.15s ease;
}
.sch-visualize-btn:hover { background: #117a8b; }
.fbd-controls {
    position: sticky; top: 0; z-index: 10;
    background: #1a3a5c; padding: 8px 12px;
    display: flex; gap: 8px; align-items: center;
    border-bottom: 2px solid #00b4d8;
    flex-wrap: wrap;
}
.fbd-controls button {
    padding: 5px 14px; background: #00b4d8; color: #0d2436;
    border: none; border-radius: 4px; cursor: pointer;
    font-weight: bold; font-size: 0.85rem;
}
.fbd-controls span { color: #e0e0e0; font-size: 0.85rem; margin-left: 10px; }
.fbd-svg-wrap {
    overflow: auto; max-height: 60vh;
    background: #fafafa; border: 1px solid #ddd;
}
/* --- END: Schneider FBD "Visualize" --- */

#drop-zone {
    border: 2px dashed #007a7c;
    border-radius: 8px;
    padding: 50px;
    text-align: center;
    background-color: #e6f7f7;
    color: #005a9c;
    font-size: 1.2em;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

#drop-zone.dragover {
    background-color: #cce7e7;
    border-style: solid;
}

.button-container {
    text-align: center;
    margin-bottom: 20px;
}

#export-btn, #pdf-export-btn, #process-btn, #export-errors-btn { /* <-- NEW */
    background-color: #007a7c;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin: 0 5px;
}

#export-btn:hover, #pdf-export-btn:hover, #process-btn:hover, #export-errors-btn:hover { /* <-- NEW */
    background-color: #005a9c;
}

#export-btn:disabled, #pdf-export-btn:disabled, #process-btn:disabled, #export-errors-btn:disabled { /* <-- NEW */
    background-color: #aaa;
    cursor: not-allowed;
}

#pdf-export-btn {
    background-color: #c00;
}
#pdf-export-btn:hover {
    background-color: #a00;
}

/* --- NEW: Error Export Button --- */
#export-errors-btn {
    background-color: #d35400; /* Orange */
}
#export-errors-btn:hover {
    background-color: #a14000;
}
/* --- END NEW --- */


/* --- Rules for the new Process Button --- */
#process-btn {
    background-color: #005a9c; /* Primary blue */
}
#process-btn:hover {
    background-color: #003366;
}
/* --- End of New Rules --- */


#output {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 20px;
    min-height: 100px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Error Summary Box */
#error-summary {
    background-color: #fff0f0;
    border: 1px solid #d00;
    border-top: none; /* MODIFIED */
    border-radius: 0 0 5px 5px; /* MODIFIED */
    padding: 10px 20px;
    margin-bottom: 20px;
    margin-top: 0; /* NEW */
}
#error-summary h2 {
    color: #d00;
    margin-top: 0;
}
#error-summary h3 {
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}
#error-summary ul {
    padding-left: 20px;
    list-style: none;
}
#error-summary li {
    margin-bottom: 5px;
}
#error-summary a {
    color: #005a9c;
    font-weight: bold;
    text-decoration: none;
}
#error-summary a:hover {
    text-decoration: underline;
}

/* --- NEW: Collapsible Error Section --- */
#error-summary-details {
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #d00;
    background-color: #fff0f0;
}
#error-summary-details summary {
    background-color: #fff0f0;
    color: #d00;
    font-weight: bold;
    font-size: 1.2em;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    list-style: none; /* Hide default triangle */
}
#error-summary-details summary::-webkit-details-marker {
    display: none; /* Hide default triangle (Safari) */
}
#error-summary-details summary:before {
    content: '▶ '; /* Closed state */
    font-size: 0.8em;
    margin-right: 5px;
}
#error-summary-details[open] > summary {
    border-bottom: 1px solid #d00;
    border-radius: 5px 5px 0 0;
}
#error-summary-details[open] > summary:before {
    content: '▼ '; /* Open state */
}
/* When details is open, the #error-summary div inside it gets no margin */
#error-summary-details[open] #error-summary {
    margin-bottom: 0;
    border: none; /* Remove border as details tag has it */
}
/* --- END NEW --- */

/* --- NEW: Routine Quick Links --- */
#routine-quick-links {
    background-color: #f0f7ff;
    border: 1px solid #005a9c;
    border-radius: 5px;
    padding: 10px 20px;
    margin-bottom: 20px;
    /* overflow: hidden; */ /* <-- Added to contain negative margins of children */
}
#routine-quick-links h2 {
    color: #005a9c;
    margin-top: 0;
    border-bottom: 1px solid #cce7e7;
    padding-bottom: 5px;
}
#routine-quick-links h3 { /* For filenames */
    color: #333;
    margin: 10px 0 5px 0;
    font-size: 1.1em;
    border-bottom: 1px solid #eee;
}

#routine-quick-links ul {
    padding-left: 0;
    list-style: none;
    margin: 0 0 15px 0;

    /* Responsive columns — count follows window width (not a fixed 8/10) */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 5px 16px;
}

#routine-quick-links li {
    margin-bottom: 5px;
    min-width: 0; /* allow long names to wrap inside the grid cell */
}
#routine-quick-links a {
    color: #005a9c;
    font-weight: bold;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-word;
}
#routine-quick-links a:hover {
    text-decoration: underline;
}

/* ISA-88 hierarchical TOC */
#routine-quick-links .s88-toc-legend {
    font-size: 0.85rem;
    color: #334;
    margin: 0 0 12px 0;
    line-height: 1.35;
}
#routine-quick-links .s88-unit-group {
    border: 1px solid #b8d4ea;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 0 0 14px 0;
    background: #f7fbff;
}
#routine-quick-links .s88-unit-title {
    margin: 0 0 8px 0;
    color: #003d6b;
    font-size: 1.05em;
}
#routine-quick-links .s88-unit-routines {
    margin-bottom: 10px;
}
#routine-quick-links .s88-role-section {
    margin: 8px 0 4px 8px;
    padding-left: 8px;
    border-left: 3px solid #7eb6d9;
}
#routine-quick-links .s88-role-section > h5 {
    margin: 0 0 6px 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #005a9c;
}
#routine-quick-links .s88-role-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: #005a9c;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: middle;
}
#routine-quick-links .s88-role-phase .s88-role-badge { background: #0a7a4a; }
#routine-quick-links .s88-role-em .s88-role-badge { background: #8a5a00; }
#routine-quick-links .s88-role-cm .s88-role-badge { background: #5a5a5a; }
#routine-quick-links .s88-primary {
    color: #0a7a4a;
    font-weight: 700;
    margin-left: 3px;
}
.s88-legend {
    font-size: 0.88rem;
    font-weight: normal;
}
.s88-merged-note {
    font-size: 0.85rem;
    color: #005a9c;
    margin: 0 0 8px 0;
}
.grafcet-phase-pack {
    margin: 8px 0 12px 0;
}
.grafcet-phase-banner {
    font-size: 0.85rem;
    padding: 6px 10px;
    margin: 4px 0;
    border-left: 3px solid #005a9c;
    background: #f0f7ff;
    color: #003d6b;
}
.grafcet-phase-pre { border-left-color: #0a7a4a; }
.grafcet-phase-post { border-left-color: #8a5a00; margin: 12px 0; }
.grafcet-phase-outputs { border-left-color: #5a5a5a; }
.grafcet-phase-monitors {
    margin: 6px 0;
    padding: 6px 10px;
    background: #fff8f8;
    border-left: 3px solid #842029;
}
.grafcet-phase-monitors ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
}
.grafcet-support-list {
    margin: 8px 0 14px 0;
    padding: 8px 12px;
    background: #fafbfc;
    border: 1px solid #d0d7de;
    border-radius: 4px;
}
.grafcet-support-list ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
}
.grafcet-support-gate {
    color: #57606a;
    font-size: 0.85em;
    font-family: Consolas, ui-monospace, monospace;
}
.grafcet-support-fault .grafcet-action-text { color: #842029; }
.equip-phz-diagram {
    margin: 0 0 16px 0;
    padding: 10px 12px;
    background: #f7fbff;
    border: 1px solid #b8d4ea;
    border-radius: 4px;
}
.equip-phz-diagram .grafcet-label {
    margin-bottom: 8px;
}
.program-header.s88-role-phase,
.program-container.s88-role-phase > .program-header { border-left: 4px solid #0a7a4a; padding-left: 8px; }
.program-container.s88-role-em > .program-header { border-left: 4px solid #8a5a00; padding-left: 8px; }
.program-container.s88-role-cm > .program-header { border-left: 4px solid #5a5a5a; padding-left: 8px; }
.program-container.s88-role-unit > .program-header { border-left: 4px solid #005a9c; padding-left: 8px; }

/* --- START: Alternating Program Colors Fix --- */
.routine-program-group {
    /* Apply padding here instead of on h4/ul */
    padding: 10px 20px;
    /* Use negative margins to span full width of parent's padding */
    margin-left: -20px;
    margin-right: -20px;
    /* Fixes column-count issue */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Parent #routine-quick-links has #f0f7ff, so :odd is transparent */

.routine-program-group:nth-of-type(even) {
    background-color: #ffffff; /* White for the "even" stripe */
}

/* Clean up margins now that they are inside the padded box */
#routine-quick-links .routine-program-group h4 {
    margin: 0 0 5px 0; /* Remove top margin */
}
#routine-quick-links .routine-program-group ul {
    margin-bottom: 5px; /* Reduce bottom margin */
}
/* --- END: Alternating Program Colors Fix --- */

/* Critical Error Box */
.critical-error {
    background-color: #fff0f0;
    border: 2px solid #d00;
    border-radius: 8px;
    padding: 20px;
    color: #d00;
    font-weight: bold;
}
.critical-error h2 {
    color: #d00;
    margin-top: 0;
    border-bottom: 1px solid #f7cccc;
}
.critical-error pre {
     background-color: #fadedb;
     padding: 10px;
     border-radius: 4px;
     white-space: pre-wrap;
     word-wrap: break-word;
     color: #333;
     font-weight: normal;
     font-family: "Consolas", "Courier New", monospace;
}


.file-fd-container {
    margin-bottom: 20px;
    /* border-bottom: 2px solid #005a9c; */ /* Replaced by Program headers */
    scroll-margin-top: 20px; /* NEW: Added for quick link scrolling */
}

/* NEW: Added for routine quick link scrolling */
.file-fd-container h2 {
    scroll-margin-top: 20px;
}

.fd-routine-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}
.fd-routine-title {
    flex: 1 1 auto;
    min-width: 12rem;
}
.fd-routine-export-btns {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}
.fd-routine-export-btn {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.3;
    vertical-align: middle;
}
.fd-routine-export-btn.fd-routine-pdf {
    background: #c0392b;
    color: #fff;
    border-color: #a93226;
}
.fd-routine-export-btn.fd-routine-pdf:hover {
    background: #a93226;
}
.fd-routine-export-btn.fd-routine-xlsx {
    background: #148f77;
    color: #fff;
    border-color: #117a65;
}
.fd-routine-export-btn.fd-routine-xlsx:hover {
    background: #117a65;
}

.fd-rung {
    margin-bottom: 1em;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    overflow: hidden;
    scroll-margin-top: 20px;
    page-break-inside: avoid;
}

/* Rockwell FBD sheets inside the Logix FD */
.fd-fbd-sheet .fd-fbd-diagram {
    padding: 8px 12px 12px;
    background: #f7f9fc;
    overflow: auto;
    max-height: 70vh;
}
/* Make sure modal FD rungs don't get the bottom margin */
#modal-rung-fd.fd-rung {
    margin-bottom: 0;
}


/* Search Highlight Style */
.highlight {
    background-color: #fffb00; /* Yellow */
    color: #333;
    font-weight: bold;
}

/* Error Highlighting */
.fd-rung.error-no-comment {
    border: 2px solid #e67e22; /* Orange */
}
.fd-rung.error-no-comment h3 {
    background-color: #fdf3e7;
    color: #e67e22;
}
.fd-rung.error-pattern-mismatch {
    border: 2px solid #e74c3c; /* Red */
}
.fd-rung.error-pattern-mismatch h3 {
    background-color: #fdedeb;
    color: #e74c3c;
}

/* Compact two-column list of source-protected Program / Routine names.
   Columns size to content (not 50% / space-between) so they sit close together. */
.protected-routine-inline {
    margin: 8px 12px 12px;
    font-size: 0.92em;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.protected-routine-list {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 8px 32px;
    justify-content: start;
    list-style: disc;
    list-style-position: outside;
    margin: 6px 12px 12px 1.5em;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.45;
    max-height: 14em;
    overflow: auto;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}
.protected-routine-list li {
    overflow-wrap: anywhere;
}

.fd-rung h3 {
    background-color: #eef;
    padding: 8px 12px;
    margin: 0;
    font-size: 1.1em;
    color: #003366;
    border-bottom: 1px solid #dcdcdc;
}

/* --- START: Visualize Rung Modal & Button --- */
.visualize-btn {
    background-color: #005a9c;
    color: white;
    border: none;
    padding: 3px 8px;
    font-size: 0.8em;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    float: right; /* Aligns button to the right of the header */
    margin-top: -3px; /* Fine-tunes alignment */
    transition: background-color 0.3s ease;
}
.visualize-btn:hover {
    background-color: #003366;
}

/* --- START: PDF Export Hiding --- */
/* This hides any element with .pdf-hide-element
   when the <html> tag has the class .exporting-pdf */
html.exporting-pdf .pdf-hide-element {
    display: none;
}
/* --- END: PDF Export Hiding --- */

.modal-backdrop {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* Dimming backdrop */
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    width: 80%;
    max-width: 900px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    max-height: 90vh; /* Make modal scrollable if content is tall */
    overflow-y: auto;
}

.modal-content h2 {
    margin-top: 0;
    color: #005a9c;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}
.modal-close:hover,
.modal-close:focus {
    color: black;
    text-decoration: none;
}

.modal-content pre {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 15px;
    font-family: "Consolas", "Courier New", monospace;
    white-space: pre-wrap;     /* Wraps the long text */
    word-wrap: break-word; /* Breaks long words */
    max-height: 60vh;      /* Makes the text box scrollable */
    overflow-y: auto;
}
/* --- END: Visualize Rung Modal & Button --- */

.fd-table {
    width: 100%;
    border-collapse: collapse;
}

.fd-table tr:nth-child(even) {
    background-color: #f9f9f9;
}
.fd-table tr.error-line {
    background-color: #fdedeb;
    color: #c00;
    font-weight: bold;
}

.fd-table td {
    padding: 6px 8px;
    vertical-align: top;
    border-bottom: 1px solid #eee;
}

/* --- NEW BRANCH STYLING --- */
.branch-line {
    background-color: #f4f7f6 !important; /* A light grey/blue */
}
.branch-text {
    padding: 4px 8px !important;
    font-weight: bold;
    color: #005a9c;
    font-style: italic;
    text-align: left;
    font-size: 0.85em; /* NEW: Smaller text */
}

.branch-color-A { color: var(--branch-color-A-text); background-color: var(--branch-color-A-bg) !important; }
.branch-color-B { color: var(--branch-color-B-text); background-color: var(--branch-color-B-bg) !important; }
.branch-color-C { color: var(--branch-color-C-text); background-color: var(--branch-color-C-bg) !important; }
.branch-color-D { color: var(--branch-color-D-text); background-color: var(--branch-color-D-bg) !important; }

/* --- NEW: Branch Indentation Styling --- */
.branch-depth-1 > td { padding-left: 20px !important; border-left: 3px solid var(--branch-color-A-border); }
.branch-depth-2 > td { padding-left: 40px !important; border-left: 3px solid var(--branch-color-B-border); }
.branch-depth-3 > td { padding-left: 60px !important; border-left: 3px solid var(--branch-color-C-border); }
.branch-depth-4 > td { padding-left: 80px !important; border-left: 3px solid var(--branch-color-D-border); }
/* --- END NEW --- */
/* --- END BRANCH STYLING --- */

.col-spacer-1 { width: 2%; }
.col-logic-prefix { width: 5%; font-weight: bold; }
.col-logic-op { width: 5%; font-weight: bold; text-align: center; }
.col-text { width: 33%; font-family: "Consolas", "Courier New", monospace; } /* Was 30% */
.col-modifier { width: 5%; font-style: italic; } /* Was 8% */
.col-desc { width: 50%; color: #555; }

/* Back to Top Button */
#back-to-top {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #005a9c;
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9em;
}
#back-to-top:hover {
    background-color: #003366;
}

/* --- NEW: Spinner --- */
#spinner-backdrop {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border: 8px solid #f3f3f3;
    border-top: 8px solid #005a9c;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* --- End Spinner --- */

/* --- Processing progress bar (matches PCS Tag Search style) ---
   Shows "Processing X (N of M)…" plus a fill bar during FD generation.
   Sits inline in the output area, doesn't overlay the page. Independent of
   the spinner backdrop above — the spinner is now used only for very short
   phases like initial pattern parsing. */
.processing-status {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 15px;
    font-size: 0.95em;
    color: #444;
}
.processing-status.busy { border-color: #007bff; color: #0056b3; }
.processing-status.error { border-color: #dc3545; color: #a71d2a; }
.processing-status.done { border-color: #198754; color: #0f5132; }
.processing-status .progress-bar-track {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}
.processing-status .progress-bar-fill {
    height: 100%;
    background: #007bff;
    width: 0%;
    transition: width 0.2s ease;
}
/* --- End Processing progress bar --- */
/* --- NEW: Validator Button Styling --- */

/* This targets both buttons inside the container and adds a little space between them */
.help-link-container .help-btn {
    margin: 0 5px;
}

/* This styles the new validator button with a distinct color */
.validator-btn {
    background-color: #8e44ad; /* Purple */
}
.validator-btn:hover {
    background-color: #703388; /* Darker purple on hover */
    color: white; /* Ensure text stays white */

    /* --- ADD THESE RULES TO YOUR style.css --- */

/* * This is the new "Step 1" state for the drop zone,
 * asking for the patterns.xml file.
 */
#drop-zone.waiting-for-patterns {
    border-color: #007a7c;
    background-color: #e6f7f7;
    color: #005a9c;
}

#drop-zone.waiting-for-patterns.dragover {
    border-color: #005a9c;
    background-color: #e6f0ff;
}

/* * This is the "Step 2" state, once patterns are loaded,
 * asking for the L5X files.
 */
#drop-zone.patterns-loaded {
    border-color: #005a9c;
    background-color: #f0f7ff;
    color: #333;
}

#drop-zone.patterns-loaded.dragover {
    border-color: #003e6f;
    background-color: #e6f0ff;
}

/* * This is the new error state for the drop zone
 * if patterns.xml fails to load or parse.
 */
#drop-zone.patterns-error {
    border-color: #d00;
    background-color: #fff0f0;
    color: #d00;
}
/* --- AGGRESSIVE FONT AND SPACING OVERRIDES --- */

/* 1. Reduce the base font size and line height */
body {
    font-size: 14px;   /* Was 15px */
    line-height: 1.4;  /* NEW: Was 1.6, makes text much denser */
    padding: 10px;     /* Was 15px */
}

/* 2. Reduce the main page title */
h1 {
    font-size: 1.7em; /* Was 1.8em */
    margin-bottom: 0;
}

/* 3. Reduce FD Program/File/Routine headers */
.program-header,
.file-fd-container > h1 {
    font-size: 1.3em;   /* Was 1.4em */
    margin-top: 20px;   /* Was 25px */
    margin-bottom: 10px;
    padding-bottom: 3px;
}

.file-fd-container h2 {
    font-size: 1.1em;   /* Was 1.2em */
    margin-top: 10px;   /* Was 15px */
    margin-bottom: 8px;
}

/* 4. Reduce the Rung Header */
.fd-rung h3 {
    font-size: 0.95em; /* Was 1.0em */
    padding: 5px 8px;  /* Was 6px 10px */
}

/* 5. Reduce the main FD table text (THE MOST IMPORTANT ONE) */
.fd-table td {
    font-size: 0.85em; /* Was 0.9em */
    padding: 4px 6px;   /* Was 5px 8px */
}

/* 6. Reduce the monospace text size */
.col-text,
.controller-info-box {
    font-size: 0.85em; /* Was 0.9em */
}

/* 7. Reduce Controller Info box spacing */
.controller-info-box {
    padding: 8px 12px;
}
.controller-info-list strong {
    width: 120px; /* Was 130px */
}
.controller-info-list li {
    margin-bottom: 3px;
}

/* 8. Reduce padding on main containers */
#drop-zone {
    padding: 25px;      /* Was 30px */
    font-size: 0.9em;   /* Was 1.1em */
    margin-bottom: 15px;
}

#output {
    padding: 10px;      /* Was 15px */
}

.program-container {
    padding: 8px 12px;  /* Was 10px 15px */
    margin-bottom: 15px;
}

/* 9. Reduce Quick Links text and increase density */
#routine-quick-links {
    padding: 8px 15px;
    margin-bottom: 15px;
}
#routine-quick-links ul {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 4px 14px;
}
#routine-quick-links a {
    font-size: 0.85em; /* Was 0.9em */
    font-weight: normal;
}
#routine-quick-links h4 a {
    font-size: 0.95em; /* Was 1.0em */
}
.routine-program-group {
    padding: 8px 15px;
    margin-left: -15px;
    margin-right: -15px;
}

/* 10. Tighter Buttons */
.button-container {
    margin-bottom: 15px;
}
#export-btn, #pdf-export-btn, #process-btn, #export-errors-btn {
    padding: 8px 15px;
    font-size: 0.9em;
}

/* --- END OF OVERRIDES --- */
#export-modal-content {
    width: 60%;
    max-width: 700px;
}

.export-modal-controls {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.export-modal-controls button {
    background-color: #f0f7ff;
    border: 1px solid #005a9c;
    color: #005a9c;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}
.export-modal-controls button:hover {
    background-color: #e6f0ff;
}

#export-selection-tree {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #fdfdfd;
}

.export-file-picker {
    margin: 0 0 12px 0;
    padding: 10px 12px;
    background: #f0f7ff;
    border: 1px solid #005a9c;
    border-radius: 6px;
}
.export-file-picker-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.export-file-picker-sub {
    font-size: 0.8rem;
    color: #555;
    font-weight: normal;
}
.export-file-picker-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}
.export-file-pick-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
    color: #003366;
    cursor: pointer;
}
.export-file-pick-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.export-tree-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    flex-wrap: wrap;
}
.export-tree-tool-btn {
    background: #f0f7ff;
    border: 1px solid #005a9c;
    color: #005a9c;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
.export-tree-tool-btn:hover {
    background: #e6f0ff;
}
.export-tree-hint {
    font-size: 0.8rem;
    color: #666;
}

.export-tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.export-tree-toggle {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #c5d4e4;
    border-radius: 3px;
    background: #fff;
    color: #005a9c;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
}
.export-tree-toggle:hover {
    background: #e8f2fc;
}
.export-tree-row > label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.export-tree-count {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: #888;
    font-weight: normal;
}
.export-tree-children[hidden] {
    display: none !important;
}
.export-tree-children {
    list-style: none;
    padding-left: 22px;
    margin: 4px 0 8px 0;
}

#export-selection-tree ul {
    list-style: none;
    padding-left: 20px;
}

.export-file-group, .export-program-group, .export-routine-item {
    margin-bottom: 5px;
}

.export-file-group > .export-tree-row > label,
.export-program-group > .export-tree-row > label {
    font-weight: bold;
}

.export-file-group > .export-tree-row > label {
    font-size: 1.0em;
    color: #003366;
}

.export-program-group > .export-tree-row > label {
    font-size: 0.9em;
    color: #007a7c;
}

#export-selection-tree input[type="checkbox"] {
    margin-right: 8px;
}

.export-modal-footer {
    margin-top: 20px;
    text-align: right;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.export-modal-footer button {
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}

.confirm-btn {
    background-color: #007a7c;
    color: white;
    margin-left: 10px;
}
.confirm-btn:hover {
    background-color: #005a9c;
}

.cancel-btn {
    background-color: #ccc;
    color: #333;
}
.cancel-btn:hover {
    background-color: #aaa;
}

/* Temporarily hide elements for PDF export */
.pdf-export-hidden {
    display: none !important;
}
/* --- END: New Export Selection Modal --- */
/* --- START: New Zoom Controls Styling --- */
#zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Space between items */
    margin: 10px 0 20px 0;
}

#zoom-container button {
    background-color: #f0f7ff;
    border: 1px solid #005a9c;
    color: #005a9c;
    font-weight: bold;
    font-size: 1.0em; /* Make + and - bigger */
    line-height: 1;
    width: 40px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

#zoom-container button:hover {
    background-color: #e6f0ff;
    border-color: #003366;
}

#zoom-container button:disabled {
    background-color: #f0f0f0;
    color: #aaa;
    border-color: #ccc;
    cursor: not-allowed;
}

#zoom-container #zoom-reset {
    width: auto;
    padding: 0 12px;
    font-size: 0.9em;
}

#zoom-level {
    font-weight: bold;
    color: #333;
    width: 60px;
    text-align: center;
    font-size: 1.1em;
}
/* --- END: New Zoom Controls Styling --- */
/* NEW – Program & Routine Descriptions */
.fd-program-description,
.fd-routine-description {
    font-size: 0.85em;
    font-style: italic;
    color: #444;
    margin: -8px 0 10px 5px;
    padding-left: 5px;
}

.routine-description {
    font-size: 0.9em;
    font-style: italic;
    color: #444;
    margin: 0 0 10px 0;
    padding-left: 1.0px;
}


/* --- EXTRA SMALL FONT OVERRIDES (GLOBAL SHRINK) --- */
body {
    font-size: 10px !important;
}

h1, h2, h3, h4 {
    font-size: 12px !important;
}

.fd-table td, .fd-table th {
    font-size: 10px !important;
    padding: 1px 2px !important;
}

.rung-header-text {
    font-size: 11px !important;
}

.program-description,
.routine-description {
    font-size: 10px !important;
}

.col-text, .col-desc, .col-logic-prefix {
    font-size: 10px !important;
}

/* GLOBAL FONT SIZE CONTROL */
body,
#fd-output-container,
#fd-output-container * {
    font-size: 11px !important;
}



/* ============================================================
   Bingo / Matrix Bit Array Tables (parser-style, isolated)
   ============================================================ */

/* Root wrapper so nothing leaks into the rest of the FD page */
.bingo-root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    color: #333;
}

/* Section title */
.bingo-root .bingo-section > h3 {
    margin: 0 0 8px;
    font-size: 1.0rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 4px;
    font-weight: 600;
}

/* Card around each array */
.bingo-root .bingo-array-block {
    margin: 10px 0 22px 0;
    padding: 8px 10px 10px;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Tag name + description line */
.bingo-root .bingo-array-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Scroll if too wide */
.bingo-root .bingo-array-table-wrapper {
    overflow-x: auto;
}

/* The bit table itself */
.bingo-root table.bingo-array-table {
    border-collapse: collapse;
    table-layout: fixed;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.8rem;
    width: max-content;
    min-width: 100%;
}

/* Headers and cells */
.bingo-root table.bingo-array-table th,
.bingo-root table.bingo-array-table td {
    border: 1px solid #ccc;
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
}

/* Header row */
.bingo-root table.bingo-array-table th {
    background: #f0f0f0;
    font-weight: 600;
}

/* DINT index column */
.bingo-root table.bingo-array-table td:first-child {
    background: #f7f7f7;
    font-weight: 600;
}

/* Bit values */
.bingo-root .bit-zero {
    color: #666;
    background: #ffffff;
}

.bingo-root .bit-one {
    color: #c00;
    font-weight: 700;
    background: #ffe8e8;
}

/* Final numeric DINT 'Value' column */
.bingo-root .bingo-value-cell {
    font-weight: 600;
    color: #444;
}



/* ============================================
   PROCESSOR PICKER — match PCS I/O filter-controls
   (pcs_io_data_viewer_style.css .filter-controls / .filter-group / select)
   One native <select>: change shows that PLC's FD. Open list is OS-themed
   (Windows inverted hover is expected).
   ============================================ */
#file-selection-tabs.filter-controls,
.processor-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 15px 0 20px 0;
    padding: 18px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    position: relative;
    z-index: 40;
}

#file-selection-tabs .filter-group {
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 420px;
    flex: 1 1 280px;
}

#file-selection-tabs .filter-group label,
.processor-picker-label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
    font-size: 0.88em;
}

.processor-picker-select {
    padding: 8px 10px;
    font-size: 0.95em;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    color-scheme: light;
    cursor: pointer;
    width: 100%;
}

.processor-picker-select:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15);
}

.file-tab-btn {
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 500;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.file-tab-btn:hover {
    background-color: #e0e0e0;
}

.file-tab-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-weight: bold;
}

/* PATCH FOR FD LOOK AND FEEL */
#fd-results-container {
    padding-left: 40px; /* Offset for Column A/B feel */
    padding-top: 40px;  /* Offset for Row 1-3 feel */
    background-color: #f8f9fa;
}

.fd-table {
    border-collapse: collapse;
    margin-top: 20px;
}

/* Header Row (Column C-G) */
.fd-table thead th {
    background-color: #34495e; /* Dark Blue */
    color: #ffffff;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #2c3e50;
}

/* Rung Header Row */
.rung-header-row {
    background-color: #ffff00 !important; /* Yellow */
    font-weight: bold;
    color: #000000;
}

.rung-header-row td {
    border: 1px solid #000000;
    text-align: left;
    padding: 8px;
}

/* Data Row Styling */
.fd-table td {
    padding: 6px;
    border: 1px solid #dee2e6;
}

.no-description {
    color: #b4b4b4;
    font-style: italic;
}
/* --- Ladder (graphical) rung view ---
   Symbol/wire styles are embedded inside the generated SVG (see renderRungLadderSVG
   in fd_app.js) so the diagram renders correctly even if this file is cached.
   Only the container styles live here. */
.rung-graphic {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 4px;
    margin-bottom: 6px;
}
.ladder-svg { display: block; min-width: 300px; }
.ladder-msg { color: #777; font-style: italic; padding: 10px; }