/*
 * Project Green Smiley theme — layered on top of Bootstrap 5.
 *
 * Re-applies the brand greens and the Bootstrap 3 metrics (font, sizes, radius)
 * the application was designed against, so the look & feel is preserved after
 * upgrading the Bootstrap library from 3 to 5.
 *
 * Brand palette:
 *   dark green    #297829  (navbar, footer, headings)
 *   primary green #299b29  (links, .btn-primary, .text-primary)
 *   success green #5cb85c  (.btn-success)
 */

:root {
    /* Base metrics matching the legacy Bootstrap 3 build */
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14px;
    --bs-body-line-height: 1.42857143;
    --bs-body-color: #333333;
    --bs-body-color-rgb: 51, 51, 51;

    --bs-border-radius: 4px;
    --bs-border-radius-sm: 3px;
    --bs-border-radius-lg: 6px;
    --bs-border-radius-xl: 6px;
    --bs-border-radius-xxl: 6px;

    /* Brand greens */
    --bs-primary: #299b29;
    --bs-primary-rgb: 41, 155, 41;
    --bs-link-color: #299b29;
    --bs-link-color-rgb: 41, 155, 41;
    --bs-link-hover-color: #195f19;
    --bs-link-hover-color-rgb: 25, 95, 25;
}

a {
    text-decoration: none;
}
a:hover,
a:focus {
    text-decoration: none;
}

/* Headings — green, matching the legacy theme */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #297829;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 20px;
    margin-bottom: 10px;
}
h4, h5, h6, .h4, .h5, .h6 {
    margin-top: 10px;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

/* Bootstrap 3 left the first heading without a top margin inside a column */
.col-md-12 > h2:first-child,
.col-md-12 > h4:first-child {
    margin-top: 0;
}

/* Legacy .form-group spacing (dropped in Bootstrap 5) */
.form-group {
    margin-bottom: 15px;
}

/* ------------------------------------------------------------------ Navbar */
/* Replicates the legacy green navbar-inverse. */
.navbar {
    --bs-navbar-padding-y: 0;
    --bs-navbar-padding-x: 0;
    /* horizontal padding of the nav links (~30px between item texts, like the
       legacy navbar). This is the variable the `.navbar-nav .nav-link` rule reads. */
    --bs-navbar-nav-link-padding-x: 15px;
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-navbar-color: #ffffff;
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.25);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-color: #297829;
    border-bottom: 1px solid #1c521c;
    min-height: 50px;
    margin-bottom: 20px;
}
.navbar .navbar-brand {
    height: 50px;
    /* no left padding, so the logo's left edge lines up with the page content
       (the container's content edge), as in the legacy navbar */
    padding: 0 15px 0 0;
    display: flex;
    align-items: flex-start;
}
.navbar .nav-link {
    /* 15px top/bottom; horizontal padding comes from --bs-navbar-nav-link-padding-x above */
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #ffffff;
}
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active,
.navbar .show > .nav-link {
    color: #ffffff;
    background-color: #1c521c;
}
/* dropdown menus stay on the default light Bootstrap styling */
.navbar .dropdown-menu {
    --bs-dropdown-link-active-bg: #297829;
}

/* The round smiley logo overflows the 50px navbar like in the legacy design:
   its top is flush with the navbar top and it extends ~14px down into the page.
   The negative bottom margin keeps its layout box at 50px so the navbar stays
   50px tall. */
.navbar .navbar-brand img {
    height: 64px;
    width: 64px;
    margin-top: 0;
    margin-bottom: -14px;
}

/* ------------------------------------------------------------ Form controls */
/* Bootstrap 5 sizes inputs from 1rem/1.5 (38px high); the legacy 14px/1.42857
   metrics give the Bootstrap 3 height of 34px. */
.form-control,
.form-select {
    font-size: 14px;
    line-height: 1.42857143;
}

/* ----------------------------------------------------------------- Buttons */
/* Bootstrap 3 kept button labels on one line; without this, the navbar login
   buttons wrap and the flex row stretches the inputs to the doubled height. */
.btn {
    white-space: nowrap;
}
/* Same Bootstrap 3 metrics for regular buttons, so they line up with the
   inputs (e.g. in the navbar login form); the size variants keep their own. */
.btn:not(.btn-sm, .btn-lg, .btn-xs) {
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 1.42857143;
}
.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #5cb85c;
    --bs-btn-border-color: #4cae4c;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #449d44;
    --bs-btn-hover-border-color: #398439;
    --bs-btn-focus-shadow-rgb: 92, 184, 92;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #398439;
    --bs-btn-active-border-color: #398439;
}
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #299b29;
    --bs-btn-border-color: #248724;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #207520;
    --bs-btn-hover-border-color: #1c671c;
    --bs-btn-focus-shadow-rgb: 41, 155, 41;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1c671c;
    --bs-btn-active-border-color: #1c671c;
}
/* Legacy .btn-default (removed in Bootstrap 5) — white button with grey border */
.btn-default {
    --bs-btn-color: #333333;
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #cccccc;
    --bs-btn-hover-color: #333333;
    --bs-btn-hover-bg: #e6e6e6;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-focus-shadow-rgb: 204, 204, 204;
    --bs-btn-active-color: #333333;
    --bs-btn-active-bg: #d4d4d4;
    --bs-btn-active-border-color: #8c8c8c;
}
/* Legacy .btn-xs (removed in Bootstrap 5) */
.btn-xs {
    --bs-btn-padding-y: 1px;
    --bs-btn-padding-x: 5px;
    --bs-btn-font-size: 12px;
    --bs-btn-border-radius: 3px;
}

/* ------------------------------------------------------------------- Tabs */
.nav-tabs .nav-link {
    color: #299b29;
}
.nav-tabs .nav-link.active {
    color: #555555;
}

/* -------------------------------------------------------------- Pagination */
/* Smaller pagination widgets (equivalent to Bootstrap's .pagination-sm). */
.pagination {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-border-radius: var(--bs-border-radius-sm);
    /* active page in brand green instead of the Bootstrap default blue */
    --bs-pagination-active-bg: #299b29;
    --bs-pagination-active-border-color: #299b29;
}

/* ------------------------------------------------------------------ Tables */
.table {
    /* zebra striping in a light gray, slightly brighter than the legacy #f9f9f9
       (Bootstrap 5's preferred way: the --bs-table-striped-bg variable) */
    --bs-table-striped-bg: #fbfbfb;
}

/* --------------------------------------------------------------- Container */
/*
 * Bootstrap 5 adds a 540px container cap at >=576px and a 1320px tier at
 * >=1400px that the Bootstrap 3 layout never had. Restore the Bootstrap 3
 * container widths so mid-width screens stay full-width and wide screens cap at
 * 1170px exactly like the original: fluid below 768px, then 750 / 970 / 1170.
 */
.container {
    --bs-gutter-x: 1.875rem; /* 30px gutter -> 15px padding, matching BS3 */
    width: 100%;
    max-width: none;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container { max-width: 750px; }
}
@media (min-width: 992px) {
    .container { max-width: 970px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1170px; }
}
.row {
    --bs-gutter-x: 1.875rem; /* 30px gutter, matching BS3 */
}

/* --------------------------------------------------------------- Carousel */
/* Legacy carousel used round dot indicators at the bottom. */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background-color: transparent;
    margin-left: 3px;
    margin-right: 3px;
    text-indent: -999px;
    opacity: 0.5;
}
.carousel-indicators .active {
    background-color: #ffffff;
    opacity: 1;
}
.carousel img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}