/* public/css/scriptGen.css */

/* 🌟 CRITICAL: Overrides the master.css 800px constraint on this page */
body { 
    max-width: 100% !important; 
    margin: 0; 
    padding: 0; 
}

.generator-container { 
    max-width: 1500px; 
    margin: 40px auto; 
    padding: 0 20px; 
    font-family: system-ui, -apple-system, sans-serif; 
}

.fields-panel { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 20px; 
    background: white; 
    padding: 25px; 
    border-radius: 8px; 
    border: 1px solid #eaeaea; 
    margin-bottom: 30px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
}

.input-group { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 24px; 
}

.input-group label { 
    font-size: 13px; 
    font-weight: 600; 
    margin-bottom: 6px; 
    color: #444; 
}

.input-group input, 
.input-group select, 
.input-group textarea { 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 5px; 
    font-size: 14px;
    font-family: inherit;
    width: 100%;
    max-width: 33.33%; /* ✨ Forces exact 1/3 structural width profile footprint */
    box-sizing: border-box;
}
/* Highlight styling for the dynamic QC conditional box */
#qcToggleGroup { 
    background: #fff9db; 
    border: 1px dashed #f59f00; 
    padding: 10px; 
    border-radius: 6px; 
}

.table-wrapper { 
    width: 100%; 
    overflow-x: auto; 
    background: white; 
    border-radius: 8px; 
    border: 1px solid #eaeaea; 
}

table { 
    width: 100%; 
    border-collapse: collapse; 
    text-align: left; 
    font-size: 14px; 
    min-width: 1200px; /* Enhanced to 1200px to ensure horizontal structure online */
    table-layout: fixed; /* Forces browser to respect precise column allocations */
}

th { 
    background: #f8f9fa; 
    color: #333; 
    font-weight: 600; 
    padding: 14px 16px; 
    border-bottom: 2px solid #eaeaea; 
}

td { 
    padding: 12px 16px; 
    border-bottom: 1px solid #eaeaea; 
    vertical-align: top; 
}

tr:hover { 
    background: #fcfcfc; 
}

.cx-name-badge { 
    font-family: monospace; 
    color: #555; 
    background: #eef2f6; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 12px; 
}

.date-input, .resume-date-input { 
    padding: 6px 10px; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    font-size: 13px; 
    width: 100%;
    max-width: 145px; /* Restricts the inputs from hogging space */
    box-sizing: border-box;
}

.resume-highlight { 
    font-weight: 600; 
    color: #0070f3; 
}

.script-textarea { 
    width: 100%; 
    min-height: 120px; 
    font-size: 13px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    padding: 8px; 
    box-sizing: border-box; 
    background: #fafafa; 
    color: #222; 
    resize: vertical; 
}

.resume-date-input { 
    border: 1px solid #0070f3; 
    background: #f0f7ff; 
    color: #0070f3; 
    font-weight: 600; 
}

.action-bar { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    margin-bottom: 30px; 
}

.factory-btn { 
    padding: 15px; 
    border: none; 
    border-radius: 6px; 
    font-size: 16px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: background 0.2s, transform 0.1s; 
    color: white; 
    text-align: center; 
}

.btn-generate-all { 
    background: #0070f3; 
}

.btn-generate-all:hover { 
    background: #0051a8; 
}

.btn-download-all { 
    background: #10b981; 
}

.btn-download-all:hover { 
    background: #059669; 
}

.factory-btn:disabled { 
    background: #999999; 
    cursor: not-allowed; 
    opacity: 0.7; 
}

.factory-btn:active:not(:disabled) { 
    transform: scale(0.99); 
}

/* Inner Table Audio Controls */
.row-audio-container { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 240px; 
}

.row-audio-container audio { 
    width: 100%; 
}

.row-status { 
    font-size: 11px; 
    font-weight: 600; 
    color: #666; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.template-grid textarea {
    resize: vertical;
    min-height: 55px; 
    box-sizing: border-box;
    line-height: 1.4;
}

.template-grid {
    display: flex;
    flex-direction: column;
}

.box-action-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 35px; /* ✨ Pushes buttons down away from voice profile selector */
}