/* Inventory Sentinel Prototype - Atlas Design Language */

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #f5f7fa;
    margin: 0;
    padding: 0;
}

/* App Bar */
.app-bar-custom {
    background: linear-gradient(135deg, #0f2a3a 0%, #1a3a4a 100%) !important;
}

.app-title {
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

/* Main Content */
.main-content {
    padding-top: 52px;
    min-height: 100vh;
}

/* KPI Cards */
.kpi-card {
    border-radius: 12px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    min-height: 120px;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.kpi-card-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

.kpi-value {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.kpi-subtitle {
    font-size: 0.8rem;
    color: #5f7285;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Section Headers */
.section-header {
    font-weight: 600 !important;
    color: #1a2b3c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-divider {
    margin: 8px 0 24px 0;
}

/* Chart Cards */
.chart-card {
    border-radius: 12px !important;
}

/* Page header */
.page-header {
    margin-bottom: 2rem;
}

.page-title {
    font-weight: 700 !important;
    color: #1a2b3c;
}

.page-subtitle {
    color: #5f7285;
}

/* Trend indicators */
.trend-up {
    color: #4caf50;
    font-size: 0.8rem;
    font-weight: 600;
}

.trend-down {
    color: #f44336;
    font-size: 0.8rem;
    font-weight: 600;
}

.trend-neutral {
    color: #ff9800;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Exception badge */
.exception-badge {
    border-radius: 12px !important;
    padding: 12px 16px;
}

/* Override MudBlazor defaults for cleaner look */
.mud-table-head .mud-table-cell {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #5f7285;
}

/* Global compact grid rows — less padding for data-dense screens */
.mud-table-body .mud-table-row .mud-table-cell {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 0.875rem;
}

.mud-table-head .mud-table-cell {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f0f2f5;
}

::-webkit-scrollbar-thumb {
    background: #c0c8d0;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0a8b0;
}

/* ProposedOrders detail grid — selected-row highlight.
   MudDataGrid's default selected-row background is the dark theme primary color,
   which makes the cell text (especially black item codes / dark grey values) nearly
   invisible. Override with a light-grey background that keeps text legible. */
.mud-table-row.mud-table-row-selected,
tr.mud-table-row-selected,
.mud-data-grid .mud-table-row.mud-selected-item,
.mud-data-grid tr.mud-selected-item {
    background-color: #e3e8ef !important;
    color: inherit !important;
}
.mud-table-row.mud-table-row-selected td,
tr.mud-table-row-selected td,
.mud-data-grid .mud-table-row.mud-selected-item td,
.mud-data-grid tr.mud-selected-item td {
    color: var(--mud-palette-text-primary) !important;
}

/* ───── Tooltip wrapping (Andy 2026-04-29 #4.2) ─────
   Tooltips across the app trended toward long explanatory text and were rendering
   as one super-wide line stretched across the viewport. Cap width and force wrap so
   the text reads as a small paragraph instead of a banner.
*/
.mud-tooltip-root .mud-tooltip,
.mud-tooltip {
    max-width: 320px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
}