/* ------------------------------
   Baltimore City – App Theme
   Based on BC Style Guide (Oct 2024)
   ------------------------------ */

:root {
    /* Primary / brand */
    --bc-black: #161616;
    --bc-gold: #FABE21;
    --bc-accent: #88C7D5;
    --bc-accent-2: #3F9FB5;
    --bc-accent-3: #CCE7ED;
    --bc-bg: #F7FBFC; /* card/bg guidance */
    --bc-card: #ffffff;
    /* Purple palette (site nav / headings accents) */
    --bc-purple-900: #190e21;
    --bc-purple-800: #2f1c3d;
    --bc-purple-600: #60397C;
    --bc-purple-500: #78479C;
    --bc-purple-050: #F3EEF9;
    /* Neutrals */
    --bc-border: #E4E4E4;
    --bc-muted: #6b6b6b;
    --bc-middle-gray: #c1c1c1;
    --bc-light-gray: #d7d7d7;
    /* Typography */
    --bc-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    /* Proxima Nova is often not available on dev machines—Raleway is the style-guide fallback */
    --bc-font-head: "Proxima Nova", "Raleway", "Segoe UI", Arial, sans-serif;
    --radius: 12px;
}

/* Page defaults */
html, body {
    background: var(--bc-bg);
    color: var(--bc-black);
    font-family: var(--bc-font-body);
    font-size: 18px; /* DEFAULT body copy */
    line-height: 30px; /* DEFAULT body copy */
}

/* Headings (sizes per guide) */
h1, .bc-h1 {
    font-family: var(--bc-font-head);
    font-size: 48px;
    line-height: 72px;
    margin: 0 0 12px;
}

h2, .bc-h2 {
    font-family: var(--bc-font-head);
    font-size: 40px;
    line-height: 52px;
    margin: 0 0 10px;
}

h3, .bc-h3 {
    font-family: var(--bc-font-head);
    font-size: 32px;
    line-height: 50px;
    margin: 0 0 8px;
}

h4, .bc-h4 {
    font-family: var(--bc-font-head);
    font-size: 26px;
    line-height: 34px;
    margin: 0 0 6px;
}

h5, .bc-h5 {
    font-family: var(--bc-font-head);
    font-size: 20px;
    line-height: 26px;
    margin: 0 0 6px;
}

.bc-small {
    font-size: 16px;
    line-height: 26px;
}

.bc-muted {
    color: var(--bc-muted);
}

/* Layout helpers */
.bc-container {
    max-width: 1600px; /* widened */
    margin: 0 auto;
    padding: 16px ; /* slightly more horizontal padding */
}

.bc-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.bc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 12px;
}

/* Cards */
.bc-card {
    background: var(--bc-card);
    border: 1px solid var(--bc-border);
    border-radius: var(--radius);
    /*padding: 14px;*/
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    overflow: hidden; /* IMPORTANT */
}

    .bc-card hr {
        border: none;
        border-top: 1px solid #eee;
        margin: 12px 0;
    }

.bc-card-header-gray {
    background-color: #e9ecef; /* soft gray */
    border-bottom: 1px solid var(--bc-border);
    padding: 1rem;
}

.bc-card-header {
    border-bottom: 1px solid var(--bc-border);
    padding: 1rem;
}

.citationPhotoCard:hover {
    background-color: #ddeff3;
}

.bc-card-body {
    background-color: white;
    padding: 1rem;
}
/* Inputs */
.bc-input, .bc-select {
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--bc-border);
    background: #fff;
    font-family: var(--bc-font-body);
    font-size: 18px;
    line-height: 30px;
}

.bc-select {
    max-width: 280px;
}

.bc-label {
    display: block;
    font-size: 16px;
    line-height: 26px;
    color: var(--bc-muted);
    margin-bottom: 4px;
}

/* Links */
a {
    color: #c25ef7; /*var(--bc-accent-2);*/
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* Alerts */
.bc-alert {
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.bc-alert-error {
    border: 1px solid #b00020;
    color: #b00020;
    background: #fff;
}

.bc-alert-success {
    border: 1px solid #2e7d32;
    color: #2e7d32;
    background: #fff;
}

/* Drop zones (matches your uploader needs) */
.bc-dropzone {
    position: relative;
    border: 2px dashed var(--bc-accent-3);
    background: #fff;
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}

/* ------------------------------
   App chrome: Header + Side Nav
   ------------------------------ */

/* Header bar */
.bc-header {
    background: var(--bc-purple-800); /* deep purple */
    color: #fff;
}

.bc-header-inner {
    max-width: 1440px; /* widened */
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bc-header-title {
    font-family: var(--bc-font-head);
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.bc-header-subtitle {
    font-size: 16px;
    line-height: 26px;
    opacity: 0.9;
}

/* Footer bar */
.bc-footer {
    background: linear-gradient(to bottom, #d9edf2, var(--bc-bg));
}

.bc-footer-heading {
    font-size: clamp(1.2rem, 3vw, 2.4rem) !important; /* max 5rem, scales down */
    font-weight: 500; 
    line-height: 1.2!important; 
}

.bc-footer-content {
    font-size: clamp(.8rem, 1.8vw, 1em) !important; /* max 5rem, scales down */
}

.bc-breadcrumb {
    font-size: 18px;
    background-color: #f3eef9;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Shell layout */
.bc-shell {
    max-width: 1600px; /* widened */
    margin: 0 auto;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 260px 1fr; /* wider nav */
    gap: 20px;
}

/* Mobile: NavMenu on top */
@media (max-width: 980px) {
    .bc-shell {
        grid-template-columns: 1fr;
    }

    .bc-sidenav {
        order: 0; /* top */
        position: static;
    }

    .bc-main {
        order: 1; /* content below */
    }
}

/* Side nav */
.bc-sidenav {
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: var(--radius);
    padding: 10px;
    position: sticky;
    top: 12px;
    height: fit-content;
}

    .bc-sidenav h3 {
        font-family: var(--bc-font-head);
        font-size: 18px;
        line-height: 26px;
        margin: 6px 8px 10px;
        color: var(--bc-purple-800);
    }

.bc-navlist {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .bc-navlist li {
        margin: 4px 0;
    }

.bc-navlink {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    color: var(--bc-black);
    text-decoration: none;
    border: 1px solid transparent;
}

    .bc-navlink:hover {
        background: var(--bc-bg);
        border-color: var(--bc-border);
        text-decoration: none;
    }

    .bc-navlink.active {
        background: var(--bc-purple-050);
        border-color: #E2D6F0;
        color: var(--bc-purple-800);
        font-weight: 700;
    }

/* Main content area */
.bc-main {
    min-width: 0;
}

/* ------------------------------
   Buttons (portal + form)
   ------------------------------ */

.bc-btn {
    border: 1px solid var(--bc-purple-600);
    background: var(--bc-purple-600);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--bc-font-body);
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

    .bc-btn:hover {
        background: var(--bc-purple-500);
        border-color: var(--bc-purple-500);
    }

    .bc-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.bc-btn-secondary {
    border: 1px solid var(--bc-gold);
    background: var(--bc-gold);
    color: var(--bc-black);
    font-weight: 700;
}

    .bc-btn-secondary:hover {
        background: #f5b400; /* slightly darker gold */
        border-color: #f5b400;
    }

.bc-btn-gray {
    border: 1px solid var(--bc-light-gray);
    background: var(--bc-light-gray);
    color: var(--bc-black);
    font-weight: 700;
}

    .bc-btn-gray:hover {
        background: var(--bc-middle-gray); /* slightly darker gray */
        border: 1px solid var(--bc-middle-gray);
    }


.bc-btn-link {
    border: none;
    background: transparent;
    color: var(--bc-accent-2);
    padding: 6px 8px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
}

    .bc-btn-link:hover {
        background: var(--bc-bg);
        text-decoration: underline;
    }


button {
    border-radius: 10px;
}


.form-control {
    border-radius: 10px !important;
    border: 1px solid var(--bc-border) !important;
    font-size: 18px !important;
    line-height: 30px !important;
    padding: 10px 12px !important;
}

/* ------------------------------
   Filter bar organization (Portal)
   ------------------------------ */

.bc-filters {
    background: #fff;
    border: 1px solid var(--bc-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.bc-filters-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) /* search */
    minmax(180px, 1fr) /* status */
    minmax(220px, 1fr) /* division */
    minmax(200px, 1fr) /* expected from */
    minmax(200px, 1fr) /* expected to */
    auto; /* buttons */
    gap: 16px;
    align-items: end;
}

.bc-filter-label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: var(--bc-muted);
    margin-bottom: 4px;
}

/* Tablet */
@media (max-width: 1100px) {
    .bc-filters-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .bc-filters-grid {
        grid-template-columns: 1fr;
    }
}


.bc-filters .bc-input {
    max-width: none;
}

.bc-filters .bc-select {
    max-width: none;
    width: 100%;
}