/* ==========================================================================
   Debug & Development Utilities
   ========================================================================== */

/* Debug Backgrounds */
.dev {
    background: rgb(128 0 0 / 0.3) !important;
}

.dev-red {
    background: rgb(128 0 0 / 0.3) !important;
}

.dev-blue {
    background: rgb(0 0 128 / 0.3) !important;
}

.dev-green {
    background: rgb(0 128 0 / 0.3) !important;
}

.dev-yellow {
    background: rgb(128 128 0 / 0.3) !important;
}

.dev-purple {
    background: rgb(128 0 128 / 0.3) !important;
}

.dev-cyan {
    background: rgb(0 128 128 / 0.3) !important;
}

/* Debug Outlines */
.dev-outline {
    outline: 1px solid red !important;
}

.dev-outline-blue {
    outline: 1px solid blue !important;
}

.dev-outline-green {
    outline: 1px solid green !important;
}

.dev-outline-dashed {
    outline: 2px dashed red !important;
}

/* Debug Borders */
.dev-border {
    border: 2px solid red !important;
}

.dev-border-blue {
    border: 2px solid blue !important;
}

.dev-border-green {
    border: 2px solid green !important;
}

/* Grid Debugging */
.dev-grid {
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(255, 0, 0, 0.1) 19px,
            rgba(255, 0, 0, 0.1) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(255, 0, 0, 0.1) 19px,
            rgba(255, 0, 0, 0.1) 20px
        ) !important;
}

/* Show All Outlines */
.dev-show-all * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}

/* Show Box Model */
.dev-box-model {
    outline: 2px solid red !important;
    box-shadow:
        inset 0 0 0 4px rgba(0, 255, 0, 0.3),
        inset 0 0 0 8px rgba(0, 0, 255, 0.3) !important;
}

/* Development Only - Hide in Production */
.dev-only {
    /* This should be hidden in production builds */
    display: block;
}

/* Label for Development */
.dev-label::before {
    content: "DEV";
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    z-index: 9999;
}