/* DLS Calculator — Foxiz theme integration
 *
 * Uses Foxiz's own CSS custom properties (--rb-*) so colors, fonts, and borders
 * inherit from the active Foxiz scheme. Dark mode is driven by Foxiz's own
 * dark-mode class/attribute hooks, with sensible fallbacks if the theme
 * variables are not present.
 */

/* ---- Local fallback variables (used only when Foxiz vars are absent) ---- */
.dls-calc-wrap {
    --dls-bg: var(--rb-body-bg, #ffffff);
    --dls-surface: var(--rb-alt-bg, #f7f7f5);
    --dls-surface-2: var(--rb-box-bg, #fafafa);
    --dls-text: var(--rb-body-color, #1a1a1a);
    --dls-text-muted: var(--rb-meta-color, #666666);
    --dls-text-soft: var(--rb-meta-color, #888888);
    --dls-border: var(--rb-border-color, #e5e5e5);
    --dls-border-strong: var(--rb-border-color-2, #d1d1d1);
    --dls-accent: var(--rb-primary-color, #2a6df4);
    --dls-accent-hover: var(--rb-primary-hover-color, #1e57d2);
    --dls-accent-contrast: var(--rb-primary-inverse-color, #ffffff);
    --dls-success: #0a7a44;
    --dls-danger: #c53030;
    --dls-font: var(--rb-body-font, inherit);
    --dls-heading-font: var(--rb-heading-font, inherit);
    --dls-radius: 8px;
    --dls-radius-lg: 10px;
}

/* ---- Dark mode overrides ---- */
/* Foxiz uses `.rb-dark-mode` on <body> and/or a `data-theme="dark"` attribute. */
.rb-dark-mode .dls-calc-wrap,
[data-theme="dark"] .dls-calc-wrap,
.dls-calc-wrap[data-dls-dark="1"] {
    --dls-bg: var(--rb-body-bg, #1a1a1a);
    --dls-surface: var(--rb-alt-bg, #242424);
    --dls-surface-2: var(--rb-box-bg, #2a2a2a);
    --dls-text: var(--rb-body-color, #e8e8e8);
    --dls-text-muted: var(--rb-meta-color, #a8a8a8);
    --dls-text-soft: var(--rb-meta-color, #888888);
    --dls-border: var(--rb-border-color, #333333);
    --dls-border-strong: var(--rb-border-color-2, #3f3f3f);
    --dls-success: #3ec07a;
    --dls-danger: #ff6b6b;
}

/* ---- System-level dark mode fallback (when Foxiz isn't signalling) ---- */
@media (prefers-color-scheme: dark) {
    .dls-calc-wrap:not([data-dls-dark="0"]) {
        --dls-bg: var(--rb-body-bg, #1a1a1a);
        --dls-surface: var(--rb-alt-bg, #242424);
        --dls-surface-2: var(--rb-box-bg, #2a2a2a);
        --dls-text: var(--rb-body-color, #e8e8e8);
        --dls-text-muted: var(--rb-meta-color, #a8a8a8);
        --dls-text-soft: var(--rb-meta-color, #888888);
        --dls-border: var(--rb-border-color, #333333);
        --dls-border-strong: var(--rb-border-color-2, #3f3f3f);
        --dls-success: #3ec07a;
        --dls-danger: #ff6b6b;
    }
}

/* ---- Container ---- */
.dls-calc-wrap {
    font-family: var(--dls-font);
    color: var(--dls-text);
    background: var(--dls-bg);
    max-width: 860px;
    margin: 1.5rem auto;
    padding: 1.75rem;
    border: 1px solid var(--dls-border);
    border-radius: var(--dls-radius-lg);
    box-sizing: border-box;
    line-height: 1.5;
}

.dls-calc-wrap *,
.dls-calc-wrap *::before,
.dls-calc-wrap *::after {
    box-sizing: border-box;
}

/* ---- Typography ---- */
.dls-calc-title {
    font-family: var(--dls-heading-font);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--dls-text);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.dls-calc-note {
    font-size: 13px;
    color: var(--dls-text-muted);
    margin: 0 0 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dls-border);
}

.dls-calc-h {
    font-family: var(--dls-heading-font);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 0.9rem;
    color: var(--dls-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dls-calc-section {
    margin-bottom: 1.75rem;
}

/* ---- Form rows & inputs ---- */
.dls-calc-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}

.dls-calc-field label {
    display: block;
    font-size: 12px;
    color: var(--dls-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dls-calc-wrap input[type="number"] {
    width: 100%;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--dls-border-strong);
    border-radius: var(--dls-radius);
    background: var(--dls-bg);
    color: var(--dls-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.dls-calc-wrap input[type="number"]::placeholder {
    color: var(--dls-text-soft);
    opacity: 0.7;
}

.dls-calc-wrap input[type="number"]:focus {
    outline: none;
    border-color: var(--dls-accent);
    box-shadow: 0 0 0 3px rgba(42, 109, 244, 0.15);
}

.dls-calc-wrap input[type="number"]::-webkit-outer-spin-button,
.dls-calc-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---- Table ----
 * IMPORTANT: Foxiz theme injects global table styles that force a dark
 * background on <thead> / <th>. We override those here to keep the header
 * transparent and in sync with our calculator surface.
 */
.dls-calc-table-wrap {
    overflow-x: auto;
    margin-bottom: 10px;
    border: 1px solid var(--dls-border);
    border-radius: var(--dls-radius);
    background: transparent;
}

.dls-calc-wrap .dls-calc-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 520px;
    background: transparent;
    margin: 0;
}

.dls-calc-wrap .dls-calc-tbl thead {
    background: transparent !important;
}

.dls-calc-wrap .dls-calc-tbl thead tr {
    background: transparent !important;
    border: none !important;
}

.dls-calc-wrap .dls-calc-tbl th {
    text-align: left;
    font-weight: 600;
    color: var(--dls-text-muted) !important;
    padding: 10px 10px;
    border: none;
    border-bottom: 1px solid var(--dls-border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--dls-surface) !important;
    background-color: var(--dls-surface) !important;
}

.dls-calc-wrap .dls-calc-tbl tbody tr {
    background: transparent !important;
    border: none !important;
}

.dls-calc-wrap .dls-calc-tbl td {
    padding: 8px 6px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid var(--dls-border);
    background: transparent !important;
    color: var(--dls-text);
}

.dls-calc-wrap .dls-calc-tbl tbody tr:last-child td {
    border-bottom: none;
}

.dls-calc-tbl td:first-child,
.dls-calc-tbl th:first-child { padding-left: 12px; width: 25%; }
.dls-calc-tbl td:nth-child(2),
.dls-calc-tbl th:nth-child(2) { width: 22%; }
.dls-calc-tbl td:nth-child(3),
.dls-calc-tbl th:nth-child(3) { width: 22%; }
.dls-calc-tbl td:nth-child(4),
.dls-calc-tbl th:nth-child(4) { width: 21%; }
.dls-calc-tbl td:last-child,
.dls-calc-tbl th:last-child { width: 10%; text-align: center; padding-right: 12px; }

/* Empty table state — show a friendly message when no rows exist */
.dls-calc-wrap .dls-calc-tbl tbody:empty {
    display: block;
    padding: 14px 12px;
    font-size: 12px;
    color: var(--dls-text-soft);
    font-style: italic;
}

.dls-calc-wrap .dls-calc-tbl tbody:empty::before {
    content: "No interruptions added yet. Click \"Add row\" to record a rain break.";
}

/* ---- Buttons (delete / add / action) ---- */
.dls-calc-del {
    background: transparent;
    border: 1px solid var(--dls-border-strong);
    border-radius: var(--dls-radius);
    width: 30px;
    height: 30px;
    padding: 0;
    cursor: pointer;
    color: var(--dls-text-muted);
    font-size: 18px;
    line-height: 1;
    transition: all 0.15s ease;
}

.dls-calc-del:hover {
    background: var(--dls-surface);
    border-color: var(--dls-danger);
    color: var(--dls-danger);
}

.dls-calc-addbtn {
    background: transparent;
    border: 1px dashed var(--dls-border-strong);
    border-radius: var(--dls-radius);
    padding: 9px 16px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    color: var(--dls-text-muted);
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.15s ease;
}

.dls-calc-addbtn:hover {
    background: var(--dls-surface);
    border-color: var(--dls-accent);
    border-style: solid;
    color: var(--dls-accent);
}

/* ---- Output cards ---- */
.dls-calc-output {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dls-border);
}

.dls-calc-card {
    background: var(--dls-surface);
    border: 1px solid var(--dls-border);
    border-radius: var(--dls-radius);
    padding: 1rem 1.1rem;
    transition: border-color 0.15s ease;
}

.dls-calc-card:hover {
    border-color: var(--dls-border-strong);
}

.dls-calc-card-label {
    font-size: 11px;
    color: var(--dls-text-muted);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.dls-calc-card-value {
    font-family: var(--dls-heading-font);
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--dls-text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.dls-calc-card-sub {
    font-size: 12px;
    color: var(--dls-text-soft);
    margin: 5px 0 0;
}

.dls-calc-status {
    font-size: 14px;
    color: var(--dls-text-muted);
    margin: 14px 0 0;
    font-weight: 500;
}

.dls-calc-status.ahead {
    color: var(--dls-success);
}

.dls-calc-status.behind {
    color: var(--dls-danger);
}

/* ---- Divider ---- */
.dls-calc-hr {
    border: 0;
    border-top: 1px solid var(--dls-border);
    margin: 1.75rem 0;
}

/* ---- Action buttons (Calculate / Reset) ---- */
.dls-calc-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dls-calc-btn {
    padding: 11px 22px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--dls-radius);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dls-calc-calc {
    background: var(--dls-accent);
    color: var(--dls-accent-contrast);
    border-color: var(--dls-accent);
}

.dls-calc-calc:hover {
    background: var(--dls-accent-hover);
    border-color: var(--dls-accent-hover);
    transform: translateY(-1px);
}

.dls-calc-reset {
    background: transparent;
    color: var(--dls-text);
    border-color: var(--dls-border-strong);
}

.dls-calc-reset:hover {
    background: var(--dls-surface);
    border-color: var(--dls-text-muted);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .dls-calc-wrap {
        padding: 1.25rem;
        margin: 1rem auto;
    }
    .dls-calc-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .dls-calc-card-value {
        font-size: 22px;
    }
    .dls-calc-title {
        font-size: 20px;
    }
    .dls-calc-btn {
        flex: 1;
    }
}