/* ============================================================================
   ChannelBuddy theme — "compact light pro"
   One accent, hairline borders, dense controls. Loaded after Bootstrap +
   DataTables and overrides both; no build step.
   ========================================================================== */

:root {
    --cb-accent: #3b5bdb;
    --cb-accent-soft: #eef1fc;
    --cb-text: #1f2329;
    --cb-muted: #6b7280;
    --cb-border: #e3e6ea;
    --cb-panel: #f8f9fa;
    --cb-hover: #f4f6f8;
    --cb-danger: #c92a2a;
    --cb-radius: 6px;
    --cb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --cb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* DataTables paints row selection itself (inset box-shadow + text color)
       from these rgb-triplet variables — retheme it at the source instead of
       fighting its selectors. Default was Bootstrap blue + WHITE text, which
       is unreadable on a light theme. */
    --dt-row-selected: 219, 226, 248;        /* soft accent fill (#dbe2f8) */
    --dt-row-selected-text: 31, 35, 41;      /* --cb-text                  */
    --dt-row-selected-link: 59, 91, 219;     /* --cb-accent                */
}

body {
    font-family: var(--cb-font);
    font-size: 13.5px;
    color: var(--cb-text);
    background: #fff;
}

/* ---- navbar: white with a hairline, accent brand ------------------------ */
.navbar.bg-dark {
    background: #fff !important;
    border-bottom: 1px solid var(--cb-border);
    padding-top: .35rem;
    padding-bottom: .35rem;
}
.navbar .navbar-brand {
    color: var(--cb-text) !important;
    font-weight: 650;
    font-size: 15px;
    letter-spacing: .01em;
}
.navbar .navbar-brand::before {
    content: "";
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--cb-accent);
    margin-right: 8px;
    vertical-align: 1px;
}
.navbar .nav-link {
    color: var(--cb-muted) !important;
    font-size: 13px;
    font-weight: 500;
    padding: .3rem .65rem !important;
    border-radius: var(--cb-radius);
}
.navbar .nav-link:hover { color: var(--cb-text) !important; background: var(--cb-hover); }
.navbar-toggler { border-color: var(--cb-border); }

/* ---- headings / breadcrumb ---------------------------------------------- */
h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 0; }
h5 { font-size: 14px; font-weight: 600; }
.breadcrumb { font-size: 12px; margin-bottom: .35rem; }
.breadcrumb a { color: var(--cb-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--cb-accent); }
.breadcrumb-item.active { color: var(--cb-muted); }

/* ---- buttons: compact ghosts; one solid accent for the primary action --- */
.btn {
    font-size: 12.5px;
    font-weight: 500;
    padding: .28rem .7rem;
    border-radius: var(--cb-radius);
    line-height: 1.45;
    box-shadow: none !important;
}
.btn-sm { font-size: 12px; padding: .18rem .5rem; }

/* Neutral ghost: secondary, light, outline-*, and DataTables' own buttons */
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary,
div.dt-buttons .btn, button.dt-button {
    background: #fff;
    border: 1px solid #d4d8dd;
    color: #3a4048;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, div.dt-buttons .btn:hover, button.dt-button:hover {
    background: var(--cb-hover);
    border-color: var(--cb-accent);
    color: var(--cb-accent);
}

/* Primary action (Build .rdt, confirm buttons): solid accent */
.btn-primary, .btn-warning, .btn-success {
    background: var(--cb-accent);
    border: 1px solid var(--cb-accent);
    color: #fff;
}
.btn-primary:hover, .btn-warning:hover, .btn-success:hover {
    background: #3450c4;
    border-color: #3450c4;
    color: #fff;
}

/* Destructive stays quiet until hovered */
.btn-danger, .btn-outline-danger {
    background: #fff;
    border: 1px solid #d4d8dd;
    color: var(--cb-danger);
}
.btn-danger:hover, .btn-outline-danger:hover {
    background: var(--cb-danger);
    border-color: var(--cb-danger);
    color: #fff;
}

.btn:disabled { opacity: .45; }
.dropdown-menu {
    font-size: 12.5px;
    border: 1px solid var(--cb-border);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(20, 24, 32, .08);
    padding: .25rem;
}
.dropdown-item { border-radius: 4px; padding: .3rem .6rem; }
.dropdown-item:hover { background: var(--cb-accent-soft); color: var(--cb-accent); }

/* ---- forms ---------------------------------------------------------------- */
.form-control, .form-select {
    font-size: 13px;
    padding: .3rem .55rem;
    border-color: #d4d8dd;
    border-radius: var(--cb-radius);
}
.form-control:focus, .form-select:focus {
    border-color: var(--cb-accent);
    box-shadow: 0 0 0 3px rgba(59, 91, 219, .12);
}
label, .form-label { font-size: 12px; color: var(--cb-muted); font-weight: 500; }
.form-check-input:checked { background-color: var(--cb-accent); border-color: var(--cb-accent); }

/* ---- tables: dense rows, quiet chrome ------------------------------------ */
.table { font-size: 13px; margin-bottom: .5rem; }
.table > :not(caption) > * > * { padding: .32rem .55rem; }
.table thead th {
    background: var(--cb-panel);
    color: var(--cb-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--cb-border);
    white-space: nowrap;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fbfcfd; box-shadow: none; }
.table tbody tr:hover > * { background: var(--cb-hover); }
/* Row selection is themed via the --dt-row-selected* variables in :root;
   no selector overrides here (DataTables' own rules then do the right
   thing for plain cells, hover state, and links inside selected rows). */
/* numbers line up */
.table tbody td { font-variant-numeric: tabular-nums; }

/* VFO rows: quiet fixed-row look */
tr.vfo-row > * { background: #f3f4f6 !important; color: var(--cb-muted); }

/* ---- DataTables chrome ---------------------------------------------------- */
.dt-search input { width: 180px; }
.dt-search label, .dt-info, .dt-paging { font-size: 12px; color: var(--cb-muted); }
.dt-paging .dt-paging-button { font-size: 12px; padding: .2rem .55rem; }
div.dt-container .dt-paging .dt-paging-button.current {
    background: var(--cb-accent);
    border-color: var(--cb-accent);
    color: #fff !important;
}
div.dt-buttons { gap: .25rem; display: inline-flex; }
.dt-layout-row { margin: .35rem 0 !important; }

/* ---- tabs: underline style ------------------------------------------------ */
.cb-tabs {
    border-bottom: 1px solid var(--cb-border);
    gap: .25rem;
    /* Pin the section tabs to the top of the viewport while scrolling long
       tables. The page navbar is not fixed, so it scrolls away and the tabs
       take its place at top:0; the solid background keeps table rows from
       showing through. z-index matches Bootstrap's .sticky-top. */
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
}
.cb-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--cb-muted);
    font-size: 13px;
    font-weight: 550;
    padding: .45rem .8rem;
    background: none;
}
.cb-tabs .nav-link:hover { color: var(--cb-text); border-bottom-color: #cfd4da; }
.cb-tabs .nav-link.active {
    color: var(--cb-accent);
    border-bottom-color: var(--cb-accent);
    background: none;
}
.tab-content { padding-top: .75rem; }
.cb-tab-hint { font-size: 12px; color: var(--cb-muted); margin-bottom: .6rem; }

/* Pin the table toolbar row (New/Edit/Delete buttons + Search) directly under
   the sticky section tabs while scrolling a long, unpaginated table. The row is
   tagged .cb-sticky-toolbar in JS (robust against the DataTables layout markup);
   the top offset is the live .cb-tabs height (--cb-toolbar-top, JS-set, with a
   fallback). z-index sits just under .cb-tabs (1020). */
#sectionTabContent .cb-sticky-toolbar {
    position: sticky;
    top: var(--cb-toolbar-top, 37px);
    z-index: 1019;
    background: #fff;
    margin: 0 0 .35rem 0 !important;   /* no top margin so it pins flush */
    padding: .4rem 0;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .18);
}

/* ---- modals (the remaining true dialogs) ---------------------------------- */
.modal-content {
    border: 1px solid var(--cb-border);
    border-radius: 10px;
    box-shadow: 0 16px 48px rgba(20, 24, 32, .16);
}
.modal-header { padding: .7rem 1rem; border-bottom: 1px solid var(--cb-border); }
.modal-title { font-size: 14px; font-weight: 600; }
.modal-body { padding: .9rem 1rem; }
.modal-footer { padding: .55rem 1rem; border-top: 1px solid var(--cb-border); }

/* ---- DataTables Editor form: compact two-column grid ------------------------
   Fields tagged className:'cb-half' sit two-up; untagged fields span the full
   width. Labels stack above inputs (the bs5 side-label cols are neutralized)
   so half-width cells stay readable. Editor's show/hide of fields (the
   channel type toggle) just collapses grid cells. */
div.DTED div.DTE_Form_Content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
}
div.DTED div.DTE_Field {
    grid-column: span 4;
    display: block;          /* neutralize .row flex */
    margin: 0 0 .55rem;
}
div.DTED div.DTE_Field.cb-half { grid-column: span 2; }
div.DTED div.DTE_Field.cb-quarter { grid-column: span 1; }
div.DTED div.DTE_Field > label.col-form-label {
    width: 100%;             /* neutralize .col-lg-4 */
    padding: 0 0 .12rem;
    font-size: 12px;
    color: var(--cb-muted);
    font-weight: 500;
}
div.DTED div.DTE_Field > div.DTE_Field_Input {
    width: 100%;             /* neutralize .col-lg-8 */
}
@media (max-width: 575px) {
    div.DTED div.DTE_Form_Content { grid-template-columns: repeat(2, 1fr); }
    div.DTED div.DTE_Field, div.DTED div.DTE_Field.cb-half { grid-column: span 2; }
    div.DTED div.DTE_Field.cb-quarter { grid-column: span 1; }
}

div.DTE_Field label { font-size: 12px; color: var(--cb-muted); }
div.DTE_Field input, div.DTE_Field select { font-size: 13px; }
div.DTE_Form_Buttons button { margin-left: .35rem; }

/* Foldable channel-modal sections (DMR / NXDN) and the nested Advanced groups.
   A <details> spans all 4 grid columns; its body is its own 4-col grid so the
   moved .DTE_Field cells keep their cb-half (span 2) / cb-quarter (span 1). */
div.DTED details.cb-ch-section {
    grid-column: 1 / -1;
    margin: .35rem 0 .55rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: .1rem;
}
div.DTED details.cb-ch-section > summary,
div.DTED details.cb-ch-adv > summary {
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .4rem;
}
div.DTED details.cb-ch-section > summary::-webkit-details-marker,
div.DTED details.cb-ch-adv > summary::-webkit-details-marker { display: none; }
/* a rotating chevron drawn from a border triangle */
div.DTED details.cb-ch-section > summary::before,
div.DTED details.cb-ch-adv > summary::before {
    content: "";
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2.5px;
    transform: rotate(-45deg);
    transition: transform .12s ease;
    margin-right: .1rem;
}
div.DTED details.cb-ch-section[open] > summary::before,
div.DTED details.cb-ch-adv[open] > summary::before { transform: rotate(45deg); }
div.DTED details.cb-ch-section > summary {
    font-weight: 600;
    font-size: 13px;
    color: var(--cb-text, inherit);
    padding: .45rem 0 .35rem;
    letter-spacing: .01em;
}
div.DTED details.cb-ch-section > .cb-ch-grid,
div.DTED details.cb-ch-adv > .cb-ch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
    padding-top: .3rem;
}
/* nested "Advanced" group (inside DMR, and the general Advanced) */
div.DTED details.cb-ch-adv {
    grid-column: 1 / -1;
    margin: .15rem 0 .35rem;
}
div.DTED details.cb-ch-adv > summary {
    font-weight: 500;
    font-size: 12px;
    color: var(--cb-muted);
    padding: .3rem 0;
}
@media (max-width: 575px) {
    div.DTED details.cb-ch-section > .cb-ch-grid,
    div.DTED details.cb-ch-adv > .cb-ch-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Radio fields (e.g. Timeslot): options sit side by side, not stacked.
   Editor renders each option as <div><input type=radio><label></div>. */
div.DTE_Field_Type_radio div.DTE_Field_Input div:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: .15rem 1.4rem 0 0;
}
div.DTE_Field_Type_radio input[type="radio"] { margin: 0; }
div.DTE_Field_Type_radio div.DTE_Field_Input label {
    margin: 0;
    font-size: 13px;
    color: inherit;
}

/* cbToggle: a Bootstrap switch sized to fill a select's height so it lines
   up with the adjacent fields in the two-column editor grid. */
div.DTE_Field_Type_cbToggle div.DTE_Field_Input { width: 100%; }
div.DTE_Field_Type_cbToggle .form-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: calc(1.5em + .75rem + 2px);   /* = Bootstrap .form-select height */
    margin: 0;
    padding-left: 0;
}
div.DTE_Field_Type_cbToggle .form-switch .form-check-input {
    width: 2.4em;
    height: 1.3em;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
div.DTE_Field_Type_cbToggle .form-check-label {
    margin: 0;
    font-size: 13px;
    color: inherit;
    cursor: pointer;
}

/* ---- alerts ----------------------------------------------------------------- */
.alert { font-size: 13px; padding: .55rem .8rem; border-radius: var(--cb-radius); }

/* ---- misc ------------------------------------------------------------------- */
.text-muted, .small { color: var(--cb-muted) !important; }
code { color: var(--cb-accent); background: var(--cb-accent-soft); padding: 1px 4px; border-radius: 4px; }
.progress { background: var(--cb-panel); }
.progress-bar { background-color: var(--cb-accent); }

/* ---- cbRange: slider + readout (scan-list timing fields) ------------------ */
.cb-range { display: flex; align-items: center; gap: .6rem; }
.cb-range input[type="range"] { flex: 1; accent-color: var(--cb-accent); }
.cb-range input[type="range"]:disabled { opacity: .4; }
.cb-range-value {
    min-width: 3.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--cb-text);
}

/* General Settings editor (sub-tabbed metadata-driven form under Settings). */
.cb-subtabs { gap: .25rem; flex-wrap: wrap; }
.cb-subtabs .nav-link { padding: .2rem .6rem; font-size: 12.5px; }
#gs-root .gs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem 1.5rem;
    max-width: 1000px;
}
@media (max-width: 760px) { #gs-root .gs-grid { grid-template-columns: 1fr; } }
#gs-root .gs-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;   /* control column lines up across every widget */
    align-items: center;
    gap: .5rem;
}
#gs-root .gs-label { font-size: 12.5px; margin: 0; text-align: right; color: var(--cb-text); }
#gs-root .gs-control { min-width: 0; }
#gs-root .gs-switch {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: calc(1.5em + .5rem + 2px);
    margin: 0;
    padding-left: 0;
}
#gs-root .gs-switch .form-check-input { width: 2.2em; height: 1.2em; margin: 0; flex: 0 0 auto; cursor: pointer; }
#gs-root .gs-toggle-state { font-size: 12px; margin: 0; cursor: pointer; color: inherit; }
#gs-root .gs-seg { width: 100%; }
#gs-root .gs-seg .btn { font-size: 11.5px; padding: .15rem .4rem; }
#gs-root .gs-radios {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1rem .7rem;
    min-height: calc(1.5em + .5rem + 2px);
}
#gs-root .gs-radios .form-check {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    min-height: auto;
    padding-left: 0;
}
#gs-root .gs-radios .form-check-input { margin: 0; flex: 0 0 auto; cursor: pointer; }
#gs-root .gs-radios .form-check-label { font-size: 12.5px; cursor: pointer; white-space: nowrap; }
#gs-root .gs-overridden .gs-label { font-weight: 600; }
#gs-root .gs-overridden .gs-label::after { content: " \2022"; color: var(--cb-accent); }
#gs-root .gs-disabled { opacity: .5; }
#gs-root .gs-combo { position: relative; }
#gs-root .gs-combo-menu {
    position: absolute;
    z-index: 20;
    left: 0; right: 0; top: 100%;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}
#gs-root .gs-combo-item { padding: .2rem .5rem; font-size: 12.5px; cursor: pointer; }
#gs-root .gs-combo-item:hover { background: var(--cb-accent); color: #fff; }

/* Radio IDs: a comfortably wide "Apply to all channels" action button. */
.cb-apply-rid { white-space: nowrap; min-width: 200px; }

/* Scan List: keep the Name column on one line (auto-widens to the longest name). */
#scan-lists-table th:first-child,
#scan-lists-table td:first-child { white-space: nowrap; min-width: 150px; }