/* SpaceX-inspired dark theme (Bootstrap 5.3 overrides) */
[data-bs-theme=dark] {
    --bs-body-bg: #0b0b0b;
    --bs-body-color: #e6e6e6;
    --bs-secondary-bg: #141414;
    --bs-tertiary-bg: #1b1b1b;
    --bs-border-color: #2a2a2a;
    --bs-emphasis-color: #fff;
    --bs-link-color: #fff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: #b3b3b3;
    --bs-link-hover-color-rgb: 179, 179, 179;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-body-font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-weight: 300;
}

html, body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6,
.nav-link, .btn, .card-header, th, .form-label {
    text-transform: uppercase;
    letter-spacing: .12em;
}

h1, h2, h3 { font-weight: 500; }
h4, h5, h6, th, .form-label, .card-header { font-weight: 500; }
.form-label, th { font-size: .75rem; color: #9a9a9a; }

/* Buttons: ghost white */
.btn { font-size: .75rem; padding: .5rem 1.25rem; }
.btn-sm { padding: .3rem .8rem; font-size: .7rem; }
.btn-primary, .btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #e6e6e6;
    --bs-btn-active-border-color: #e6e6e6;
    --bs-btn-disabled-color: #777;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #444;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

/* Cards */
.card {
    --bs-card-bg: #111;
    --bs-card-border-color: #222;
    --bs-card-cap-bg: transparent;
}
.card-header { font-size: .8rem; border-bottom-color: #222; }

/* Forms */
.form-control, .form-select {
    background-color: #0f0f0f;
    border-color: #333;
    color: #fff;
}
.form-control:focus, .form-select:focus {
    background-color: #0f0f0f;
    border-color: #fff;
    color: #fff;
    box-shadow: none;
}
.form-check-input:checked { background-color: #fff; border-color: #fff; }
[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #161616;
    --bs-table-striped-bg: #121212;
    --bs-table-border-color: #222;
}

/* Legacy light helpers -> dark */
[data-bs-theme=dark] .bg-light,
[data-bs-theme=dark] .bg-white { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); }
[data-bs-theme=dark] .text-dark { color: var(--bs-body-color) !important; }
[data-bs-theme=dark] .table-light { --bs-table-bg: #1b1b1b; --bs-table-color: #e6e6e6; }

/* Nav */
.sidebar .nav-link, .nav-item .nav-link {
    font-size: .75rem;
    color: #bdbdbd;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
    color: #fff;
    background: transparent;
}

/* Modals / dropdowns */
.modal-content, .dropdown-menu { background-color: #111; border-color: #2a2a2a; }

/* Readability */
[data-bs-theme=dark] label,
[data-bs-theme=dark] .col-form-label,
[data-bs-theme=dark] .form-check-label {
    color: #cfcfcf !important;
}
[data-bs-theme=dark] .col-form-label-sm { font-size: .8rem; }
[data-bs-theme=dark] .form-check-input:disabled ~ .form-check-label { color: #8a8a8a !important; }
[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] input[type=number],
[data-bs-theme=dark] input[type=text] {
    background-color: #161616 !important;
    color: #fff !important;
    border: 1px solid #444;
}
[data-bs-theme=dark] .form-control::placeholder { color: #777; }
[data-bs-theme=dark] .input-group-text {
    background-color: #222;
    border-color: #444;
    color: #cfcfcf;
}
[data-bs-theme=dark] .form-check-input { border-color: #666; background-color: #161616; }
[data-bs-theme=dark] .card-header { color: #fff; }
[data-bs-theme=dark] .text-primary { color: #6cc4ff !important; }
[data-bs-theme=dark] a:not(.btn):not(.nav-link) { color: #6cc4ff; }

/* Configurator header: keep checkboxes + buttons on one line */
.config-header .report-options .form-check-inline { margin-right: .75rem; }
.config-header .report-options .form-check-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}
.config-header .report-options .btn { white-space: nowrap; }

/* Configurator model string: compact segments so they fit on one line */
.model-string { flex-wrap: wrap; row-gap: .25rem; }
.model-string > .col-auto { flex: 0 0 auto; width: auto; }
.model-string > .col-auto.fs-5 { font-size: .9rem !important; margin: 0 .1rem !important; line-height: 32px; }
.model-string .btn {
    font-size: .9rem !important;
    min-height: 32px !important;
    min-width: 24px !important;
    padding: .15rem .4rem;
    letter-spacing: .04em;
}

.model-string-builder { row-gap: .25rem; }
.model-string-builder > span.fs-5 { font-size: .9rem !important; margin: 0 .1rem !important; }
.model-string-builder .btn {
    font-size: .9rem !important;
    min-height: 32px !important;
    min-width: 24px !important;
    padding: .15rem .4rem;
    letter-spacing: .04em;
}

/* Checked checkboxes/radios: red so state is obvious on dark */
[data-bs-theme=dark] .form-check-input:checked {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}
[data-bs-theme=dark] .form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
[data-bs-theme=dark] .form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}
[data-bs-theme=dark] .form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
}
[data-bs-theme=dark] .form-check-input:focus { box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .35); border-color: #dc3545; }
[data-bs-theme=dark] .form-check-input:checked:disabled { opacity: .55; }

/* ---------- Small screens (phones) ---------- */
@media (max-width: 640.98px) {
    html { -webkit-text-size-adjust: 100%; }
    body { overflow-x: hidden; }
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    h1, h2, h3, h4, h5, h6, .nav-link, .btn, .card-header, th, .form-label { letter-spacing: .06em; }
    /* Prevent iOS zoom on focus */
    input, select, textarea, .form-control, .form-select { font-size: 16px !important; }
    .btn { min-height: 40px; padding: .5rem .9rem; }
    .btn-sm { min-height: 34px; }
    .card-body { padding: .75rem; }
    .row { --bs-gutter-x: .75rem; }
    .container, .container-fluid { padding-left: .5rem; padding-right: .5rem; }
    /* Tables scroll horizontally instead of overflowing the page */
    main .table-responsive { -webkit-overflow-scrolling: touch; }
    main .table-responsive .table { white-space: nowrap; }
    .modal-dialog { margin: .5rem; max-width: none; }
    .modal-body { max-height: calc(100dvh - 9rem); overflow-y: auto; }
    .config-header .report-options { flex-wrap: wrap; row-gap: .5rem; }
    .config-header .report-options .form-check-label { white-space: normal; }
    .model-string .btn, .model-string-builder .btn { min-height: 36px !important; min-width: 32px !important; }
    main img, main video { max-width: 100%; height: auto; }
}

/* ---------- Light theme ---------- */
[data-bs-theme=light] {
    --bs-body-bg: #dfe2e6;
    --bs-body-color: #22272d;
    --bs-secondary-bg: #eceef1;
    --bs-tertiary-bg: #e4e7eb;
    --bs-border-color: #c3c8ce;
    --bs-secondary-color: #5a636d;
    --bs-emphasis-color: #000;
    --bs-link-color: #0066b3;
    --bs-link-color-rgb: 0, 102, 179;
    --bs-link-hover-color: #004b85;
    --bs-link-hover-color-rgb: 0, 75, 133;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-body-font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-weight: 400;
}
[data-bs-theme=light] html, [data-bs-theme=light] body { font-weight: 400; }
[data-bs-theme=light] .form-label, [data-bs-theme=light] th { color: #5c6670; }
[data-bs-theme=light] .btn-outline-primary {
    --bs-btn-color: #1f2328;
    --bs-btn-border-color: #1f2328;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1f2328;
    --bs-btn-hover-border-color: #1f2328;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-color: #999;
    --bs-btn-disabled-border-color: #ccc;
    --bs-btn-focus-shadow-rgb: 31, 35, 40;
}
[data-bs-theme=light] .card {
    --bs-card-bg: #eceef1;
    --bs-card-border-color: #c9ced4;
    --bs-card-color: #22272d;
    color: #22272d;
}
[data-bs-theme=light] .text-muted { color: #5a636d !important; }
[data-bs-theme=light] .card-header { border-bottom-color: #c9ced4; color: #000; }
[data-bs-theme=light] .form-control,
[data-bs-theme=light] .form-select {
    background-color: #f4f5f7;
    border-color: #b8bec5;
    color: #22272d;
}
[data-bs-theme=light] .form-control:focus,
[data-bs-theme=light] .form-select:focus {
    background-color: #f4f5f7;
    border-color: #0066b3;
    color: #1f2328;
}
[data-bs-theme=light] .form-check-input:checked { background-color: #0066b3; border-color: #0066b3; }
[data-bs-theme=light] .table {
    --bs-table-hover-bg: #eef0f3;
    --bs-table-striped-bg: #f6f7f9;
    --bs-table-border-color: #dde1e6;
}
[data-bs-theme=light] .modal-content,
[data-bs-theme=light] .dropdown-menu { background-color: #eceef1; border-color: #c3c8ce; }
[data-bs-theme=light] main .nav-item .nav-link { color: #3a424a; }

/* Theme toggle */
.theme-toggle {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #7d8a96;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.theme-toggle:hover, .theme-toggle:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }

/* Brand logo:
.brand-logo {
    background: #fff;
    padding: 4px 8px;
    max-width: 100%;
    object-fit: contain;
}

::selection {

/* Light theme polish */
[data-bs-theme=light] .model-string-builder .btn-outline-secondary,
[data-bs-theme=light] .model-string .btn-outline-secondary { --bs-btn-color: #3a424a; --bs-btn-border-color: #6c757d; --bs-btn-bg: #f4f5f7; border-width: 1px; }
[data-bs-theme=light] .config-field .badge.bg-secondary,
[data-bs-theme=light] .col-form-label .badge.bg-secondary { background-color: #d3d8de !important; color: #3a424a; }
[data-bs-theme=light] .card.border-info { border-color: #0066b3 !important; }
[data-bs-theme=light] .card.border-info > .card-header.bg-info-subtle { background-color: #d6e6f3 !important; color: #003d6b; }
.pb-status { display: inline-flex; align-items: center; padding: .35rem .7rem; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

/* Light theme: darker variants of colors tuned for dark backgrounds */
[data-bs-theme=light] .btn-outline-warning { --bs-btn-color: #8a5a00; --bs-btn-border-color: #b37400; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b37400; --bs-btn-hover-border-color: #b37400; }
[data-bs-theme=light] .btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b02a37; --bs-btn-hover-border-color: #b02a37; --bs-btn-disabled-color: #c26b74; --bs-btn-disabled-border-color: #d9a3a9; }
[data-bs-theme=light] .btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; }
[data-bs-theme=light] .btn-outline-secondary { --bs-btn-color: #3a424a; --bs-btn-border-color: #7a838c; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3a424a; --bs-btn-hover-border-color: #3a424a; --bs-btn-disabled-color: #8e969e; --bs-btn-disabled-border-color: #b3b9bf; }
[data-bs-theme=light] .btn-link { --bs-btn-color: #0058a0; --bs-btn-hover-color: #003d6b; }
[data-bs-theme=light] .text-warning { color: #8a5a00 !important; }
[data-bs-theme=light] .text-success { color: #146c43 !important; }
[data-bs-theme=light] .text-danger { color: #b02a37 !important; }
[data-bs-theme=light] .text-info { color: #0a6c80 !important; }
[data-bs-theme=light] .text-primary { color: #0058a0 !important; }
[data-bs-theme=light] a:not(.btn):not(.nav-link) { color: #0058a0; }
[data-bs-theme=light] .badge.bg-secondary { background-color: #5a636d !important; color: #fff; }
[data-bs-theme=light] .badge.bg-info { background-color: #0a6c80 !important; color: #fff !important; }
[data-bs-theme=light] .badge.bg-warning { background-color: #f0b400 !important; color: #2b2000 !important; }
[data-bs-theme=light] .alert-success { --bs-alert-color: #0f5132; --bs-alert-bg: #cfe8da; --bs-alert-border-color: #9fd0b3; }
[data-bs-theme=light] .alert-danger { --bs-alert-color: #842029; --bs-alert-bg: #f3d2d5; --bs-alert-border-color: #e3a3a9; }
[data-bs-theme=light] .alert-warning { --bs-alert-color: #664d03; --bs-alert-bg: #f6e7b5; --bs-alert-border-color: #e6cc7a; }
[data-bs-theme=light] .alert-info { --bs-alert-color: #055160; --bs-alert-bg: #cde9f0; --bs-alert-border-color: #94cfdc; }
[data-bs-theme=light] .list-group-item-danger { color: #842029; background-color: #f3d2d5; }
[data-bs-theme=light] .list-group-item-warning { color: #664d03; background-color: #f6e7b5; }
[data-bs-theme=light] .list-group-item-success { color: #0f5132; background-color: #cfe8da; }