/* ============================================================================
   Fleet.css -- cleaned up to work with portal-theme.css (2026-04-10)
   Removed:
     - Aggressive universal reset (was forcing 12px Verdana on body/h1/etc)
     - Hardcoded body background (was breaking dark mode)
     - Hardcoded a/a:hover colors (now inherit from portal-theme.css)
     - Old #page_header rules (the header they styled was removed from
       Fleets.Master during the modernization rewrite)
   Kept + scoped:
     - Page-specific layout helpers (grid, dashboard, container, map, etc.)
     - Form layout helpers for projectdetailsform / fleetorderform
   All hardcoded colors should continue to read in light mode and are
   overridden by token variants further down for dark mode.
   ============================================================================ */

h2.allVehiclesView, .allVehiclesView {
    font-weight: bold;
    font-size: var(--in-fs-xl);
    color: var(--in-text);
    padding: var(--in-space-3) 0;
}
.clear { clear: both; }
.page_content { width: 100%; margin: 0 auto; }
.locationPopup {
    width: 250px;
    background: var(--in-surface);
    color: var(--in-text);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    box-shadow: var(--in-shadow-md);
    padding: var(--in-space-3);
}
.locationPopup h3 { margin-bottom: 4px; }
.locationPopup textarea { font-size: var(--in-fs-sm); margin: 5px 20px; width: 200px; }
.locationPopup .button { width: 120px; float: left; text-align: center; }

.map {
    width: 640px;
    background: var(--in-surface);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    padding: var(--in-space-3);
    text-align: center;
}
.map input { margin: 0 auto; }

.container {
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    padding: var(--in-space-3);
    width: 610px;
    background: var(--in-surface-alt);
    color: var(--in-text);
}
.container .panel { height: 100%; width: 200px; float: left; }
.container .panel select { width: 160px; }
.hoverlink { cursor: pointer; }

/* ---- Legacy .grid / .row / .header / .pager classes ---- */
.grid {
    background: var(--in-surface);
    color: var(--in-text);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.trid td { margin: 0; }
.grid a { color: var(--in-link); cursor: pointer; text-decoration: underline; }
.grid a:hover { text-decoration: none; color: var(--in-link-hover); }

.grid .header {
    background: var(--in-surface-alt);
    border-bottom: 1px solid var(--in-border);
    text-align: left;
}
.grid .header th {
    padding: var(--in-space-3);
    white-space: nowrap;
    color: var(--in-text-muted);
    font-size: var(--in-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--in-fw-semibold);
}
.grid .row td {
    border-bottom: 1px solid var(--in-divider);
    padding: var(--in-space-2) var(--in-space-3);
    color: var(--in-text);
}
.grid .row_alt {
    background: var(--in-surface-alt);
}
.grid .row_alt td {
    border-bottom: 1px solid var(--in-divider);
    padding: var(--in-space-2) var(--in-space-3);
    color: var(--in-text);
}
.grid .row_inactive,
.grid .row_alt_inactive {
    background: var(--in-danger-soft);
    color: var(--in-danger);
}
.grid .row_inactive td,
.grid .row_alt_inactive td {
    padding: var(--in-space-2) var(--in-space-3);
    border-bottom: 1px solid var(--in-divider);
}
.grid .pager {
    border-top: 1px solid var(--in-border);
    background: var(--in-surface-alt);
}
.grid .pager span { padding: 2px; font-weight: var(--in-fw-semibold); color: var(--in-text); }
.grid .pager a { padding: 2px; color: var(--in-link); }
.grid .clicked { color: var(--in-danger); }
#dashboard {margin:0; padding:0;}
#dashboard ul {margin:0; padding:0; list-style:none; margin-bottom:7px; margin-left:15px;}
#dashboard ul li {margin:0; padding:0; list-style:none; font-weight:bold; font-size:15px;}
#dashboard #programs li {display:block; float:left; width:200px;}
#dashboard ul li ul li {font-size:13px;}
#dashboard ul li ul li table {margin-bottom:5px; font-size:11px; font-weight:normal;}
#dashboard ul li ul li table tr td {padding-left:10px;}
/*classes for ViewImages.aspx page*/
.imgLarge {border:solid 1px #333; padding:10px; margin:0 0 0 30px; max-width:1000px;}
div#customImages {max-width:1100px;}
div#customImages ul { background: var(--in-surface); white-space: nowrap; }
#customImages ul li { display: inline; padding: 0 10px; }
#customImages ul li img { width: 105px; height: 79px; border: none; }
#customImages p { font-size: var(--in-fs-xs); padding-top: 10px; }
div#rpt_div {
    width: 97%;
    height: 97px;
    overflow: auto;
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    margin-top: var(--in-space-5);
    padding: var(--in-space-1);
    background: var(--in-surface);
    color: var(--in-text);
}
span.formline { display: block; float: left; width: 150px; height: 16px; padding: 4px 0 0 0; }
span.star { color: var(--in-danger); }
div#fleetorderform ol { margin: 0; padding: 0; }
div#fleetorderform ol li { list-style: none; width: 800px; margin: 0 0 3px 0; }
.page_content h3 { margin: 8px 0 5px 0; color: var(--in-text); }
li h4 { margin: 5px 0; color: var(--in-text-muted); }
div#projectdetailsform h3 { font-size: var(--in-fs-xl); color: var(--in-text); margin: 28px 0 8px 0; }
div#fleetorderform { margin: 0 0 35px 0; }
.errortext { color: var(--in-danger); font-weight: var(--in-fw-semibold); }
/* ProjectView page -- 3-column layout via flexbox (resilient vs floats) */
div#divProjectView {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--in-space-5);
    margin-bottom: var(--in-space-5);
}
div#divProjectView ul { margin: 0; padding: 0; }
div#divProjectView li {
    list-style: none;
    line-height: 22px;
    font-size: var(--in-fs-sm);
    padding: var(--in-space-1) 0;
    border-bottom: 1px solid var(--in-divider);
    display: flex;
    gap: var(--in-space-3);
    color: var(--in-text-muted);
}
div#divProjectView li:last-child { border-bottom: 0; }
div#divProjectView li .label,
div#divProjectView li > span:first-child { color: var(--in-text-muted); min-width: 110px; }
div#divProjectView li span[id*="lbl"],
div#divProjectView li asp\:label,
div#divProjectView li > span:last-child { color: var(--in-text); font-weight: var(--in-fw-medium); flex: 1; }
div#projectInfo,
div#contactInfo,
div#locVehInfo {
    flex: 1 1 0;
    min-width: 260px;
    background: var(--in-surface);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    padding: var(--in-space-4) var(--in-space-5);
}

/* VehicleList page -- same flex treatment */
div#divVehicleList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--in-space-5);
    margin-bottom: var(--in-space-5);
}
div#locAttrsLeft,
div#locAttrsMiddle,
div#locAttrsRight {
    flex: 1 1 0;
    min-width: 260px;
    background: var(--in-surface);
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    padding: var(--in-space-4) var(--in-space-5);
}
div#locAttrsLeft ul,
div#locAttrsMiddle ul,
div#locAttrsRight ul { margin: 0; padding: 0; }
div#locAttrsLeft li,
div#locAttrsMiddle li,
div#locAttrsRight li {
    list-style: none;
    line-height: 22px;
    font-size: var(--in-fs-sm);
    padding: var(--in-space-1) 0;
    border-bottom: 1px solid var(--in-divider);
    display: flex;
    gap: var(--in-space-3);
    color: var(--in-text-muted);
}
div#locAttrsLeft li:last-child,
div#locAttrsMiddle li:last-child,
div#locAttrsRight li:last-child { border-bottom: 0; }

.ErrorMessage {
    display: block;
    float: left;
    color: var(--in-danger);
    padding: 8px 0;
}

#divOrdersContainer {
    padding: 20px 0 0 0;
}

.ordersComboBox {
    padding: 0 5px 0 0;
    float: left;
}

.ordersComboBoxLabel {
    float: left;
    padding: 5px 5px 0 0;
}

.ordersComboBoxDiv {
    float: left;
}

.mainDiv {
    display: block;
    width: 100%;
}
.infoLine {
    clear: both;
}
.infoLabel {
    float: left;
}
.infoData {
    float: left;
    padding: 0 10px 0 0;
}
#divOrderDetails .infoLabel {
    width: 20%;
}
.infoLabelStateZip {
    float: left; 
    width: 10%;
}
#divOrderDate .infoLabel {
    width: 50%;
}
.mainDiv:after {
    clear: both;
    display: block;
    visibility: hidden;
}
div.containerheader {
    font-size: 14px;
    font-weight: bold;
    padding: 0 0 2px 0;
}
#divOrderDetails {
    float: left;
    width: 40%;
}
.ShipBuyerInfo {
    clear: left;
    width: 100%;
    float: left;
    padding: 5px;
}
#divOrderDate {
    width: 30%;
    float: left;
    padding: 5px;
}
#divOrderInfo {
    border: 1px solid var(--in-border);
    border-radius: var(--in-radius-md);
    margin: 5px 0;
    float: left;
    width: 100%;
    background: var(--in-surface);
}
#divUpdatePage {
    float: left;
    display: inline-block;
    padding-left: 5px;
}

#divNewOrder {
    float: left;
}

.divNewOrdersInputs {
    float: left;
    width: 22em;
    height: 12em;
}

.divNewOrdersInputs input, .inputs {
    margin-top: 0.5em;
}

.divNewOrdersInputs input {
    width: 15em;
}

.divNewOrdersInputs .inputs {
    width: 17.4em;
}

#divAddedItems {
    float: left;
    width: 40em;
    min-height: 10em;
}

.PurchaseDateLabel {
    margin-top: 0.7em;
    margin-right: 0.7em;
    clear: none;
    float: left;
    display: inline-block;
}

#divSave {
    float: left;
}

#divPurchaseDate .inputs{
    clear: none;
    float: left;
    display: inline-block;
}

#divCityState {
    float: left;
}

#divCityState .CityStateInputs {
    clear: none;
    float: left;
    display: inline-block;
}

.divNewOrdersInputs .CityInput {
    width: 10em;
    margin-right: 0.5em;
}

.StateInput {
    width: 5em;
    margin-top: 0.5em;
}

.ProductsAddedHeader {
    font-size: 12px;
    font-weight: bold;
}

#divProductsAddedHeader {
    padding: 5px 0 5px 0;
}

#divProductsAdded {
    padding: 0 0 0 10px;
    max-height: 200px;
    overflow: auto;
}