/* style.css */

:root {
    --scrollbar-width: 17px; /* A common default, adjust if your browser/OS differs */
    
    --fixed-cell-size: 25px; /* New: CSS variable for fixed cell size */
    --grid-cols: 32; /* Default, will be set by JS */
    --grid-rows: 20; /* Set a default here, matching the script's intended value */

    /* Field Colors - Removed specific type colors as they are now random */
    --highlight-color: rgba(0, 123, 255, 0.3); /* Semi-transparent blue for drag highlights */
    --field-padding-x: 5px; /* Define padding as a CSS variable for consistency */

    --resize-handle-width: 4px; /* Width of the resize handles */
}

/* Basic Resets & Global Styles */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Consistent font-family */
    background-color: gray; /* Changed to gray as requested */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ensure body takes full viewport height */
    overflow: hidden; /* Prevent body scrollbars */
}

/* Main Game Container Layout */
#game-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, Main Content (flexible), Footer */
    grid-template-columns: 1fr; /* Single column for overall layout */
    width: 90vw; /* Take 90% of viewport width */
    max-width: 1600px; /* 1200, Max width for larger screens */
    height: 90vh; /* Take 90% of viewport height */
    max-height: 1400px; /* 800, Max height for larger screens */
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Important for child elements not to spill out */
}

/* Header Styles */
#game-header {
    background-color: #101D6B; /* Header Blue */
    color: #fff;
    padding: 15px 25px;
    border-bottom: 1px solid #002244;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute header content */
}

.header-content {
    display: flex;
    align-items: center;
    gap: 30px; /* Space between elements in the header */
}

.header-left, .header-center, .header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Spacing between elements in each header section */
}

#game-title {
    font-size: 1.8em;
    font-weight: 600;
    margin: 0;
}

#difficulty-display, #timer-display {
    font-size: 1.1em;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    min-width: 80px; /* Ensure timer has consistent width */
    text-align: center;
}

#game-header h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 600;
}

/* Main Content Area Layout (Canvas + Field Bank) */
#game-main-content {
    display: grid;
    grid-template-columns: 3fr 1fr;  /*Canvas takes 3 parts, Field Bank 1 part */
    gap: 1px; /* Small gap between canvas and field bank */
    background-color: #e0e2e6; /* Separator color */
    overflow: hidden; /* Prevent scrollbars on this container */
}

/* Main Canvas Area (MRS) */
#main-canvas-area {
    padding: 20px;
    background-color: #f0f2f5;
    border-right: 1px solid #ddd;
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Align content to the top vertically */
    overflow: auto; /* Allow scrolling if grid is larger than area */

/*	background-image: url ("img/HeaderHero_wheel_06_700x700.png");*/
}

#main-canvas-area h2 {
    color: #003366; /* Changed to Siemens Blue for consistency */
    margin-bottom: 20px; /* Increased margin for better separation */
    text-align: center;
    font-size: 1.5em; /* Larger font size for title */
    font-weight: 600;
    flex-shrink: 0; /* Prevent title from shrinking */
}

/* The wrapper around mrs-grid-container. This is the element that should be centered. */
/* We need to ensure this wrapper takes up available space for centering to work. */
.grid-aspect-ratio-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align grid to the top within its wrapper */
    flex-grow: 1; /* Allow wrapper to grow and take available space */
    /* Removed overflow: hidden; from here, as it's on #main-canvas-area now */
}

#mrs-grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), var(--fixed-cell-size));
    grid-template-rows: repeat(var(--grid-rows), var(--fixed-cell-size));  
    gap: 0px; /* Explicitly set gap to 0px */
    /* Width and Height will be set by JavaScript for pixel-perfect sizing */
    border: 1px solid #ced4da; /* Overall grid container border */
    background-color: #fff;
    position: relative;
    margin: 0; /* No auto margin, as flexbox is centering */
    flex-shrink: 0; /* Prevent shrinking */
    flex-grow: 0; /* Prevent growing */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Added shadow for depth */
}

#mrs-grid-container p#grid-placeholder { /* Placeholder text for Insane mode */
    grid-column: 1 / -1; /* Span all columns */
    grid-row: 1 / -1; /* Span all rows */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    font-style: italic;
    font-size: 1.1em;
    pointer-events: none; /* Allow drag events to pass through */
    z-index: 1; /* Ensure it's behind fields */
}

.grid-cell {
    background-image: linear-gradient(to right, #e0e0e0 1px, transparent 1px), /* Lighter grid lines */
                      linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
    background-size: 100% 100%; /* Ensures grid lines cover the cell */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    z-index: 0; /* Ensure cells are beneath placed fields */
}

/* Field Bank Area (Right Side) */
#field-bank-area {
    background-color: #e9ecef; /* Slightly darker background */
    padding: 20px;
    border-left: 1px solid #d0d3d7;
    display: flex;
    flex-direction: column; /* Arrange header and list vertically */
    flex-grow: 1;  /* Allow field-bank-area to grow */
}

#field-bank-area h3 { /* Style for h3 within field-bank-area */
    margin-top: 0;
    color: #343a40;
    font-size: 1.2em;
    margin-bottom: 15px;
    display: flex; /* To align button */
    justify-content: space-between;
    align-items: center;
}

/* New containers for collapsible sections */
#grid-rows-cols-container,
#new-field-creation-container {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px; /* Space between sections */
    flex-shrink: 0; /* Prevent from shrinking when other elements grow */
}

/* Content divs within the collapsible sections */
#grid-settings-content,
#new-field-content {
    /* These are the elements that will be collapsed/expanded */
    transition: all 0.3s ease-in-out; /* Smooth transition for collapsing */
    overflow: hidden; /* Hide overflow when collapsing */
}

/* The .collapsed class definition */
.collapsed {
    display: none !important; /* Ensure it's hidden when collapsed */
}

/* Styling for the toggle icons */
.toggle-icon {
    font-size: 1.2em; /* Adjust size as needed */
    cursor: pointer;
    color: #007bff; /* Example color */
    transition: transform 0.2s ease-in-out;
}

/* Field Bank Specific Styles */
#field-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1; /* Allow container to grow and take remaining space */
    overflow-y: auto; /* Add scrollbar here */
    padding-right: 5px; /* Space for scrollbar if needed */
    border: 2px dashed transparent; /* Default transparent dashed border */
    transition: border-color 0.2s ease, background-color 0.2s ease; /* Smooth transition */
    min-height: 0; /* CRITICAL FIX: Allow the flex item to shrink to fit, but still respect content */
    /* Removed fixed height, flex-grow will manage it */
    flex-basis: 0; /* CRITICAL FIX: Give it an initial size of 0 to allow flex-grow to work effectively */
}

#field-list-container.drag-over-palette {
    border-color: #007bff; /* Highlight color for palette drop zone */
    background-color: #e6f7ff; /* Light blue background when active */
}

/* Field Bank fields */
.draggable-field {
    background-color: #6c757d; /* Default, will be overridden by JS random color */
    color: #fff;
    padding: 0 var(--field-padding-x); /* Use CSS variable for padding */
    cursor: grab; /* Indicates it's draggable */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 0.9em;
    border-radius: 5px;
    transform: translateZ(0); /* Hardware acceleration */
	box-sizing: border-box;
    height: 23px; /* Match field height on grid */
    flex-shrink: 0; /* Prevent individual fields from shrinking too much */
}

.draggable-field:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.draggable-field:active {
    cursor: grabbing;
}

.draggable-field .field-name {
    flex-grow: 1; /* Allows name to take up available space */
    overflow: hidden; /* Hides overflowing text */
    white-space: nowrap; /* Prevents text from wrapping */
    text-overflow: clip; /* Clips the text instead of showing ellipsis */
    text-align: left; /* Align name to the left */
    min-width: 0; /* Allows the flex item to shrink below its content size */
}

.draggable-field .field-bits {
    flex-shrink: 0; /* Prevents bits text from shrinking */
    text-align: right; /* Align bits to the right */
    font-weight: normal;
    opacity: 0.8;
    margin-left: 5px; /* Small gap between name and bits */
}

/* NEW: Drop Zone Field Styling */
.drop-zone-field {
    position: absolute;
    border: 1px dashed #adb5bd; /* Default dashed border for all drop zones */
    border-radius: 3px;
    box-sizing: border-box;
    z-index: 5; /* Below placed fields, above grid cells */
    pointer-events: auto; /* Ensure drop zones are always direct drop targets */
    display: flex; /* For centering text */
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-style: italic;
    overflow: hidden; /* Ensure text doesn't spill out */
    white-space: nowrap; /* Prevent text wrapping */
    text-overflow: ellipsis; /* Show ellipsis for overflowing text */
}

/* Specific styles for visible placeholders (Easy, Medium, Hard) */
.drop-zone-field.visible-placeholder {
    background-color: #e9ecef; /* Lighter gray background */
    color: #6c757d; /* Darker text for contrast */
    border-color: #adb5bd; /* Standard gray border */
}

/* Specific styles for hidden placeholders (Medium, Hard) */
.drop-zone-field.hidden-placeholder-dropzone {
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
    color: #888; /* Light text for hints */
    border-style: dashed; /* Dashed border */
    border-color: #adb5bd; /* Standard gray border */
}

.drop-zone-field.drop-zone-highlight {
    border-color: #007bff; /* Highlight border on drag over */
    background-color: rgba(0, 123, 255, 0.1); /* Subtle blue tint on highlight */
}

/* Style for a field that has been placed on the grid */
.placed-field {
    position: absolute; 
    display: flex; /* Use flexbox for internal layout (to center text vertically) */
	align-items: center; /* Vertically center content (text) within the field element */
	justify-content: center; /* CRITICAL FIX: Center content horizontally */
	overflow: hidden; /* CRUCIAL: This clips the absolutely positioned field-name */
	box-sizing: border-box; /* Ensures padding/border are *inside* the set width/height */
	padding: 0 var(--field-padding-x); /* Use CSS variable for padding */
	
	min-width: 25px; /* Ensures a single cell has its base width */
	
    background-color: #6c757d; /* Default, will be overridden by JS random color */
    color: white;
    border-radius: 3px; /* Slightly smaller radius for placed fields */
    
    font-size: 0.9em; /* Consistent 0.9em font size */
    
    text-overflow: clip; /* Ensure no ellipsis on the main element itself */
    z-index: 10; /* Ensure fields are visible above grid lines */
    border: 1px solid rgba(0, 0, 0, 0.2); /* Consistent border for placed fields */

    /* Default cursor for the main body of the field */
    cursor: default; /* Changed to default as not all placed fields are draggable */

    /* CRITICAL FIX: Ensure text is centered */
    text-align: center; 
}

/* Cursor for draggable placed fields (Insane mode) */
.placed-field[draggable="true"] {
    cursor: grab;
}

/* Visibility for placed fields based on difficulty */
/* This block is largely deprecated as placed fields are always visible now,
   but keeping it for reference or future use if behavior changes. */
.placed-field.hidden-placeholder {
    /* These styles should ideally not be applied if placed fields are always visible */
    background-color: #e9ecef; /* Lighter shade for grayed out */
    color: #6c757d; /* Darker text for contrast */
    border: 1px dashed #adb5bd; /* Dashed border for placeholders */
    cursor: default; /* Not draggable by default */
    z-index: 5; /* Below player-placed fields */
    transition: none; /* No hover effect for placeholders */
}

.placed-field.hidden-placeholder .field-name {
    /* No left offset needed for centered "???" */
    position: static; /* Override absolute positioning */
    width: auto; /* Override large width */
    text-align: center;
    display: flex; /* Ensure flex properties apply */
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* --- Name Span within placed-field (now holds combined text and is absolutely positioned) --- */
.placed-field .field-name {
    height: 100%; /* Ensure it takes full height of parent for vertical centering */
    display: flex; /* Use flex to vertically center text within the span */
    align-items: center; /* Vertically center */
    white-space: nowrap; /* Keep text on one line */
    text-overflow: clip; /* Ensure no ellipsis, as it's meant to flow */
    padding: 0; /* Remove internal padding, handled by parent .placed-field */
    box-sizing: border-box; /* Ensure width calculation is consistent */
    pointer-events: none; /* CRITICAL FIX: Allow drag events to pass through to parent .placed-field */
    /* CRITICAL FIX: Remove absolute positioning and left offset from here */
    position: static; 
    width: auto; 
    /* CRITICAL FIX: Remove text-align: left; if it was here, let parent .placed-field handle it */
}

/* Hide the field-bits span in placed fields as its content is now in field-name */
.placed-field .field-bits {
    display: none;
}

/* --- General Cleanup for empty spans (still useful for palette items) --- */
.placed-field .field-name:empty {
    display: none;
}
/* For palette items, if bits is empty, still display name */
.draggable-field .field-bits:empty {
    display: none;
}

/* Styles for the drag highlight segments */
.drag-highlight-segment {
    position: absolute;
    background-color: var(--highlight-color); /* Semi-transparent blue highlight */
    border: 1px dashed #007bff;
    border-radius: 3px;
    pointer-events: none; /* Crucial: allows mouse events to pass through to grid cells */
    z-index: 20; /* Above placed fields */
    box-sizing: border-box; /* Ensure border is included in dimensions */
}

.placed-field:hover:not([draggable="false"]):not(.hidden-placeholder) { /* Only hover for draggable, non-hidden fields */
    filter: brightness(1.1);
}

.placed-field.dragging-placed-field,
.placed-field.resizing-field { /* Apply similar visual feedback for resizing */
    opacity: 0.5; /* Make original field semi-transparent when dragging/resizing */
    border-style: dashed;
}

/* NEW: Resize Handles */
.resize-handle {
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--resize-handle-width); /* Use CSS variable for width */
    cursor: ew-resize; /* Cursor for resizing */
    z-index: 25; /* Above the field itself, but below the highlight */
    /* Optional: background-color for debugging visibility */
    /* background-color: rgba(255, 0, 0, 0.2); */ 
}

.resize-handle.left {
    left: 0;
}

.resize-handle.right {
    right: 0;
}

/* Game Setup Panel */
#game-setup-panel {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

#game-setup-panel h3 {
    margin-top: 0;
    color: #343a40;
    font-size: 1.2em;
    margin-bottom: 15px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #495057;
}

.input-group input[type="text"],
.input-group input[type="number"],
.input-group select,
.input-group input[type="color"] { /* Added color input type */
    width: calc(100% - 20px); /* Adjust for padding */
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

/* Start Game Button (inherits from .primary-button, then overridden) */
#start-game-btn {
    width: 100%;
    /* padding, font-size, font-weight, border-radius, border, cursor, transition are inherited from .primary-button */
    background-color: #28a745; /* Green background */
    color: #fff; /* White text */
}

#start-game-btn:hover:not(:disabled) {
    background-color: #218838; /* Darker green on hover */
    /* transform: translateY(-2px); is inherited from .primary-button:hover */
}

#start-game-btn:active:not(:disabled) {
    transform: translateY(0);
}

/* Insane Mode Field Creation Interface */
#insane-field-creation {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px; /* Added margin to separate from field bank */
}

#insane-field-creation h3 {
    margin-top: 0;
    color: #343a40;
    font-size: 1.2em;
    margin-bottom: 15px;
    display: flex; /* To align button */
    justify-content: space-between;
    align-items: center;
}

#insane-field-creation .control-button {
    margin-top: 10px;
    /*width: calc(50% - 5px);  Two buttons side-by-side */
	width: 100%;
    display: inline-block;
    box-sizing: border-box;
}

#insane-field-creation #add-new-field-btn {
    margin-right: 10px;
}

/* Delete button for player-created fields */
.delete-player-field-btn {
    background-color: #dc3545; /* Red */
    color: white;
    border: none;
    border-radius: 50%; /* Circular button */
    width: 18px; /* Small size */
    height: 18px;
    font-size: 0.7em;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-left: 8px; /* Space from field name */
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.delete-player-field-btn:hover {
    background-color: #c82333;
}

/* Hide utility class */
.hidden {
    display: none !important;
}

/* Grid Placeholder Text - This is for when the grid is completely empty */
#grid-placeholder {
    grid-column: 1 / -1; /* Span all columns */
    grid-row: 1 / -1; /* Span all rows */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #aaa;
    font-style: italic;
    font-size: 1.1em;
    pointer-events: none; /* Allow drag events to pass through */
    z-index: 1; /* Ensure it's behind fields */
}

/* Control Panel (Bottom Bar) */
#control-panel-area {
    background-color: #343a40; /* Darker background for control panel */
    padding: 15px 25px;
    border-top: 1px solid #212529;
    display: flex;
    justify-content: space-between; /* Distribute buttons */
    align-items: center;
}

.undo-redo-group {
    display: flex;
    gap: 10px;
}

.control-button {
    background-color: #6c757d; /* Grey button */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.control-button:hover:not(:disabled) {
    background-color: #5a6268;
    transform: translateY(-2px);
}

.control-button:active:not(:disabled) {
    transform: translateY(0);
}

.control-button:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
}

.primary-button {
    background-color: #dc3545; /* Distinctly Red for "Done!" */
	color: #fff; /* White text */
    font-weight: bold;
    font-size: 1.3em; /* Larger font size */
    padding: 15px 35px; /* More padding */
    border-radius: 12px; /* More rounded corners */
    border: none; /* No border */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
	display: inline-block; 
}

.primary-button:hover:not(:disabled) {
    background-color: #c82333;
	transform: translateY(-2px);
}

.primary-button:active:not(:disabled) {
    transform: translateY(0);
}

.primary-button:disabled {
    background-color: #e0e0e0;
    color: #a0a0a0;
    cursor: not-allowed;
}

/* Feedback Overlay Styles */

#results-panel {
    position: fixed; /* Changed to fixed for better centering in viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element */
    z-index: 1001; /* Ensures it's on top of other content */
    background-color: #f0f0f0; /* Light background for the panel */
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    min-width: 300px; /* Adjust as needed */
    max-width: 500px; /* Adjust as needed */
    text-align: center;
	font-size: 1.2em;
    font-weight: bold;
	opacity: 0.7; /*opacity or animation*/
	/*animation: popIn 0.3s ease-out forwards;  Simple animation */
}

/* Optional: Add a backdrop to dim the background content */
#overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 999; /* Below the results-panel but above other content */
    display: none; /* Hidden by default */
}

/* When results-panel is shown, show the backdrop too */
#results-panel:not(.hidden) + #overlay-backdrop {
    display: block;
}

#play-again-btn {
    margin-top: 25px;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 12px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#close-feedback-btn:hover {
    background-color: #0056b3;
}

/* Simple pop-in animation for feedback */
@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.setting_for_insane {
	width: 5px;
}

/* The .collapsed class definition */
.collapsed {
    display: none !important; /* Ensure it's hidden when collapsed */
}