/* ============================================================================
   html-table-generator.css - HTML Table Generator tool styles
   ============================================================================
   Loaded by:  webdev-tools/html-table-generator.php
   Purpose:    Scoped styles for the live editable table grid (cell borders,
               header/footer tints, focus ring while typing, generous editing
               area) and this tool's option panels (1px wavy underline, light
               checkbox labels, four-cards-per-row styling grid). All other
               styling of this tool comes from tool-input.css (config panels,
               drop zone, buttons), code-input.css + prism.min.css (syntax
               colored code output) and templatemo.css.
   Load order: Loaded AFTER tool-input.css.
   ============================================================================ */

/* The live editor area: card look from .config-panel; the table inside is a
   genuine HTML table so the preview matches the markup being generated.
   A generous min-height keeps the editing area roomy at the default 4x4. */
.table-editor-wrap {
    overflow-x: auto;
    border: 2px dashed #adb5bd;
    border-radius: 10px;
    padding: 12px;
    background-color: #f8f9fa;
    min-height: 420px;
}

.table-editor {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
}

.table-editor th,
.table-editor td {
    border: 1px solid #d7dde5;
    padding: 12px 14px;
    min-width: 110px;
    text-align: left;
    font-size: 16px;
    background-color: #ffffff;
}

.table-editor th {
    background-color: #eef2fb;
    font-weight: 700;
}

/* Emitting a tfoot from the last row: give it a visible footer tint. */
.table-editor tfoot td {
    background-color: #f1f4fa;
    font-weight: 600;
}

/* The cell being typed in gets a clear focus mark. */
.table-editor [contenteditable]:focus {
    outline: 2px solid #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

/* Thin 1px wavy underline inside this tool's container only; the shared
   .underline-wavy (templatemo.css) keeps its default thickness elsewhere. */
.input-container .underline-wavy {
    text-decoration: underline wavy #2196f3;
    text-decoration-thickness: 1px;
}

/* Structure checkboxes: lighter than the default 700 of the shared
   .config-card check labels, so the hints read as secondary text. */
.input-container .config-card .form-check .form-check-label {
    font-weight: 500;
    color: #5a6b82;
}

/* Styling panel: exactly four cards per row (eight cards total), stepping
   down to 2 and 1 columns on smaller screens. Opt-in via config-grid-4; the
   shared .config-grid auto-fit rule in tool-input.css is untouched. */
.input-container .config-grid.config-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media only screen and (max-width: 1199px) {
    .input-container .config-grid.config-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575px) {
    .input-container .config-grid.config-grid-4 {
        grid-template-columns: 1fr;
    }
}