/* SheelNet custom styles */

/* Dark-mode close button — use Bootstrap's white variant */
[data-bs-theme="dark"] .btn-close,
[data-bs-theme="aqua"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8;
}


/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* Map toolbar button active state */
.draw-tool-btn.active {
    font-weight: 600;
    box-shadow: inset 0 0 0 2px currentColor;
}

/* Compact form controls in property panel */
#properties-panel .form-control-sm {
    font-size: 0.75rem;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: block !important;
}

/* OpenLayers controls — keep zoom in top-right, out of toolbar area */
.ol-zoom {
    top: 0.5em;
    right: 0.5em;
    left: auto;
}

/* Simulation results table in sidebar */
#sim-results {
    padding: 8px;
    font-size: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Slim scrollbar for sidebar */
#sidebar::-webkit-scrollbar {
    width: 4px;
}
#sidebar::-webkit-scrollbar-track {
    background: var(--bs-secondary-bg);
}
#sidebar::-webkit-scrollbar-thumb {
    background: var(--bs-border-color);
    border-radius: 2px;
}

/* OpenLayers dark mode: invert tile layers only (not vector/contour layers) */
.ol-dark .ol-tile-layer canvas {
    filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.85);
}

/* Contour legend overlay */
.contour-legend {
    position: absolute;
    bottom: 20px;
    right: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.72rem;
    z-index: 15;
    pointer-events: auto;
    max-height: 280px;
    overflow-y: auto;
    min-width: 60px;
}
[data-bs-theme="dark"] .contour-legend {
    background: rgba(33, 37, 41, 0.92);
}
.contour-legend-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.7rem;
    text-align: center;
}
.contour-legend-bar {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.contour-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.3;
}
.contour-legend-swatch {
    width: 18px;
    height: 14px;
    flex-shrink: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
}

/* Display panel — Annotations & Element Theming */
.display-section {
    border-bottom: 1px solid var(--bs-border-color);
}
.display-section:last-child {
    border-bottom: none;
}
.display-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px 3px;
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.72rem;
    font-weight: 600;
}
.display-section-header .form-check {
    margin-bottom: 0;
    min-height: auto;
}
.display-section-header .form-check-input {
    width: 2em;
    height: 1em;
    cursor: pointer;
}
/* Annotation checkboxes */
.annot-check-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.annot-check-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    font-size: 0.68rem;
    border-radius: 3px;
    cursor: pointer;
}
.annot-check-item:hover {
    background: var(--bs-tertiary-bg);
}
.annot-check-item input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--bs-primary);
    flex-shrink: 0;
}
.annot-check-item.is-sim {
    color: #0d9488;
}
[data-bs-theme="dark"] .annot-check-item.is-sim {
    color: #5eead4;
}
.annot-check-item.is-sim input[type="checkbox"] {
    accent-color: #0d9488;
}
.annot-check-item.at-limit:not(.is-checked) {
    opacity: 0.4;
    pointer-events: none;
}
.annot-check-item.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.annot-limit-hint {
    font-weight: 400;
    font-size: 0.6rem;
}

/* Theme option boxes */
.theme-option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.theme-option-box {
    font-size: 0.65rem;
    padding: 2px 7px;
    border: 1.5px solid var(--bs-border-color);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
    background: transparent;
}
.theme-option-box:hover {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 8%, transparent);
}
.theme-option-box.selected {
    border-color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
    font-weight: 600;
}
.theme-option-box.is-sim {
    border-color: #0d9488;
    color: #0d9488;
}
[data-bs-theme="dark"] .theme-option-box.is-sim {
    border-color: #5eead4;
    color: #5eead4;
}
.theme-option-box.is-sim:hover {
    border-color: #0d9488;
    background: color-mix(in srgb, #0d9488 12%, transparent);
}
.theme-option-box.is-sim.selected {
    border-color: #0d9488;
    background: color-mix(in srgb, #0d9488 20%, transparent);
    font-weight: 600;
}
.theme-option-box.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.theme-legend {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.65rem;
}
.theme-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.theme-legend-swatch {
    width: 14px;
    height: 10px;
    flex-shrink: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 1px;
}

/* Background layer rows */
.bg-layer-row {
    border-bottom: 1px solid var(--bs-border-color);
}
.bg-layer-row:last-child {
    border-bottom: none;
}
.bg-layer-row button:hover {
    opacity: 1 !important;
}
.bg-layer-color-input {
    border-radius: 3px;
}

/* ====== Aqua theme — dark ocean with bright cyan/aqua accents ====== */
[data-bs-theme="aqua"] {
    color-scheme: dark;

    /* Deep ocean backgrounds */
    --bs-body-bg: #091b2a;
    --bs-body-color: #c8e6f5;
    --bs-secondary-bg: #0f2538;
    --bs-tertiary-bg: #152f45;
    --bs-emphasis-color: #e0f4ff;
    --bs-border-color: #1e4a6e;
    --bs-border-color-translucent: rgba(0, 210, 255, 0.12);

    /* Primary — bright aqua/cyan */
    --bs-primary: #00d4ff;
    --bs-primary-rgb: 0, 212, 255;

    /* Secondary — softer blue */
    --bs-secondary: #4a9ece;
    --bs-secondary-rgb: 74, 158, 206;
    --bs-secondary-color: #7eb8d8;

    /* Links — aqua */
    --bs-link-color: #00d4ff;
    --bs-link-color-rgb: 0, 212, 255;
    --bs-link-hover-color: #5ce6ff;
    --bs-link-hover-color-rgb: 92, 230, 255;

    /* Component backgrounds */
    --bs-body-bg-rgb: 9, 27, 42;
    --bs-input-bg: #0d2235;
    --bs-card-bg: #0f2538;
    --bs-modal-bg: #0f2538;
    --bs-dropdown-bg: #0f2538;

    /* Headings — bright white-blue */
    --bs-heading-color: #e0f4ff;

    /* Code */
    --bs-code-color: #5ce6ff;

    /* Highlight */
    --bs-highlight-bg: #1e4a6e;
}

/* Aqua tile inversion — same filter as dark but with aqua hue shift */
.ol-aqua .ol-tile-layer canvas {
    filter: invert(1) hue-rotate(160deg) brightness(1.05) contrast(0.9) saturate(1.2);
}

/* Aqua form inputs */
[data-bs-theme="aqua"] .form-control,
[data-bs-theme="aqua"] .form-select {
    background-color: var(--bs-input-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="aqua"] .form-control:focus,
[data-bs-theme="aqua"] .form-select:focus {
    border-color: #00d4ff;
    box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25);
}

/* Aqua navbar */
[data-bs-theme="aqua"] .navbar {
    background: #0f2538 !important;
    border-bottom-color: #1e4a6e !important;
}

/* Aqua contour legend */
[data-bs-theme="aqua"] .contour-legend {
    background: rgba(15, 37, 56, 0.94);
}

/* Aqua sim-result colours — warm amber on dark */
[data-bs-theme="aqua"] .annot-check-item.is-sim {
    color: #ffb74d;
}
[data-bs-theme="aqua"] .annot-check-item.is-sim input[type="checkbox"] {
    accent-color: #ffb74d;
}
[data-bs-theme="aqua"] .theme-option-box.is-sim {
    border-color: #ffb74d;
    color: #ffb74d;
}
[data-bs-theme="aqua"] .theme-option-box.is-sim:hover {
    border-color: #ffb74d;
    background: color-mix(in srgb, #ffb74d 12%, transparent);
}
[data-bs-theme="aqua"] .theme-option-box.is-sim.selected {
    border-color: #ffb74d;
    background: color-mix(in srgb, #ffb74d 20%, transparent);
}

/* Aqua buttons — cyan outline style */
[data-bs-theme="aqua"] .btn-outline-secondary {
    --bs-btn-color: #7eb8d8;
    --bs-btn-border-color: #1e4a6e;
    --bs-btn-hover-color: #091b2a;
    --bs-btn-hover-bg: #00d4ff;
    --bs-btn-hover-border-color: #00d4ff;
    --bs-btn-active-color: #091b2a;
    --bs-btn-active-bg: #5ce6ff;
    --bs-btn-active-border-color: #5ce6ff;
}

[data-bs-theme="aqua"] .btn-primary {
    --bs-btn-bg: #00d4ff;
    --bs-btn-border-color: #00d4ff;
    --bs-btn-color: #091b2a;
    --bs-btn-hover-bg: #5ce6ff;
    --bs-btn-hover-border-color: #5ce6ff;
    --bs-btn-active-bg: #00b8db;
    --bs-btn-active-border-color: #00b8db;
}

/* Aqua scrollbar */
[data-bs-theme="aqua"] #sidebar::-webkit-scrollbar-track {
    background: #0f2538;
}
[data-bs-theme="aqua"] #sidebar::-webkit-scrollbar-thumb {
    background: #1e4a6e;
}

/* Aqua — Bootstrap utility & component background overrides
   (Bootstrap only auto-switches these for data-bs-theme="dark") */
[data-bs-theme="aqua"] .bg-body-secondary  { background-color: #0f2538 !important; }
[data-bs-theme="aqua"] .bg-body-tertiary   { background-color: #152f45 !important; }
[data-bs-theme="aqua"] .table              { --bs-table-bg: transparent; --bs-table-color: #c8e6f5; --bs-table-border-color: #1e4a6e; }
[data-bs-theme="aqua"] .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(0, 212, 255, 0.06); --bs-table-hover-color: #e0f4ff; }
[data-bs-theme="aqua"] .table-active       { --bs-table-active-bg: rgba(0, 212, 255, 0.10); --bs-table-active-color: #e0f4ff; }
[data-bs-theme="aqua"] .table-bordered > :not(caption) > * > * { border-color: #1e4a6e; }
[data-bs-theme="aqua"] .modal-content      { background-color: #0f2538; border-color: #1e4a6e; color: #c8e6f5; }
[data-bs-theme="aqua"] .border             { border-color: #1e4a6e !important; }
[data-bs-theme="aqua"] .text-muted         { color: #7eb8d8 !important; }
[data-bs-theme="aqua"] .badge.bg-secondary { background-color: #1e4a6e !important; color: #c8e6f5 !important; }
[data-bs-theme="aqua"] .badge.bg-primary   { background-color: #00d4ff !important; color: #091b2a !important; }
[data-bs-theme="aqua"] .btn-outline-danger { --bs-btn-color: #ff6b6b; --bs-btn-border-color: #ff6b6b; --bs-btn-hover-bg: #ff6b6b; --bs-btn-hover-color: #091b2a; }
[data-bs-theme="aqua"] .btn-outline-primary { --bs-btn-color: #00d4ff; --bs-btn-border-color: #00d4ff; --bs-btn-hover-bg: #00d4ff; --bs-btn-hover-color: #091b2a; }
[data-bs-theme="aqua"] .breadcrumb         { --bs-breadcrumb-divider-color: #7eb8d8; }
[data-bs-theme="aqua"] .alert              { background-color: #152f45; border-color: #1e4a6e; color: #c8e6f5; }

/* Aqua navbar text */
[data-bs-theme="aqua"] .navbar .nav-link       { color: #c8e6f5; }
[data-bs-theme="aqua"] .navbar .nav-link:hover  { color: #00d4ff; }

/* Aqua — Bootstrap contextual subtle colour overrides */
[data-bs-theme="aqua"] {
    --bs-info-bg-subtle: #0c2a3f;
    --bs-info-text-emphasis: #5ce6ff;
    --bs-info-border-subtle: #1a5070;
    --bs-success-bg-subtle: #0c2a1a;
    --bs-success-text-emphasis: #5ef5a0;
    --bs-success-border-subtle: #1a5040;
    --bs-warning-bg-subtle: #2a1f0c;
    --bs-warning-text-emphasis: #ffd966;
    --bs-warning-border-subtle: #504018;
    --bs-danger-bg-subtle: #2a0c0c;
    --bs-danger-text-emphasis: #ff8a8a;
    --bs-danger-border-subtle: #501a1a;
}