/* Soil.OS: layout around a full-bleed map */

html, body {
    margin: 0;
    height: 100%;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.soilos-appbar .mud-toolbar {
    gap: 8px;
}

.soilos-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-secondary);
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

.soilos-brand img {
    height: 28px;
}

.soilos-brand-large {
    margin-bottom: 20px;
    font-size: 22px;
}

.soilos-brand-large img {
    height: 36px;
}

.soilos-farm-picker {
    max-width: 280px;
    margin-left: 16px;
}

.soilos-mode-toggle {
    margin-left: 16px;
    flex-shrink: 0;
}

.soilos-main {
    height: 100vh;
    box-sizing: border-box;
}

/* The map fills everything under the app bar; panels float over its edges */
.soilos-canvas {
    position: relative;
    height: calc(100vh - var(--mud-appbar-height));
}

.soilos-map {
    position: absolute;
    inset: 0;
    background: #dde3e0;
}

.soilos-panel {
    position: absolute;
    z-index: 500;
    top: 16px;
    width: 320px;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    box-sizing: border-box;
}

.soilos-panel-right {
    right: 16px;
}

.soilos-panel-left {
    left: 16px;
}

.soilos-panel-left {
    width: 300px;
    max-height: calc(100% - 32px);
    display: flex;
    flex-direction: column;
}

.soilos-panel-right {
    max-height: calc(100% - 32px);
    overflow-y: auto;
}

.soilos-panel-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.soilos-field-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin: 6px 0 4px;
}

.soilos-field-filters .mud-chip {
    margin: 0 4px 0 0;
}

.soilos-field-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-bottom: 2px;
}

.soilos-field-list {
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0 -8px;
}

.soilos-field-group {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
    padding: 8px 8px 2px;
}

.soilos-field-row {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    border-radius: 4px;
}

.soilos-field-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.soilos-field-name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.25;
    padding: 4px 0;
}

.soilos-field-name > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soilos-field-meta {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.soilos-field-nodata {
    color: var(--mud-palette-warning-darken);
}

.soilos-layer-chips {
    display: flex;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

.soilos-layer-chips .mud-chip {
    margin: 0 4px 4px 0;
}

.soilos-data-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 0 10px;
}

.soilos-opacity {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.soilos-legend {
    margin-top: 4px;
}

.soilos-legend-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.soilos-legend-ramp {
    display: flex;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.soilos-legend-ramp span {
    flex: 1;
}

.soilos-legend-values {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.soilos-status-note {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 6px 8px;
    border-radius: 4px;
    background: var(--mud-palette-info-hover);
    font-size: 12px;
    line-height: 1.4;
}

.soilos-status-note .mud-icon-root {
    color: var(--mud-palette-info);
    flex-shrink: 0;
}

/* The pane pill names what is on the map; it is the only place the pane's full state is written down */
.soilos-pane-pill {
    position: absolute;
    z-index: 450;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    pointer-events: none;
}

.soilos-panel.is-collapsed {
    max-height: none;
}

/* Compare: two maps with one camera. Stacked, side by side (wide screens only) or swipe. */
.soilos-compare {
    position: absolute;
    inset: 0;
    display: flex;
    --swipe: 50%;
}

.soilos-compare-stack {
    flex-direction: column;
}

.soilos-compare-sbs {
    flex-direction: row;
}

/* Each pane is its own stacking context: Leaflet layers use z-index 400+, which would otherwise paint pane A
   over pane B in the swipe layout */
.soilos-compare-box {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    z-index: 0;
}

.soilos-compare-box.pane-b {
    z-index: 1;
}

.soilos-compare-stack .pane-b {
    border-top: 3px solid #ffffff;
}

.soilos-compare-sbs .pane-b {
    border-left: 3px solid #ffffff;
}

/* Swipe: both panes fill the box, B is clipped at the divider */
.soilos-compare-swipe .soilos-compare-box {
    position: absolute;
    inset: 0;
}

.soilos-compare-swipe .pane-b {
    clip-path: inset(0 0 0 var(--swipe));
}

.soilos-swipe-handle {
    position: absolute;
    z-index: 460;
    top: 0;
    bottom: 0;
    left: var(--swipe);
    width: 4px;
    margin-left: -2px;
    background: #ffffff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    cursor: ew-resize;
    touch-action: none;
}

.soilos-swipe-handle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
}

.soilos-swipe-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-secondary);
}

.soilos-compare-swipe .soilos-pane-pill-a {
    left: 25%;
}

.soilos-compare-swipe .soilos-pane-pill-b {
    left: 75%;
}

.soilos-shared-chip {
    margin-left: 8px;
    font-weight: 400;
    font-size: 12px;
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.soilos-layout-bar {
    position: absolute;
    z-index: 470;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.soilos-pane-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: var(--mud-palette-secondary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    margin-right: 6px;
}

.soilos-compare-pane {
    padding: 10px 0 4px;
}

.soilos-compare-pane-title {
    display: flex;
    align-items: center;
}

.soilos-compare-legend {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 10px 0;
    margin: 4px 0;
}

.soilos-legend-pane-chips {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 4px;
}

/* Clicking a field focuses its SVG path, and the browser would draw its focus ring around the path's bounding box.
   Map shapes are not keyboard targets (fields are reached through the Fields panel), so the ring only confuses. */
.soilos-map .leaflet-interactive:focus {
    outline: none;
}

/* Google attribution: logo plus the copyright of the imagery in view */
.soilos-attribution {
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 6px;
    font-size: 11px;
    color: #3c4043;
    margin: 0 !important;
}

.soilos-google-logo {
    font-weight: 700;
    letter-spacing: -0.2px;
}

.soilos-signin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    background: linear-gradient(160deg, #e8f4f0 0%, #f6f8f7 60%);
}

.soilos-signin-card {
    width: 400px;
    max-width: 100%;
    padding: 32px;
    box-sizing: border-box;
}

/* Narrow windows: centred, the layout toggle would sit under the data card; the Fields panel starts collapsed
   here, so the toggle goes under its header */
@media (min-width: 601px) and (max-width: 999px) {
    .soilos-layout-bar {
        top: 72px;
        left: 16px;
        transform: none;
    }
}

@media (max-width: 600px) {
    /* Phone app bar: logo mark only, compact picker and toggle, icon-only account button */
    .soilos-appbar .mud-toolbar {
        gap: 4px;
        padding-left: 8px;
        padding-right: 4px;
    }

    .soilos-appbar .soilos-brand span {
        display: none;
    }

    .soilos-appbar .soilos-brand img {
        height: 24px;
        width: 26px;
        object-fit: cover;
        object-position: left;
    }

    .soilos-farm-picker {
        max-width: 120px;
        margin-left: 4px;
    }

    .soilos-mode-toggle {
        margin-left: 4px;
    }

    .soilos-mode-toggle .mud-toggle-item {
        padding: 2px 6px;
        font-size: 12px;
    }

    .soilos-user-name {
        display: none;
    }

    .soilos-appbar .mud-button-text .mud-button-icon-start {
        margin: 0;
    }

    /* Phones: the data card is a sheet above the attribution line (which must stay visible), the field list
       sits under the app bar; both collapse to their header. Zoom is by pinch. */
    .soilos-panel {
        left: 8px;
        right: 8px;
        width: auto;
        padding: 8px 12px;
    }

    .soilos-panel-right {
        top: auto;
        bottom: 40px;
        max-height: 55%;
    }

    .soilos-panel-left {
        top: 8px;
        max-height: 45%;
    }

    .soilos-pane-pill {
        display: none;
    }

    .soilos-layout-bar {
        top: 60px;
    }

    .soilos-map .leaflet-control-zoom {
        display: none;
    }
}