/*
 * 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);
    --fg-tabstrip-backgroundcolor: white;
    --fg-tag-success:
}


/* =============================================================================
   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: var(--fg-btn-action-primary-bg-color-default, #23565d);
    border: var(--fg-border-width-default, 1px) solid var(--fg-btn-action-primary-bg-color-default, #23565d);
    border-radius: var(--fg-radius-m, 6px);
    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);
    }

.btn-destructive-primary {
    border: var(--fg-border-width-default, 1px) solid var(--fg-btn-destructive-primary-bg-color-default, #eb3b5a);
    background: var(--fg-btn-destructive-primary-bg-color-default, #eb3b5a);
    color: var(--fg-btn-destructive-primary-text-color-default, #ffffff);
}

    .btn-destructive-primary:hover {
        background: var(--fg-btn-destructive-primary-bg-color-hov, #fc5c65);
        border-color: transparent;
        color: var(--fg-btn-destructive-primary-text-color-default, #ffffff);
    }

/* --- 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-black) !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-secondary);
    /*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;
}*/

.tag.text-tag, .tag.icon-tag {
    background: var(--fg-badge-neutral-bg, #f4f9f9);
    color: var(--fg-badge-neutral-text, #1b1e1e);
    border: 1px solid var(--fg-badge-neutral-border, #b2c1c2);
}

.tag-group > .tag.text-tag, .tag-group > .tag.icon-tag {
    border-right-width: 0px;
}

.tag-group > :nth-last-child(1 of :not([style*="display: none"])) {
    border-right-width: 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}


.tag.Accepted, .tag:has(.Accepted) {
    background: var(--fg-badge-success-bg, #ddffef) !important;
    border-color: var(--fg-badge-success-border, #26de81);
    color: var(--fg-badge-success-text, #005d2e);
}

.tag.Rejected, .tag.Revoked, .tag:has(.Rejected), .tag:has(.Revoked) {
    background: var(--fg-badge-error-bg, #ffdee0) !important;
    border-color: var(--fg-badge-error-border, #fc5c65);
    color: var(--fg-badge-error-text, #7c0016);
}

.tag.Assigned, .tag.OpenForAssignment, .tag.ClosedForAssignment, .tag:has(.Assigned), .tag:has(.OpenForAssignment), .tag:has(.ClosedForAssignment) {
    background: var(--fg-badge-active-bg, #0e78c424) !important;
    border-color: var(--fg-badge-active-border, #4b7bec);
    color: var(--fg-badge-active-text, #002782);
}

.tag.Created, .tag:has(.Created) {
    background: var(--fg-badge-neutral-bg, #f4f9f9) !important;
    border-color: var(--fg-badge-neutral-border, #b2c1c2);
    color: var(--fg-badge-neutral-text, #1b1e1e);
}

.tag {
    background: var(--fg-badge-neutral-bg, #f4f9f9);
    border-color: var(--fg-badge-neutral-border, #b2c1c2);
    color: var(--fg-badge-neutral-text, #1b1e1e);
}

    .tag.tag-default {
        background-color: #e8e8e8;
        color: #000000;
    }

    .tag.arr-late {
        background: var(--fg-badge-error-bg, #ffdee0) !important;
        color: var(--fg-badge-error-text, #7c0016);
        border: 1px solid var(--fg-badge-error-border, #fc5c65);
    }

    .tag.arr-early {
        background: var(--fg-badge-ci-bg, #ffefc7);
        color: var(--fg-badge-ci-text, #594100);
        border: 1px solid var(--fg-badge-ci-border, #ffd66b);
    }

    .tag.arr-ontime {
        background: var(--fg-badge-success-bg, #ddffef) !important;
        color: var(--fg-badge-success-text, #005d2e);
        border: 1px solid var(--fg-badge-success-border, #26de81);
    }


.tag-group .tag.error {
    background: var(--fg-badge-error-bg, #ffdee0) !important;
    color: var(--fg-badge-error-text, #7c0016);
    /*border: 1px solid var(--fg-badge-error-border, #fc5c65);*/
}

.tag-group .tag.ok {
    background: var(--fg-badge-success-bg, #ddffef) !important;
    color: var(--fg-badge-success-text, #005d2e);
    /*border: 1px solid var(--fg-badge-success-border, #26de81);*/
}

.tag-group-bordered {
    border: 1px solid var(--fg-badge-neutral-border, #b2c1c2);
    border-radius: 3px;
}