/* SOFTRA brandbook (Design System v1) pilot: a page opts in with class="brand-ds" on its root.
   Popups and windows render outside the page, hence :has(); inside :is() an unsupported one is dropped. */

@font-face {
    font-family: 'Archivo';
    src: url(/fonts/Archivo/Archivo-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url(/fonts/Archivo/Archivo-Medium.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url(/fonts/Archivo/Archivo-SemiBold.ttf) format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:is(.brand-ds,
    body:has(.brand-ds) .k-animation-container,
    body:has(.brand-ds) .k-window,
    body:has(.brand-ds) .k-notification-group,
    body:has(.brand-ds) .k-notification,
    body:has(.brand-ds) .k-tooltip) {
    --ds-brand-50: rgb(243, 246, 252);
    --ds-brand-100: rgb(230, 236, 248);
    --ds-brand-200: rgb(198, 214, 241);
    --ds-brand-500: rgb(50, 104, 178);
    --ds-brand-600: rgb(38, 87, 163);
    --ds-brand-700: rgb(32, 70, 132);
    --ds-brand-800: rgb(30, 61, 110);
    --ds-brand-900: rgb(30, 52, 92);
    --ds-neutral-50: rgb(245, 247, 248);
    --ds-neutral-100: rgb(236, 241, 243);
    --ds-neutral-200: rgb(220, 228, 233);
    --ds-neutral-300: rgb(199, 209, 218);
    --ds-neutral-700: rgb(113, 123, 145);
    --ds-success-50: rgb(237, 252, 244);
    --ds-success-100: rgb(212, 247, 227);
    --ds-success-200: rgb(172, 238, 204);
    --ds-success-600: rgb(14, 141, 94);
    --ds-success-700: rgb(11, 113, 78);
    --ds-warning-50: rgb(255, 248, 237);
    --ds-warning-100: rgb(254, 239, 214);
    --ds-warning-200: rgb(253, 219, 171);
    --ds-warning-500: rgb(246, 126, 25);
    --ds-warning-900: rgb(122, 51, 20);
    --ds-error-50: rgb(255, 243, 241);
    --ds-error-100: rgb(255, 229, 225);
    --ds-error-200: rgb(255, 206, 199);
    --ds-error-600: rgb(229, 53, 29);
    --ds-error-700: rgb(193, 41, 20);
    --ds-shadow-sm: 0 2px 8px rgba(50, 104, 178, 0.15);
    --ds-shadow-md: 0 4px 16px rgba(50, 104, 178, 0.15);
    --ds-shadow-lg: 0 8px 24px rgba(50, 104, 178, 0.15);
    --ds-control-height: 32px;

    --kendo-font-family: 'Archivo', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --kendo-font-size: 12px;
    --kendo-font-size-md: 12px;
    --kendo-line-height: 1.3333;
    --kendo-color-primary: var(--ds-brand-600);
    --kendo-color-primary-hover: var(--ds-brand-700);
    --kendo-color-primary-active: var(--ds-brand-800);
    --kendo-color-primary-emphasis: var(--ds-brand-500);
    --kendo-color-primary-subtle: var(--ds-brand-50);
    --kendo-color-primary-subtle-hover: var(--ds-brand-100);
    --kendo-color-primary-subtle-active: var(--ds-brand-200);
    --kendo-color-primary-on-subtle: var(--ds-brand-800);
    --kendo-color-primary-on-surface: var(--ds-brand-600);
    --kendo-color-on-primary: #ffffff;
    /* Kendo's "base" is the brandbook's secondary: filled neutral. */
    --kendo-color-base: var(--ds-neutral-100);
    --kendo-color-base-hover: var(--ds-neutral-200);
    --kendo-color-base-active: var(--ds-neutral-300);
    --kendo-color-on-base: var(--ds-brand-900);
    --kendo-color-base-subtle: var(--ds-neutral-100);
    --kendo-color-base-subtle-hover: var(--ds-neutral-200);
    --kendo-color-base-on-surface: var(--ds-brand-900);
    --kendo-color-light: var(--ds-neutral-100);
    --kendo-color-light-hover: var(--ds-neutral-200);
    --kendo-color-light-active: var(--ds-neutral-300);
    --kendo-color-on-light: var(--ds-brand-900);
    --kendo-color-app-surface: #ffffff;
    --kendo-color-on-app-surface: var(--ds-brand-900);
    --kendo-color-surface: var(--ds-neutral-50);
    --kendo-color-surface-alt: #ffffff;
    --kendo-color-subtle: var(--ds-neutral-700);
    --kendo-color-border: var(--ds-neutral-200);
    --kendo-color-border-alt: var(--ds-neutral-300);
    --kendo-color-success: var(--ds-success-600);
    --kendo-color-success-subtle: var(--ds-success-100);
    --kendo-color-success-on-subtle: var(--ds-success-700);
    --kendo-color-warning: var(--ds-warning-500);
    --kendo-color-warning-subtle: var(--ds-warning-100);
    --kendo-color-warning-on-subtle: var(--ds-warning-900);
    --kendo-color-error: var(--ds-error-600);
    --kendo-color-error-hover: var(--ds-error-700);
    --kendo-color-error-subtle: var(--ds-error-100);
    --kendo-color-error-on-subtle: var(--ds-error-700);
    --kendo-color-info: var(--ds-brand-600);
    --kendo-color-info-subtle: var(--ds-brand-50);
    --kendo-color-info-on-subtle: var(--ds-brand-700);
    --kendo-border-radius-sm: 4px;
    --kendo-border-radius-md: 8px;
    --kendo-border-radius-lg: 12px;
    --kendo-border-radius-xl: 16px;
    --kendo-border-radius-xxl: 20px;
    --kendo-elevation-1: var(--ds-shadow-sm);
    --kendo-elevation-2: var(--ds-shadow-sm);
    --kendo-elevation-3: var(--ds-shadow-md);
    --kendo-elevation-4: var(--ds-shadow-md);
    --kendo-elevation-5: var(--ds-shadow-lg);
    --kendo-elevation-6: var(--ds-shadow-lg);
    --kendo-elevation-7: var(--ds-shadow-lg);
    --kendo-elevation-8: var(--ds-shadow-lg);
    --kendo-elevation-9: var(--ds-shadow-lg);

    font-family: var(--kendo-font-family);
    color: var(--kendo-color-on-app-surface);
}

/* Surfaces */

.brand-ds :is(.surface, .surface-popout-management) {
    border: 1px solid var(--ds-neutral-200);
    border-radius: 12px;
    box-shadow: var(--ds-shadow-sm);
}

.brand-ds .title h3 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ds-brand-900);
}

.brand-ds .surface-popout-management .title h3 {
    font-size: 16px;
    line-height: 24px;
}

.brand-ds .form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--ds-brand-900);
}

.brand-ds .required {
    color: var(--ds-error-600);
}

.brand-ds .field-hint {
    color: var(--ds-neutral-700);
    opacity: 1;
}

.brand-ds a {
    color: var(--ds-brand-600);
    text-decoration: none;
}

.brand-ds a:hover {
    color: var(--ds-brand-700);
    text-decoration: underline;
}

/* Breadcrumb (BookingGroupView header) */

.brand-ds .breadcrumb-nav {
    align-items: center;
}

.brand-ds .breadcrumb-link {
    color: var(--ds-neutral-700);
    font-size: 12px;
}

.brand-ds .breadcrumb-sep {
    display: inline-flex;
    color: var(--ds-neutral-700);
    opacity: 1;
}

.brand-ds :is(.company-name, .vehicle-limit) {
    color: var(--ds-neutral-700);
    font-size: 12px;
    opacity: 1;
}

/* Form validation summary (brandbook Alert, destructive) */

.brand-ds .validation-notice {
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: var(--ds-error-50);
    box-shadow: inset 0 0 0 1px var(--ds-error-200);
}

.brand-ds .validation-notice li {
    color: var(--ds-error-700);
    font-size: 12px;
}

/* Loader (brandbook Spinner) */

.brand-ds .loader {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2.5px solid var(--ds-neutral-100);
    border-top-color: var(--ds-brand-600);
    animation: ds-spin 800ms linear infinite;
}

.brand-ds .loader::before,
.brand-ds .loader::after {
    content: none;
}

@keyframes ds-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Buttons */

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) .k-button-md:not(.k-input-button, .k-input-spinner .k-button) {
    min-height: var(--ds-control-height);
    padding-block: 0;
    padding-inline: 12px;
    font-weight: 500;
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) .k-button-md.k-icon-button:not(.k-input-button, .k-input-spinner .k-button) {
    width: var(--ds-control-height);
    padding-inline: 0;
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-button-solid-base, .k-button-solid-primary, .k-button-solid-error, .k-button-solid-light) {
    border-color: transparent;
    background-image: none;
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) .k-button:focus-visible {
    box-shadow: 0 0 0 3px var(--ds-brand-500);
}

/* Inputs and pickers */

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-input-sm, .k-input-md, .k-picker-sm, .k-picker-md) {
    min-height: var(--ds-control-height);
    background-color: #ffffff;
    background-image: none;
    border-color: var(--ds-neutral-200);
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-input-sm, .k-input-md, .k-picker-sm, .k-picker-md) .k-input-inner {
    padding-inline: 12px;
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-input, .k-picker).k-disabled {
    background-color: var(--ds-neutral-100);
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) .k-input .k-chip {
    border-color: transparent;
    border-radius: 9999px;
    background: var(--ds-neutral-100);
    color: var(--ds-brand-900);
    font-weight: 500;
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-input-solid, .k-picker-solid):hover {
    border-color: var(--ds-neutral-300);
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-input-solid, .k-picker-solid):is(:focus, :focus-within, .k-focus) {
    border-color: var(--ds-brand-500);
    box-shadow: inset 0 0 0 1px var(--ds-brand-500);
}

:is(.brand-ds, body:has(.brand-ds) .k-window, body:has(.brand-ds) .k-animation-container) :is(.k-input-button, .k-input-spinner .k-button) {
    background: transparent;
    border-color: transparent;
    color: var(--ds-neutral-700);
}

.brand-ds .k-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border-color: var(--ds-neutral-300);
}

/* Grid */

.brand-ds .k-grid {
    border-color: var(--ds-neutral-200);
    border-radius: 12px;
    overflow: hidden;
}

.brand-ds .k-grid .k-grid-toolbar {
    background: #ffffff;
    border-color: var(--ds-neutral-200);
    padding: 8px 12px;
    gap: 8px;
}

.brand-ds .k-grid :is(.k-grid-header, .k-grid-header-wrap) {
    background: var(--ds-neutral-100);
    border-color: var(--ds-neutral-200);
}

.brand-ds .k-grid .k-grid-header .k-table-th {
    height: 40px;
    padding-block: 0;
    padding-inline: 12px;
    vertical-align: middle;
    background: var(--ds-neutral-100);
    border-inline-start-width: 0;
    border-color: var(--ds-neutral-200);
    color: var(--ds-neutral-700);
    font-weight: 600;
}

.brand-ds .k-grid .k-filter-row :is(.k-table-th, .k-table-td, td) {
    padding: 6px 8px;
    background: var(--ds-neutral-50);
    border-inline-start-width: 0;
    border-color: var(--ds-neutral-200);
}

.brand-ds .k-grid .k-table-tbody .k-table-row {
    background: #ffffff;
}

.brand-ds .k-grid .k-table-tbody .k-table-row .k-table-td {
    padding-inline: 12px;
    border-inline-start-width: 0;
    border-bottom: 1px solid var(--ds-neutral-200);
    color: var(--ds-brand-900);
}

.brand-ds .k-grid .k-table-tbody .k-table-row:hover > .k-table-td {
    background: var(--ds-neutral-100);
}

/* !important only to beat the one in main.css. */
.brand-ds .k-grid .k-table-tbody .k-table-row.k-selected > .k-table-td {
    background-color: var(--ds-brand-50) !important;
}

/* Empty grid (brandbook EmptyState) */

.brand-ds .k-grid .k-table-tbody .k-grid-norecords > .k-table-td {
    padding-block: 32px;
    color: var(--ds-neutral-700);
    font-weight: 600;
    text-align: center;
}

/* Pager */

.brand-ds .k-grid .k-pager {
    padding: 8px 12px;
    background: #ffffff;
    border-color: var(--ds-neutral-200);
    color: var(--ds-neutral-700);
}

.brand-ds .k-pager :is(.k-pager-nav, .k-pager-numbers .k-button) {
    width: var(--ds-control-height);
    height: var(--ds-control-height);
    border-radius: 8px;
    /* Outline with !important: Kendo and main.css strip border, shadow and focus outline with !important. */
    outline: 1px solid var(--ds-neutral-200) !important;
    outline-offset: -1px;
    color: var(--ds-brand-900);
}

.brand-ds .k-pager .k-pager-nav.k-button + .k-pager-nav.k-button {
    margin-inline-start: 4px;
}

.brand-ds .k-pager .k-pager-numbers {
    gap: 4px;
    margin-inline: 4px;
}

.brand-ds .k-pager .k-pager-numbers .k-button.k-selected {
    background-color: var(--ds-brand-600) !important;
    outline-color: var(--ds-brand-600) !important;
    color: #ffffff;
}

/* Kendo lays a 20% white overlay on the selected flat button. */
.brand-ds .k-pager .k-pager-numbers .k-button.k-selected::before {
    opacity: 0;
}

/* Tabs */

.brand-ds .k-tabstrip-items-wrapper {
    border-bottom-width: 0;
}

.brand-ds .k-tabstrip-items {
    gap: 4px;
    padding-bottom: 8px;
}

.brand-ds .k-tabstrip .k-tabstrip-items .k-item {
    height: 36px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-neutral-700);
    font-weight: 500;
}

.brand-ds .k-tabstrip .k-tabstrip-items .k-item .k-link {
    height: 100%;
    padding: 0 16px;
}

.brand-ds .k-tabstrip .k-tabstrip-items .k-item:hover:not(.k-active) {
    background: var(--ds-neutral-100);
    color: var(--ds-brand-900);
}

.brand-ds .k-tabstrip .k-tabstrip-items .k-item.k-active {
    background: var(--ds-brand-600);
    color: #ffffff;
}

.brand-ds .k-tabstrip-content {
    border: 0;
    padding: 0;
}

/* Booking status chips */

.brand-ds .status-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 9999px;
    font-weight: 500;
    line-height: 1;
}

.brand-ds .status-chip.status-paid {
    background: var(--ds-success-100);
    color: var(--ds-success-700);
}

.brand-ds .status-chip.status-unpaid {
    background: var(--ds-warning-100);
    color: var(--ds-warning-900);
}

.brand-ds .status-chip.status-cancelled {
    background: var(--ds-error-100);
    color: var(--ds-error-700);
}

.brand-ds .status-chip.status-deactivated {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
}

.brand-ds .status-chip.status-moved {
    background: var(--ds-brand-100);
    color: var(--ds-brand-700);
}

/* Windows */

body:has(.brand-ds) .k-window {
    border-color: var(--ds-neutral-200);
    border-radius: 12px;
    box-shadow: var(--ds-shadow-lg);
    overflow: hidden;
}

body:has(.brand-ds) .k-window-titlebar {
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--ds-neutral-200);
    color: var(--ds-brand-900);
    font-weight: 600;
}

body:has(.brand-ds) .k-window-content {
    padding: 16px;
}

/* Tooltips (brandbook Tooltip) */

body:has(.brand-ds) .k-tooltip {
    padding: 4px 8px;
    border: 0;
    border-radius: 4px;
    background: var(--ds-brand-900);
    color: #ffffff;
    font-size: 12px;
}

body:has(.brand-ds) .k-tooltip .k-callout {
    color: var(--ds-brand-900);
}

/* Toasts (brandbook Alert) */

body:has(.brand-ds) .k-notification {
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
}

body:has(.brand-ds) .k-notification-success {
    background: var(--ds-success-50);
    border-color: var(--ds-success-200);
    color: var(--ds-success-700);
}

body:has(.brand-ds) .k-notification-warning {
    background: var(--ds-warning-50);
    border-color: var(--ds-warning-200);
    color: var(--ds-warning-900);
}

body:has(.brand-ds) .k-notification-error {
    background: var(--ds-error-50);
    border-color: var(--ds-error-200);
    color: var(--ds-error-700);
}

body:has(.brand-ds) .k-notification-info {
    background: var(--ds-brand-50);
    border-color: var(--ds-brand-200);
    color: var(--ds-brand-700);
}