﻿/* ==========================================================================
   mcBrand.css — Missoula County brand theme for Land Research (Bootstrap 4)
   Source: Missoula County Identity Design Guide (Dec 2020)
   Load LAST so it overrides bootstrap / mcStyles / site / samples.
   ========================================================================== */

:root {
    /* Primary palette */
    --mc-black: #231f20;
    --mc-dark-blue: #38444b;
    --mc-light-blue: #688898;
    --mc-stone: #e3e1dc;
    /* Secondary palette — use sparingly */
    --mc-green: #acb55c;
    --mc-medium-blue: #395f6f;
    --mc-light-gold: #c9a978;
    --mc-rust: #a45248;
    /* Derived UI tints (shades of palette colors, not new hues) */
    --mc-dark-blue-900: #2b353b;
    --mc-medium-blue-700: #2e4d5a;
    --mc-stone-50: #f6f5f3;
    --mc-stone-200: #eceae6;
    --mc-border: #d4d1ca;
    --mc-text: #231f20;
    --mc-text-muted: #5a6369;
    --mc-focus: rgba(57, 95, 111, .35);
    /* Type: Avenir/Arial body (Arimo = metric-compatible Arial), Rockwell headings */
    --mc-font-body: "Avenir Next", "Avenir", "Arimo", Arial, sans-serif;
    --mc-font-head: "Rockwell", "Roboto Slab", Georgia, serif;
}

/* ---------- Base ---------- */
/* Sticky footer: body is a full-height flex column, footer pushed down with margin-top:auto.
   !important guards against height/position/margin rules in mcStyles.css, site.css, samples.css */
html {
    height: 100%;
    min-height: 100%;
    position: static !important;
}

body.mc-brand {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--mc-stone-50) !important; /* fallback while photo loads */
    background-image: none !important; /* photo is drawn by ::before below */
    color: var(--mc-text);
    font-family: var(--mc-font-body);
    font-size: 15px;
    line-height: 1.5;
}

/* Photo background — fixed layer instead of background-attachment:fixed,
   which iOS Safari ignores (it zooms the image to full page height).
   --mc-bg-veil lightens the photo a touch so page headings stay readable;
   set it to transparent for the full-strength photo. */
body.mc-brand {
    --mc-bg-veil: rgba(246, 245, 243, .25);
    /* own stacking context so the z-index:-1 photo paints above body's background color
       even when another stylesheet gives <html> a background */
    isolation: isolate;
}

    body.mc-brand::before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(var(--mc-bg-veil), var(--mc-bg-veil)), url('../images/background.jpg') center top / cover no-repeat; /* wwwroot/images, relative to this file */
    }

/* Headings sitting directly on the photo (not inside a white panel) */
.mc-main > div > h1, .mc-main > div > h2, .mc-main > div > h3 {
    text-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9);
}

.mc-brand h1, .mc-brand h2, .mc-brand h3,
.mc-brand h4, .mc-brand h5, .mc-brand .mc-title {
    font-family: var(--mc-font-head);
    font-weight: 700;
    color: var(--mc-dark-blue);
    letter-spacing: .01em;
}

.mc-brand h1 {
    font-size: 1.75rem;
}

.mc-brand h2 {
    font-size: 1.5rem;
}

.mc-brand h3 {
    font-size: 1.25rem;
}

.mc-brand h4 {
    font-size: 1.1rem;
}

.mc-brand a {
    color: var(--mc-medium-blue);
}

    .mc-brand a:hover, .mc-brand a:focus {
        color: var(--mc-dark-blue);
    }

.mc-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--mc-dark-blue);
    color: #fff !important;
    padding: .5rem 1rem;
}

    .mc-skip:focus {
        left: 1rem;
        top: .5rem;
    }

/* ---------- Header ---------- */
.mc-site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 6px rgba(35, 31, 32, .12);
}

.mc-brandbar {
    background: #fff;
    border-bottom: 3px solid var(--mc-green);
}

    .mc-brandbar .mc-inner {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .55rem 1.25rem;
        max-width: 1600px;
        margin: 0 auto;
    }

    .mc-brandbar .mc-logo-link {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
    }

    .mc-brandbar .mc-logo {
        height: 40px;
        width: auto;
        display: block;
    }

    .mc-brandbar .mc-divider {
        width: 1px;
        align-self: stretch;
        background: var(--mc-border);
        margin: .15rem 0;
    }

    .mc-brandbar .mc-title {
        margin: 0;
        font-size: 1.35rem;
        color: var(--mc-dark-blue);
        text-decoration: none;
        line-height: 1.1;
    }

        .mc-brandbar .mc-title small {
            display: block;
            font-family: var(--mc-font-body);
            font-weight: 400;
            font-size: .72rem;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--mc-light-blue);
            margin-top: 2px;
        }

        .mc-brandbar .mc-title:hover {
            color: var(--mc-medium-blue);
            text-decoration: none;
        }

/* ---------- Navigation ---------- */
.mc-nav.navbar {
    background: var(--mc-dark-blue);
    padding: 0;
}
/* Same max-width + side padding as .mc-brandbar .mc-inner so the menu lines up with the logo */
.mc-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 992px) {
    /* pull first item left by its padding so the "Doc" text starts at the logo's left edge */
    .mc-nav .navbar-nav {
        margin-left: -.8rem;
    }
}

.mc-nav .nav-link {
    color: rgba(255, 255, 255, .9) !important;
    font-weight: 600;
    font-size: .92rem;
    padding: .7rem .8rem !important;
    border-bottom: 3px solid transparent;
    transition: background-color .15s, border-color .15s;
}

    .mc-nav .nav-link:hover,
    .mc-nav .nav-link:focus,
    .mc-nav .show > .nav-link {
        color: #fff !important;
        background: var(--mc-dark-blue-900);
    }

.mc-nav .nav-item.active > .nav-link {
    color: #fff !important;
    border-bottom-color: var(--mc-green);
}

.mc-nav .navbar-toggler {
    border-color: rgba(255, 255, 255, .4);
    margin: .4rem 0;
}

.mc-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.mc-nav .navbar-toggler-label {
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    margin-left: .35rem;
}

.mc-nav .dropdown-menu {
    margin-top: 0;
    border: 0;
    border-top: 3px solid var(--mc-green);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 20px rgba(35, 31, 32, .18);
    padding: .35rem 0;
    min-width: 13rem;
}

.mc-nav .dropdown-item {
    color: var(--mc-text);
    font-size: .92rem;
    padding: .45rem 1rem;
}

    .mc-nav .dropdown-item:hover,
    .mc-nav .dropdown-item:focus {
        background: var(--mc-stone);
        color: var(--mc-dark-blue);
    }

    .mc-nav .dropdown-item.active,
    .mc-nav .dropdown-item:active {
        background: var(--mc-medium-blue);
        color: #fff;
    }

    .mc-nav .dropdown-item .fa {
        width: 1.1em;
        color: var(--mc-light-blue);
        margin-right: .35rem;
    }

    .mc-nav .dropdown-item.active .fa {
        color: #fff;
    }

@media (max-width: 991.98px) {
    .mc-nav .navbar-collapse {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding-bottom: .5rem;
    }

    .mc-nav .nav-link {
        border-bottom: 0;
        border-left: 3px solid transparent;
    }

    .mc-nav .nav-item.active > .nav-link {
        border-left-color: var(--mc-green);
    }

    .mc-nav .dropdown-menu {
        background: var(--mc-dark-blue-900);
        border-top: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .mc-nav .dropdown-item {
        color: rgba(255,255,255,.88);
        padding-left: 2rem;
    }

        .mc-nav .dropdown-item:hover, .mc-nav .dropdown-item:focus {
            background: var(--mc-medium-blue);
            color: #fff;
        }

        .mc-nav .dropdown-item .fa {
            color: var(--mc-light-gold);
        }

    .mc-brandbar .mc-logo {
        height: 32px;
    }

    .mc-brandbar .mc-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .mc-brandbar .mc-divider, .mc-brandbar .mc-title small {
        display: none;
    }
}

/* ---------- Main content ---------- */
.mc-main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
    float: none !important;
    position: static !important;
}
    /* contain any floated page content so it can't spill past the footer */
    .mc-main::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Search-form panels on the pages (forms rendered by RenderBody) */
    .mc-main form:not(.form-inline) {
        background: #fff;
        border: 1px solid var(--mc-border);
        border-radius: 8px;
        padding: 1.1rem 1.25rem;
        margin-bottom: 1.25rem;
        box-shadow: 0 1px 2px rgba(35, 31, 32, .05);
    }

    .mc-main label {
        font-weight: 600;
        color: var(--mc-dark-blue);
        font-size: .9rem;
        margin-bottom: .25rem;
    }

.mc-brand .form-control,
.mc-brand .custom-select {
    border-color: var(--mc-border);
    border-radius: 6px;
    color: var(--mc-text);
}

    .mc-brand .form-control:focus,
    .mc-brand .custom-select:focus {
        border-color: var(--mc-medium-blue);
        box-shadow: 0 0 0 .2rem var(--mc-focus);
    }

/* Buttons */
.mc-brand .btn {
    border-radius: 6px;
    font-weight: 600;
}

    .mc-brand .btn:focus, .mc-brand .btn.focus {
        box-shadow: 0 0 0 .2rem var(--mc-focus) !important;
    }

.mc-brand .btn-primary {
    background: var(--mc-medium-blue);
    border-color: var(--mc-medium-blue);
    color: #fff;
}

    .mc-brand .btn-primary:hover,
    .mc-brand .btn-primary:not(:disabled):not(.disabled):active {
        background: var(--mc-dark-blue);
        border-color: var(--mc-dark-blue);
    }

.mc-brand .btn-outline-primary {
    color: var(--mc-medium-blue);
    border-color: var(--mc-medium-blue);
}

    .mc-brand .btn-outline-primary:hover {
        background: var(--mc-medium-blue);
        color: #fff;
    }

.mc-brand .btn-success {
    background: #7b8236;
    border-color: #7b8236;
}
    /* green, darkened for white-text contrast */
    .mc-brand .btn-success:hover {
        background: #656b2b;
        border-color: #656b2b;
    }

.mc-brand .btn-danger {
    background: var(--mc-rust);
    border-color: var(--mc-rust);
}

/* ---------- Loading / empty states ---------- */
#imgLoading {
    display: block;
    margin: 2rem auto;
    max-width: 64px;
}

#nothingFound {
    background: #fff;
    border: 1px solid var(--mc-border);
    border-left: 4px solid var(--mc-light-gold);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    color: var(--mc-text-muted);
    font-weight: 600;
}

/* ---------- DataTables ---------- */
.mc-brand .dataTables_wrapper {
    background: #fff;
    opacity: 1 !important;
    border: 1px solid var(--mc-border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(35, 31, 32, .06);
    margin-bottom: 1.5rem;
}

.mc-brand table.dataTable {
    border-collapse: collapse !important;
    margin-top: .75rem !important;
}

    .mc-brand table.dataTable thead th {
        background: var(--mc-dark-blue);
        color: #fff;
        border-color: var(--mc-dark-blue-900) !important;
        font-weight: 600;
        font-size: .88rem;
        vertical-align: middle;
        white-space: nowrap;
    }

    .mc-brand table.dataTable thead .sorting:before,
    .mc-brand table.dataTable thead .sorting:after,
    .mc-brand table.dataTable thead .sorting_asc:before,
    .mc-brand table.dataTable thead .sorting_asc:after,
    .mc-brand table.dataTable thead .sorting_desc:before,
    .mc-brand table.dataTable thead .sorting_desc:after {
        color: #fff;
    }

    .mc-brand table.dataTable td {
        border-color: var(--mc-stone-200) !important;
        font-size: .9rem;
        vertical-align: middle;
    }

        .mc-brand table.dataTable td a {
            word-wrap: break-word;
        }

.mc-brand .table-striped tbody tr:nth-of-type(odd) {
    background: var(--mc-stone-50);
}

.mc-brand table.dataTable tbody tr:hover {
    background: #e8eef1;
}

.mc-brand table.dataTable.table-bordered {
    border-color: var(--mc-border);
}

/* responsive child-row toggle */
.mc-brand table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before,
.mc-brand table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
    background-color: var(--mc-medium-blue);
    box-shadow: none;
}

.mc-brand table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before {
    background-color: var(--mc-rust);
}

.mc-brand .dataTables_filter input,
.mc-brand .dataTables_length select {
    border-radius: 6px;
}

.mc-brand .dataTables_info {
    color: var(--mc-text-muted);
    font-size: .88rem;
}

.mc-brand .page-link {
    color: var(--mc-medium-blue);
    border-color: var(--mc-border);
}

    .mc-brand .page-link:hover {
        color: var(--mc-dark-blue);
        background: var(--mc-stone);
    }

.mc-brand .page-item.active .page-link {
    background: var(--mc-medium-blue);
    border-color: var(--mc-medium-blue);
    color: #fff;
}

.mc-brand .page-link:focus {
    box-shadow: 0 0 0 .2rem var(--mc-focus);
}

/* DataTables Buttons (copy / excel / print / colvis) */
.mc-brand .dt-buttons .btn,
.mc-brand .dt-buttons .btn-secondary {
    background: #fff;
    color: var(--mc-medium-blue);
    border: 1px solid var(--mc-medium-blue);
    font-size: .85rem;
}

    .mc-brand .dt-buttons .btn:hover {
        background: var(--mc-medium-blue);
        color: #fff;
    }

/* ---------- Modal ---------- */
.mc-brand .modal-content {
    border: 0;
    border-radius: 8px;
    border-top: 4px solid var(--mc-dark-blue);
}

/* ---------- Date picker (tempusdominus) ---------- */
.mc-brand .bootstrap-datetimepicker-widget table td.active,
.mc-brand .bootstrap-datetimepicker-widget table td.active:hover,
.mc-brand .bootstrap-datetimepicker-widget table td span.active {
    background: var(--mc-medium-blue);
}

.mc-brand .bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--mc-green);
}

/* ---------- Footer ---------- */
.mc-footer {
    flex-shrink: 0;
    margin-top: auto !important;
    position: static !important;
    width: 100%;
    background: var(--mc-dark-blue);
    color: #fff;
    border-top: 4px solid var(--mc-green);
    font-size: .88rem;
}

    .mc-footer .mc-inner {
        max-width: 1600px;
        margin: 0 auto;
        padding: 1.5rem 1.25rem 1.25rem;
        display: grid;
        grid-template-columns: minmax(200px, 1fr) 2fr;
        gap: 1.5rem 2.5rem;
    }

    .mc-footer .mc-footer-name {
        font-family: var(--mc-font-head);
        font-size: 1.15rem;
        font-weight: 700;
        color: #fff;
        margin: 0 0 .25rem;
    }

    .mc-footer .mc-footer-sub {
        color: var(--mc-stone);
        margin: 0;
        line-height: 1.6;
    }

    .mc-footer a {
        color: #fff;
        text-decoration: underline;
        text-decoration-color: var(--mc-light-gold);
    }

        .mc-footer a:hover {
            color: var(--mc-light-gold);
        }

    .mc-footer .mc-disclaimer {
        color: #cfd6da;
        font-size: .78rem;
        line-height: 1.5;
        margin: 0;
    }

        .mc-footer .mc-disclaimer a {
            color: inherit;
            text-decoration: none;
        }

    .mc-footer .mc-copy {
        background: var(--mc-dark-blue-900);
        color: #b8c2c8;
        font-size: .78rem;
        text-align: center;
        padding: .55rem 1rem;
    }

@media (max-width: 767.98px) {
    .mc-footer .mc-inner {
        grid-template-columns: 1fr;
    }
}

/* Neutralize legacy footer pieces from mcStyles.css if still referenced */
.mc-brand .fw-footer .skew,
.mc-brand .fw-footer .skew-bg {
    display: none;
}

/* ---------- Print ---------- */
@media print {
    .mc-site-header, .mc-footer, .dt-buttons, .dataTables_filter,
    .dataTables_length, .dataTables_paginate {
        display: none !important;
    }

    body.mc-brand {
        background: #fff !important;
    }

        body.mc-brand::before {
            display: none;
        }

    .mc-brand .dataTables_wrapper {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .mc-brand table.dataTable thead th {
        background: #fff !important;
        color: #000 !important;
    }
}
