/* ============================================================
   Modbus DB Converter — scoped styles
   Ported from the standalone modbusdb_converter app. Every rule is scoped under
   .converter and the converter's design tokens live on .converter (not :root), so
   this self-contained dark theme cannot leak into or clash with the site's tokens
   (which also define --border, --accent, --muted, etc. with different meanings).
   The .converter wrapper also stands in for the old .content: it supplies the page
   padding and max-width inside the admin layout's main column.
   ============================================================ */
.converter {
    --bg: #0f1720;
    --panel: #182430;
    --panel-2: #1f2f3d;
    --border: #2b3d4d;
    --text: #e6edf3;
    --muted: #9fb1c1;
    --accent: #3fb0ff;
    --accent-2: #2b8bd6;
    --good: #37c871;
    --bad: #ff5c5c;
    --warn: #ffb547;

    color: var(--text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    max-width: 1100px;
    padding: 1.75rem 2rem 4rem;
}

@media (max-width: 820px) {
    .converter { padding: 1.25rem 1rem 3rem; }
}

.converter h1 { font-size: 1.55rem; margin: 0 0 .35rem; color: var(--text); }
.converter h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; color: var(--text); }
.converter h3 { color: var(--text); }
.converter .subtitle { color: var(--muted); margin: 0 0 1.5rem; }

.converter .card {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 10px; padding: 1.25rem 1.35rem; margin-bottom: 1.25rem;
}
.converter .card h2:first-child { margin-top: 0; }

.converter .step-badge {
    display: inline-block; background: var(--accent-2); color: #fff;
    border-radius: 999px; font-size: .72rem; font-weight: 600;
    padding: .12rem .6rem; margin-bottom: .5rem; letter-spacing: .04em;
}

.converter label { display: block; font-size: .85rem; color: var(--muted); margin: .75rem 0 .3rem; }
.converter input[type=text],
.converter input[type=password],
.converter input[type=number],
.converter select,
.converter textarea {
    width: 100%; box-sizing: border-box;
    background: var(--panel-2); border: 1px solid var(--border);
    color: var(--text); border-radius: 6px; padding: .5rem .65rem; font-size: .92rem;
}
.converter input:focus,
.converter select:focus,
.converter textarea:focus { outline: none; border-color: var(--accent); }
.converter select option { background: var(--panel-2); }

.converter .btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--accent-2); color: #fff; border: none;
    border-radius: 6px; padding: .55rem 1rem; font-size: .92rem;
    cursor: pointer; text-decoration: none;
}
.converter .btn:hover { background: var(--accent); }
.converter .btn:disabled { opacity: .5; cursor: not-allowed; }
.converter .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
.converter .btn-ghost:hover { background: var(--panel-2); }
.converter .btn-danger { background: transparent; border: 1px solid var(--bad); color: var(--bad); }
.converter .btn-danger:hover { background: rgba(255,92,92,.12); }
.converter .btn-sm { padding: .3rem .6rem; font-size: .82rem; }

.converter .row { display: flex; gap: 1rem; flex-wrap: wrap; }
.converter .row > * { flex: 1; min-width: 200px; }

.converter .alert { border-radius: 6px; padding: .7rem .9rem; margin: .75rem 0; font-size: .9rem; }
.converter .alert-info { background: rgba(63,176,255,.12); border: 1px solid var(--accent-2); }
.converter .alert-good { background: rgba(55,200,113,.12); border: 1px solid var(--good); color: #b8f5d0; }
.converter .alert-bad { background: rgba(255,92,92,.12); border: 1px solid var(--bad); color: #ffc9c9; }
.converter .alert-warn { background: rgba(255,181,71,.12); border: 1px solid var(--warn); color: #ffe3b0; }

.converter .file-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.converter .file-list li {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .7rem; border: 1px solid var(--border);
    border-radius: 6px; margin-bottom: .4rem; background: var(--panel-2);
}
.converter .file-list .fname { flex: 1; font-family: 'Cascadia Code', monospace; font-size: .87rem; }
.converter .file-list .meta { color: var(--muted); font-size: .78rem; }
.converter .file-list li.selected { border-color: var(--accent); }

.converter .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: .75rem; }
.converter table.grid { border-collapse: collapse; width: 100%; font-size: .84rem; }
.converter table.grid th, .converter table.grid td {
    border-bottom: 1px solid var(--border); padding: .4rem .6rem; text-align: left;
    white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.converter table.grid th { background: var(--panel-2); position: sticky; top: 0; color: var(--muted); font-weight: 600; }
.converter table.grid tr:hover td { background: rgba(63,176,255,.05); }

.converter .map-grid { display: grid; grid-template-columns: 1.1fr 1.2fr 1.2fr 1fr; gap: .5rem 1rem; align-items: center; }
.converter .map-grid .tcol { font-weight: 600; font-size: .9rem; }
.converter .map-grid select, .converter .map-grid input[type=text] { margin: 0; }
.converter .map-grid .maph {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: .35rem;
}
.converter .map-grid select:disabled { opacity: .45; cursor: not-allowed; }

.converter .fill-summary { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; }
.converter .chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--panel-2); border: 1px solid var(--border);
    border-radius: 999px; padding: .2rem .65rem;
}

.converter .snippet {
    background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
    padding: .7rem .85rem; font-family: 'Cascadia Code', monospace; font-size: .78rem;
    overflow-x: auto; white-space: pre; margin: .5rem 0;
}

.converter .muted { color: var(--muted); }
.converter .mono { font-family: 'Cascadia Code', monospace; }
.converter .spinner {
    width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff; border-radius: 50%; display: inline-block;
    animation: converter-spin .7s linear infinite;
}
@keyframes converter-spin { to { transform: rotate(360deg); } }

/* Collapsible folder groups in the extracted-file lists. */
.converter .folder { border: 1px solid var(--border); border-radius: 8px; margin-bottom: .6rem; background: var(--panel-2); }
.converter .folder > summary {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .75rem; cursor: pointer; font-size: .9rem;
}
.converter .folder > summary::-webkit-details-marker { display: none; }
.converter .folder > summary::before { content: '▸'; color: var(--muted); }
.converter .folder[open] > summary::before { content: '▾'; }
.converter .folder > summary .meta { color: var(--muted); font-size: .78rem; margin-right: auto; }
.converter .folder .file-list { padding: 0 .6rem .6rem; margin: 0; }
.converter .folder .file-list li { background: var(--panel); }

/* Merge / Database tools: source tabs and the option checklist. */
.converter .tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; }
.converter .tab {
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--muted); padding: .5rem .85rem; font-size: .9rem; cursor: pointer;
}
.converter .tab:hover { color: var(--text); }
.converter .tab.active { color: var(--text); border-bottom-color: var(--accent); }

.converter .opt-list { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.converter .opt {
    display: flex; align-items: flex-start; gap: .6rem;
    margin: 0; padding: .6rem .75rem; font-size: .88rem; color: var(--text);
    border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); cursor: pointer;
}
.converter .opt:hover { border-color: var(--accent-2); }
.converter .opt input[type=checkbox] { width: auto; margin-top: .15rem; flex: none; }
.converter .opt .muted { font-size: .8rem; }

.converter .pages-ok, .converter .pages-bad { font-size: .82rem; margin: .4rem 0 0; }
.converter .pages-ok { color: var(--good); }
.converter .pages-bad { color: var(--bad); }

.converter .big-drop {
    border: 2px dashed var(--border); border-radius: 10px;
    padding: 1.5rem; text-align: center; background: var(--panel-2);
}

@media (max-width: 900px) {
    .converter .map-grid { grid-template-columns: 1fr 1fr; }
    .converter .map-grid .maph { display: none; }
}
@media (max-width: 720px) {
    .converter .map-grid { grid-template-columns: 1fr; }
}