html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    background: #0f0f1a;
    color: #e0e0e0;
    height: 100%;
}

#app {
    height: 100%;
}

#blazor-error-ui {
    background: #6b2c2c;
    color: #f8d7da;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* ============================== */
/* FlatSheet Dark Theme Override  */
/* ============================== */

.flatsheet-container {
    background: #1a1a2e;
    border-radius: 10px;
    border: 1px solid #2a2a44;
    overflow: hidden;
    max-width: 1100px;
    margin: 0 auto;
}

.flatsheet-header {
    background: linear-gradient(135deg, #1e1e33, #2a2a44) !important;
    color: #e0e0ff !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #3a3a5c;
}

    .flatsheet-header h5 {
        color: #a5b4fc;
        font-size: 1.1rem;
        margin: 0;
    }

    .flatsheet-header small {
        color: #7777aa !important;
    }

    .flatsheet-header .badge {
        font-size: 0.72rem;
    }

    .flatsheet-header .btn-outline-light {
        border-color: #4a4a6a;
        color: #aaa;
        font-size: 0.72rem;
        padding: 2px 8px;
    }

        .flatsheet-header .btn-outline-light:hover {
            background: #2a2a44;
            border-color: #6366f1;
            color: #e0e0ff;
        }

.flatsheet-body {
    background: #16162a !important;
    border-color: #2a2a44 !important;
    padding: 0;
}

.flatsheet-footer {
    background: #1a1a2e !important;
    border-top: 1px solid #2a2a44;
    padding: 12px 18px !important;
}

    .flatsheet-footer .btn-outline-secondary {
        background: transparent;
        border-color: #4a4a6a;
        color: #aaa;
    }

        .flatsheet-footer .btn-outline-secondary:hover {
            background: #2a2a44;
            border-color: #6366f1;
            color: #e0e0ff;
        }

    .flatsheet-footer .btn-primary {
        background: #4f46e5;
        border-color: #4f46e5;
        font-weight: 600;
    }

        .flatsheet-footer .btn-primary:hover {
            background: #4338ca;
        }

/* Level sections */
.level-section {
    padding: 14px 18px !important;
    border-bottom: 1px solid #2a2a44 !important;
}

    .level-section h6 {
        color: #8888aa !important;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
    }

    .level-section .badge.bg-secondary {
        background: #3a3a5c !important;
        color: #ccc;
    }

    .level-section .btn-outline-primary {
        border-color: #4f46e5;
        color: #a5b4fc;
        font-size: 0.78rem;
        padding: 2px 10px;
    }

        .level-section .btn-outline-primary:hover {
            background: #4f46e5;
            color: #fff;
        }

/* Form labels */
.flatsheet-container .form-label {
    color: #8888aa;
    font-size: 0.78rem;
    margin-bottom: 2px;
}

    .flatsheet-container .form-label .text-danger {
        color: #f87171 !important;
    }

/* Form inputs (dark themed) */
.flatsheet-container .form-control,
.flatsheet-container .form-select {
    background: #12121f;
    border: 1px solid #3a3a5c;
    color: #e0e0e0;
    border-radius: 6px;
    font-size: 0.85rem;
}

    .flatsheet-container .form-control:focus,
    .flatsheet-container .form-select:focus {
        background: #12121f;
        border-color: #6366f1;
        color: #e0e0ff;
        box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
    }

    .flatsheet-container .form-control::placeholder {
        color: #555;
    }

.flatsheet-container .form-control-sm,
.flatsheet-container .form-select-sm {
    padding: 4px 8px;
    font-size: 0.82rem;
}

.flatsheet-container .form-control-plaintext {
    color: #bbb;
    padding: 4px 0;
    font-size: 0.85rem;
}

/* Grid table (dark) */
.flatsheet-container .table {
    color: #ddd;
    margin-bottom: 0;
}

    .flatsheet-container .table th {
        background: #1a1a2e;
        color: #a5b4fc;
        border-bottom: 1px solid #2a2a44;
        font-weight: 600;
        font-size: 0.78rem;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .flatsheet-container .table td {
        border-bottom: 1px solid #1e1e33;
        padding: 6px 10px;
        vertical-align: middle;
    }

    .flatsheet-container .table-hover tbody tr:hover {
        background: rgba(99,102,241,0.06);
    }

    .flatsheet-container .table-active {
        background: rgba(99,102,241,0.1) !important;
    }

    .flatsheet-container .table-light {
        --bs-table-bg: #1a1a2e;
    }

    .flatsheet-container .table .text-center.text-muted {
        color: #666 !important;
    }

/* Detail panel */
.flatsheet-container .detail-panel {
    background: #1a1a2e !important;
    border-color: #2a2a44 !important;
}

    .flatsheet-container .detail-panel h6 {
        color: #a5b4fc;
    }

/* Expand/collapse buttons */
.flatsheet-container .btn-link {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.78rem;
}

    .flatsheet-container .btn-link:hover {
        color: #a5b4fc;
    }

.flatsheet-container .btn-outline-secondary {
    border-color: #3a3a5c;
    color: #aaa;
    font-size: 0.78rem;
}

    .flatsheet-container .btn-outline-secondary:hover {
        background: #2a2a44;
        color: #e0e0ff;
    }

/* Delete buttons */
.flatsheet-container .btn-link.text-danger {
    color: #f87171 !important;
}

.flatsheet-container .btn-outline-danger {
    border-color: #7f1d1d;
    color: #f87171;
}

    .flatsheet-container .btn-outline-danger:hover {
        background: #7f1d1d;
        color: #fecaca;
    }

/* Search dropdown (dark) */
.flatsheet-container .position-absolute {
    background: #1e1e33 !important;
    border-color: #3a3a5c !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

    .flatsheet-container .position-absolute > div {
        border-color: #2a2a44 !important;
        color: #ddd !important;
        background: #1e1e33 !important;
    }

        .flatsheet-container .position-absolute > div:hover {
            background: #2a2a44 !important;
        }

    .flatsheet-container .position-absolute .fw-bold {
        color: #a5b4fc !important;
    }

    .flatsheet-container .position-absolute .ms-1 {
        color: #8888aa !important;
    }

/* Mobile cards (dark) */
.flatsheet-container .card {
    background: #1e1e33;
    border-color: #2a2a44;
}

    .flatsheet-container .card .card-header {
        background: #1a1a2e;
        border-color: #2a2a44;
        color: #ddd;
    }

    .flatsheet-container .card .card-body {
        background: #1e1e33;
        padding: 12px;
    }

    .flatsheet-container .card.border-primary {
        border-color: #4f46e5 !important;
    }

/* Row section within form layout */
.flatsheet-container .row {
    margin: 0;
}

    .flatsheet-container .row > div {
        padding-left: 8px;
        padding-right: 8px;
    }

/* Child grid (dark) */
.flatsheet-container .child-grid .table {
    border: 1px solid #2a2a44;
}

    .flatsheet-container .child-grid .table th {
        font-size: 0.72rem;
    }

/* Border overrides */
.flatsheet-container .border-top {
    border-color: #2a2a44 !important;
}

.flatsheet-container .border-start {
    border-color: #2a2a44 !important;
}

.flatsheet-container .border-bottom {
    border-color: #2a2a44 !important;
}

/* ============================== */
/* ERP Planned Field Indicators   */
/* ============================== */

.erp-planned {
    border-bottom: 1px dotted #f59e0b;
    cursor: help;
}

.erp-planned-badge {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 3px;
    padding: 0 4px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.4;
}