@import "variables.css";
@import "overrides/button.css";
@import "overrides/data-grid.css";
@import "overrides/dialog.css";
@import "overrides/drawer.css";
@import "overrides/expand-panels.css";
@import "overrides/inputs.css";
@import "overrides/switch.css";
@import "overrides/tabs.css";
@import "overrides/typography.css";
@import "overrides/tooltip.css";
@import "overrides/pagination.css";
@import "styles/toolbar-search.css";

@import "styles/overlay.css";
@import "styles/scheduler.css";
@import "styles/tabs.css";
@import "styles/buttons.css";
@import "styles/images.css";

html, body {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

.mud-menu-list:has(.mud-menu-submenu-icon)
.mud-menu-item.mp-menuitem-userinfo:not(:has(.mud-menu-submenu-icon))
.mud-menu-item-text {
    margin-inline-start: 0;
    margin-inline-end: 8px;
}

.mp-menuitem-active-user-type,
.mp-menuitem-active-user-type svg {
    color: var(--mp-primary) !important;
}

.mud-snackbar {
    align-items: normal;
}

.mud-snackbar .mud-snackbar-icon {
    padding-top: 8px;
}

.mp-bg-white {
    background-color: var(--mud-palette-white) !important;
}

.mp-bg-secondary-200 {
    background-color: var(--mp-secondary-200) !important;
}

.mp-page-bg {
    background-color: var(--mp-page-bg) !important;
    min-height: 100%;
}

.mp-inactive-color {
    color: var(--mud-palette-action-disabled);
}

.mp-loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 10000;

    background-color: var(--mp-success-200);
}

.mud-progress-linear.mud-progress-linear-color-default:not(.mud-progress-linear-buffer) .mud-progress-linear-bar {
    background-color: var(--mp-success-100);
}

.mp-helper-text {
    color: var(--mud-palette-text-secondary);
    font-size: var(--mp-helper-text-font-size);
    text-align: start;
    font-weight: 400;
    line-height: var(--mp-helper-text-line-height);
    letter-spacing: 0.03333em;
    margin: 0px;
    margin-top: var(--mp-helper-text-margin-top);
}

.mp-block-item-has-validation {
    padding-bottom: var(--mp-block-item-has-validation-padding-bottom);
}

.mp-block-item-has-validation:has(.mud-input-error) {
    padding-bottom: 0;
}

.gap-2 {
    gap: 12px;
}

.gap-3 {
    gap: 24px;
}

.secondary-thin-border {
    border: 1px solid var(--mp-secondary-100);
    border-radius: 8px;
}

.mp-quotes-sticky-header {
    width: 100%;
    height: 100px;
    left: 0;
    top: 0;
    position: sticky;
    z-index: 100;
}

.condition-section .mp-inspection-file-upload {
    width: 40px !important;
}

.mp-force-shrink-no-focus {
    transform: translate(14px, -6px) scale(0.75); !important;
    max-width: calc(133.333% - 18.6667px) !important;
    transform-origin: left top !important;
}

.mp-autocomplete-divider {
    margin-top: 0;
    margin-bottom: 4px;
}

.mp-h-0 {
    height: 0 !important;
    padding: 0 !important;
}

.mp-video-container {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.mp-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    font-size: 3rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.4);
}

/* -- Template builder -- */

.mp-info-banner {
    background-color: var(--mp-info-bg);
    border-radius: 8px;
    padding: 16px;
    gap: 10px;
    display: flex;
    align-items: flex-start;
    align-items: center;
}

.mp-info-banner-text {
    color: var(--mp-info-text);
}

.mp-info-banner-icon {
    color: var(--mp-info-text) !important;
}

.mp-action-text {
    color: var(--mp-action-color);
    cursor: pointer;
    font-weight: 500;
}

/* Override MudBlazor button color inside action-text menus */
.mp-action-text .mud-button-root,
.mp-action-text.mud-button-root {
    color: var(--mp-action-color) !important;
}

.mp-circle-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    border: 2px solid var(--mp-icon-muted);
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 8px;
    opacity: 1;
}


/* White appbar icon (back button) */
.mp-appbar-icon-white {
    color: white !important;
}

/* Expansion panel title – black when collapsed, primary when expanded */
.mud-expand-panel .mp-expansion-panel-title {
    color: black;
}

.mud-expand-panel .mp-expansion-panel-title svg {
    color: black !important;
}

.mud-panel-expanded .mp-expansion-panel-title {
    color: var(--mp-primary);
}

.mud-panel-expanded .mp-expansion-panel-title svg {
    color: var(--mp-primary) !important;
}

/* Expansion panel chevron – black when collapsed, primary when expanded */
.mud-expand-panel .mud-expand-panel-header .mud-expand-panel-icon {
    color: black !important;
}

.mud-panel-expanded .mud-expand-panel-header .mud-expand-panel-icon {
    color: var(--mp-primary) !important;
}

/* Delete button – force black text and icon */
.mud-button-outlined.mud-button-outlined-dark {
    color: black !important;
}

/* 6px border-radius for all outlined buttons */
.mud-button-outlined {
    border-radius: 6px !important;
}

.mud-button-outlined.mud-button-outlined-dark svg {
    color: black !important;
}

/* Transparent measurement section, only input white, black text */
.mp-measurement-section {
    background-color: transparent !important;
    padding: 0 !important;
    color: black;
}

.mp-measurement-section .mud-input-root {
    background-color: var(--mp-surface);
}

/* Transparent items section, only input white, black text */
.mp-items-section {
    background-color: transparent !important;
    color: black;
}

.mp-items-section .mud-input-root {
    background-color: var(--mp-surface);
}

/* Padding for content inside items and measurement sections */
.mp-items-section > div:first-child {
    padding: 1rem !important;
}

.mp-measurements > .mud-expansion-panels {
    padding: 0;
}

.mp-measurements .mud-expand-panel {
    padding: 0 1rem;
}

/* Vehicle Details tab – two white card containers */
.mp-vehicle-details-card {
    background-color: var(--mp-surface);
    border-radius: 8px;
    border: 1px solid var(--mp-border-color);
}

/* Blue checked checkboxes */
.mud-checkbox-true .mud-icon-root.mud-svg-icon {
    color: var(--mp-action-color) !important;
}

/* Shared bordered card base */
.mp-bordered-card {
    background-color: var(--mp-surface);
    border-radius: 8px;
    border: 1px solid var(--mp-border-color);
    overflow: hidden;
}

/* Remove expansion panel margin gaps inside bordered cards */
.mud-expand-panel.mud-panel-expanded {
    margin: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default, var(--mp-border-color-light));
}

/* Shared page wrapper */
.mp-page {
    background-color: var(--mp-page-bg);
    min-height: 100%;
}

/* Base photo square styles */
.inspection-photo {
    --mp-inspection-photo-icon-color: var(--mp-icon-muted);
    border: 1px solid var(--mp-secondary-100);
    border-radius: 4px;
    flex-grow: 1;
    flex: 1;
    height: 100px;
}

.inspection-photo .mud-icon-root.mud-svg-icon {
    color: var(--mp-inspection-photo-icon-color);
    height: 24px;
}

.inspection-photo .mud-input-control-input-container > div {
    justify-content: center;
    align-items: center;
}

/* Gray photo background variant */
.mp-redesign-photo {
    background-color: var(--mp-page-bg) !important;
    border: none !important;
}

/* Supporting details file grid labels */
.mp-supporting-details-header {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.mp-supporting-label {
    font-size: 0.875rem;
    color: black;
}

.mp-supporting-label:first-child {
    flex: 6;
}

.mp-supporting-label:nth-child(2) {
    flex: 1;
    text-align: center;
}

.mp-supporting-label:nth-child(3) {
    flex: 1;
    text-align: center;
}

/* OK items simple list inside dropdown */
.mp-ok-items-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mp-ok-items-list li {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mp-border-color);
}

.mp-ok-items-list li:last-child {
    border-bottom: none;
}

/* Quote section expansion panel backgrounds */
.mp-quote-section-panel .mud-expand-panel-header {
    background-color: var(--mp-surface);
    transition: background-color 0.15s ease;
}

.mp-quote-section-panel .mud-expand-panel-header:hover {
    background-color: var(--mp-page-bg);
}

.mp-quote-section-panel.mud-panel-expanded .mud-expand-panel-header {
    background-color: var(--mp-quote-panel-expanded-bg);
}

.mp-quote-section-panel.mud-panel-expanded .mud-expand-panel-header:hover {
    background-color: var(--mp-quote-panel-expanded-bg);
}

/* Quote expansion panels – no x-axis padding */
.mp-quote-panels {
    padding: 0 !important;
}

.mp-quote-panels .mud-expand-panel {
    padding: 0;
}

/* Fault badge color */
.mp-status-selector .mud-button-filled.mud-button-filled-error {
    background-color: var(--mp-fault-color) !important;
}

/* Alert badge color */
.mp-status-selector .mud-button-filled.mud-button-filled-warning {
    background-color: var(--mp-alert-color) !important;
}

/* More space between Finding and Recommendation */
.mp-advisory-item .mud-stack.mud-stack-row {
    gap: 2rem;
}

/* Success snackbar styling */
.mud-snackbar.mud-alert-filled-success {
    background-color: var(--mp-success-bg) !important;
    color: var(--mp-success-text) !important;
}

.mud-snackbar.mud-alert-filled-success h3 {
    font-weight: bold;
    color: var(--mp-success-text);
}

.mud-snackbar.mud-alert-filled-success p {
    color: var(--mp-success-text);
}

.mud-snackbar.mud-alert-filled-success .mud-snackbar-icon svg {
    color: var(--mp-success-text) !important;
}

/* Filled primary buttons get 6px border-radius */
.mud-button-filled.mud-button-filled-primary {
    border-radius: 6px !important;
}

/* White icon inside filled primary buttons */
.mud-button-filled.mud-button-filled-primary .mud-button-icon-end svg {
    color: white !important;
}

/* Muted approve/decline button – grayed out but still clickable */
.mp-quote-btn-muted.mud-button-root {
    opacity: 0.4 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}