/* ===========================================
   APP SHELL — Full-Viewport Flex Layout
   Sprint 4: sidebar + map side-by-side
   =========================================== */

#app-shell {
    position: relative;  /* For sidebar-tab absolute positioning */
    display: flex;
    height: calc(100vh - 56px);       /* Fallback for older browsers */
    height: calc(100dvh - 56px);      /* iOS Safari: excludes bottom bar */
    margin-top: 56px;
    width: 100vw;
    overflow: hidden;
}


/* ===========================================
   SIDEBAR — Collapsible Left Panel
   =========================================== */

.sidebar {
    position: relative;  /* For sidebar-tab absolute positioning */
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100%;
    background: var(--bg-secondary);
    border-right: none;
    box-shadow: 4px 0 16px rgba(40, 50, 40, 0.06),
                1px 0 0 rgba(40, 50, 40, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width var(--sidebar-transition),
                min-width var(--sidebar-transition);
    z-index: 1000;
}

/* Collapsed state — width animates to 0 */
.sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
}

/* Fade sidebar contents during collapse — matches sidebar width transition */
.sidebar.collapsed .sidebar-header,
.sidebar.collapsed .sidebar-section {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) ease;
}

/* Sidebar header: matches portal shell header exactly */
.sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    flex-shrink: 0;
}

.sidebar-logo {
    height: 18px;
    width: auto;
    object-fit: contain;
}

.sidebar-app-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}


/* Edge collapse strip — thin accent line replacing the old 44px tab button.
   Follows Linear/Figma pattern: invisible until needed, hover reveals.
   Click toggles sidebar collapse. Swipe gestures handled in sidebar.js. */
.sidebar-tab {
    position: absolute;
    left: var(--sidebar-width);
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--accent);
    opacity: 0.15;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    cursor: col-resize;
    transition: left var(--sidebar-transition),
                opacity var(--duration-fast),
                width var(--duration-fast);
    z-index: 1001;
}

/* Touch target expansion — visually 5px, tappable 35px.
   Extends 20px into map (safe) but only 10px into sidebar
   to avoid overlapping inventory table row taps. */
.sidebar-tab::after {
    content: '';
    position: absolute;
    inset: 0 -20px 0 -10px;
}

/* Hide the chevron icon — the strip is the affordance now */
.sidebar-tab .icon-sm {
    display: none;
}

@media (hover: hover) {
    .sidebar-tab:hover {
        width: 8px;
        opacity: 0.35;
    }
}

.sidebar-tab:active {
    opacity: 0.5;
}

.sidebar.collapsed ~ .sidebar-tab {
    left: 0;
    width: 6px;
    opacity: 0.25;
}


/* Lot title — shown at sidebar top when a lot is loaded.
   Accent green text + short underline gives brand presence
   without decorative borders. */
.sidebar-lot-title {
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.3px;
    flex-shrink: 0;
}

.sidebar-lot-title:not(:empty)::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--accent);
    margin-top: var(--space-sm);
    border-radius: 1px;
    opacity: 0.25;
}

.sidebar-lot-title:empty {
    display: none;
}


/* Sidebar sections */
.sidebar-section {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

/* First visible section gets extra top padding so it doesn't
   feel cramped against the lot title or navbar edge */
.sidebar-section:first-of-type {
    padding-top: var(--space-lg);
}

.sidebar-section:empty {
    display: none;  /* Hide empty sections (e.g., polygon-info-panel when no polygon selected) */
}

/* Polygon info styles moved to css/components/polygon-info.css */

/* Scrollable section (inventory table) — fills remaining sidebar space.
   Sprint 5: padding removed so the table stretches to full sidebar width.
   The table cells themselves handle horizontal padding. overflow-x hidden
   because table-layout: fixed keeps everything within bounds. */
.sidebar-section--scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    border-bottom: none;
    padding: 0;
    background: var(--bg-primary);     /* White data zone — max contrast for readability */
    direction: rtl;                    /* Moves native scrollbar to left — frees right edge */
}

.sidebar-section--scrollable > * {
    direction: ltr;                    /* Content stays left-to-right */
}

/* Map row — stacked vertically (counts moved to map toolbar) */
.sidebar-section--map-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Flight date selector — full width to match search bar and source toggle */
#flight-select-wrapper {
    width: 100%;
    margin-top: var(--space-xs) !important;
}

/* Custom flight dropdown — styled button + div list replacing native select */
.flight-dropdown-wrapper {
    position: relative;
    width: 100%;
}

.flight-dropdown-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px var(--space-md);
    font-size: var(--text-sm);
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 32px;
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

@media (hover: hover) {
    .flight-dropdown-btn:hover {
        border-color: var(--border-medium);
    }
}

.flight-dropdown-btn:active,
.flight-dropdown-btn:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.flight-dropdown-btn .icon-sm {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Reuse .lot-dropdown styles for flight list */
.flight-dropdown-wrapper .lot-dropdown {
    max-height: 180px;
}

/* Hidden native select — data source only */
#flight-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: 500;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 36px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca39f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    transition: border-color var(--duration-fast) ease;
}

@media (hover: hover) {
    #flight-select:hover {
        border-color: var(--border-medium);
    }
}

#flight-select:active {
    border-color: var(--border-medium);
}

#flight-select:focus {
    border-color: var(--accent);
    outline: none;
}

/* Counts hidden in sidebar — display lives in map toolbar now */

.map-select-wrapper {
    position: relative;  /* For lot-dropdown absolute positioning */
    flex: 1;
    min-width: 0;
}

.counts-toggle-wrapper {
    flex-shrink: 0;
}

/* Sidebar footer — pinned to bottom of sidebar flex column */
.sidebar-footer {
    padding: var(--space-sm) var(--space-lg);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--bg-tertiary);
    flex-shrink: 0;
    margin-top: auto;
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.sidebar.collapsed .sidebar-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease;
}



/* ===========================================
   MAP DROPDOWN (inside sidebar)
   =========================================== */

#map-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    min-height: var(--touch-min);
    transition: border-color 0.15s ease;
}

@media (hover: hover) {
    #map-select:hover {
        border-color: var(--border-medium);
    }
}

#map-select:active,
#map-select:focus {
    border-color: var(--border-medium);
    outline: none;
}

#map-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Lot search input — filters the dropdown as you type */
.lot-search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    min-height: var(--touch-min);
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}

.lot-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.lot-search-input::placeholder {
    color: var(--text-muted);
}

/* Custom lot dropdown — replaces native <select> for consistent styling.
   Positioned absolutely below the search input, shares borders for a
   seamless connected appearance. */
.lot-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 100;
    display: none;
}

.lot-dropdown .lot-option {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    font-size: var(--text-md);
    color: var(--text-primary);
    transition: background var(--duration-fast) ease;
}

@media (hover: hover) {
    .lot-dropdown .lot-option:hover {
        background: var(--bg-tertiary);
    }
}

.lot-dropdown .lot-option:active,
.lot-dropdown .lot-option.highlighted {
    background: var(--bg-tertiary);
}

.lot-dropdown .lot-no-results {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Upward dropdown — used when search bar is at bottom of sidebar.
   Overrides base .lot-dropdown positioning to open above the input. */
.lot-dropdown--upward {
    top: auto;
    bottom: 100%;
    border-top: 1px solid var(--border-light);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    max-height: min(220px, 40vh);
}

/* Search section — positioned above the admin footer.
   No margin-top:auto here — the footer owns that to push
   both search + footer to the bottom as a group. */
.sidebar-section--search {
    flex-shrink: 0;
    border-top: 1px solid var(--bg-tertiary);
    border-bottom: none;
}

/* Source toggle — NodeODM / DroneDeploy button pair */
.source-toggle-wrapper {
    display: flex;
    margin-top: var(--space-xs);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-light);
    width: 100%;
}

.source-toggle-btn {
    flex: 1;
    padding: 6px var(--space-md);
    font-size: var(--text-sm);
    font-weight: 500;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    min-height: 32px;
}

.source-toggle-btn:not(:last-child) {
    border-right: 1px solid var(--border-light);
}

@media (hover: hover) {
    .source-toggle-btn:hover:not(:disabled) {
        background: var(--bg-tertiary);
    }
}

.source-toggle-btn:active:not(:disabled) {
    background: var(--bg-tertiary);
}

.source-toggle-btn.active {
    background: var(--accent);
    color: white;
    font-weight: 600;
}

@media (hover: hover) {
    .source-toggle-btn.active:hover {
        background: var(--accent-hover);
    }
}

.source-toggle-btn.active:active {
    background: var(--accent-hover);
}

.source-toggle-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* =========================================================================
   SAFE-AREA — iPhone notch / Dynamic Island
   App shell accounts for notch height so content doesn't hide behind it.
   ========================================================================= */

@supports (margin-top: env(safe-area-inset-top)) {
    #app-shell {
        margin-top: calc(56px + env(safe-area-inset-top, 0px));
        height: calc(100vh - 56px - env(safe-area-inset-top, 0px));
        height: calc(100dvh - 56px - env(safe-area-inset-top, 0px));
    }
}