/*
============================================================
--- PeopleLink LED Configurator Stylesheet ---
--- Version 3.1 (Global 80% Scale Adjustment) ---
============================================================
*/

/* --- 1. Variables & Global Styles --- */
:root {
    --primary-color: #0d47a1;
    --primary-color-dark: #002171;
    --secondary-color: #4CAF50;
    --danger-color: #dc3545;
    --background-blue: #f0f6fc;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #6c757d;
    --text-color: #333;
    --card-bg: #ffffff;
    --border-color: #d1d9e2;
    --shadow: 0 12px 35px rgba(46, 74, 112, 0.1);
    /* --- VALUE CHANGED --- */
    --border-radius: 1rem; /* Was 16px, now relative */
}

/* ▼▼▼ NEW RULE FOR SCALING ▼▼▼ */
html {
    font-size: 80%; /* Sets the base for all rem units, effectively scaling the UI */
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--background-blue);
    color: var(--text-color);
    margin: 0;
    padding: 2rem 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

/* --- 2. Header (Logo & Title) Styles --- */
.site-header {
    width: 100%;
    margin-bottom: 2.5rem;
}

.header-content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.header-logo {
    /* --- VALUE CHANGED --- */
    max-height: 2rem; /* Was 32px, now 2rem to scale correctly */
}

.header-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.logo-text-fallback {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}


/* --- 3. Main Container & Form Styles --- */
main {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.main-container {
    background-color: var(--card-bg);
    padding: 2.5rem 3rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    width: 100%;
    /* --- VALUE CHANGED --- */
    max-width: 34.375rem; /* Was 550px */
    transition: max-width 0.4s ease-in-out;
    align-self: flex-start;
}

.main-container:has(#results-container:not(.hidden)) {
    /* --- VALUE CHANGED --- */
    max-width: 59.375rem; /* Was 950px */
}

.form-group {
    margin-bottom: 1.75rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--primary-color);
}

/* =========================================
   MODERN & VISIBLE INPUT STYLING
   ========================================= */

.form-group select,
.form-group input {
    width: 100%;
    padding: 1rem 1.25rem; 
    
    /* CHANGE 1: Use White background for crisp contrast */
    background-color: #ffffff; 
    
    /* CHANGE 2: Add a visible cool-gray border so it doesn't disappear */
    border: 1px solid #cbd5e1; 
    
    /* Keep the modern rounded look */
    border-radius: 12px; 
    
    /* Soft shadow for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    
    /* Typography */
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b; /* Dark slate color for text */
    
    /* Remove default ugly styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    transition: all 0.2s ease-in-out;
    
    /* Blue Arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230d47a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 1em;
}

/* --- HOVER STATE --- */
.form-group select:hover:not(:disabled),
.form-group input:hover:not(:disabled) {
    /* When hovering, make the border slightly darker blue-gray */
    border-color: #94a3b8; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- FOCUS STATE --- */
.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    /* A nice blue glow ring */
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.15); 
}

/* --- DISABLED STATE --- */
.form-group select:disabled,
.form-group input:disabled {
    /* Clearly gray background for disabled items */
    background-color: #f1f5f9; 
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    box-shadow: none;
    
    /* Gray Arrow */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.form-group input {
    background-image: none;
}

.form-group select:focus,
.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.15);
}

.form-group-wrapper { padding: 0; margin: 0; }

/* --- 4. Button Styles --- */
button {
    border: none;
    cursor: pointer;
    border-radius: 0.5rem; /* 8px -> 0.5rem */
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    transition: background-color 0.2s, transform 0.2s;
}

button:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

#calculateBtn {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    font-size: 1.1rem;
    margin-top: 1.5rem;
}
#calculateBtn:hover:not(:disabled) {
    background-color: var(--primary-color-dark);
}

button:disabled {
    background-color: var(--dark-gray);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Add this new block in assets/main.css */

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Space between icon and text */
}
.btn-with-icon .material-symbols-outlined {
    font-size: 1.2em; /* Makes icon slightly larger than text */
    line-height: 1;
}

/* --- 5. Footer --- */
footer {
    text-align: center;
    margin-top: 3rem;
    padding-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--dark-gray);
    width: 100%;
}
.admin-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
}
.admin-link:hover {
    text-decoration: underline;
}

/* --- 6. Helper & State Classes --- */
.hidden { display: none !important; }

/*
============================================================
--- RESPONSIVE STYLES ---
============================================================
*/
@media (max-width: 768px) {
    html {
        font-size: 75%; /* Slightly smaller on mobile for better fit */
    }
    body {
        padding: 1.5rem 1rem;
    }
    .site-header {
        margin-bottom: 2rem;
    }
    .header-title {
        font-size: 1.5rem;
    }
    .main-container {
        padding: 2rem 1.5rem;
    }
}

/*
============================================================
--- ALL OTHER STYLES (Modals, Results, etc.) ---
============================================================
*/

/* --- Results Container Styles --- */
.results-header { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; border-bottom: 1px solid #dee2e6; padding-bottom: 1rem; margin-bottom: 1rem; }
.results-header h2 { color: var(--primary-color); margin: 0; text-align: center; }
.results-header div { display: flex; justify-content: center; gap: 0.5rem; }
.results-header div button { margin-left: 0; padding: 0.6rem 1rem; flex-grow: 1; }
#startOverBtn { background-color: var(--danger-color); color: white; }
#modifyInputsBtn { background-color: var(--dark-gray); color: white; }
.input-summary { text-align: center; background-color: var(--medium-gray); padding: 1rem; border-radius: 0.5rem; margin-bottom: 2rem; }
.input-summary p { margin: 0.25rem 0; color: #495057; }
.results-subtitle { font-size: 1.5rem; color: #343a40; margin-bottom: 0.5rem; margin-top: 0; font-weight: 700; }
.results-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
@media(min-width: 500px) {
    .results-grid { grid-template-columns: 1fr 1fr; gap: 1rem 1rem; }
    .results-header { flex-direction: row; justify-content: space-between; align-items: center; }
    .results-header h2 { text-align: left; }
    .results-header div { justify-content: flex-end; flex-grow: 0; }
    .results-header div button { flex-grow: 0; }
}
.results-grid dl { margin: 0; }
.results-grid dt { font-weight: 700; color: #495057; margin-bottom: 0.25rem; font-size: 0.9rem; }
.results-grid dd { margin-left: 0; margin-bottom: 1rem; font-size: 1.1rem; color: var(--primary-color); font-weight: 700; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.info-link { margin-left: 0; font-size: 0.9em; font-weight: normal; text-decoration: none; color: #007bff; cursor: pointer; }
.info-link:hover { text-decoration: underline; }
.info-link svg { width: 20px; height: 20px; stroke: #007bff; stroke-width: 2; vertical-align: middle; position: relative; top: -2px; }
.info-link:hover svg { stroke: #0056b3; }

/* --- Solution Section (Main Results Page) --- */
.solution-section { background-color: var(--light-gray); border: 1px solid var(--medium-gray); border-radius: 0.5rem; padding: 1.5rem; }
.solution-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.solution-header h4 { margin: 0; }
.solution-section .solution-item { display: flex; align-items: center; gap: 8px; margin: 0.5rem 0; }
.solution-section ul { margin: 0.5rem 0; padding-left: 1.5rem; list-style-type: square; }
.status-tag { padding: 0.25rem 0.75rem; border-radius: 12px; font-size: 0.8rem; font-weight: bold; color: white; }
.status-tag.suggested { background-color: var(--secondary-color); }
.status-tag.custom { background-color: #ffc107; color: #212529; }
.status-tag.incomplete { background-color: var(--danger-color); }

/* --- Modal Base Styles & Password/Login Forms --- */
.password-wrapper { position: relative; } .password-wrapper input { padding-right: 40px; } .toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--dark-gray); }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); }
.modal-content { background-color: var(--card-bg); margin: 5% auto; padding: 2.5rem; border-radius: var(--border-radius); width: 86%; /* --- VALUE CHANGED --- */ max-width: 28.125rem; /* Was 450px */ position: relative; box-shadow: var(--shadow); }
/* --- REPLACE WITH THIS RULE --- */
.modal-content.large {
    max-width: 50rem; /* 800px */
    
    /* --- NEW RULES FOR VERTICAL CONTROL --- */
     /* Constrain height to 90% of the viewport height */
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack children vertically */
    overflow-y: hidden; /* ADD THIS LINE - Forces children to respect max-height */
}
.close-button { color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; } .close-button:hover { color: #000; }
.error-message { color: #721c24; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; text-align: center; font-size: 0.9rem; }
#adminLoginForm button[type="submit"], #passwordResetForm button[type="submit"] { width: 100%; padding: 1rem; background-color: var(--primary-color); color: white; font-size: 1.1rem; font-weight: 700; margin-top: 1rem; }
#adminLoginForm button[type="submit"]:hover, #passwordResetForm button[type="submit"]:hover { background-color: var(--primary-color-dark); }

/*
============================================================
--- (Keep all the CSS above this line) ---
============================================================
*/


/* ▼▼▼ REPLACE THE OLD SOLUTION EDITOR BLOCK WITH THIS NEW ONE ▼▼▼ */
/*
============================================================
--- SOLUTION EDITOR MODAL STYLES (V2.1 - Final Design) ---
============================================================
*/

/* General styling for this specific modal's content */
#solutionEditorModal .modal-content {
    padding: 2rem 2.5rem;
}
#solutionEditorModal h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: left;
    color: var(--text-color);
}

/* Style for blue labels like "Controller" */
#solutionEditorModal .form-group label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
#solutionEditorModal .form-group {
    margin-bottom: 2rem;
}
#solutionEditorModal h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

/* The gray bar for slot info */
.slot-info {
    display: flex;
    justify-content: space-between;
    background: var(--medium-gray);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Wrapper for the two card columns */
.card-columns-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0rem;
    align-items: start;
}

/* Individual card column (Input/Output) */
.card-list {
    background-color: var(--light-gray);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.25rem;
}
.card-list h5 {
    margin: 0 0 1.25rem 0;
    font-size: 1rem;
    font-weight: 700;
}

/* The row for adding a new card */
.card-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center; /* This handles vertical alignment */
}
.card-add-row .new-card-selector {
    flex-grow: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #333; /* Darker border to match screenshot */
    border-radius: 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em;
}

/* The area where added cards are displayed */
.card-display-area {
    margin-top: 1rem;
    min-height: 3rem;
    padding-top: 1rem;
    
}
.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* This is the key for vertical alignment */
    padding: 0.5rem 0;
    font-size: 0.95rem;
}
.no-cards-text {
    font-style: italic;
    color: var(--dark-gray);
    font-size: 0.9rem;
    text-align: center;
    margin: 0;
    padding: 0.5rem;
}

/* In assets/main.css */

/* --- Icon Button Overhaul --- */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: white;
    border: 0px solid var(--border-color);
    transition: all 0.2s;
    flex-shrink: 0;
}
.icon-btn:hover {
    transform: scale(1.1);
}

/* ▼▼▼ REPLACE the old .icon-btn svg rules with these new ones ▼▼▼ */
.icon-btn .material-symbols-outlined {
    font-size: 28px; /* Controls icon size */
    line-height: 1;  /* Helps with perfect vertical centering */
    font-variation-settings: 'FILL' 1; /* Makes the icon solid */
}

.add-card-btn {
    border-color: var(--secondary-color);
}
.add-card-btn .material-symbols-outlined {
    color: var(--secondary-color); /* Use 'color' instead of 'stroke' */
}

.delete-card-btn {
    border-color: var(--danger-color);
}
.delete-card-btn .material-symbols-outlined {
    color: var(--danger-color); /* Use 'color' instead of 'stroke' */
}
/* ▲▲▲ END OF REPLACEMENT ▲▲▲ */

/* Modal action buttons at the bottom */
.modal-actions {
    margin-top: 2rem;
    text-align: right;
}
#saveSolutionBtn {
    background-color: var(--secondary-color);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 1.75rem;
    border-radius: 6px;
}
#saveSolutionBtn:hover {
    filter: brightness(1.1);
}
/* ▲▲▲ END OF REPLACEMENT BLOCK ▲▲▲ */


/* --- RESPONSIVE STYLES FOR MODAL --- */
@media (max-width: 768px) {
    #solutionEditorModal .card-columns-wrapper {
        grid-template-columns: 1fr;
    }
    #solutionEditorModal .modal-content {
        padding: 1.5rem;
    }
}

/*
============================================================
--- V5 - TECHNICAL DRAWING VISUALIZATION STYLES ---
============================================================
*/

/* --- Main Drawing Area --- */
#drawing-container {
    position: relative;
    
    /* Add padding to make space for external dimension lines */
    padding: 20px 20px 0 0; /* UPDATED PADDING */
    box-sizing: border-box;
    margin-top: 1rem;
}

#drawing-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #b0b0b0;
    
    overflow: hidden; /* Ensures nothing spills out */
    background-color: #f0f0f0;
    background-image: repeating-linear-gradient(
        -45deg,
        #dcdcdc,
        #dcdcdc 5px,
        transparent 5px,
        transparent 10px
    );
}

/* --- The Final Screen (with image/video) --- */
#final-screen {
    position: absolute;
    /* JS will set top, left, width, height */
    background-image: url('/peoplelink/assets/visualization/grid_image.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
#final-screen.bg-video-active {
    background-image: none; /* Hide image when video is active */
}
#final-screen #bg-video {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
#final-screen #visual-container {
    position: relative;
    z-index: 2;
    width: 100%; height: 100%;
    display: grid;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Faint border on the grid */
}
#final-screen #visual-container > div {
    border: 0.5px solid rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
}

/* --- "Uncovered" Hatched Areas --- */
.uncovered-area {
    position: absolute;
    /* JS will set top, left, width, height */
    background-color: #f0f0f0;
    /* CSS-only hatch pattern */
    background-image: repeating-linear-gradient(
        -45deg,
        #dcdcdc,
        #dcdcdc 5px,
        transparent 5px,
        transparent 10px
    );
}

/* --- AutoCAD-style Dimension Lines --- */
.dim-line {
    position: absolute;
    font-family: monospace;
    font-size: 0.9rem;
    color: #333;
}
.dim-line .dim-text {
    position: absolute;
    background-color: #f8f9fa; /* Match modal background */
    padding: 0 4px;
}
.dim-line.horizontal {
    left: 0;
    width: 100%;
    height: 1px;
    border-top: 1px solid #555;
}
.dim-line.vertical {
    top: 0;
    height: 100%;
    width: 1px;
    border-left: 1px solid #555;
}
.dim-line.horizontal .dim-text {
    top: -9px; /* Center text on the line */
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
}
.dim-line.vertical .dim-text {
    /* RE-CENTER THE ROTATED TEXT */
    left: 50%;
    top: 50%;
    
    /* ADD ROTATION and combine with centering transform */
    transform: translate(-50%, -50%) rotate(90deg);

    /* ADD BACKGROUND & PADDING FOR READABILITY */
    background-color: #ffffff;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Ticks at the end of each dimension line */
.dim-line::before, .dim-line::after {
    content: '';
    position: absolute;
    background-color: #555;
}
.dim-line.horizontal::before, .dim-line.horizontal::after {
    width: 1px;
    height: 8px;
    top: -4px;
}
.dim-line.horizontal::before { left: 0; }
.dim-line.horizontal::after { right: 0; }

.dim-line.vertical::before, .dim-line.vertical::after {
    height: 1px;
    width: 8px;
    left: -4px;
}
.dim-line.vertical::before { top: 0; }
.dim-line.vertical::after { bottom: 0; }

/* Positioning for the main dimension lines */
#dim-top { top: 0; left: 0; right: 20px; width: auto; }
#dim-right { right: 0; top: 20px; bottom: 0; height: auto; }

/* Positioning for the smaller "uncovered" dimension lines */
.dim-line.uncovered { border-style: dashed; }
#dim-uncovered-w { display: none; /* Hidden by default */ }
#dim-uncovered-h { display: none; /* Hidden by default */ }

/* --- Legend & Scale Figure --- */
#viz-legend {
    position: absolute;
    top: 5px;
    right: 50px;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #555;
}
#viz-legend .hatch-pattern {
    width: 20px; height: 12px;
    margin-right: 8px;
    border: 1px solid #ccc;
    background-image: repeating-linear-gradient(-45deg, #dcdcdc, #dcdcdc 2px, transparent 2px, transparent 5px);
}
/* --- Bottom Data Summary Block --- */
#viz-summary {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.5rem;
    margin-top: 1rem;
    background-color: var(--light-gray);
    border-radius: 8px;/* Hide the summary block inside the visualization modal */
    display: none;
}

#viz-summary p { margin: 0.25rem 0; color: #333; }
#viz-summary span { font-weight: normal; color: #111; }


/* --- PDF Download Button & Modal Styles --- */
.download-section { text-align: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #dee2e6; }
#downloadPdfBtn { background-color: var(--primary-color); color: white; font-size: 1.1rem; font-weight: 700; padding: 0.8rem 2rem; border-radius: 6px; cursor: pointer; }
#downloadPdfBtn:hover { background-color: var(--primary-color-dark); }
#email-status-message { padding: 1rem; margin-bottom: 1rem; border-radius: 5px; text-align: center; font-weight: 500; }
#email-status-message.sending { background-color: #e2e3e5; color: #383d41; }
#email-status-message.success { background-color: #d4edda; color: #155724; }
#email-status-message.error { background-color: #f8d7da; color: #721c24; }
#emailPdfForm { text-align: center; }
#sendPdfBtn { background-color: var(--primary-color); color: white; font-size: 1.1rem; font-weight: 700; padding: 0.8rem 2.5rem; border-radius: 6px; cursor: pointer; }
#sendPdfBtn:hover:not(:disabled) { background-color: var(--primary-color-dark); }
#sendPdfBtn:disabled { background-color: var(--dark-gray); cursor: not-allowed; }
#emailPdfModal .modal-content p { text-align: left; padding: 0rem; margin-bottom: 1rem; }

.modal-header-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.toggle-switch { display: flex; align-items: center; gap: 10px; }
.toggle-label { font-size: 0.9rem; font-weight: 500; color: var(--dark-gray); }
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: var(--secondary-color); }
input:checked + .slider:before { transform: translateX(22px); }
.slider.round { border-radius: 28px; }
.slider.round:before { border-radius: 50%; }

/* Styles for the new checkbox controls container */
.visual-toggles {
    display: flex;
    justify-content: center; /* Center the checkboxes */
    gap: 1.5rem; /* Space between checkboxes */
    margin-top: 1.5rem; /* Add a gap above the checkboxes */
}
/* --- NEW RULES FOR PROPORTIONAL CENTERING --- */

/* This rule should already exist and be configured like this */
#drawing-container-wrapper {
    flex-grow: 1; /* Allows this element to expand and fill space */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0; /* A flexbox fix to prevent overflow issues */
    padding: 1rem 0;
}

/* This ensures the drawing container respects the wrapper's boundaries */
#drawing-container {
    position: relative; /* Make sure it has a position context */
    max-width: 100%;
    max-height: 100%; /* Correctly use 100% to refer to the wrapper */
    box-sizing: border-box; /* Good practice */
    margin-top: 1rem;
}
/* --- Custom override to reduce top margin on the visualization modal --- */
#cabinet-visual-modal .modal-content {
    margin-top: 2vh; /* Use a small percentage of the viewport height */
   
}

.stacked-detail {
    line-height: 1.2; /* This reduces the space between the two lines */
}

.stacked-detail small {
    display: block;   /* This forces the resolution onto its own line */
    font-size: 0.85em;
}

/* --- STYLES FOR THE NEW PORT MAPPING MODAL --- */

/* Center the grid container within the modal content area */
#port-mapping-modal .modal-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Explicitly set a white background */
}

/* The main grid container */
#port-mapping-container {
    width: 100%;
    max-width: 90vh;
    display: grid;
    /* Remove the outer border to let the cell borders define the grid */
}

/* Style for each individual cabinet cell in the grid */
#port-mapping-container > div {
    background-color: transparent; /* Make the cell background transparent */
    border: 1px solid #000000;  /* A solid black border for each cell */
    box-sizing: border-box;
}


#schematic-container {
    position: relative;
    width: 100%;
    padding: 20px 20px 0 0; /* Space for dimension lines */
    box-sizing: border-box;
    margin-top: 1rem;
}

/* Style for each cabinet cell */
.cabinet-cell {
    position: relative; /* Needed for positioning the label inside */
    border: 0.5px solid rgba(255, 255, 255, 0.35);
    box-sizing: border-box;
}

/* Style for the cabinet number label */
.cabinet-label {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .cabinet-label {
        font-size: 8px;
        top: 1px;
        right: 1px;
    }
}

/*
============================================================
--- V6.1 - PORT MAPPING VISUALIZER STYLES (Corrected) ---
============================================================
*/

/* --- Main Drawing Area --- */
#pm-drawing-container {
    position: relative;
    width: 100%;
    padding: 30px 40px 0 0;
    box-sizing: border-box;
    margin-top: 1rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The grid itself - NO BACKGROUND IMAGE */
#port-mapping-grid {
    width: 100%;
    /* The grid-template-rows is now set in JS */
}

/* Each cabinet/cell in the grid */
#port-mapping-grid > div {
    border: 1px solid #000000; /* Keep the main black border */
    box-sizing: border-box;
    position: relative;

    /* --- This is the new part for the inner grid and cross points --- */
    background-image:
        /* Layer 1: The four red cross points (TOP LAYER) */
        radial-gradient(circle at center, #ff0000 2px, transparent 2px),
        radial-gradient(circle at center, #ff0000 2px, transparent 2px),
        radial-gradient(circle at center, #ff0000 2px, transparent 2px),
        radial-gradient(circle at center, #ff0000 2px, transparent 2px),

        /* Layer 2: The two teal vertical lines */
        linear-gradient(#008080, #008080),
        linear-gradient(#008080, #008080),

        /* Layer 3: The two teal horizontal lines (BOTTOM LAYER) */
        linear-gradient(#008080, #008080),
        linear-gradient(#008080, #008080);

    background-size:
        /* Size of the red dots (e.g., a 4x4 pixel area for a 2px radius dot) */
        4px 4px, 4px 4px, 4px 4px, 4px 4px,

        /* Size of the vertical lines (1px wide, 100% tall) */
        1px 100%, 1px 100%,

        /* Size of the horizontal lines (100% wide, 1px tall) */
        100% 1px, 100% 1px;

    background-position:
        /* Position of the red dots at the exact cross points */
        calc(33.333% - 2px) calc(33.333% - 2px), /* Top-left cross */
        calc(66.666% - 2px) calc(33.333% - 2px), /* Top-right cross */
        calc(33.333% - 2px) calc(66.666% - 2px), /* Bottom-left cross */
        calc(66.666% - 2px) calc(66.666% - 2px), /* Bottom-right cross */

        /* Position of the vertical lines */
        33.333% 0, 66.666% 0,

        /* Position of the horizontal lines */
        0 33.333%, 0 66.666%;

    background-repeat: no-repeat;
}

/* The cabinet number label (e.g., A1) */
#port-mapping-grid > div > span {
    position: absolute;
    bottom: 2px;
    left: 4px;
    font-size: 10px;
    font-weight: bold;
    color: #000000; /* Black text */
    text-shadow: none; /* No shadow needed on white background */
    font-family: monospace;
}

/* --- (The dimension line CSS can remain exactly the same as before) --- */
.pm-dim-line {
    position: absolute;
    font-family: monospace;
    font-size: 0.9rem;
    color: #333;
}
.pm-dim-line .pm-dim-text {
    position: absolute;
    background-color: #ffffff; /* Match modal background */
    padding: 0 4px;
}
.pm-dim-line.horizontal {
    left: 0; right: 40px; top: 0; height: 1px;
    border-top: 1px solid #555;
}
.pm-dim-line.vertical {
    top: 30px; bottom: 0; right: 0; width: 1px;
    border-left: 1px solid #555;
}
.pm-dim-line.horizontal .pm-dim-text {
    top: -9px; left: 50%;
    transform: translateX(-50%);
}
.pm-dim-line.vertical .pm-dim-text {
    left: 12px; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: left top;
    white-space: nowrap;
}
.pm-dim-line::before, .pm-dim-line::after {
    content: ''; position: absolute; background-color: #555;
}
.pm-dim-line.horizontal::before, .pm-dim-line.horizontal::after {
    width: 1px; height: 8px; top: -4px;
}
.pm-dim-line.horizontal::before { left: 0; }
.pm-dim-line.horizontal::after { right: 0; }
.pm-dim-line.vertical::before, .pm-dim-line.vertical::after {
    height: 1px; width: 8px; left: -4px;
}
.pm-dim-line.vertical::before { top: 0; }
.pm-dim-line.vertical::after { bottom: 0; }

/* --- Human Scale Figure Styles (Corrected) --- */
#human-scale {
    position: absolute;
    bottom: 0;
    /* This positions the figure's right edge exactly at the parent's left edge */
    right: 100%;
    /* This adds a small gap between the figure and the drawing container */
    margin-right: 5px;
    z-index: 10;
    display: flex; /* JS will toggle this between 'flex' and 'none' */
    
    align-items: center;
}
#human-scale img {
    height: 100%;
    width: auto;
    max-width: none;
}

/* --- In your main CSS file, add this block at the end --- */

/* Style the <dd> tag to hold the tooltip correctly */
.results-grid dd {
    position: relative; /* This is crucial for positioning the tooltip */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Adds a little space between text and icon */
}

/* The wrapper for the icon and its tooltip text */
.tooltip.info-icon-wrapper {
    display: inline-block;
    position: relative;
    cursor: help; /* Changes the mouse cursor to indicate help */
}

/* Style the material symbol icon */
.info-icon-wrapper .material-symbols-outlined {
    font-size: 1.1rem; /* Adjust icon size */
    color: #0078D4;  /* A professional blue, or your primary color */
    vertical-align: middle;
    transition: transform 0.2s ease;
}
.info-icon-wrapper:hover .material-symbols-outlined {
    transform: scale(1.2); /* Slightly enlarge icon on hover */
}

/* The tooltip text bubble - hidden by default */
.tooltip .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: max-content; /* Make the box as wide as its content */
    background-color: #2c3e50; /* Dark background */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    position: absolute;
    z-index: 1;
    bottom: 150%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    font-weight: 600;
}

/* Show the tooltip on hover */
.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Optional: add a little arrow to the tooltip */
.tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #2c3e50 transparent transparent transparent;
}

/* --- Controller Details Display --- */
.solution-section > div,
.solution-section ul {
    margin-bottom: 0.75rem; /* Adds space between each line/block */
}
.solution-section > div:last-child,
.solution-section ul:last-of-type {
    margin-bottom: 0; /* Removes extra space at the very end */
}

.solution-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.controller-details {
    font-size: 0.9rem;
    color: var(--dark-gray);
    line-height: 1.4;
    padding-left: 0.25rem; /* A little indent to align nicely */
}

.cards-section-header {
    font-weight: bold;
    margin-top: 0.25rem; /* Adds a bit of space above the card list */
}

.solution-section ul {
    margin: 0.25rem 0 0 0;
    padding-left: 1.5rem;
    list-style-type: square;
}

/* =========================================
   FORCE EQUAL WIDTHS
   ========================================= */

/* 1. Ensure the parent container is always full width */
.form-group {
    width: 100%;
    margin-bottom: 20px; /* Consistent spacing */
    box-sizing: border-box;
}

/* 2. Target BOTH Select and Input to be identical */
.form-group select,
.form-group input {
    /* FORCE WIDTH */
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    
    /* CRITICAL: Includes padding/border in the 100% calculation */
    box-sizing: border-box; 
    
    /* RESET: Remove browser default margins */
    margin: 0;
    
    /* Your existing styling */
    padding: 1rem 1.25rem; 
    background-color: #ffffff; 
    border: 1px solid #cbd5e1; 
    border-radius: 12px; 
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #1e293b;
}

/* SEO Section - Mobile (Hidden by default) */
.seo-content-section {
    display: none;
}

/* SEO Section - Desktop (Visible initially) */
@media (min-width: 1024px) {
    .seo-content-section {
        display: block; 
        max-width: 1100px; /* Matches your main container width */
        margin: 0 auto 3rem auto; /* Top 0, Auto sides, Bottom 3rem */
        padding: 0 1.5rem;
        font-family: 'Inter', sans-serif;
        color: #333;
        text-align: left;
        
        /* Animation settings */
        opacity: 1;
        transition: opacity 0.4s ease, margin 0.4s ease;
    }

    .seo-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        border-top: 1px solid #eee; /* Subtle separator line */
        padding-top: 2rem;
    }
    
    .seo-content-section h2 { font-size: 1.4rem; color: #0056b3; margin-bottom: 0.75rem; }
    .seo-content-section h3 { font-size: 1.1rem; margin-top: 1.2rem; color: #444; }
    .seo-content-section p { font-size: 0.95rem; line-height: 1.6; color: #555; }
}

/* Utility to hide it permanently */
.seo-hidden {
    display: none !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* --- Matrix Adjustment Controls --- */
.viz-controls-wrapper {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: none;
}

.matrix-adjust-panel {
    background: #f8f9fa;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.matrix-adjust-panel h4 {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #6c757d;
    text-align: center;
}

.matrix-inputs {
    display: flex;
    gap: 1.5rem;
}

.stepper-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
}

.stepper {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    background: white;
}

.stepper input {
    width: 40px;
    text-align: center;
    border: none;
    font-weight: bold;
    font-size: 1rem;
    padding: 5px 0;
    margin: 0;
    pointer-events: none; /* Read only */
    background: transparent;
    box-shadow: none; /* Remove global input shadow */
}

.step-btn {
    background: #e9ecef;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.step-btn:hover:not(:disabled) {
    background: #dde2e6;
}

.step-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.step-btn .material-symbols-outlined {
    font-size: 16px;
    font-weight: bold;
}