/**
 * Mediaweb Chile - Looking Glass theme
 * Overrides on top of Bootstrap 5.3.8
 *
 * Bootstrap 5.3 ships native dark mode via the data-bs-theme attribute,
 * so this file only remaps brand colour; surfaces, inputs and dropdowns
 * are handled upstream. Dark overrides live under [data-bs-theme="dark"],
 * never a media query - LG_THEME can force a mode regardless of the OS.
 */

:root {
    /* Brand */
    --mw-green: #6ecb8b;          /* logo green, used for accents */
    --mw-green-600: #4ca968;      /* action green, AA contrast on white */
    --mw-green-700: #3d8a54;      /* hover/active */
    --mw-green-050: #eef8f1;      /* tints and subtle fills */
    --mw-gray: #8e9192;           /* logo gray */

    /* Semantic, remapped for dark below */
    --mw-accent: var(--mw-green-600);
    --mw-accent-strong: var(--mw-green-700);
    --mw-tint: var(--mw-green-050);

    /* Terminal output - identical in both themes */
    --mw-term-bg: #0e1315;
    --mw-term-fg: #5fe08b;
    --mw-term-border: rgba(110, 203, 139, .25);

    /* Bootstrap remaps */
    --bs-primary: var(--mw-green-600);
    --bs-primary-rgb: 76, 169, 104;
    --bs-link-color-rgb: 61, 138, 84;
    --bs-link-hover-color-rgb: 76, 169, 104;
    --bs-focus-ring-color: rgba(110, 203, 139, .25);
}

[data-bs-theme="dark"] {
    /* The AA-safe green for white is too dark on a dark surface */
    --mw-accent: #7ad495;
    --mw-accent-strong: #9ce0b0;
    --mw-tint: rgba(110, 203, 139, .14);

    --bs-primary: #4ca968;
    --bs-link-color-rgb: 156, 224, 176;
    --bs-link-hover-color-rgb: 122, 212, 149;
}

/* ---------- Header & footer rules ---------- */

header.border-bottom {
    border-bottom-color: var(--mw-green) !important;
    border-bottom-width: 2px !important;
}

/* ---------- Cards ---------- */

.card-title {
    font-weight: 600;
}

/* ---------- Primary action ---------- */

.btn-primary {
    --bs-btn-bg: var(--mw-green-600);
    --bs-btn-border-color: var(--mw-green-600);
    --bs-btn-hover-bg: var(--mw-green-700);
    --bs-btn-hover-border-color: var(--mw-green-700);
    --bs-btn-active-bg: var(--mw-green-700);
    --bs-btn-active-border-color: var(--mw-green-700);
    --bs-btn-disabled-bg: var(--mw-green);
    --bs-btn-disabled-border-color: var(--mw-green);
    --bs-btn-focus-shadow-rgb: 76, 169, 104;
    font-weight: 500;
}

/* Dark: lighter text on the green reads better than white */
[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #0f1416;
    --bs-btn-hover-color: #0f1416;
    --bs-btn-active-color: #0f1416;
    font-weight: 600;
}

/* ---------- Secondary / outline buttons ---------- */

.btn-outline-secondary {
    --bs-btn-hover-bg: var(--mw-tint);
    --bs-btn-hover-color: var(--mw-accent-strong);
    --bs-btn-hover-border-color: var(--mw-green);
    --bs-btn-active-bg: var(--mw-accent);
    --bs-btn-active-border-color: var(--mw-accent);
    --bs-btn-focus-shadow-rgb: 76, 169, 104;
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-active-color: #0f1416;
}

/* ---------- Form controls ---------- */

.form-control:focus,
.form-select:focus {
    border-color: var(--mw-green);
    box-shadow: 0 0 0 .25rem rgba(110, 203, 139, .25);
}

.form-check-input:checked {
    background-color: var(--mw-accent);
    border-color: var(--mw-accent);
}

.form-check-input:focus {
    border-color: var(--mw-green);
    box-shadow: 0 0 0 .25rem rgba(110, 203, 139, .25);
}

.input-group-text {
    background-color: var(--mw-tint);
    color: var(--mw-accent-strong);
    font-weight: 500;
}

[data-bs-theme="dark"] .input-group-text {
    color: var(--mw-accent);
}

/* ---------- Dropdown ---------- */

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--mw-accent);
    --bs-dropdown-link-hover-bg: var(--mw-tint);
    --bs-dropdown-link-hover-color: var(--mw-accent-strong);
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-link-hover-color: var(--mw-accent);
}

/* ---------- Latency badge ---------- */

.input-group-text.bg-light {
    background-color: var(--mw-tint) !important;
}

/* ---------- Backend output (terminal) ----------
   A real terminal look - dark surface, phosphor green - in both themes,
   so command output reads as console rather than as page content.
   #outputCard carries Bootstrap's .bg-light, which sets background with
   !important, hence the !important here. */

#outputCard,
#outputCard.bg-light {
    background-color: var(--mw-term-bg) !important;
    border: 1px solid var(--mw-term-border);
    border-left: 3px solid var(--mw-green);
    border-radius: .5rem;
    padding: .25rem;
}

#outputContent,
pre {
    background-color: transparent;
    border: 0;
    border-radius: .375rem;
    padding: 1rem;
    color: var(--mw-term-fg);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .875rem;
    line-height: 1.5;
}

/* Scroll wide traceroute/mtr tables instead of overflowing the card */
#outputContent {
    overflow-x: auto;
}

/* ================================================================
   Footer
   ================================================================ */

.mw-footer {
    border-top-color: rgba(110, 203, 139, .4) !important;
    font-size: .875rem;
}

.mw-footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

.mw-footer-brand {
    display: flex;
    align-items: baseline;
    gap: .625rem;
}

.mw-footer-brand a {
    font-weight: 600;
    color: var(--bs-emphasis-color) !important;
    text-decoration: none;
}

.mw-footer-brand a:hover {
    color: var(--mw-accent) !important;
}

/* ASN reads as a small technical tag, not as body copy */
.mw-footer-asn {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--mw-accent);
    background-color: var(--mw-tint);
    border: 1px solid var(--mw-term-border);
    border-radius: .25rem;
    padding: .1rem .4rem;
}

.mw-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
}

.mw-footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1.5rem;
    margin-top: .75rem;
    font-size: .8125rem;
    opacity: .8;
}

@media (max-width: 575.98px) {
    .mw-footer-main,
    .mw-footer-legal {
        flex-direction: column;
    }
}