/*
 * Skaha Turf theme for MapStore (v2024.02).
 *
 * The stock MapStore theme only *reads* --ms-* variables with fallbacks
 * (e.g. var(--ms-primary,#078aa3)) and never declares them, so declaring
 * them here re-colours the whole UI without rebuilding MapStore.
 *
 * MapStore injects its theme stylesheet after this file (loadAfterTheme),
 * so direct selector overrides are prefixed with `html` to out-rank the
 * theme's `.ms2 ...` selectors.
 *
 * Skaha Turf palette (from the Skaha Turf UI mockups; separate from Skaha Labs):
 *   navy #1f2a37 (chrome), teal-green #2f7d6b (primary, 4.9:1 on white),
 *   light teal #8fd3c1 (accents on navy), amber #c9882a (attention).
 * Type: IBM Plex Sans, as on the Skaha Turf website.
 */

:root {
    --turf-navy: #1f2a37;
    --turf-navy-light: #283545;
    --turf-teal: #2f7d6b;
    --turf-teal-dark: #276b5b;
    --turf-teal-darker: #1f574a;
    --turf-teal-light: #8fd3c1;
    --turf-amber: #c9882a;
    --turf-muted: #6b7682;
    --turf-font: "IBM Plex Sans", "Noto Sans", sans-serif;
    --turf-display: "IBM Plex Sans", "Noto Sans", sans-serif;

    --ms-primary: var(--turf-teal);
    --ms-primary-contrast: #fff;
    --ms-link-color: var(--turf-teal-dark);
    --ms-link-hover-color: var(--turf-teal-darker);
    --ms-focus-color: var(--turf-teal);
    --ms-success: var(--turf-teal);
    --ms-selected-color: var(--turf-teal);

    --ms-loader-primary-color: var(--turf-teal);
    --ms-loader-primary-fade-color: #2f7d6b33;

    --ms-button-color: var(--turf-teal);
    --ms-button-border-color: var(--turf-teal);
    --ms-button-badge-color: var(--turf-teal);
    --ms-button-hover-color: var(--turf-teal-dark);
    --ms-button-hover-border-color: var(--turf-teal);
    --ms-button-focus-color: var(--turf-teal);
    --ms-button-focus-border-color: var(--turf-teal-darker);
    --ms-button-active-color: var(--turf-teal-dark);
    --ms-button-active-border-color: var(--turf-teal);
    --ms-button-active-hover-color: var(--turf-teal-darker);
    --ms-button-active-hover-border-color: var(--turf-teal);

    --ms-button-primary-bg: var(--turf-teal);
    --ms-button-primary-border-color: var(--turf-teal-dark);
    --ms-button-primary-badge-color: var(--turf-teal);
    --ms-button-primary-hover-bg: var(--turf-teal-dark);
    --ms-button-primary-hover-border-color: var(--turf-teal-darker);
    --ms-button-primary-focus-bg: var(--turf-teal);
    --ms-button-primary-focus-border-color: var(--turf-teal-darker);
    --ms-button-primary-active-bg: var(--turf-teal-dark);
    --ms-button-primary-active-border-color: var(--turf-teal-darker);
    --ms-button-primary-active-hover-bg: var(--turf-teal-darker);
    --ms-button-primary-active-hover-border-color: #17443a;

    --ms-button-tray-border-color: var(--turf-teal);
    --ms-button-tray-hover-border-color: var(--turf-teal-dark);
    --ms-button-tray-focus-border-color: var(--turf-teal-darker);
    --ms-button-tray-active-border-color: var(--turf-teal-dark);
    --ms-button-tray-active-hover-border-color: var(--turf-teal-darker);

    --ms-timeline-histogram-bg: #2f7d6b80;
    --ms-timeline-histogram-color: var(--turf-teal-dark);
    --ms-timeline-selected-bg: #2f7d6b0d;

    /* "success" buttons (e.g. the signed-in user button) */
    --ms-button-success-bg: var(--turf-teal);
    --ms-button-success-border-color: var(--turf-teal-dark);
    --ms-button-success-hover-bg: var(--turf-teal-dark);
    --ms-button-success-hover-border-color: var(--turf-teal-darker);
    --ms-button-success-focus-bg: var(--turf-teal);
    --ms-button-success-focus-border-color: var(--turf-teal-darker);
    --ms-button-success-active-bg: var(--turf-teal-dark);
    --ms-button-success-active-border-color: var(--turf-teal-darker);

    --ms-jumbotron-bg: transparent;
    --ms-jumbotron-color: #fff;
}

/* ---------- Typography ---------- */

html, html body, html .ms2 {
    font-family: var(--turf-font);
}
html .ms2 h1, html .ms2 h2, html .ms2 h3,
html .ms2 .ms-home-description h1 {
    font-family: var(--turf-display);
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* ---------- Bootstrap leftovers hard-coded to MapStore teal ---------- */

html .ms2 .form-control:focus,
html .ms2 .rw-widget.rw-state-focus,
html .ms2 .rw-widget.rw-state-focus:hover {
    border-color: var(--turf-teal);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px rgba(47, 125, 107, .45);
}
html .ms2 .btn-default:hover,
html .ms2 .btn-default:active,
html .ms2 .btn-default.active,
html .ms2 .open > .dropdown-toggle.btn-default {
    color: var(--turf-teal-dark);
}
html .ms2 .btn-primary:focus,
html .ms2 .btn-primary.focus {
    background-color: var(--turf-teal);
}
html .ms2 .pagination > li > a,
html .ms2 .pagination > li > span,
html .ms2 a.text-primary:hover,
html .ms2 a.text-primary:focus {
    color: var(--turf-teal);
}
html .ms2 .pagination > .active > a,
html .ms2 .pagination > .active > a:hover,
html .ms2 .pagination > .active > a:focus,
html .ms2 .pagination > .active > span,
html .ms2 .list-group-item.active,
html .ms2 .list-group-item.active:hover,
html .ms2 .list-group-item.active:focus,
html .ms2 a.thumbnail:hover,
html .ms2 a.thumbnail.active {
    border-color: var(--turf-teal);
}
html .ms2 .label-primary,
html .ms2 .progress-bar,
html .ms2 .panel-primary > .panel-heading {
    background-color: var(--turf-teal);
}
html .ms2 .panel-primary,
html .ms2 .panel-primary > .panel-heading {
    border-color: var(--turf-teal);
}

/* ---------- Top navbar (home page, dashboards) ---------- */

/* Scoped to the home page and dashboards: the map viewer reuses
   #mapstore-navbar for its floating search bar, which must stay transparent. */
html .ms2 .page-maps .navbar-home,
html .ms2 #page-dashboard #mapstore-navbar-container,
html .ms2 #page-dashboard #mapstore-navbar {
    background-color: var(--turf-navy);
    border-color: var(--turf-navy);
    color: #fff;
}
html .ms2 .page-maps .navbar-home::after {
    /* Thin teal accent line under the navbar */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: var(--turf-teal);
    pointer-events: none;
}
html .ms2 .page-maps .navbar-home .navbar-nav > li > a,
html .ms2 .page-maps .navbar-home a,
html .ms2 .page-maps .navbar-home .btn-link,
html .ms2 #page-dashboard #mapstore-navbar-container .navbar-nav > li > a {
    color: #e3eef5;
    font-family: var(--turf-font);
    font-weight: 500;
}
html .ms2 .page-maps .navbar-home .navbar-nav > li > a:hover,
html .ms2 .page-maps .navbar-home .navbar-nav > li > a:focus,
html .ms2 #page-dashboard #mapstore-navbar-container .navbar-nav > li > a:hover,
html .ms2 #page-dashboard #mapstore-navbar-container .navbar-nav > li > a:focus {
    color: var(--turf-teal-light);
    background-color: transparent;
}
/* Dropdown menus (user menu: Sign in, Account, Logout) are white: keep their text dark */
html .ms2 .page-maps .navbar-home .dropdown-menu a,
html .ms2 .page-maps .navbar-home .dropdown-menu .btn-link,
html .ms2 #page-dashboard #mapstore-navbar-container .dropdown-menu a {
    color: var(--turf-navy);
}
html .ms2 .page-maps .navbar-home .dropdown-menu a:hover,
html .ms2 .page-maps .navbar-home .dropdown-menu a:focus,
html .ms2 #page-dashboard #mapstore-navbar-container .dropdown-menu a:hover {
    color: var(--turf-teal-dark);
    background-color: #eef4f2;
}
/* The "Contents" nav item (2nd entry, right after the logo) has no target; the logo
   already links home. Admin-only items (3rd and later) stay visible. */
html .ms2 .navbar-home .nav.pull-left > li:nth-child(2),
html .ms2 #page-dashboard #mapstore-navbar-container .nav.pull-left > li:nth-child(2) {
    display: none;
}
/* Skaha Turf wordmark rendered by the Attribution plugin */
html .ms2 img.customer-logo {
    height: 36px;
    width: auto;
    margin: 0 4px;
    position: static !important;
}
/* Home page: taller navbar so the logo can be large without cropping */
html .ms2 .page-maps .navbar-home {
    min-height: 84px;
}
html .ms2 .page-maps .navbar-home img.customer-logo {
    height: 68px !important;
    margin: 8px 8px;
}
html .ms2 .page-maps .navbar-home .navbar-nav > li > a {
    line-height: 52px;
}
html .ms2 .page-maps .navbar-home .square-button.dropdown-toggle {
    margin-top: 22px;
}

/* ---------- Home page banner (HomeDescription plugin) ---------- */

html .ms2 .page-maps .ms-home-description {
    position: relative;
    margin: 0;
    padding: 100px 0 28px;
    background-color: var(--turf-navy);
    background-image: linear-gradient(115deg, #1f2a37 0%, #1f2a37 55%, #24414a 100%) !important;
    color: #fff;
    text-align: left;
}
html .ms2 .page-maps .ms-home-description::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--turf-teal);
}
html .ms2 .page-maps .ms-home-description .container {
    width: 90%;
    max-width: 1170px;
    background: transparent;
}
html .ms2 .page-maps .ms-home-description .col-xs-12 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
    justify-content: center;
}
html .ms2 .page-maps .ms-home-description h1 {
    font-size: 34px;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 0 0 4px;
    color: #fff;
}
html .ms2 .page-maps .ms-home-description p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
    color: #d5dde4;
}
html .ms2 .page-maps .ms-home-description p small {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--turf-teal-light);
}
@media (max-width: 767px) {
    html .ms2 .page-maps .ms-home-description {
        padding: 56px 0 20px;
    }
    html .ms2 .page-maps .ms-home-description .col-xs-12 {
        padding-left: 56px;
        background-size: 42px 42px;
    }
    html .ms2 .page-maps .ms-home-description h1 {
        font-size: 26px;
    }
}

/* ---------- Home page content ---------- */

html .ms2 .page-maps .nav-tabs > li.active > a,
html .ms2 .page-maps .nav-tabs > li.active > a:hover,
html .ms2 .page-maps .nav-tabs > li.active > a:focus {
    border-top: 3px solid var(--turf-teal);
    color: var(--turf-navy);
    font-weight: 600;
}
html .ms2 .page-maps .nav-tabs > li > a {
    color: var(--turf-teal);
}

/* Footer: logo + "home.footerDescription" text */
html .ms2 .page-maps > .container:last-child {
    color: var(--turf-muted);
}
/* The navbar logo is the only logo; hide the footer one */
html .ms2 .page-maps > .container:last-child img {
    display: none;
}

/* ---------- Timeline: surveys are daily ---------- */

/* Hide time of day (hh:mm:ss, UTC offset) - surveys are dated, not timed */
html .ms2 .timeline-plugin .ms-dt-hours,
html .ms2 .timeline-plugin .ms-dt-minutes,
html .ms2 .timeline-plugin .ms-dt-seconds,
html .ms2 .timeline-plugin .ms-dt-separator,
html .ms2 .timeline-plugin .ms-dt-icon:has(.glyphicon-time) {
    display: none !important; /* theme sets display with higher specificity */
}
/* Time offset / viewport filter / playback settings are expert tools */
html .ms2 .timeline-plugin-btn-group > .btn-group,
html .ms2 .playback-plugin .btn:has(.glyphicon-cog) {
    display: none !important;
}

/* ---------- Click info popup (GeoServer skaha templates) ---------- */

html .ms2 .ms-popup-container .skaha-gfi,
html .ms2 .ms-identify-container .skaha-gfi {
    min-width: 180px;
}

/* Popup and dashboard text use the brand face */
html .ms2 .skaha-gfi,
html .ms2 .mapstore-widget-card .widget-title,
html .ms2 .ms-text-widget {
    font-family: var(--turf-font);
}