body { background-color: #f8f9fa; }
.navbar { border-bottom: 2px solid #495057; }
.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .dropdown-item,
.app-navbar .btn { white-space: nowrap; }
.app-navbar .navbar-brand,
.app-map-title,
.app-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}
.app-navbar .navbar-brand { max-width: 190px; }
.secondary-nav-links { display: flex; min-width: 0; }
.app-map-title { display: inline-block; max-width: 210px; }
.app-account-name { display: inline-block; max-width: 140px; }
.page-header { margin-bottom: 1.5rem; }
.card { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.card-title { font-weight: 600; margin-bottom: 1rem; color: #343a40; }
.tool-map-panel { height: calc(100vh - 100px); min-height: 500px; }
.tool-map { flex: 1 1 auto; min-height: 360px; }
.tool-map-fullscreen { position: fixed !important; inset: 0; z-index: 1080; height: 100vh !important; min-height: 100vh !important; border-radius: 0; }
.tool-map-fullscreen .tool-map { min-height: 0; }
.tool-map-toolbar {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: .6rem .75rem;
}
.tool-map-toolbar-main,
.tool-map-toolbar-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.tool-map-toolbar-main { justify-content: space-between; }
.tool-map-toolbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tool-map-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}
.tool-map-toolbar-controls { flex-wrap: wrap; }
.tool-map-control {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .875rem;
    white-space: nowrap;
    min-width: 0;
}
.tool-map-control span:first-child { color: #495057; }
.tool-map-control .form-select {
    width: auto;
    min-width: 12rem;
    max-width: 18rem;
}
.tool-map-control--overlay .form-select {
    min-width: 16rem;
    max-width: min(34rem, 52vw);
}
.tool-map-control--opacity {
    flex: 0 0 auto;
}
.tool-map-overlay-opacity {
    width: 7rem;
    max-width: 7rem;
}
.tool-map-overlay-opacity-value {
    min-width: 2.8em;
    text-align: right;
}
.tool-action-row { border: 1px solid #dee2e6; border-radius: 8px; padding: .5rem; margin-bottom: .5rem; }
.tool-controls-column {
    position: relative;
    transition: flex-basis .22s ease, width .22s ease, max-width .22s ease;
}
.tool-controls-collapse {
    transform-origin: left center;
    transition: opacity .18s ease, transform .22s ease;
}
.tool-controls-hide-btn {
    position: absolute;
    top: .85rem;
    right: .75rem;
    z-index: 20;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.tool-controls-show-btn {
    white-space: nowrap;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: opacity .18s ease, transform .22s ease;
}
.tool-controls-column.is-collapsed {
    flex: 0 0 auto;
    width: auto;
}
.tool-controls-column.is-collapsed .tool-controls-show-btn { display: inline-flex !important; }
.tool-controls-column.is-collapsing .tool-controls-collapse {
    opacity: 0;
    transform: translateX(-12px) scaleX(.96);
    pointer-events: none;
}
.tool-controls-column.tool-controls-hide-after-animation .tool-controls-collapse { display: none !important; }
@media (min-width: 1200px) {
    .app-navbar .navbar-collapse,
    .app-navbar .navbar-nav,
    .app-map-nav { flex-wrap: nowrap; min-width: 0; }
    .app-navbar .nav-link { padding-left: .45rem; padding-right: .45rem; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .app-navbar { padding-left: .6rem !important; padding-right: .6rem !important; }
    .app-navbar .navbar-brand { max-width: 155px; font-size: .95rem; }
    .app-navbar .nav-link,
    .app-navbar .btn { font-size: .9rem; }
    .app-map-title { max-width: 150px; }
    .app-account-name { max-width: 95px; }
}

@media (max-width: 1199.98px) {
    .app-navbar .navbar-nav { gap: .15rem; }
    .app-map-nav { padding: .35rem 0; }
    .app-map-title { max-width: min(70vw, 360px); }
    .app-account-name { max-width: min(60vw, 280px); }
}

@media (max-width: 991.98px) {
    .tool-map-toolbar-main,
    .tool-map-toolbar-controls {
        align-items: stretch;
    }
    .tool-map-toolbar-main {
        flex-direction: column;
    }
    .tool-map-toolbar-actions {
        justify-content: flex-start;
    }
    .tool-map-control {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
    }
    .tool-map-control--opacity {
        grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr) auto;
    }
    .tool-map-control .form-select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .tool-map-overlay-opacity {
        width: 100%;
        max-width: none;
    }
    #print-preview-map {
        height: 45vh;
        min-height: 300px;
    }
}

/* Map control buttons — stronger border and contrast so they stand out on light tiles */
.leaflet-control-zoom a { border-color: rgba(0,0,0,.35) !important; color: #333 !important; }
.leaflet-control-zoom a:hover { color: #0d6efd !important; background-color: #fff !important; }
.leaflet-top .btn { border: 1px solid rgba(0,0,0,.3) !important; background-color: rgba(255,255,255,.92) !important; color: #333 !important; }
.leaflet-top .btn:hover { background-color: #fff !important; color: #0d6efd !important; }