/* ---------------------------------------------------------------------
   SoapCalc design tokens

   Palette: dark plum, teal, khaki, mustard, terracotta - a curated
   5-colour set with each colour doing one distinct job (plum = the
   hero batch panel, mustard = step numbers, terracotta = primary
   actions, teal = secondary/interactive, khaki = warm neutral tints).

   Layout: a tight 2-column grid of comparably-sized boxes so most of
   the tool is visible without scrolling, rather than one long column
   or an oversized single hero panel.
------------------------------------------------------------------------ */

:root {
    --plum: #4A4258;
    --plum-dark: #363048;
    --teal: #1E8A8C;
    --range-ok: #3E9B4F;
    --range-under: #E8998A;
    --range-over: #B4482D;
    --teal-dark: #166B6D;
    --teal-tint: #DEF0EF;
    --khaki: #DAD8A2;
    --khaki-bg: #FAF9F0;
    --mustard: #C9A430;
    --mustard-dark: #A88622;
    --terracotta: #D35B3C;
    --terracotta-dark: #B4482D;
    --terracotta-tint: #FBE6DF;
    --ink: #2B2733;
    --ink-soft: #6B6577;
    --line: #E7E2C9;
    --card: #FFFFFF;
    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(43, 39, 51, 0.05), 0 4px 14px rgba(43, 39, 51, 0.06);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--khaki-bg);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Space Grotesk", -apple-system, sans-serif;
    color: var(--plum);
    letter-spacing: -0.01em;
}

a { color: var(--teal-dark); }

:focus-visible {
    outline: 2px solid var(--terracotta);
    outline-offset: 2px;
}

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 22px; }

/* --- Header -------------------------------------------------------------- */

.site-header {
    background: var(--plum);
    padding: 22px 0;
}

.site-header-inner { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.site-header h1 { margin: 0; font-size: 1.4rem; font-weight: 700; color: #fff; }
.site-header .tagline { margin: 0; color: #C6BFD1; font-size: 0.85rem; }
.site-header .tagline a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.site-header .tagline a:hover { color: var(--mustard); }
.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.link-btn:hover { color: var(--mustard); }

/* --- Dashboard grid: tight 2 columns, most of the tool visible at once - */

/* Two independent columns, not a shared grid: with named grid areas,
   a row's height is locked to its tallest cell, so the right column
   can't move up when the left column (e.g. more oil rows added) grows
   taller - it just leaves a gap. Two flex columns each stack purely by
   their own content height, so "Ingredient costs" always sits directly
   under "Your batch" regardless of how long the oil list gets. */
.dashboard {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 0 44px;
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

@media (max-width: 780px) {
    .dashboard { flex-direction: column; }
}

/* --- Cards ---------------------------------------------------------- */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow);
}

.card h2 {
    margin: 0 0 12px;
    font-size: 1.02rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mustard);
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.hint { color: var(--ink-soft); font-size: 0.84rem; margin-top: 4px; margin-bottom: 10px; }

/* --- Batch panel: the one dark hero element ----------------------------- */

.batch-card {
    background: var(--plum);
    color: #fff;
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow);
}

.batch-card h2 { color: #fff; font-size: 1.02rem; margin: 0 0 3px; }
.batch-card .batch-sub { color: #B9B1C7; font-size: 0.8rem; margin: 0 0 14px; }

#target-progress { margin-bottom: 14px; }

.target-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #C6BFD1;
    margin-bottom: 5px;
}

.target-progress-label strong { color: #fff; }

.target-progress-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    overflow: hidden;
}

.target-progress-fill {
    height: 100%;
    background: var(--mustard);
    border-radius: 5px;
    transition: width 0.15s ease;
}

.target-progress-fill.over-target { background: var(--terracotta); }

.batch-figures { display: grid; gap: 8px; margin-bottom: 14px; }

.batch-figure {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.batch-figure:last-child { border-bottom: none; padding-bottom: 0; }
.batch-figure .label { font-size: 0.82rem; color: #C6BFD1; }
.batch-figure .value { font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--mustard); }

.batch-card .btn { width: 100%; margin-top: 6px; }
.batch-card .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.24); }
.batch-card .btn-secondary:hover { background: rgba(255,255,255,0.2); border-color: #fff; }

/* --- Collapsible cards (details/summary) -------------------------------- */

.card-details { padding: 0; }

.card-summary {
    list-style: none;
    cursor: pointer;
    padding: 17px 20px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--plum);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.card-summary::-webkit-details-marker { display: none; }

.card-summary::after {
    content: '\2303';
    display: inline-block;
    transform: rotate(180deg);
    color: var(--teal-dark);
    font-size: 0.8rem;
    transition: transform 0.15s ease;
    margin-left: auto;
}

.card-details[open] > .card-summary::after { transform: rotate(0deg); }

.card-details > .hint,
.card-details > select,
.card-details > #oil-properties-table,
.card-details > .settings-grid,
.card-details > #cost-breakdown {
    padding-left: 20px;
    padding-right: 20px;
}

.card-details > #oil-properties-table,
.card-details > #cost-breakdown:not(:empty) { padding-bottom: 18px; }
.card-details > .hint { margin-top: -4px; }

/* --- Oil rows ------------------------------------------------------- */

#oil-rows { margin-top: 10px; }

.oil-row {
    display: grid;
    grid-template-columns: 1fr 68px 50px 88px 22px;
    gap: 7px;
    align-items: center;
    margin-bottom: 9px;
}

.oil-row select,
.oil-row input[type="number"] {
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    width: 100%;
    background: var(--card);
    color: var(--ink);
}

.oil-row select:focus, .oil-row input:focus { border-color: var(--teal); }

.oil-percent-label { color: var(--ink-soft); font-size: 0.88rem; text-align: center; }
.oil-computed { font-size: 0.78rem; color: var(--ink-soft); text-align: right; }

.oil-cost-field {
    grid-column: 1 / -1;
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: -2px 0 7px;
    padding-left: 2px;
}

.costs-enabled .oil-cost-field { display: flex; }

.oil-cost-field select,
.oil-cost-field input {
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--card);
}

.oil-cost-field .oil-price-mode { max-width: 150px; }
.oil-cost-field .oil-price { max-width: 80px; }
.oil-cost-field .oil-price-unit { max-width: 56px; }
.oil-cost-field .oil-pack-cost { max-width: 80px; }
.oil-cost-field .oil-pack-size { max-width: 62px; }
.oil-cost-field .oil-pack-unit { max-width: 56px; }

.oil-price-unit-mode { display: flex; align-items: center; gap: 5px; }
.oil-price-unit-mode span { font-size: 0.78rem; color: var(--ink-soft); }

.oil-price-pack-mode { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.oil-price-pack-mode span { font-size: 0.78rem; color: var(--ink-soft); }
.unit-optional-tag { font-style: italic; }

.oil-cost-computed { font-size: 0.78rem; color: var(--ink-soft); }

.remove-oil-row {
    background: none;
    border: none;
    color: var(--terracotta-dark);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.cost-shortcut {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--ink-soft);
    cursor: pointer;
}

.cost-shortcut input { margin-top: 3px; accent-color: var(--teal); }

/* --- Buttons ------------------------------------------------------------ */

.btn {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--terracotta);
    background: var(--terracotta);
    color: #fff;
    font-size: 0.87rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.btn:hover { background: var(--terracotta-dark); border-color: var(--terracotta-dark); }

.btn-secondary { background: var(--teal-tint); color: var(--teal-dark); border-color: var(--teal-tint); }
.btn-secondary:hover { background: #C7E6E4; border-color: var(--teal); }

/* --- Fields --------------------------------------------------------- */

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 16px 24px;
}

.settings-grid label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

.settings-grid input,
.settings-grid select {
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--card);
    width: 100%;
}

.settings-grid input:focus, .settings-grid select:focus { border-color: var(--teal); }

.input-with-unit { display: flex; gap: 6px; }
.input-with-unit input { flex: 1; }
.input-with-unit select { width: 70px; }

#total-weight-field { margin-top: 0; }

/* --- Results -------------------------------------------------------- */

#results dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin: 0; }
#results dt { color: var(--ink-soft); font-size: 0.88rem; }
#results dd { margin: 0; font-weight: 700; text-align: right; font-size: 0.9rem; }
#results dd .cost-total-value, #cost-breakdown dd .cost-total-value { color: var(--teal-dark); font-size: 1.05em; }

#cost-breakdown dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin: 14px 0 0; }
#cost-breakdown dt { color: var(--ink-soft); }
#cost-breakdown dd { margin: 0; font-weight: 700; text-align: right; }

/* --- Oil properties (One / All) table --------------------------------- */

.oil-props-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.oil-props-table th, .oil-props-table td { padding: 6px 7px; border-bottom: 1px solid var(--line); text-align: right; }
.oil-props-table th:first-child, .oil-props-table td:first-child { text-align: left; color: var(--ink-soft); }
.oil-props-table .section-row td { padding-top: 12px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line); }
.oil-props-table .out-of-range { color: var(--terracotta-dark); font-weight: 700; }

#oil-lookup-select { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 12px; background: var(--card); }

.oil-notes { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 0.82rem; }

#similar-oils {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

#similar-oils .similar-oils-label {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.similar-oil-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--teal-tint);
    color: var(--teal-dark);
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 999px;
    margin: 0 6px 6px 0;
    cursor: pointer;
    border: none;
}

.similar-oil-chip:hover { background: #C7E6E4; }
.similar-oil-chip .match-pct { color: var(--ink-soft); font-size: 0.72rem; }

/* --- Save / load ------------------------------------------------------ */

.recipe-name-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.86rem;
    color: var(--ink-soft);
    max-width: 300px;
    margin-bottom: 14px;
}

.recipe-name-field input { padding: 8px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }

.io-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.file-upload-btn { position: relative; overflow: hidden; }
.file-upload-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* --- Recipe summary sheet ---------------------------------------------- */

.summary-sheet-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-print-options { display: flex; gap: 14px; font-size: 0.82rem; color: var(--ink-soft); }

#summary-content h1 { font-size: 1.25rem; margin-bottom: 4px; font-family: "Space Grotesk", sans-serif; color: var(--plum); }
#summary-content h2 { margin-top: 18px; margin-bottom: 8px; font-size: 1rem; color: var(--plum); }

.summary-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }

.summary-info-table, .summary-item-table, .summary-quality-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-bottom: 14px;
}

.summary-info-table td, .summary-item-table th, .summary-item-table td,
.summary-quality-table th, .summary-quality-table td { padding: 6px 10px; border: 1px solid var(--line); }

.summary-info-table td:first-child { color: var(--ink-soft); }
.summary-info-table td:last-child { text-align: right; font-weight: 700; }
.summary-info-table td.emphasise { color: var(--teal-dark); font-size: 1.02em; }

.summary-item-table th { background: var(--terracotta-tint); text-align: left; }
.summary-item-table td:not(:first-child) { text-align: right; }

.row-water td { background: var(--teal-tint); }
.row-lye td { background: var(--terracotta-tint); }
.row-oils td { background: #FBF3D9; }
.row-fragrance td { background: #EAE6F2; }
.row-total td, .row-totals td { background: #EDE9F0; font-weight: 700; }
.row-oil-item:nth-child(even) td { background: #FBFAF3; }

.summary-quality-table th { background: var(--teal-tint); text-align: left; }
.summary-quality-table td.out-of-range { color: var(--terracotta-dark); font-weight: 700; }

.summary-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.range-bar-track {
    display: inline-block;
    position: relative;
    width: 72px;
    height: 9px;
    background: var(--line);
    border-radius: 5px;
    overflow: hidden;
    vertical-align: middle;
    margin-left: 6px;
}

.range-bar-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(62, 155, 79, 0.22);
}

.range-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
}

#summary-content textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.88rem;
}

.print-plain table tr td, .print-plain table tr th { background: none !important; }
.print-no-charts .range-bar-track { display: none; }

@media (max-width: 600px) {
    .summary-info-grid, .summary-two-col { grid-template-columns: 1fr; }
}

.summary-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 39, 51, 0.6);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 30px 16px;
    overflow-y: auto;
    z-index: 100;
}

.summary-overlay[hidden] { display: none; }

.summary-sheet {
    position: relative;
    background: var(--card);
    border-radius: var(--radius);
    max-width: 620px;
    width: 100%;
    padding: 24px;
}

.summary-close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 4px 8px;
}

.summary-close-x:hover { color: var(--ink); }

@media print {
    body > *:not(.summary-overlay) { display: none !important; }
    .summary-overlay { position: static; background: none; padding: 0; display: block !important; }
    .summary-sheet { box-shadow: none; max-width: 100%; }
    .no-print { display: none !important; }
}

/* --- Footer -------------------------------------------------------------- */

.site-footer { padding: 4px 0 36px; color: var(--ink-soft); font-size: 0.78rem; }

/* --- Legacy classes still used by the admin pages ----------------------- */

body.admin-page { background: var(--khaki-bg); }

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.panel h2 { margin-top: 0; font-size: 1.05rem; font-weight: 700; color: var(--plum); }

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 600px) {
    .card, .panel { padding: 16px 14px; }
    .card-summary { padding: 15px 14px; }
    .site-header { padding: 18px 0; }
    .quality-bar-row { grid-template-columns: 90px 1fr 40px; font-size: 0.8rem; }
    .io-buttons { flex-direction: column; }
    .io-buttons .btn { width: 100%; text-align: center; }
    .field-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .oil-row { grid-template-columns: 1fr 52px 44px 64px 20px; }
    .settings-grid { grid-template-columns: 1fr; }
}