/* ========== Theme & Layout ========== */

/* Appbar: subtle bottom border instead of shadow for a cleaner look */
.bp-appbar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Drawer header: logo container with bottom separator */
.bp-drawer-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-height: 48px;
}

/* When drawer is in icon-only mode, center the logo */
.bp-nav-icononly .bp-drawer-header {
    justify-content: center;
    padding: 12px 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Nav Menu — All styles (global so MudBlazor child components are reached)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Expanded Mode: Nav Search Bar ─────────────────────────────────────── */

.bp-nav-search-bar {
    display: flex;
    align-items: center;
    padding: 4px 10px 2px;
}

.bp-nav-search-input {
    flex: 1;
}

.bp-nav-search-input .mud-input-outlined {
    font-size: 0.75rem !important;
}

.bp-nav-search-input .mud-input-outlined input {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
}

.bp-nav-search-input .mud-input-outlined .mud-input-adornment-end {
    margin-right: 2px;
}

.bp-nav-search-input .mud-input-outlined .mud-input-adornment-end .mud-icon-button {
    padding: 2px !important;
}

/* ── Expanded Mode: Section Category Labels ───────────────────────────── */

.bp-nav-section-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 8px 16px 2px;
    user-select: none;
}

.bp-nav-section-icon {
    font-size: 0.8rem !important;
    width: 0.8rem;
    height: 0.8rem;
}

/* ── Expanded Mode: Compact Nav Sizing ────────────────────────────────── */

/* Prevent horizontal scrollbar in the nav drawer. */
.bp-nav-scope {
    overflow-x: hidden !important;
}

/* Smaller nav group titles */
.bp-nav-scope .mud-nav-group .mud-nav-group-text {
    font-size: 0.8rem !important;
}

/* Smaller nav link text */
.bp-nav-scope .mud-nav-link-text {
    font-size: 0.8rem !important;
}

/* Reduce nav link icons to 18px */
.bp-nav-scope .mud-nav-link .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.bp-nav-scope .mud-nav-link .mud-icon-root svg {
    width: 18px !important;
    height: 18px !important;
}

/* Reduce nav group header icons to 20px */
.bp-nav-scope .mud-nav-group > .mud-nav-link .mud-icon-root {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.bp-nav-scope .mud-nav-group > .mud-nav-link .mud-icon-root svg {
    width: 20px !important;
    height: 20px !important;
}

/* Tighter vertical padding on nav links and group headers */
.bp-nav-scope .mud-nav-link {
    min-height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Smooth hover transitions */
.bp-nav-scope .mud-nav-group,
.bp-nav-scope .mud-nav-link {
    transition: background-color 0.15s ease;
}

/* ── Icon-Only Nav: Drawer Overflow Fixes ─────────────────────────────── */
/* Allow flyout panels to render outside the 64px drawer without clipping. */

.bp-nav-icononly {
    overflow: visible !important;
}

.bp-nav-icononly .mud-drawer-content,
.bp-nav-icononly .mud-drawer-paper,
.bp-nav-icononly .mud-navmenu,
.bp-nav-icononly .mud-navmenu .mud-nav-menu {
    overflow: visible !important;
}

.bp-nav-scope--icononly {
    position: relative;
    overflow: visible !important;
}

/* In icon-only mode: always hide nav text inside the drawer column. */
.bp-nav-icononly .mud-nav-link-text,
.bp-nav-icononly .mud-nav-group-title,
.bp-nav-icononly .mud-nav-group-text,
.bp-nav-icononly .mud-nav-group-expand-icon {
    display: none !important;
}

/* Keep icons centered when text is hidden. */
.bp-nav-icononly .mud-nav-link,
.bp-nav-icononly .mud-nav-group {
    justify-content: center;
}

/* ── Icon-Only Nav: Flyout Container ──────────────────────────────────── */

.bp-nav-flyout {
    padding-top: 8px;
}

/* ── Icon-Only Nav: Flyout Icon Items ─────────────────────────────────── */

.bp-flyout-item {
    position: relative;
    display: flex;
    justify-content: center;
    border-radius: 8px;
}

/* Keep the icon centered and give it a consistent hit area. */
.bp-flyout-item .mud-icon-button {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

/* Match collapsed icon size to expanded nav group icons (20px). */
.bp-flyout-item .mud-icon-button .mud-icon-root {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.bp-flyout-item .mud-icon-button .mud-icon-root svg {
    width: 20px !important;
    height: 20px !important;
}

/* Highlight the icon button when hovering in flyout mode. */
.bp-flyout-item:hover .mud-icon-button {
    background-color: var(--mud-palette-action-hover);
}

/* Selected (active route) highlight for the flyout icon item. */
.bp-flyout-item--active .mud-icon-button {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 18%, var(--mud-palette-surface)) !important;
    box-shadow: inset -4px 0 0 0 var(--mud-palette-primary) !important;
}

@supports not (background-color: color-mix(in srgb, white 10%, black)) {
    .bp-flyout-item--active .mud-icon-button {
        background-color: var(--mud-palette-action-hover) !important;
    }
}

/* ── Icon-Only Nav: Flyout Panels ─────────────────────────────────────── */

.bp-flyout-panel {
    display: none;
    position: absolute;
    left: 56px;
    top: 0;
    width: 240px;
    z-index: 3000;
    padding-bottom: 6px;
}

/* Show the panel when hovering either the icon or the panel itself. */
.bp-flyout-item:hover .bp-flyout-panel {
    display: block;
}

/* ── Icon-Only Nav: Flyout Links ──────────────────────────────────────── */

.bp-flyout-link {
    display: block;
    padding: 8px 12px;
    margin: 0 6px;
    border-radius: 6px;
    color: var(--mud-palette-text-primary);
    transition: background-color 0.15s ease;
}

.bp-flyout-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* ── Nav Drawer: Compact User Card ────────────────────────────────────── */

.bp-nav-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    min-height: 0;
}

.bp-nav-user-card:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.bp-nav-user-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    line-height: 1.3;
}

.bp-nav-user-name {
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bp-nav-user-title {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logo link: remove underline/decoration */
.bp-logo-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: inherit !important;
}

/* SVG icon: size it cleanly */
.bp-logo-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    position: relative;
    top: 2px;
}

/* Logo text container */
.bp-logo-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: 'Inter', 'Roboto', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

.bp-logo-ops {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.bp-logo-portal {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Smooth dark-mode transition on all layout elements */
.mud-appbar,
.mud-drawer,
.mud-drawer-content,
.mud-main-content,
.mud-navmenu,
.mud-nav-link,
.mud-nav-group,
.mud-nav-group-text,
.mud-paper,
.mud-toolbar {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ========== Validation ========== */

.validation-message {
    color: #f44336;
    font-size: .8rem;
    margin: 3px 0 0;
    text-align: start;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
}

.mud-snackbar-location-bottom-left {
    bottom: 50px !important;
}

.mud-snackbar-location-bottom-right {
    bottom: 50px !important;
}

.mud-progress-linear {
    margin: 0 !important;
}
/* Common external login button styles */
.external-login {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    color: #fff;
    transition: background-color 0.3s;
}

.full-width {
    width: 100%;
}

/* External login button icons */
.external-login-icon {
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px;
    height: 35px;
    margin-right: 8px;
}

/* Microsoft external login button */
.microsoft-external-login {
    background-color: #2F2F2F;
}

.microsoft-external-login-icon {
    background-image: url('../icons/icons8-microsoft-48-min.png');
}

/* Google external login button */
.google-external-login {
    background-color: #4285F4;
}

.google-external-login-icon {
    background-image: url('../icons/icons8-google-48-min.png');
}

/* Twitter external login button */
.twitter-external-login {
    background-color: #1DA1F2;
}

.twitter-external-login-icon {
    background-image: url('../icons/icons8-twitter-circled-48-min.png');
}

/* LinkedIn external login button */
.linkedin-external-login {
    background-color: #0A66C2;
}

.linkedin-external-login-icon {
    background-image: url('../icons/icons8-linkedin-48-min.png');
}

/* Facebook external login button */
.facebook-external-login {
    background-color: #1877F2;
}

.facebook-external-login-icon {
    background-image: url('../icons/icons8-facebook-48-min.png');
}

/* Hide MudStepper built-in previous/next controls inside content */
.customer-stepper .mud-step .mud-step-content .mud-step-buttons {
    display: none !important;
}

/* Also hide MudStepper actions toolbar and explicit next/previous buttons */
.customer-stepper .mud-stepper-actions,
.customer-stepper .mud-stepper-button-previous,
.customer-stepper .mud-stepper-button-next {
    display: none !important;
}

/* Normalize link font-size to inherit from surrounding text */
a,
a .mud-typography,
.mud-link,
.mud-link .mud-typography,
.mud-link-root,
.mud-link-root .mud-typography,
.mud-nav-link,
.mud-nav-link .mud-typography {
    font-size: inherit !important;
    line-height: inherit;
}

/* Sub-tabs (nested tabs inside other tabs) - slightly smaller */
/* MudBlazor tabs don't always use a ".mud-tabs-toolbar" wrapper, so target tabs directly. */
.bp-subtabs .mud-tab {
    font-size: 0.875rem !important;
    min-height: 40px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.bp-subtabs .mud-tab .mud-typography,
.bp-subtabs .mud-tab .mud-tab-text {
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

.bp-subtabs .mud-tab .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

.bp-subtabs .mud-tab .mud-icon-root svg {
    width: 18px !important;
    height: 18px !important;
}

/* removed Google Places styling */
/* Google Places legacy Autocomplete dropdown */
.pac-container {
    z-index: 2000; /* ensure it overlays Mud dialogs/steppers */
}

/* Ensure dropdown (MudSelect) value text turns red on validation error */
.mud-input-control.mud-input-error .mud-select-input,
.mud-input-control.mud-input-error .mud-select-input div,
.mud-input-control.mud-input-error .mud-select-input span {
    color: var(--mud-palette-error) !important;
}

/* Make MudSelect "Select/Month/Year" placeholders match text-field placeholder color */
.bp-select-placeholder .mud-select-input,
.bp-select-placeholder .mud-select-input div,
.bp-select-placeholder .mud-select-input span {
    color: var(--mud-palette-text-secondary) !important;
}


/* Shared WorkForm grids */
.kv-grid {
    display: grid;
    grid-template-columns: var(--kv-label-width, max-content) 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}
.kv-grid .label {
    text-align: right;
    white-space: nowrap;
}

.names-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
}
.names-grid .label {
    text-align: right;
    white-space: nowrap;
}
.names-grid--top {
    align-items: start;
}

/* Full-width tabs - ensure tab header bar stretches to fill container width */
.bp-full-width-tabs .mud-tabs-toolbar {
    width: 100%;
}

/* Options page navigation - active state highlight */
.bp-nav-active {
    background-color: var(--mud-palette-primary-lighten) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
}

.bp-nav-active .mud-nav-link-text {
    font-weight: 600 !important;
}

/* ========== Compact Options List ========== */

.bp-option-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.bp-option-item {
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid #3D8B40;
    transition: background-color 0.15s ease;
}

.bp-option-item:last-child {
    border-bottom: none;
}

.bp-option-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.bp-option-item.bp-option-planned {
    border-left-color: #9e9e9e;
}

.bp-option-item.bp-option-item-modified {
    border-left-color: var(--mud-palette-warning);
    background-color: rgba(255, 152, 0, 0.06);
}

.bp-option-item-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bp-option-item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 1px;
}

.bp-option-item-name {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(0, 0, 0, 0.87);
}

.mud-theme-dark .bp-option-item-name {
    color: rgba(255, 255, 255, 0.87);
}

.bp-option-item-desc {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.mud-theme-dark .bp-option-item-desc {
    color: rgba(255, 255, 255, 0.5);
}

.bp-option-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bp-option-item-editor {
    min-width: 80px;
    max-width: 200px;
}

.bp-option-item-editor .mud-checkbox {
    margin: 0;
}

.bp-option-item-editor .mud-select {
    margin-top: 0;
}

.bp-option-item-editor .mud-input-control {
    margin-top: 0;
}

.bp-option-item-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Source tag (replaces MudChip for compact source display) */
.bp-source-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.bp-source-personal {
    background-color: #e3f2fd;
    color: #1565c0;
}

.mud-theme-dark .bp-source-personal {
    background-color: rgba(66, 165, 245, 0.15);
    color: #64b5f6;
}

.bp-source-org {
    background-color: #f5f5f5;
    color: #616161;
}

.mud-theme-dark .bp-source-org {
    background-color: rgba(255, 255, 255, 0.08);
    color: #9e9e9e;
}

/* Muted text helper */
.bp-text-muted {
    color: rgba(0, 0, 0, 0.54);
}

.mud-theme-dark .bp-text-muted {
    color: rgba(255, 255, 255, 0.5);
}

/* ========== Error Pages (401, 404, etc.) ========== */

.bp-error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding-top: 48px;
}

.bp-error-illustration {
    width: 100%;
    max-width: 280px;
    margin-bottom: 16px;
}

.bp-error-illustration svg {
    width: 100%;
    height: auto;
}

/* Staging area styling */
.bp-staging-area {
    border-left: 4px solid var(--mud-palette-warning);
}

.bp-staging-area code {
    background-color: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ========== Scraper Designer Step Tree ========== */

/* Step item container */
.scraper-step-item {
    border-radius: 4px;
    margin-bottom: 1px;
    transition: background-color 0.15s ease;
    background-color: var(--mud-palette-surface);
}

.scraper-step-item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.scraper-step-item.selected {
    background-color: var(--mud-palette-primary-hover);
}

/* Container step visual indicator */
.scraper-step-item.container-step {
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 4px 4px 0;
}

/* Step row layout */
.scraper-step-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 6px 8px;
    cursor: pointer;
    min-height: 36px;
}

/* Drag handle */
.scraper-drag-handle {
    cursor: grab;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
    width: 20px;
}

.scraper-drag-handle:hover {
    opacity: 1;
}

.scraper-drag-handle:active {
    cursor: grabbing;
}

/* Step label */
.scraper-step-label {
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 100px;
    max-width: 140px;
    font-size: 0.875rem;
    font-weight: 500;
}

.scraper-step-label.selected {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Step summary (config preview) */
.scraper-step-summary {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
}

/* Nested container for child steps */
.scraper-nested-container {
    margin-left: 28px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-left: 12px;
    border-left: 2px solid var(--mud-palette-divider);
}

.scraper-nested-section {
    margin-bottom: 8px;
}

.scraper-nested-section:last-child {
    margin-bottom: 0;
}

.scraper-nested-label {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
    padding-left: 2px;
}

/* SortableJS states */
.sortable-ghost {
    visibility: hidden;
}

.sortable-fallback {
    opacity: 1 !important;
}

.sortable-chosen {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-color: var(--mud-palette-surface);
}

.sortable-drag {
    opacity: 1;
}

/* Sortable list base */
.sortable-list {
    min-height: 10px;
}

/* Empty state drop zone */
.sortable-list.empty {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: 4px;
    margin: 4px 0;
    background-color: var(--mud-palette-background-grey);
    transition: all 0.2s ease;
}

.sortable-list.empty::before {
    content: "Drop steps here";
    color: var(--mud-palette-text-disabled);
    font-size: 0.75rem;
    font-style: italic;
}

/* Highlight empty drop zone on hover */
.sortable-list.empty:hover {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

.sortable-list.empty:hover::before {
    color: var(--mud-palette-primary);
}

/* ── Execution Dashboard ── */

.bp-stat-card {
    transition: all 0.15s ease;
    border-radius: 4px;
}

.bp-stat-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.bp-stat-card--active {
    box-shadow: 0 0 0 2px var(--mud-palette-primary) !important;
    background-color: var(--mud-palette-primary-hover);
}

.bp-row-stale {
    background-color: rgba(255, 152, 0, 0.06) !important;
}

.bp-row-stale:hover {
    background-color: rgba(255, 152, 0, 0.12) !important;
}

/* Execution dashboard filter bar */
.bp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
    width: 100%;
}

.bp-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bp-filter-group--grow {
    flex: 1;
    min-width: 150px;
}

.bp-filter-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    user-select: none;
    padding-left: 2px;
}

/* Throughput mini chart */
.bp-throughput-chart {
    width: 100%;
}

.bp-throughput-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
    width: 100%;
}

.bp-throughput-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/* MudTooltip wraps content in .mud-tooltip-root with display:inline-flex,
   which breaks the flex height chain. Force it to stretch within the bar group. */
.bp-throughput-bar-group > .mud-tooltip-root {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.bp-throughput-bar-stack {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
}

.bp-throughput-bar {
    width: 100%;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    transition: height 0.3s ease;
}

.bp-throughput-bar--success {
    background-color: var(--mud-palette-success);
}

.bp-throughput-bar--error {
    background-color: var(--mud-palette-error);
}

.bp-throughput-bar--primary {
    background-color: var(--mud-palette-primary);
}

.bp-throughput-bar--tertiary {
    background-color: var(--mud-palette-tertiary);
}

.bp-throughput-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--mud-palette-success);
    text-align: center;
    line-height: 1;
    padding-bottom: 2px;
}

.bp-throughput-count--error {
    color: var(--mud-palette-error);
}

.bp-throughput-label {
    font-size: 9px !important;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
    margin-top: 2px;
}

/* Compact chart view toggle chips */
.bp-chart-toggle .mud-chip {
    font-size: 0.7rem;
    height: 22px;
}