/*
 * fleetgo-base.css
 * FleetGO Design System — COLOR + TYPOGRAPHY OVERRIDES
 *
 * Imports fleetgo-variables.css as the single source of truth.
 * All --fg-* tokens are aliases of --fleetgo-* tokens defined there.
 * To change any color or font: edit fleetgo-variables.css only.
 *
 * HOW TO USE (_head.cshtml):
 *   After the existing CSS bundle line, add ONE line:
 *     <link rel="stylesheet" href="~/Content/fleetgo-base.css" />
 *   (fleetgo-variables.css is pulled in automatically via @import below)
 *
 * Source: https://designsystem.fleetgo.com
 * Last synced: 2026-05-13
 */

@import url('fleetgo-variables.css');


/* =============================================================================
   1. --fg-* ALIASES  (map short names → canonical --fleetgo-* tokens)
      Edit values in fleetgo-variables.css, not here.
   ============================================================================= */

:root {
    /* Brand */
    --fg-primary: var(--fleetgo-branding-primary-color-default);
    --fg-primary-hover: var(--fleetgo-branding-product-color-shade-500, #34adb8);
    --fg-secondary: var(--fleetgo-branding-secondary-color-default);
    --fg-tertiary-hover: var(--fleetgo-branding-tertiary-color-hover);
    --fg-solar-flare: var(--fleetgo-branding-solar-flare-color-default);

    /* Brand shades */
    --fg-shade-000: var(--fleetgo-branding-product-color-shade-000);
    --fg-shade-200: var(--fleetgo-branding-product-color-shade-200);
    --fg-shade-300: var(--fleetgo-branding-product-color-shade-300);
    --fg-shade-500: var(--fleetgo-branding-product-color-shade-500);
    --fg-shade-600: var(--fleetgo-branding-product-color-shade-600);
    --fg-shade-800: var(--fleetgo-branding-product-color-shade-800);
    --fg-shade-900: var(--fleetgo-branding-product-color-shade-900);

    /* Neutrals */
    --fg-white: var(--fleetgo-grays-000);
    --fg-gray-100: var(--fleetgo-grays-100);
    --fg-gray-200: var(--fleetgo-grays-200);
    --fg-gray-300: var(--fleetgo-grays-300);
    --fg-gray-400: var(--fleetgo-grays-400);
    --fg-gray-500: var(--fleetgo-grays-500);
    --fg-gray-600: var(--fleetgo-grays-600);
    --fg-gray-700: var(--fleetgo-grays-700);
    --fg-text-default: var(--fleetgo-grays-800);
    --fg-black: var(--fleetgo-grays-900);

    /* Links */
    --fg-link: var(--fleetgo-links-link-color-default);
    --fg-link-hover: var(--fleetgo-links-link-color-pressed);

    /* Typography */
    --fg-font-family: var(--fleetgo-font-family-body);
    --fg-font-weight-regular: var(--fleetgo-font-weight-regular);
    --fg-font-weight-medium: var(--fleetgo-font-weight-medium);
    --fg-font-weight-semibold: var(--fleetgo-font-weight-semibold);

    /* Font sizes */
    --fg-font-size-xxs: var(--fleetgo-font-size-body-s);
    --fg-font-size-xs: var(--fleetgo-font-size-body-md);
    --fg-font-size-s: var(--fleetgo-font-size-body-lg);
    --fg-font-size-md: var(--fleetgo-font-size-title-md);
    --fg-font-size-lg: var(--fleetgo-font-size-title-lg);
    --fg-font-size-xl: var(--fleetgo-font-size-title-xl);
    --fg-font-size-xxl: var(--fleetgo-font-size-title-xxl);
    --fg-font-size-xxxl: var(--fleetgo-font-size-title-xxxl);

    /* Line heights */
    --fg-lh-xxs: var(--fleetgo-font-lineheight-xxs);
    --fg-lh-xs: var(--fleetgo-font-lineheight-xs);
    --fg-lh-s: var(--fleetgo-font-lineheight-sm);
    --fg-lh-md: var(--fleetgo-font-lineheight-md);
    --fg-lh-lg: var(--fleetgo-font-lineheight-lg);
    --fg-lh-xl: var(--fleetgo-font-lineheight-xl);
    --fg-lh-xxl: var(--fleetgo-font-lineheight-xxl);
    --fg-lh-xxxl: var(--fleetgo-font-lineheight-xxxl);

    /* Borders */
    --fg-border-width-default: var(--fleetgo-border-width-default);
    --fg-border-width-selected: var(--fleetgo-border-width-selected);
    --fg-border-width-focused: var(--fleetgo-border-width-focused);

    --fg-border-style-solid: var(--fleetgo-border-style-solid);
    --fg-border-style-dashed: var(--fleetgo-border-style-dashed);
    --fg-border-style-dotted: var(--fleetgo-border-style-dotted);

    /* Border radius */
    --fg-border-radius-none: var(--fleetgo-border-radius-none);
    --fg-border-radius-xs: var(--fleetgo-border-radius-xs);
    --fg-border-radius-s: var(--fleetgo-border-radius-s);
    --fg-border-radius-m: var(--fleetgo-border-radius-m);
    --fg-border-radius-l: var(--fleetgo-border-radius-l);
    --fg-border-radius-xl: var(--fleetgo-border-radius-xl);
    --fg-border-radius-xxl: var(--fleetgo-border-radius-xxl);
    --fg-border-radius-full: var(--fleetgo-border-radius-full);
    --fg-border-radius-circle: var(--fleetgo-border-radius-circle);

}


/* =============================================================================
   2. TYPOGRAPHY — font-family only; no size changes (per client scope)
   ============================================================================= */

/* Base elements */
html,
body {
    font-family: var(--fg-font-family) !important;
}

/* Form controls & interactive elements */
input,
button,
select,
textarea,
.form-control,
.btn,
label,
th,
td {
    font-family: var(--fg-font-family) !important;
}

/* Headings — apply semibold weight; sizes left at Bootstrap 3 defaults */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--fg-font-family) !important;
    font-weight: var(--fg-font-weight-semibold);
}

/* Kendo UI widgets */
.k-widget,
.k-button,
.k-grid td,
.k-grid th,
.k-header,
.k-input,
.k-textbox,
.k-dropdown-wrap,
.k-combobox,
.k-datepicker,
.k-window-title,
.k-tabstrip,
.k-panelbar,
.k-menu,
.k-toolbar {
    font-family: var(--fg-font-family) !important;
}


/* =============================================================================
   3. COLOR OVERRIDES — replace #25A0DA / #428bca with FleetGO brand teal
   ============================================================================= */

/* --- Bootstrap primary buttons --- */
.btn-primary {
    background-color: var(--fg-primary);
    border-color: var(--fg-shade-600);
    color: var(--fg-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-color: var(--fg-shade-600);
    border-color: var(--fg-shade-800);
    color: var(--fg-white);
}


/* --- Links --- */
#mainMenu a {
    color: var(--fg-primary);
}

a {
    color: var(--fg-link);
}

a:hover,
a:focus {
    /* color: var(--fg-link-hover); */
}

a:focus {
    outline: none !important;
    /* outline: 5px auto -webkit-focus-ring-color; */
    outline-offset: -2px;
}

/* --- Bootstrap color utilities --- */
.bg-primary {
    background-color: var(--fg-primary) !important;
}

.text-primary {
    color: var(--fg-primary) !important;
}

/* --- Dropdown active/hover --- */
/* .dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    background-color: var(--fg-primary);
    color: var(--fg-white);
} */

/* --- Panel borders + headings --- */
.panel {
    border-color: var(--fg-primary) !important;
}

.panel .panel-heading,
.panel-primary>.panel-heading {
    background: var(--fg-primary) !important;
    background-color: var(--fg-primary) !important;
    border-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
}

.panel-primary {
    border-color: var(--fg-primary) !important;
}

/* --- Bootstrap label badge --- */
.label-primary {
    background-color: var(--fg-primary);
}

/* --- eTis line-break (Site.css: .eTis-line-break) --- */
.eTis-line-break {
    border-bottom-color: var(--fg-primary) !important;
}

/* --- eTisBlock tiles (Site.css: .eTisBlock div) --- */
.eTisBlock div {
    background-color: var(--fg-primary) !important;
}

/* --- Toggle buttons: Day / Period / Orig. / Dest. active state --- */
.toggle-button-active {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
}

button#btnDay:focus,
button#btnPeriod:focus {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
}

button#btnSearchDateOrigin:focus,
button#btnSearchDateDestination:focus {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
}

/* --- Toggle-group radio buttons: Mon–Sun day selectors --- */
.togglegroup input:checked+label {
    background-color: var(--fg-primary);
    color: var(--fg-white);
}

#filterGroupageOrder .label-toggle:hover {
    border: 1px solid var(--fg-primary) !important;
}




/* --- Navbar --- */
.navbar-default {
    background-color: var(--fg-primary);
    border-color: var(--fg-primary) !important;
}

/* --- Sweep menu button active state --- */
.sweepMenuButton.active {
    background-color: var(--fg-primary) !important;
    border: 1px solid var(--fg-primary) !important;
    color: var(--fg-white) !important;
}

.sweepMenuButton:not(.active):hover {
    /* border: 1px solid var(--fg-primary) !important; */
    /* background-color: #e9e9e9; */
    background-color: var(--fg-gray-200) !important;
}

/* --- Checkbox --- */
.etis-control[type="checkbox"] {
    accent-color: var(--fg-primary);
}

/* --- Steps --- */
.step.active {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
}

.stepContainer {
    border-bottom: var(--fg-border-width-selected) var(--fg-border-style-solid) var(--fg-primary) !important;
}

/*.form-control:focus {
    background-color: var(--fg-primary) !important;
    color: var(--fg-white) !important;
}*/