/* ============================================================================
 * brand-tables.css — the ShowMyIP signature table skin, sitewide.
 * ----------------------------------------------------------------------------
 * Values copied verbatim from the LIVE production homepage (.iptab), computed
 * in Chrome 2026-06-09, so the look is byte-faithful to the brand:
 *   - uniform warm amber cells  #ffe6b9  (NO zebra striping)
 *   - full 1px grid border on every cell  #d0b179  (not bottom-only)
 *   - 5px cell padding, 14px Lucida Sans Unicode, black cell text
 *   - 4px outer radius, border-collapse: separate, 20px bottom margin
 * Header rows on tool tables (which the homepage table lacks) get the darker
 * tan #f7d7a0 so a <thead> still reads as a header — everything else matches.
 *
 * The original rules lived only in style.min.css, which the local build
 * dropped; the pending deploy would have stripped the brand from production.
 * Per the owner's 2026-06-09 direction this restores it AND extends the same
 * skin to every data table inside #content for consistency. Excluded: the
 * logged-in dashboard (own app chrome) and client-branded share reports.
 * Loaded last in head.php.
 * ========================================================================= */

/* ---- The homepage signature (exact live recipe) --------------------------- */
.iptab {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d0b179;
    border-radius: 4px;
    margin-bottom: 20px;
    overflow: hidden;
    color: #909090;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
}
.iptab td,
.iptab th {
    padding: 5px;
    border: 1px solid #d0b179;
    background: #ffe6b9;
    color: #000;
    text-align: left;
    vertical-align: baseline;
    font-weight: 400;
}
.iptab th {
    /* The homepage table has no header row; if a variant uses one, keep it
     * distinct without breaking the uniform body. */
    background: #f7d7a0;
    font-weight: 700;
    color: #333;
}

@media (max-width: 768px) {
    .iptab { display: block; overflow-x: auto; }
    /* legacy white-space:nowrap deliberately omitted — it caused 375px overflow */
}

/* ---- Same signature on every data table in the content area --------------- */
#content table.table,
#content .result-card table,
#content .table-responsive > table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #d0b179;
    border-radius: 4px;
    overflow: hidden;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#content table.table td,
#content table.table th,
#content .result-card table td,
#content .result-card table th {
    padding: 7px 9px;            /* a touch over the homepage's 5px for denser tool data */
    border: 1px solid #d0b179;
    background: #ffe6b9;
    color: #1c1812;
    text-align: left;
}
#content table.table thead th,
#content .result-card table thead th {
    background: #f7d7a0;
    color: #333;
    font-weight: 700;
}

/* ---- Dark mode: same uniform grid, warm deep-amber ------------------------ */
html[data-theme="dark"] .iptab,
html[data-theme="dark"] #content table.table,
html[data-theme="dark"] #content .result-card table { border-color: #6b5836; }
html[data-theme="dark"] .iptab td, html[data-theme="dark"] .iptab th,
html[data-theme="dark"] #content table.table td, html[data-theme="dark"] #content table.table th,
html[data-theme="dark"] #content .result-card table td, html[data-theme="dark"] #content .result-card table th {
    background: #3a301c;
    border-color: #6b5836;
    color: #efe7d8;
}
html[data-theme="dark"] .iptab th,
html[data-theme="dark"] #content table.table thead th,
html[data-theme="dark"] #content .result-card table thead th {
    background: #4a3b22;
    color: #f3ead9;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .iptab,
    html:not([data-theme="light"]) #content table.table,
    html:not([data-theme="light"]) #content .result-card table { border-color: #6b5836; }
    html:not([data-theme="light"]) .iptab td, html:not([data-theme="light"]) .iptab th,
    html:not([data-theme="light"]) #content table.table td, html:not([data-theme="light"]) #content table.table th,
    html:not([data-theme="light"]) #content .result-card table td, html:not([data-theme="light"]) #content .result-card table th {
        background: #3a301c;
        border-color: #6b5836;
        color: #efe7d8;
    }
    html:not([data-theme="light"]) .iptab th,
    html:not([data-theme="light"]) #content table.table thead th,
    html:not([data-theme="light"]) #content .result-card table thead th {
        background: #4a3b22;
        color: #f3ead9;
    }
}

/* ---- Brand logo theme swap -------------------------------------------------
 * showmyip_logo.png for light, showmyip_dark_logo.png for dark. CSS picks one. */
#logo .logo-dark { display: none; }
html[data-theme="dark"] #logo .logo-light { display: none; }
html[data-theme="dark"] #logo .logo-dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) #logo .logo-light { display: none; }
    html:not([data-theme="light"]) #logo .logo-dark { display: inline-block; }
}
