/* ============================================================
   Sursati — Metronic-inspired MudBlazor Theme Overrides
   ============================================================ */

html, body {
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #F9F9F9;
}

h1:focus { outline: none; }

a { color: #1B84FF; text-decoration: none; }
a:hover { color: #1565D8; }

code { color: #7239EA; }

/* ============================================================
   VALIDATION
   ============================================================ */
.valid.modified:not([type=checkbox]) { outline: 1px solid #17C653; }
.invalid { outline: 1px solid #F8285A; }
.validation-message { color: #F8285A; font-size: 0.8rem; }

/* ============================================================
   BLAZOR SYSTEM UI
   ============================================================ */
#blazor-error-ui {
    background: #FFF8DD;
    border-top: 2px solid #F6C000;
    bottom: 0; left: 0; width: 100%;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed; z-index: 1000;
    display: none; color: #071437;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
    background: #FFEEF3;
    border-left: 4px solid #F8285A;
    padding: 1rem 1rem 1rem 1.5rem;
    color: #071437;
    border-radius: 8px;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ============================================================
   LOADING PROGRESS
   ============================================================ */
.loading-progress {
    position: relative; display: block;
    width: 6rem; height: 6rem;
    margin: 25vh auto 1rem;
}
.loading-progress circle {
    fill: none; stroke: #F1F1F4;
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: #1B84FF;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center;
    font-weight: 600; color: #78829D;
    inset: calc(25vh + 2.75rem) 0 auto 0;
    font-size: 0.85rem;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ============================================================
   APP BAR — White top bar with subtle bottom border
   ============================================================ */
.mud-appbar {
    border-bottom: 1px solid #F1F1F4 !important;
    box-shadow: none !important;
}

/* ============================================================
   SIDEBAR (Metronic Light style)
   ============================================================ */
.mud-drawer {
    z-index: 1300;
    border-right: 1px solid #F1F1F4 !important;
}

.mud-drawer .mud-navmenu {
    padding: 0.5rem;
}

.mud-drawer .mud-nav-link {
    border-radius: 6px !important;
    margin: 1px 0;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4B5675 !important;
    transition: all 0.15s ease;
}

.mud-drawer .mud-nav-link:hover {
    background: #F9F9F9 !important;
    color: #071437 !important;
}

.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link-active {
    background: #E1F0FF !important;
    color: #1B84FF !important;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: #99A1B7 !important;
    min-width: 36px;
}

.mud-drawer .mud-nav-link:hover .mud-nav-link-icon {
    color: #4B5675 !important;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: #1B84FF !important;
}

.mud-drawer .mud-nav-group .mud-nav-group-title {
    color: #4B5675 !important;
    font-weight: 600;
    font-size: 0.8125rem;
}

.mud-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    padding-left: 2.5rem !important;
    font-size: 0.8125rem;
}

/* ============================================================
   CARDS — Soft shadow, subtle border
   ============================================================ */
.mud-card {
    border: 1px solid #F1F1F4;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    transition: box-shadow 0.2s ease;
}
.mud-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.07) !important;
}

/* ============================================================
   PAPER — Consistent elevation
   ============================================================ */
.mud-paper {
    border-radius: 12px !important;
}
.mud-paper.mud-elevation-1 {
    border: 1px solid #F1F1F4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* ============================================================
   BUTTONS — Metronic pill-style, subtle weight
   ============================================================ */
.mud-button-root {
    border-radius: 6px !important;
    text-transform: none !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none !important;
    transition: all 0.15s ease;
}
.mud-button-root:hover {
    box-shadow: none !important;
}

.mud-button-filled {
    box-shadow: none !important;
}

.mud-fab {
    box-shadow: 0 4px 14px rgba(27,132,255,0.3) !important;
}

/* ============================================================
   CHIPS — Light tinted backgrounds
   ============================================================ */
.mud-chip {
    border-radius: 6px !important;
    font-weight: 600;
    font-size: 0.75rem;
}

/* ============================================================
   TABLES — Clean lines, compact
   ============================================================ */
.mud-table {
    border: 1px solid #F1F1F4;
    border-radius: 12px !important;
    overflow: hidden;
}

.mud-table .mud-table-head .mud-table-cell {
    background: #FCFCFC !important;
    color: #78829D !important;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #F1F1F4 !important;
    padding: 0.75rem 1rem;
}

.mud-table .mud-table-body .mud-table-cell {
    color: #071437;
    font-size: 0.875rem;
    border-bottom: 1px solid #F9F9F9 !important;
    padding: 0.65rem 1rem;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background: #F9F9F9 !important;
}

/* DataGrid similar treatment */
.mud-data-grid .mud-table {
    border: 1px solid #F1F1F4;
    border-radius: 12px !important;
}

/* ============================================================
   TEXT FIELDS — Soft borders, Metronic style
   ============================================================ */
.mud-input-outlined .mud-input-outlined-border {
    border-color: #DBDFE9 !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #B5B5C3 !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #1B84FF !important;
    border-width: 1.5px !important;
}

.mud-select .mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px !important;
}

/* ============================================================
   DIALOGS — Modern reveal
   ============================================================ */
.mud-dialog {
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

.mud-dialog .mud-dialog-title {
    font-weight: 700;
    font-size: 1.125rem;
    color: #071437;
    padding: 1.25rem 1.5rem 0.75rem;
}

.mud-dialog .mud-dialog-content {
    padding: 0.75rem 1.5rem;
    overflow: visible;
}

.mud-dialog .mud-input-control .mud-input-slot {
    overflow: visible;
}

.mud-dialog .mud-dialog-actions {
    padding: 0.75rem 1.5rem 1.25rem;
}

/* ============================================================
   TABS — Sleek underline
   ============================================================ */
.mud-tabs-toolbar {
    border-bottom: 1px solid #F1F1F4 !important;
}

.mud-tab {
    text-transform: none !important;
    font-weight: 600 !important;
    font-size: 0.875rem;
    letter-spacing: 0;
    color: #78829D !important;
    transition: color 0.15s ease;
}

.mud-tab:hover {
    color: #071437 !important;
}

.mud-tab.mud-tab-active {
    color: #1B84FF !important;
}

/* ============================================================
   ALERTS — Soft tinted backgrounds
   ============================================================ */
.mud-alert {
    border-radius: 8px !important;
}

.mud-alert-filled.mud-alert-info { background: #F3EFFF !important; color: #7239EA !important; }
.mud-alert-filled.mud-alert-success { background: #DFFFEA !important; color: #04844B !important; }
.mud-alert-filled.mud-alert-warning { background: #FFF8DD !important; color: #9A7500 !important; }
.mud-alert-filled.mud-alert-error { background: #FFEEF3 !important; color: #D81B60 !important; }

/* ============================================================
   SNACKBAR — Rounded with shadow
   ============================================================ */
.mud-snackbar {
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ============================================================
   BADGES — Small rounded labels
   ============================================================ */
.mud-badge .mud-badge-content {
    font-weight: 700;
    font-size: 0.6875rem;
}

/* ============================================================
   BREADCRUMBS — Lighter weight
   ============================================================ */
.mud-breadcrumbs .mud-breadcrumb-item {
    font-size: 0.8125rem;
    color: #78829D;
}
.mud-breadcrumbs .mud-breadcrumb-item:last-child {
    color: #071437;
    font-weight: 600;
}

/* ============================================================
   STEPPER — Clean steps
   ============================================================ */
.mud-stepper .mud-step-label-text {
    font-weight: 600;
}

/* ============================================================
   SCROLLBAR — Thin, modern
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #DBDFE9; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B5B5C3; }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.stat-card {
    border-radius: 12px;
    padding: 1.25rem;
    border: 1px solid #F1F1F4;
    background: #fff;
}

/* ============================================================
   MOBILE-FIRST DRAWER FIX
   ============================================================ */
@media (max-width: 599.95px) {
    .mud-drawer-mini,
    .mud-drawer--mini {
        display: none !important;
        width: 0 !important;
    }
    .mud-drawer--closed {
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        width: 0 !important;
    }
    .mud-drawer--open {
        width: 85% !important;
        max-width: 320px !important;
    }
    .mud-overlay {
        z-index: 1200 !important;
    }
    .mud-main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* Category tree select popover — wider to show full category names */
.category-tree-popover {
    min-width: 360px !important;
}

/* ============================================================
   Supplier Orders — Status Pipeline & Badges
   ============================================================ */

.status-pipeline {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.pipeline-segment {
    min-width: 80px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    background: transparent;
    transition: all 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}

.pipeline-segment:hover {
    background: var(--mud-palette-background-grey);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pipeline-segment.active {
    border-color: transparent;
}

.pipeline-segment.seg-all.active       { background: rgba(113,135,156,0.12); }
.pipeline-segment.seg-created.active   { background: #E3F2FD; color: #1565C0; border-color: #1565C0; }
.pipeline-segment.seg-sent.active      { background: #E8EAF6; color: #283593; border-color: #283593; }
.pipeline-segment.seg-confirmed.active { background: #F3E5F5; color: #6A1B9A; border-color: #6A1B9A; }
.pipeline-segment.seg-received.active  { background: #E8F5E9; color: #2E7D32; border-color: #2E7D32; }

.pipeline-divider {
    width: 1px;
    background: var(--mud-palette-lines-default);
    margin: 4px 12px;
    align-self: stretch;
}

.pipeline-segment.seg-late {
    border-color: var(--mud-palette-warning);
}

.pipeline-segment.seg-late.active {
    background: #FFF3E0;
    color: #E65100;
    border-color: #E65100;
}

.pipeline-arrow {
    display: flex;
    align-items: center;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* --- Status Badges --- */
.so-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.so-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.so-status-created   { background: #E3F2FD; color: #1565C0; }
.so-status-sent      { background: #E8EAF6; color: #283593; }
.so-status-confirmed { background: #F3E5F5; color: #6A1B9A; }
.so-status-received  { background: #E8F5E9; color: #2E7D32; }
.so-status-closed    { background: #F5F5F5; color: #757575; }
.so-status-failed    { background: #FFEBEE; color: #C62828; }

.so-status-badge.overdue {
    border-left: 2px solid #C62828;
}

/* --- Overdue row tinting --- */
.row-overdue {
    background: #FFF8E1 !important;
}

.row-overdue:hover {
    background: #FFF3CD !important;
}

/* --- Terminal rows (Closed/Failed) dimmed --- */
.row-terminal {
    opacity: 0.65;
}

.row-terminal:hover {
    opacity: 0.85;
}

/* --- Reject button: visible on hover --- */
.reject-icon {
    opacity: 0.3;
    transition: opacity 0.15s ease;
}

tr:hover .reject-icon {
    opacity: 1;
}

/* --- Expanded detail row --- */
.expanded-detail {
    padding: 12px 16px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.expanded-detail .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px 24px;
}

.expanded-detail .detail-item label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    display: block;
    margin-bottom: 2px;
}

.expanded-detail .detail-item span {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
}

/* --- Mobile card action row --- */
.mobile-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ============================================================
   Supplier-Grouped View
   ============================================================ */

/* Bulk action toolbar */
.bulk-action-bar {
    background: var(--mud-palette-info-lighten);
    border: 1px solid var(--mud-palette-info);
    border-radius: 8px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Supplier group panels */
.supplier-groups .mud-expand-panel {
    margin-bottom: 8px;
    border-radius: 8px !important;
    overflow: hidden;
}

.supplier-group-header {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 4px;
}

.supplier-group-header .mud-chip {
    cursor: default;
}

/* Orders table inside group */
.supplier-orders-table {
    margin: 0;
}

.supplier-orders-table thead th {
    background: var(--mud-palette-background-grey);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 6px 12px;
}

.supplier-orders-table tbody td {
    padding: 6px 12px;
    vertical-align: middle;
}

.supplier-orders-table tbody tr:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Expanded detail inside grouped table */
.expanded-detail-row td {
    padding: 0 !important;
}

.expanded-detail-row .expanded-detail {
    border-top: none;
}

/* ============================================================
   System Logs Viewer
   ============================================================ */

.log-level-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 0.5px;
}

.log-error, .log-fatal { background: #FFEBEE; color: #C62828; }
.log-warning           { background: #FFF3E0; color: #E65100; }
.log-information       { background: #E3F2FD; color: #1565C0; }
.log-debug             { background: #F5F5F5; color: #757575; }
.log-verbose           { background: #FAFAFA; color: #9E9E9E; }

.log-row-error   { background: #FFF5F5 !important; }
.log-row-warning { background: #FFFBF0 !important; }

/* ============================================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ============================================================ */
@media (max-width: 599.95px) {
    /* Pipeline: compact segments on mobile */
    .status-pipeline {
        gap: 2px;
    }
    .pipeline-segment {
        min-width: 52px;
        padding: 6px 4px;
    }
    .pipeline-segment .mud-typography-overline {
        font-size: 0.55rem;
        line-height: 1.2;
    }
    .pipeline-segment .mud-typography-h6 {
        font-size: 1rem;
    }
    .pipeline-arrow {
        display: none;
    }
    .pipeline-divider {
        margin: 4px 4px;
    }

    /* Dialog buttons: larger touch targets */
    .mud-dialog .mud-dialog-actions .mud-button-root {
        min-height: 44px;
        font-size: 0.9rem;
    }

    /* Supplier group header: wrap buttons */
    .supplier-group-header {
        gap: 6px;
    }
    .supplier-group-header .mud-button-root {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* AppBar: tighter spacing */
    .mud-appbar .mud-typography-h6 {
        font-size: 1rem;
    }

    /* Tables overflow on mobile */
    .supplier-orders-table {
        overflow-x: auto;
    }

    /* Container: less horizontal padding on mobile */
    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}