/* Compact dropdowns — match row-buttons height (~28px) */
button.compact-dropdown {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    line-height: 28px !important;
}

button.compact-dropdown .dash-dropdown-grid-container,
button.compact-dropdown .dash-dropdown-trigger {
    min-height: 30px !important;
    line-height: 28px !important;
    font-size: 11px !important;
}

/* Space label→dropdown same as the row-with-preview gap */
#sidebar label + .dash-dropdown-wrapper {
    margin-top: 4px;
}
.dash-dropdown-wrapper {
    min-height: 30px !important;
}

/* Expanded menu options */
.dash-dropdown-menu li,
.dash-dropdown-option,
.dash-dropdown-menu [role="option"] {
    font-size: 11px !important;
    line-height: 22px !important;
    min-height: 24px !important;
    padding: 2px 8px !important;
}

/* ── Sidebar buttons ─────────────────────────────────────────────────────── */
#sidebar button {
    border-radius: 5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18) !important;
    transition: background 0.15s, box-shadow 0.15s !important;
    border: 1px solid #4a85b5 !important;
    background: linear-gradient(180deg, #6aabda, #4a85b5) !important;
}
#sidebar button:hover {
    background: linear-gradient(180deg, #5a9bca, #3a75a5) !important;
    box-shadow: 0 2px 6px rgba(0,80,140,0.25) !important;
}
#sidebar button:active {
    background: linear-gradient(180deg, #3a75a5, #2a6595) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important;
}
#sidebar button:disabled {
    background: #b8c8d8 !important;
    border-color: #a0b4c4 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: wait !important;
}

/* Secondary (outline-fill) buttons: Import, Filter, Isolate, Show all */
#sidebar .secondary-btn {
    background: #eef2f7 !important;
    color: #3a6080 !important;
    border: 1px solid #a8c0d8 !important;
    text-shadow: none !important;
}
#sidebar .secondary-btn:hover {
    background: #dce8f2 !important;
    box-shadow: 0 2px 5px rgba(0,80,140,0.15) !important;
}
#sidebar .secondary-btn:active {
    background: #c8daea !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.12) !important;
}

/* Calculate waves — teal accent to signal final action */
#btn-waves {
    background: linear-gradient(180deg, #5abaaa, #3a9a8a) !important;
    border-color: #3a9a8a !important;
}
#btn-waves:hover {
    background: linear-gradient(180deg, #4aaa9a, #2a8a7a) !important;
    box-shadow: 0 2px 6px rgba(0,120,100,0.3) !important;
}

/* ── Filter: promote to primary action ───────────────────────────────────── */
#btn-filter {
    background: linear-gradient(180deg, #6aabda, #4a85b5) !important;
    color: white !important;
    border-color: #4a85b5 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18) !important;
}
#btn-filter:hover {
    background: linear-gradient(180deg, #5a9bca, #3a75a5) !important;
    box-shadow: 0 2px 6px rgba(0,80,140,0.25) !important;
}
#btn-filter:active {
    background: linear-gradient(180deg, #3a75a5, #2a6595) !important;
}

/* ── Section dividers ────────────────────────────────────────────────────── */
#sidebar hr {
    border: none !important;
    border-top: 1px solid #d0dcea !important;
    margin: 14px -12px !important;
    opacity: 1 !important;
}

/* ── Debug section: muted warm tone ─────────────────────────────────────── */
/* Use #sidebar prefix to out-specificity #sidebar .secondary-btn */
#sidebar #btn-debug-apply {
    background: #f2ede4 !important;
    color: #7a6040 !important;
    border-color: #c8b488 !important;
    text-shadow: none !important;
}
#sidebar #btn-debug-apply:hover {
    background: #e8e0d0 !important;
    box-shadow: 0 2px 5px rgba(120,80,0,0.12) !important;
}
#sidebar #btn-debug-apply:active {
    background: #ddd0bc !important;
}
#sidebar #btn-debug-clear {
    background: #f0f0f0 !important;
    color: #666 !important;
    border-color: #c4c4c4 !important;
    text-shadow: none !important;
}
#sidebar #btn-debug-clear:hover {
    background: #e4e4e4 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Debug number inputs */
#inp-debug-mmsi,
#inp-debug-seg {
    border: 1px solid #c8d4e0 !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
    color: #334 !important;
    outline: none !important;
    transition: border-color 0.15s !important;
}
#inp-debug-mmsi:focus,
#inp-debug-seg:focus {
    border-color: #7aaace !important;
    box-shadow: 0 0 0 2px rgba(100,160,210,0.18) !important;
}

/* ── Right sidebar inputs ────────────────────────────────────────────────── */
#right-sidebar input[type="number"] {
    width: 100%;
    font-size: 11px !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    border: 1px solid #c8d4e0 !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
    color: #334 !important;
    transition: border-color 0.15s !important;
}
#right-sidebar input[type="number"]:focus {
    border-color: #7aaace !important;
    box-shadow: 0 0 0 2px rgba(100,160,210,0.18) !important;
    outline: none !important;
}
#right-sidebar .dash-dropdown-wrapper {
    min-height: 26px !important;
}

/* ── Progress section ────────────────────────────────────────────────────── */
#progress-log {
    border-radius: 5px !important;
    border: 1px solid #1a1a2a !important;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3) !important;
    margin-top: 6px !important;
}

/* ── Remove browser spinners from number inputs ──────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
input[type="number"] {
    -moz-appearance: textfield !important;
}

/* ── Hide AIS point count info, tide item text list, and bathy preview text ── */
#pv-ais-info { display: none !important; }
#pv-tide-info { display: none !important; }
#pv-bathy-info { display: none !important; }
/* Remove top gap when coastline/land info divs are empty (no shapefile loaded yet) */
#pv-coast-info:empty, #pv-land-info:empty { margin-top: 0 !important; }

/* ── Cascade trigger: identical to Dash dropdown (30px / 5px / 11px) ─────── */
.cascade-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 8px;
    background: linear-gradient(180deg, #6aabda, #4a85b5);
    border: 1px solid #4a85b5;
    border-radius: 5px;
    font-size: 11px;
    color: rgba(255,255,255,0.80);     /* placeholder-like opacity when unselected */
    cursor: pointer;
    height: 30px;
    min-height: 30px;
    transition: background 0.12s, border-color 0.12s;
    user-select: none;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0,0,0,0.15);
    box-sizing: border-box;
}
.cascade-trigger::after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-left: 4px;
    /* Exact same SVG path as .dash-dropdown-trigger-icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z' fill='rgba(0,9,38,0.9)' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 15px;
}
.cascade-trigger:hover {
    background: linear-gradient(180deg, #5a9bca, #3a75a5);
    border-color: #3a75a5;
}
.cascade-trigger.cascade-active {
    background: linear-gradient(180deg, #6aabda, #4a85b5);
    border-color: #4a85b5;
    color: white;                       /* full white when something selected */
    font-weight: 600;
}

/* Cascade flyout panel — dark to match trigger */
.cascade-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    max-height: 240px;
    background: #1e2d3d;
    border: 1px solid #4a85b5;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,30,70,0.45);
    z-index: 1000;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
.cascade-col {
    min-width: 150px;
    max-width: 190px;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.08);
    max-height: 240px;
    background: #1e2d3d;
}
.cascade-col:last-child { border-right: none; }
.cascade-seg-col { background: #18242f; }
.cascade-item {
    padding: 4px 10px;
    font-size: 10px;
    color: #b8cede;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: background 0.1s;
}
.cascade-item:hover { background: #2a3d54; }
.cascade-item.cascade-selected {
    background: #1a4a80;
    color: #ddeeff;
    font-weight: 600;
}
.cascade-arrow { color: #5a80a8; font-size: 9px; margin-left: 6px; }
.cascade-empty { padding: 6px 10px; font-size: 10px; color: #5a80a8; }

/* ── dcc.Dropdown trigger: fix vertical centering of text + arrow ─────────── */
.compact-dropdown .dash-dropdown-wrapper {
    height: 30px !important;
    min-height: 30px !important;
    display: block !important;
}
.compact-dropdown .dash-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.compact-dropdown .dash-dropdown-value {
    flex: 1 !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
}
/* Multi-select tag items rendered inline with comma separators */
.compact-dropdown .dash-dropdown-value-item { display: inline !important; }
.compact-dropdown .dash-dropdown-value-item + .dash-dropdown-value-item::before {
    content: ", ";
}

/* Subtle "N selected" badge */
.compact-dropdown .dash-dropdown-value-count {
    font-size: 9px !important;
    color: rgba(255,255,255,0.78) !important;
    background: rgba(0,0,0,0.20) !important;
    padding: 2px 7px !important;
    border-radius: 9px !important;
    margin: 0 6px 0 4px !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
}

/* Subtle clear-selection (×) button */
.compact-dropdown .dash-dropdown-clear {
    display: flex !important;
    align-items: center !important;
    opacity: 0.55 !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
    color: #fff !important;
}
.compact-dropdown .dash-dropdown-clear:hover { opacity: 1 !important; }
.compact-dropdown .dash-dropdown-clear svg { width: 12px !important; height: 12px !important; }

/* Chevron — always visible and right-aligned (match cascade-trigger color) */
.compact-dropdown .dash-dropdown-trigger-icon {
    flex-shrink: 0 !important;
    color: rgba(0,9,38,0.9) !important;
    width: 14px !important;
    height: 14px !important;
}

/* Work-directory dropdown sits on the light status-banner background — */
/* override the white text intended for sidebar (dark) dropdowns.       */
#workdir-wrapper .compact-dropdown .dash-dropdown-value,
#workdir-wrapper .compact-dropdown .dash-dropdown-placeholder {
    color: #223 !important;
}
#workdir-wrapper .compact-dropdown .dash-dropdown-clear {
    color: #557 !important;
}

/* Free-hand & Similar: label provides spacing, so zero out the row-buttons margin */
.row-buttons:has(#btn-freehand),
.row-buttons:has(#btn-similar) {
    margin-top: 0 !important;
}
/* Left-aligned text for these action buttons */
#btn-freehand,
#btn-similar {
    text-align: left !important;
    padding-left: 8px !important;
}

/* ── Multi-select dropdown: move built-in Select-All/Deselect-All to bottom ─ */
.dash-dropdown-content {
    display: flex !important;
    flex-direction: column !important;
}
.dash-dropdown-content .dash-dropdown-search-container { order: 1; }
.dash-dropdown-content .dash-options-list             { order: 2; flex: 1; overflow-y: auto; }
.dash-dropdown-content .dash-dropdown-actions         { order: 3; }

.dash-dropdown-actions {
    border-top: 1px solid rgba(80,130,200,0.18) !important;
    background: #f4f7fb !important;
    padding: 6px 8px 6px !important;
    gap: 6px !important;
}
.dash-dropdown-action-button {
    flex: 1 !important;
    font-size: 10px !important;
    padding: 4px 0 !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}
.dash-dropdown-action-button:nth-child(1) {
    background: linear-gradient(180deg,#6aabda,#4a85b5) !important;
    color: #fff !important;
    border: 1px solid #4a85b5 !important;
}
.dash-dropdown-action-button:nth-child(1):hover {
    background: linear-gradient(180deg,#5a9bca,#3a75a5) !important;
}
.dash-dropdown-action-button:nth-child(2) {
    background: #eef2f7 !important;
    color: #3a6080 !important;
    border: 1px solid #a8c0d8 !important;
}
.dash-dropdown-action-button:nth-child(2):hover {
    background: #dce8f2 !important;
}
/* Apply button — teal accent (injected via JS as 3rd child) */
.dash-dropdown-action-button.apply-action-btn {
    background: linear-gradient(180deg, #5abaaa, #3a9a8a) !important;
    color: #fff !important;
    border: 1px solid #3a9a8a !important;
}
.dash-dropdown-action-button.apply-action-btn:hover {
    background: linear-gradient(180deg, #4aaa9a, #2a8a7a) !important;
}