/* ==========================================================================
   MODAL DRILL-DOWN SHARED STYLES (modal-drilldown.css)
   ==========================================================================

   Unified CSS for modal drill-down components across all modals:
   - TotalWeight Modal
   - TotalChemical Modal
   - Performance Modal

   Class prefix: .mdm-* (Modal Drill-down)
   Naming: BEM-inspired (Block__Element--Modifier)

   USAGE: Add to _Layout.cshtml:
   <link href="css/modals/modal-drilldown.css" rel="stylesheet" />

   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */

:root {
    /* --- Spacing Scale (4px base) --- */
    --mdm-space-1: 4px;
    --mdm-space-2: 8px;
    --mdm-space-3: 12px;
    --mdm-space-4: 16px;
    --mdm-space-5: 20px;
    --mdm-space-6: 24px;

    /* --- Touch Targets (WCAG AA compliance) --- */
    --mdm-touch-target: 48px;

    /* --- Border Hierarchy (progressive thickness) --- */
    --mdm-border-location: 4px;
    --mdm-border-group: 3px;
    --mdm-border-washer: 2px;
    --mdm-border-date: 2px;
    --mdm-border-load: 2px;
    --mdm-border-formula: 2px;
    --mdm-border-chemical: 2px;

    /* --- Node Type Colors (Distinct for each hierarchy level) --- */
    --mdm-color-location: #0891b2;      /* Cyan-600 - primary/top level */
    --mdm-color-washer: #059669;        /* Emerald-600 - washer level */
    --mdm-color-date: #7c3aed;          /* Violet-600 - date grouping */
    --mdm-color-load: #2563eb;          /* Blue-600 - individual loads */
    --mdm-color-formula: #d97706;       /* Amber-600 - formula nodes */
    --mdm-color-chemical: #c026d3;      /* Fuchsia-600 - chemical nodes */
    --mdm-color-group: #64748b;         /* Slate-500 - group containers */

    /* --- Background Colors (Light tints for readability) --- */
    --mdm-bg-location: #ecfeff;         /* Cyan-50 */
    --mdm-bg-washer: #ecfdf5;           /* Emerald-50 */
    --mdm-bg-date: #f5f3ff;             /* Violet-50 */
    --mdm-bg-load: #eff6ff;             /* Blue-50 */
    --mdm-bg-formula: #fffbeb;          /* Amber-50 */
    --mdm-bg-chemical: #fdf4ff;         /* Fuchsia-50 */
    --mdm-bg-group: #f8fafc;            /* Slate-50 */

    /* --- Hover Colors (DARKER for desktop - more saturated) --- */
    --mdm-hover-location: #a5f3fc;      /* Cyan-200 - darker hover */
    --mdm-hover-washer: #a7f3d0;        /* Emerald-200 - darker hover */
    --mdm-hover-date: #ddd6fe;          /* Violet-200 - darker hover */
    --mdm-hover-load: #bfdbfe;          /* Blue-200 - darker hover */
    --mdm-hover-formula: #fde68a;       /* Amber-200 - darker hover */
    --mdm-hover-chemical: #f5d0fe;      /* Fuchsia-200 - darker hover */
    --mdm-hover-group: #e2e8f0;         /* Slate-200 - darker hover */

    /* --- Status Colors --- */
    --mdm-status-good: #10b981;         /* Green - on target */
    --mdm-status-fair: #f59e0b;         /* Amber - warning */
    --mdm-status-poor: #ef4444;         /* Red - off target */

    /* --- Typography --- */
    --mdm-font-title: 0.875rem;
    --mdm-font-subtitle: 0.8125rem;
    --mdm-font-label: 0.625rem;
    --mdm-font-value: 1.125rem;
    --mdm-font-small: 0.6875rem;

    /* --- Border Radius --- */
    --mdm-radius-sm: 0.25rem;
    --mdm-radius-md: 0.375rem;
    --mdm-radius-lg: 0.5rem;

    /* --- Transitions --- */
    --mdm-transition-fast: 0.15s ease;
    --mdm-transition-normal: 0.2s ease;

    /* --- Z-Index Layer --- */
    --mdm-z-node: 1;
    --mdm-z-expanded: 2;
}


/* ==========================================================================
   2. BASE NODE STYLES
   ========================================================================== */

.mdm-node {
    border-radius: var(--mdm-radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: var(--mdm-space-1);
    position: relative;
    z-index: var(--mdm-z-node);
}

.mdm-node.expanded {
    z-index: var(--mdm-z-expanded);
}

/* --- Node Header --- */
.mdm-node__header {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    cursor: pointer;
    gap: var(--mdm-space-2);
    min-height: var(--mdm-touch-target);
    transition: background var(--mdm-transition-normal);
}

.mdm-node__header:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: -3px;
    border-radius: var(--mdm-radius-sm);
}

/* --- Header Row (icon + title) --- */
.mdm-node__header-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
}

/* --- Expand Icon --- */
.mdm-expand-icon {
    color: #9ca3af;
    font-size: 0.75rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--mdm-transition-normal);
    flex-shrink: 0;
}

.mdm-node.expanded .mdm-expand-icon {
    transform: rotate(0deg);
}

/* --- Node Title --- */
.mdm-node__title {
    flex: 1;
    font-size: var(--mdm-font-title);
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

/* --- Node Subtitle --- */
.mdm-node__subtitle {
    font-size: var(--mdm-font-small);
    color: #6b7280;
    font-weight: 500;
}


/* ==========================================================================
   3. NODE TYPE VARIANTS
   ========================================================================== */

/* --- LOCATION NODE (Cyan) --- */
.mdm-node--location {
    background: var(--mdm-bg-location);
    border: 1px solid #67e8f9;           /* Cyan-300 */
    border-left: var(--mdm-border-location) solid var(--mdm-color-location);
}

.mdm-node--location .mdm-node__header:hover {
    background: var(--mdm-hover-location);
}

.mdm-node--location .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-location);
}

/* --- WASHER NODE (Emerald) --- */
.mdm-node--washer {
    background: var(--mdm-bg-washer);
    border: 1px solid #6ee7b7;           /* Emerald-300 */
    border-left: var(--mdm-border-washer) solid var(--mdm-color-washer);
}

.mdm-node--washer .mdm-node__header:hover {
    background: var(--mdm-hover-washer);
}

.mdm-node--washer .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-washer);
}

/* --- DATE NODE (Violet) --- */
.mdm-node--date {
    background: var(--mdm-bg-date);
    border: 1px solid #c4b5fd;           /* Violet-300 */
    border-left: var(--mdm-border-date) solid var(--mdm-color-date);
}

.mdm-node--date .mdm-node__header:hover {
    background: var(--mdm-hover-date);
}

.mdm-node--date .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-date);
}

/* --- LOAD NODE/ROW (Blue) --- */
.mdm-node--load {
    background: var(--mdm-bg-load);
    border: 1px solid #93c5fd;           /* Blue-300 */
    border-left: var(--mdm-border-load) solid var(--mdm-color-load);
}

.mdm-node--load .mdm-node__header:hover {
    background: var(--mdm-hover-load);
}

.mdm-node--load .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-load);
}

/* --- FORMULA NODE (Amber) --- */
.mdm-node--formula {
    background: var(--mdm-bg-formula);
    border: 1px solid #fcd34d;           /* Amber-300 */
    border-left: var(--mdm-border-formula) solid var(--mdm-color-formula);
}

.mdm-node--formula .mdm-node__header:hover {
    background: var(--mdm-hover-formula);
}

.mdm-node--formula .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-formula);
}

/* --- CHEMICAL NODE (Fuchsia) --- */
.mdm-node--chemical {
    background: var(--mdm-bg-chemical);
    border: 1px solid #f0abfc;           /* Fuchsia-300 */
    border-left: var(--mdm-border-chemical) solid var(--mdm-color-chemical);
}

.mdm-node--chemical .mdm-node__header:hover {
    background: var(--mdm-hover-chemical);
}

.mdm-node--chemical .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-chemical);
}

/* --- GROUP NODE (Slate - Washer Group, Type Group) --- */
.mdm-node--group {
    background: var(--mdm-bg-group);
    border: 1px solid #cbd5e1;           /* Slate-300 */
    border-left: var(--mdm-border-group) solid var(--mdm-color-group);
}

.mdm-node--group .mdm-node__header:hover {
    background: var(--mdm-hover-group);
}

.mdm-node--group .mdm-node__header:focus-visible {
    outline-color: var(--mdm-color-group);
}


/* ==========================================================================
   4. CHILDREN CONTAINER
   ========================================================================== */

.mdm-children {
    background: transparent;
    border-top: none;
    padding: var(--mdm-space-1) 0;
    display: flex;
    flex-direction: column;
    gap: var(--mdm-space-1);
    position: relative;
}

/* Indented children (nested structure) */
.mdm-children--indented {
    padding-left: var(--mdm-space-4);
    margin-left: var(--mdm-space-2);
    border-left: 1px solid #e5e7eb;
}


/* ==========================================================================
   5. METRICS SECTION
   ========================================================================== */

.mdm-metrics {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--mdm-space-2);
    padding-left: 1.5rem;
}

.mdm-metrics-row {
    display: flex;
    gap: var(--mdm-space-2);
    flex-wrap: wrap;
}


/* ==========================================================================
   6. METRIC CARDS
   ========================================================================== */

.mdm-metric-card {
    flex: 1;
    min-width: 100px;
    background: white;
    border-radius: var(--mdm-radius-md);
    padding: var(--mdm-space-2) 10px;
    border: 1px solid #e5e7eb;
}

/* Card variations per node type (matching hierarchy colors) */
.mdm-node--location .mdm-metric-card {
    border-color: #67e8f9;               /* Cyan-300 */
}

.mdm-node--washer .mdm-metric-card {
    border-color: #6ee7b7;               /* Emerald-300 */
}

.mdm-node--date .mdm-metric-card {
    border-color: #c4b5fd;               /* Violet-300 */
}

.mdm-node--load .mdm-metric-card {
    border-color: #93c5fd;               /* Blue-300 */
}

.mdm-node--formula .mdm-metric-card {
    border-color: #fcd34d;               /* Amber-300 */
}

.mdm-node--chemical .mdm-metric-card {
    border-color: #f0abfc;               /* Fuchsia-300 */
}

.mdm-node--group .mdm-metric-card {
    border-color: #cbd5e1;               /* Slate-300 */
}

/* Card label */
.mdm-metric-card__label {
    font-size: var(--mdm-font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 2px;
}

/* Card value */
.mdm-metric-card__value {
    font-size: var(--mdm-font-value);
    font-weight: 700;
    line-height: 1;
    color: #111827;
}

/* Card unit suffix */
.mdm-metric-card__unit {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin-left: 2px;
}


/* ==========================================================================
   7. LOAD ROW (Leaf nodes with inline metrics)
   ========================================================================== */

.mdm-load-row {
    background: var(--mdm-bg-load);
    border: 1px solid #bfdbfe;
    border-left: var(--mdm-border-load) solid var(--mdm-color-load);
    border-radius: var(--mdm-radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: var(--mdm-space-1);
}

.mdm-load-row__header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    gap: var(--mdm-space-2);
    min-height: var(--mdm-touch-target);
    cursor: pointer;
    transition: background var(--mdm-transition-normal);
}

.mdm-load-row__header:hover {
    background: var(--mdm-hover-load);
}

.mdm-load-row__header:focus-visible {
    outline: 3px solid var(--mdm-color-load);
    outline-offset: -3px;
    border-radius: var(--mdm-radius-sm);
}

.mdm-load-row__icon {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.mdm-load-row__info {
    flex: 1;
    min-width: 0;
}

.mdm-load-row__title {
    font-size: var(--mdm-font-title);
    font-weight: 600;
    color: #1f2937;
}

.mdm-load-row__subtitle {
    font-size: var(--mdm-font-small);
    color: #6b7280;
}

.mdm-load-row__metrics {
    display: flex;
    gap: var(--mdm-space-3);
    flex-shrink: 0;
}

.mdm-load-row__metric {
    text-align: right;
}

.mdm-load-row__metric-label {
    font-size: var(--mdm-font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.mdm-load-row__metric-value {
    font-size: var(--mdm-font-title);
    font-weight: 700;
    color: #111827;
}


/* ==========================================================================
   8. UTILITY CLASSES
   ========================================================================== */

/* Text utilities */
.mdm-text--value {
    font-size: var(--mdm-font-value);
    font-weight: 700;
    color: #111827;
}

.mdm-text--label {
    font-size: var(--mdm-font-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.mdm-text--small {
    font-size: var(--mdm-font-small);
    color: #6b7280;
}

/* Status colors */
.mdm-status--good {
    color: var(--mdm-status-good);
}

.mdm-status--fair {
    color: var(--mdm-status-fair);
}

.mdm-status--poor {
    color: var(--mdm-status-poor);
}

/* Icon sizing */
.mdm-icon--sm {
    font-size: 0.875rem;
}

.mdm-icon--md {
    font-size: 1rem;
}

.mdm-icon--lg {
    font-size: 1.25rem;
}


/* ==========================================================================
   9. ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mdm-node__header,
    .mdm-expand-icon,
    .mdm-load-row__header,
    .mdm-metric-card {
        transition: none !important;
    }
}


/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .mdm-node__header {
        padding: 10px 12px;
        gap: 6px;
    }

    .mdm-metrics {
        padding-left: 0;
        margin-top: 6px;
    }

    .mdm-metrics-row {
        gap: 6px;
    }

    .mdm-metric-card {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
        padding: 6px 8px;
    }

    .mdm-metric-card__label {
        font-size: 0.5625rem;
        margin-bottom: 1px;
    }

    .mdm-metric-card__value {
        font-size: 1rem;
    }

    .mdm-expand-icon {
        width: 0.875rem;
        height: 0.875rem;
        font-size: 0.625rem;
    }

    .mdm-load-row__header {
        flex-wrap: wrap;
        padding: 8px 10px;
    }

    .mdm-load-row__metrics {
        width: 100%;
        justify-content: space-between;
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid #e5e7eb;
    }
}

/* Extra small (max-width: 400px) */
@media (max-width: 400px) {
    .mdm-metric-card {
        flex: 1 1 100%;
    }

    .mdm-load-row__metrics {
        flex-direction: column;
        gap: 4px;
    }

    .mdm-load-row__metric {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Large screens (min-width: 1024px) */
@media (min-width: 1024px) {
    .mdm-node__header {
        padding: 12px 16px;
    }

    .mdm-metric-card {
        padding: 10px 12px;
    }

    .mdm-metric-card__value {
        font-size: 1.25rem;
    }
}


/* ==========================================================================
   12. DESKTOP DENSITY OPTIMIZATION (1024px+)
   ==========================================================================

   Purpose: Reduce vertical space on desktop for data-dense viewing
   - Touch targets: 48px -> 40px (maintains accessibility for precision pointers)
   - Node padding: Reduced for compact layout
   - Metric cards: Tighter vertical spacing

   Mobile/Tablet: Unchanged (keep 48px touch targets)
   See: SPACE_OPTIMIZATION_PLAN.md for full rationale
   ========================================================================== */

@media (min-width: 1024px) {
    /* Override touch target for desktop precision pointers */
    :root {
        --mdm-touch-target: 40px;
        --mdm-space-6: 16px;  /* Was 24px */
    }

    /* Compact node headers */
    .mdm-node__header {
        padding: 8px 12px;
        gap: 6px;
        min-height: 40px;
    }

    /* Tighter children spacing */
    .mdm-children {
        gap: 4px;
        padding: 4px 0;
    }

    /* Compact metric cards */
    .mdm-metric-card {
        padding: 6px 10px;
    }

    .mdm-metric-card__label {
        font-size: 0.5625rem;
        margin-bottom: 1px;
    }

    .mdm-metric-card__value {
        font-size: 1rem;
    }

    /* Compact load rows */
    .mdm-load-row {
        margin-bottom: 4px;
    }

    .mdm-load-row__header {
        padding: 6px 10px;
        min-height: 40px;
    }

    /* Reduce expand icon size slightly */
    .mdm-expand-icon {
        width: 1rem;
        height: 1rem;
    }
}


/* ==========================================================================
   11. PRINT STYLES
   ========================================================================== */

@media print {
    .mdm-node {
        break-inside: avoid;
        box-shadow: none;
    }

    .mdm-node__header {
        min-height: auto;
    }

    .mdm-children {
        padding: 2px 0;
    }
}

/* ==========================================================================
   Section 8C: WEIGHT DISPLAY UTILITIES
   ========================================================================== */

/* --- Weight Display Utilities (TotalWeight Modal - Tunnel Variance) --- */
.mdm-weight-secondary {
    font-size: 0.5625rem !important;  /* 9px fixed - half of typical 18px parent */
    font-weight: 400 !important;
    color: #6b7280 !important;
    display: inline;
}

/* High-specificity selectors to ensure override */
.mdm-metric-card__value .mdm-weight-secondary,
.mdm-text--value .mdm-weight-secondary,
span.mdm-weight-secondary,
div .mdm-weight-secondary {
    font-size: 0.5625rem !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
}