main > .container {
    padding: 15px 15px 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.not-set {
    color: var(--bs-danger);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--bs-body-color);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--bs-body-color);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

/* required fields: "*" after the label, as the forms' "Fields with * are required" says (old: <span class="required">*</span>) */
.required > label::after {
    content: " *";
    color: var(--bs-danger);
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--bs-secondary-color);
}

.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 3px solid var(--bs-danger-border-subtle);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* text size of the content (design piece 3), only inside <main>: the header and the main menu keep pieces 1-2.
   Old app, yii1-final old/css/main.css: body { font-family: verdana, tahoma, arial, sans-serif; font-size: 8pt },
   h1 14pt, h2 13pt, h3 10pt (all bold, margin 0 0 10px), input/textarea/select/button 8pt in the same family,
   .btn 8pt, table.dataGrid th/td padding 5px; the colours stay Bootstrap's. */
main {
    --bs-body-font-family: verdana, tahoma, arial, sans-serif;
    --bs-body-font-size: 8pt;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
}

main h1,
main h2,
main h3 {
    margin: 0 0 10px;
    font-family: var(--bs-body-font-family);
    font-weight: bold;
}

main h1 {
    font-size: 14pt;
}

main h2 {
    font-size: 13pt;
}

main h3 {
    font-size: 10pt;
}

/* the views' h3 carry Bootstrap's .fs-5 (font-size ... !important): only !important beats it */
main h3.fs-5 {
    font-size: 10pt !important;
}

/* Bootstrap sets these in rem: the old app's 8pt */
main .form-control,
main .form-select,
main .input-group-text {
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
}

main .btn {
    --bs-btn-font-family: var(--bs-body-font-family);
    --bs-btn-font-size: var(--bs-body-font-size);
}

/* the old pager: Yii 1's ul.yiiPager { font-size: 11px } (yii pager.css, not the app's own CSS) */
main .pagination {
    --bs-pagination-font-size: 11px;
}

/* tables and grids (header, cells, links in them): the body's 8pt, like the other fleet apps (talumaad). The old
   app's tables showed 16px (no table size rule in the old CSS; the old page probably ran in quirks mode, where
   tables do not inherit the font size), but the user wants the tables at the same size as the other apps
   (user, 2026-11-03).
   Cell padding: old main.css table.dataGrid th, td { padding: 5px } (grid-view table.items: the same). */
main .table {
    font-size: var(--bs-body-font-size);
}

main .table > :not(caption) > * > * {
    padding: 5px;
}

/* the multi-field search forms in the old grey box (design piece 6; yii1-final old/css/form.css, loaded after main.css,
   no later override). Box: div.form (border 1px #dddddd, background #f9f9f9, colour #333333, padding 6px, radius 3px;
   the search views set style="width: auto": full width). Fields: div.form input[type=text], textarea, select (border
   #cacaca, radius 3px, background #ffffff); text fields: padding 6px 4px. Not taken: the label-left layout, the group
   bands (div.group), the select padding, the focus colour. Bootstrap's gap between neighbouring buttons. */
.search-form-box { margin-bottom: 1rem; padding: 6px; border: 1px solid #dddddd; border-radius: 3px; background: #f9f9f9; color: #333333; }
.search-form-box .form-control, .search-form-box .form-select { border-color: #cacaca; border-radius: 3px; background-color: #ffffff; }
.search-form-box .form-control { padding: 6px 4px; }
.search-form-box .btn + .btn { margin-left: 4px; }

/* header and main menu: the old app's colours (yii1-final old/css/main.css: #logo, .navbar) */
#header {
    padding-left: 15px;
    padding-right: 15px;
}

/* the old header strip: yii1-final old/css/main.css #header { height: 71px; background: url(img/ra.gif)
   no-repeat center top }, the title on it as #logo { padding: 20px 0 }; web/css/img/ra.gif is old/css/img/ra.gif */
.site-logo {
    height: 71px;
    padding: 20px 0;
    background: url(img/ra.gif) no-repeat center top;
}

/* the title box as old: main.php <div style="width: 350px; font-size: 14pt"> */
.site-title {
    display: block;
    width: 350px;
    max-width: 100%;
    font-size: 14pt;
    font-weight: bold;
    color: #52565B;
    text-decoration: none;
}

.site-title:hover {
    color: #52565B;
}

.main-menu {
    --bs-navbar-padding-x: .25rem;
    --bs-navbar-padding-y: .25rem;
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-nav-link-padding-x: .75rem;
    background-color: #0088cc;
}

.main-menu .nav-link {
    border-radius: var(--bs-border-radius);
}

.main-menu .nav-link:hover,
.main-menu .nav-link:focus,
.main-menu .nav-link.active {
    background-color: #00a6fc;
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}

/* login inputs: seamless icon inside input (Volt style) */
.login-split-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-split-card .input-group .input-group-text {
    background: transparent;
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-card .input-group .form-control {
    border: 0;
    background: transparent;
}

.login-split-card .input-group .form-control:focus {
    box-shadow: none;
}

.login-split-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for login split card (browsers with :has()) */
@supports selector(.input-group:has(.is-invalid)) {
    .login-split-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .login-split-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for login split card (browsers without :has()) */
@supports not selector(.input-group:has(.is-invalid)) {
    .login-split-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .login-split-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* login split card */
.login-split-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
    background-color: var(--bs-gray-100);
    width: 100%;
    max-width: 900px;
}

.login-split-card-wide {
    max-width: 960px;
}

.login-brand-title {
    font-size: 1.75rem;
    line-height: 1.3;
}

.login-brand-text {
    font-size: .9rem;
}

.login-brand-panel {
    background: linear-gradient(135deg, #40B3D8 0%, #3a9cbd 40%, #83C933 100%);
    position: relative;
    min-height: 480px;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(241, 138, 42, .25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(131, 201, 51, .2) 0%, transparent 40%);
    pointer-events: none;
}

.login-btn {
    background: linear-gradient(135deg, #40B3D8, #3a9cbd);
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.login-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

/* centered page layout */
.site-login,
.site-index,
.site-error,
.site-about {
    flex: 1;
}

.site-error .site-error-content,
.site-about .site-about-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content,
    .site-about .site-about-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content,
    .site-about .site-about-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content,
    .site-about .site-about-content {
        max-width: 50%;
    }
}

/* hero banner */
.hero-banner {
    background: linear-gradient(135deg, #83C933 0%, #3a9cbd 40%, #40B3D8 100%);
    position: relative;
}

.hero-lead {
    max-width: 520px;
}

.hero-logo {
    height: 120px;
    opacity: .45;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 85%, rgba(241, 138, 42, .3) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(131, 201, 51, .25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(64, 179, 216, .15) 0%, transparent 60%);
    pointer-events: none;
}

/* extension cards */
.extension-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.extension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.extension-icon {
    font-size: 1.5rem;
    line-height: 1;
}