/*
 * Bootstrap 3 Visual Compatibility Layer
 * Restores the original application appearance after the Bootstrap 3 → 5 upgrade.
 * These rules override Bootstrap 5 defaults to match the Bootstrap 3 look-and-feel.
 */

/* ── Buttons ─────────────────────────────────────────────────────────────────
   btn-default (BS3) → btn-secondary (BS5 remapped)
   Restore: white bg, dark text, light grey border
   ─────────────────────────────────────────────────────────────────────────── */
.btn-secondary {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-secondary:disabled,
.btn-secondary.disabled {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    opacity: .65;
}

/* ── Form Controls ───────────────────────────────────────────────────────────
   Restore BS3 input sizing: 34px height, 4px radius, inset shadow, #ccc border
   ─────────────────────────────────────────────────────────────────────────── */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
/* Restore select height (BS5 pads selects differently).
   Add an explicit chevron arrow so it is always clearly visible as a dropdown
   regardless of how the browser renders the native appearance. */
select.form-control {
    height: 34px;
    padding: 6px 32px 6px 12px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 7px;
    background-color: #fff;
    cursor: pointer;
}
/* Restore textarea — let height be auto */
textarea.form-control {
    height: auto;
}

/* ── Form Label ──────────────────────────────────────────────────────────────
   BS3 .control-label had no bottom margin; BS5 .form-label adds 0.5rem
   ─────────────────────────────────────────────────────────────────────────── */
.form-label {
    margin-bottom: 0;
    font-weight: 700;
}

/* ── Cards (restored from BS3 panels) ───────────────────────────────────────
   .panel-default: border #ddd, radius 4px
   .panel-heading: background #f5f5f5, border-bottom #ddd, padding 10px 15px
   .panel-body:    padding 15px
   ─────────────────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none;
    margin-bottom: 20px;
}
.card-header {
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-radius: 3px 3px 0 0;
    color: #333;
    font-size: 14px;
}
.card-body {
    padding: 15px;
}

/* ── Navbar ──────────────────────────────────────────────────────────────────
   BS3 .navbar-inverse: min-height 50px, bottom border #080808
   All <a> tags inside the navbar (including bare ones like the language toggle)
   should be white to match the dark background.
   ─────────────────────────────────────────────────────────────────────────── */
#topNavBar {
    min-height: 90px;
    border-bottom: 1px solid #080808;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Keep all three navbar sections (logo, title, icons) on one row */
#topNavBar > * {
    flex-shrink: 0;
}

/* Push the right-side icons to the far right with breathing room from the edge */
#topNavBar > .pull-right {
    margin-left: auto;
    margin-right: 24px;
    flex-shrink: 0;
}

/* Home/Language icons: keep them side-by-side in a row */
#topNavBar .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 8px;
}
#topNavBar .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}
#topNavBar .navbar-brand img {
    max-height: 60px;
    height: auto;
    display: block;
}
#topNavBar a,
#topNavBar a:visited {
    color: white;
}
#topNavBar a:hover,
#topNavBar a:focus {
    color: #99cc00;
}

/* ── Nav-plan-links (plan selection page) ───────────────────────────────────
   BS5 .nav-pills no longer styles <li><a> without .nav-link.
   Restore the original pill appearance by targeting the <a> directly.
   ─────────────────────────────────────────────────────────────────────────── */
/* Plan selection list: single flex row, wrapping */
.nav-plan-links {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
    width: 100%;
}

@media (max-width: 767px) {
    .nav-plan-links {
        flex-wrap: wrap;
        gap: 8px;
    }
    .nav-plan-links > li {
        flex: 1 1 100%;
    }
}

/* Remove default <li> padding that was adding extra vertical space */
.nav-plan-links > li {
    flex: 1 1 0;
    padding: 0 !important;
}

/* Plan buttons: lime sweeps left-to-right on hover via ::before transform.
   Using transform instead of background-size avoids cross-browser issues
   with background-color overrides from other rules killing the animation. */
.nav-plan-links > li > a {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid transparent;
    color: #1a5fb4;
    font-size: 16px;
    text-decoration: none;
    white-space: normal;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.25s ease, box-shadow 0.2s ease;
    z-index: 0;
}
/* Lime overlay starts fully translated left (hidden), slides in on hover */
.nav-plan-links > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #99cc00;
    border-radius: 3px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}
.nav-plan-links > li > a:hover,
.nav-plan-links > li > a:focus {
    border-color: #85b000;
    color: white;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.nav-plan-links > li > a:hover::before,
.nav-plan-links > li > a:focus::before {
    transform: translateX(0);
}
/* ── Tables
   BS5 removes the outer border from .table; BS3 had it via border-collapse
   ─────────────────────────────────────────────────────────────────────────── */
.table {
    font-size: 14px;
}

/* ── Badges ──────────────────────────────────────────────────────────────────
   BS3 badge was a grey pill; BS5 default is blue — restore grey
   ─────────────────────────────────────────────────────────────────────────── */
.badge {
    background-color: #777;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 4px 3px;
    border-radius: 10px;
}

/* ── Alert ───────────────────────────────────────────────────────────────────
   BS5 alerts have rounded corners (0.375rem); restore BS3's 4px
   ─────────────────────────────────────────────────────────────────────────── */
.alert {
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Body padding: header is min-height 90px, so offset content by 92px */
body {
    padding-top: 92px;
}

/* ── .navbar baseline ────────────────────────────────────────────────────────
   BS5 adds padding-top/bottom: 0.5rem to every .navbar. BS3 had none.
   Zeroing it here restores BS3 layout and prevents extra height in #stepsNavBar.
   ─────────────────────────────────────────────────────────────────────────── */
.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── .navbar-fixed-top ───────────────────────────────────────────────────────
   Removed in BS5 (replaced by .fixed-top). Restores the fixed-to-viewport
   positioning of the top navigation bar. Without this, the navbar appears in
   normal document flow and the body padding-top creates a large empty gap.
   ─────────────────────────────────────────────────────────────────────────── */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    border-width: 0 0 1px;
}

/* ── .navbar-header ──────────────────────────────────────────────────────────
   Removed in BS5. In BS3 it floated the brand/toggle group to the left.
   ─────────────────────────────────────────────────────────────────────────── */
.navbar-header {
    float: left;
}

/* ── .container inside fixed navbar ─────────────────────────────────────────
   In BS5, .navbar is a flex container. A .container flex-child has width:100%
   which causes it to consume the full row and push sibling divs to a second
   line (making navbar links appear "duplicated"). Override to content-width.
   ─────────────────────────────────────────────────────────────────────────── */
#topNavBar > .container {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ── .pull-left / .pull-right ────────────────────────────────────────────────
   Removed in BS5 (replaced by .float-start / .float-end).
   Used throughout the app for navigation button groups and layout dividers.
   ─────────────────────────────────────────────────────────────────────────── */
.pull-left  { float: left  !important; }
.pull-right { float: right !important; }

/* ── .btn-default ────────────────────────────────────────────────────────────
   Removed in BS5. All buttons in this app carry class="btn btn-default".
   (The earlier .btn-secondary rule targets a different class than the markup uses.)
   ─────────────────────────────────────────────────────────────────────────── */
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:disabled,
.btn-default.disabled {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    opacity: .65;
}

/* ── .panel / .panel-default / .panel-heading / .panel-body ──────────────────
   Removed in BS5 (replaced by .card). Home.razor still uses the panel markup.
   ─────────────────────────────────────────────────────────────────────────── */
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.panel-default {
    border-color: #ddd;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}
.panel-body {
    padding: 15px;
}

/* ── .form-group ─────────────────────────────────────────────────────────────
   BS5 no longer provides a bottom margin on .form-group. Restore BS3's 15px.
   ─────────────────────────────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 15px;
}

/* Uniform gap between every label/input row inside a form-group.
   Replaces the fragile per-row panel-body approach that caused
   inconsistent double-spacing whenever consecutive rows both had it.
   The :not(:first-child) ensures the very first row has no extra top
   margin. This applies on both desktop and mobile. */
.form-group .row + .row {
    margin-top: 12px;
}

/* ── .img-responsive ─────────────────────────────────────────────────────────
   Renamed to .img-fluid in BS5. Used on the Vestcor logo in the navbar.
   ─────────────────────────────────────────────────────────────────────────── */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ── Glyphicons ──────────────────────────────────────────────────────────────
   Removed entirely from BS5. Font files are still present in /Fonts/.
   Restores the font-face and icon classes used in the app (glyphicon-home
   in MainLayout.razor; glyphicon-wrench \e107 in screen.css EnvironmentSection).
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../Fonts/glyphicons-halflings-regular.eot');
    src: url('../Fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../Fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../Fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-home:before   { content: "\e021"; }
.glyphicon-wrench:before { content: "\e107"; }

/* ── BS3 responsive visibility helpers ─────────────────────────────────────
   Removed from BS5. Replicates the BS3 breakpoints:
   xs < 768px  |  sm 768–991px  |  md 992–1199px  |  lg ≥ 1200px
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
    .hidden-lg { display: none !important; }
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg { display: none !important; }

@media (max-width: 767px) {
    .visible-xs { display: block !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm { display: block !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md { display: block !important; }
}
@media (min-width: 1200px) {
    .visible-lg { display: block !important; }
}

/* ── Mobile: plan-selection buttons stack one per row ───────────────────────
   On desktop the plan links sit in a single flex row (flex-wrap: nowrap).
   On mobile each button becomes full-width so they read top-to-bottom.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .nav-plan-links {
        flex-wrap: wrap;
    }
    .nav-plan-links > li {
        flex: 0 0 100%;
        width: 100%;
    }
}

/* ── Mobile: form labels stack above their inputs ───────────────────────────
   Bootstrap 5's bare .col (flex: 1 0 0%) keeps columns side-by-side on all
   breakpoints. Force every col inside a form-horizontal row to full width on
   xs so the label column sits above the input column(s).
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .form-horizontal .row > [class~="col"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .form-horizontal .control-label {
        text-align: left !important;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    /* Empty spacer cols (self-closing <div class="col col-sm-2"/>) sit
       between the label and input columns on desktop to push the input
       into the correct grid position. On mobile all cols stack to full
       width, so these empty cols render as a blank full-width gap between
       the label and its input. Hide any col that has no child content. */
    .form-horizontal .row > [class~="col"]:empty {
        display: none !important;
    }
}

/* BS3 form-horizontal label alignment */
.control-label {
	margin-bottom: 0;
	font-weight: normal;
	padding-top: 7px;
}

/* Right-align control-label on sm+ inside form-horizontal */
@media (min-width: 768px) {
	.form-horizontal .control-label {
		text-align: right;
		padding-top: 7px;
		margin-bottom: 0;
	}
}

/* form-horizontal row gutter */
.form-horizontal .form-group {
	margin-right: -15px;
	margin-left: -15px;
}
.form-horizontal .form-group::after {
	content: '';
	display: table;
	clear: both;
}

/* Panel heading font size */
.panel-heading {
	font-size: 14px;
	font-weight: 500;
}

/* Validation error paragraphs - compact */
.form-group p[style] {
	margin-top: 4px;
	margin-bottom: 0;
	font-size: 0.875em;
}


/* body-content: screen.css and site-screen-1.0.0.css both set margin-top:115px
   which was correct for a double-row fixed header in the old layout.
   With BS5 the top navbar is a single row (~56px); body padding-top:70px
   already accounts for it, so body-content needs no extra top margin. */
.body-content {
	margin-top: 0;
}

/* Ensure the steps wizard nav-bar does not inherit .navbar's fixed positioning */
#stepsNavBar {
	position: static;
	margin-top: 0;
}

/* Tighten the plan-name h1 above the wizard bar */
body > h1,
.container > h1 {
	margin-top: 4px;
	margin-bottom: 4px;
}

/* ── Body background ─────────────────────────────────────────────────────────
   Light grey so white panels/cards visually lift off the page.             */
body {
	background-color: #f5f6f8;
}

/* ── Panel heading: brand-blue left accent bar ───────────────────────────────
   Replaces the flat grey bar with a clean modern card-header look.         */
.panel-default > .panel-heading {
	background-color: #fff;
	border-left: 4px solid #002469;
	border-bottom: 1px solid #e0e4ea;
	padding: 12px 15px;
	color: #002469;
	font-weight: 600;
	font-size: 15px;
}

/* ── btn-primary: solid brand blue ──────────────────────────────────────────
   Used for the primary action on every page (Next, Calculate, etc.).       */
.btn-primary {
	color: #fff;
	background-color: #002469;
	border-color: #001a4d;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	color: #fff;
	background-color: #003080;
	border-color: #001a4d;
}
.btn-primary:disabled,
.btn-primary.disabled {
	color: #fff;
	background-color: #002469;
	border-color: #001a4d;
	opacity: .65;
}

/* ── text-muted: correct to a genuinely muted grey ──────────────────────────
   screen.css sets this to #36454f which is identical to body text colour.  */
.text-muted {
	color: #6c757d !important;
	font-weight: 400;
}

/* ── Panel card hover lift ───────────────────────────────────────────────────
   Gives the Home page (and any other panel) a subtle lift on hover.        */
.panel-default {
	transition: box-shadow 0.2s ease;
}
.panel-default:hover {
	box-shadow: 0 4px 16px rgba(0, 36, 105, 0.13);
}

/* ── Secondary button: left-to-right green sweep on hover ────────────────────
   The green slides in from the left using a background-image gradient whose
   background-size grows from 0% to 100%.  btn-primary is explicitly excluded
   so its brand-blue hover is not overridden.                                */
.btn:not(.btn-primary) {
	background-image: linear-gradient(to right, #99cc00, #99cc00);
	background-size: 0% 100%;
	background-position: left center;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.btn:not(.btn-primary):hover,
.btn:not(.btn-primary):focus {
	background-size: 100% 100%;
	background-color: transparent;
	color: #fff;
}

/* ── Plan selection buttons: left-to-right green sweep on hover ──────────────
   These <a> elements also turn green on hover; apply the same sweep.       */
/* (nav-plan-links rules are defined above) */