/* Debug Layout - Global CSS for visualizing layout structures */

/* Remove position: relative which was causing layout shifts */
/* .debug-layout * {
    position: relative;
} */

/* Add visual outlines to all elements without affecting layout */
.debug-layout *:not(html):not(body):not(head):not(style):not(script):not(meta):not(link) {
    outline: 1px solid rgba(128, 128, 128, 0.2);
    outline-offset: -1px;
    box-shadow: none !important; /* Prevent box-shadow from affecting layout */
}

/* Color code for different container types - use outline instead of box-shadow */
.debug-layout section {
    outline: 2px solid rgba(255, 0, 0, 0.3);
    outline-offset: -2px;
}

.debug-layout div {
    outline: 1px solid rgba(0, 0, 255, 0.3);
    outline-offset: -1px;
}

.debug-layout button {
    outline: 1px solid rgba(0, 128, 0, 0.4);
    outline-offset: -1px;
}

.debug-layout input, .debug-layout textarea, .debug-layout select {
    outline: 1px solid rgba(128, 0, 128, 0.4);
    outline-offset: -1px;
}

/* Tool-specific highlighting - using outline and background that won't affect positioning */
.debug-layout .tool {
    outline: 2px solid rgba(255, 0, 0, 0.5);
    outline-offset: -2px;
}

.debug-layout .tool-title {
    outline: 2px solid rgba(128, 0, 128, 0.5);
    outline-offset: -2px;
}

.debug-layout .resize-controls {
    outline: 2px solid rgba(255, 165, 0, 0.5);
    outline-offset: -2px;
}

/* Timetable-specific elements */
.debug-layout #timetable-container {
    outline: 2px solid rgba(0, 0, 255, 0.5);
    outline-offset: -2px;
}

.debug-layout #timetable-entries {
    outline: 2px solid rgba(0, 128, 0, 0.5);
    outline-offset: -2px;
}

.debug-layout .timetable-entry {
    outline: 1px solid rgba(255, 0, 0, 0.5);
    outline-offset: -1px;
}

/* Mystery Pupil elements */
.debug-layout #mystery-pupil-display {
    outline: 2px solid rgba(0, 128, 0, 0.5);
    outline-offset: -2px;
}

/* Removed reference to mystery-pupil-controls */

/* Timer elements */
.debug-layout #timer-container {
    outline: 2px solid rgba(0, 128, 0, 0.5);
    outline-offset: -2px;
}

/* Class Points elements */
.debug-layout #points-container {
    outline: 2px solid rgba(0, 128, 0, 0.5);
    outline-offset: -2px;
}

/* Button rows */
.debug-layout .button-row {
    outline: 2px solid rgba(255, 165, 0, 0.5);
    outline-offset: -2px;
}

/* Main UI containers */
.debug-layout #main-content {
    outline: 2px solid rgba(255, 0, 0, 0.5);
    outline-offset: -2px;
}

.debug-layout #toolbar {
    outline: 2px solid rgba(0, 0, 255, 0.5);
    outline-offset: -2px;
}

.debug-layout #tool-container {
    outline: 2px solid rgba(0, 128, 0, 0.5);
    outline-offset: -2px;
}

/* Background colors that don't affect layout by using opacity */
.debug-layout .tool::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 0, 0, 0.03);
    pointer-events: none;
    z-index: -1;
}

.debug-layout .tool-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(128, 0, 128, 0.05);
    pointer-events: none;
    z-index: -1;
}

/* Margin & Padding Visualization - Shows actual dimensions */
.debug-layout *:not(html):not(body):not(head):not(style):not(script):not(meta):not(link):hover::before {
    content: attr(class);
    position: absolute;
    bottom: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}

.debug-layout *:not(html):not(body):not(head):not(style):not(script):not(meta):not(link):hover::after {
    content: 'margin: ' attr(data-computed-margin) ' | padding: ' attr(data-computed-padding) ' | size: ' attr(data-computed-size);
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}

/* Debug Layout Button Styling */
#debug-layout-toggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background: #ff5722;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#debug-layout-toggle:hover {
    background: #e64a19;
}

#debug-layout-toggle.active {
    background: #4caf50;
}

#debug-layout-toggle.active:hover {
    background: #388e3c;
}