/* Settings page (01Shared/Setup.aspx). Builds on CS/Calculator.css: same cards, rows, boxes and buttons.
   CS/Setup.css is the old look, still used by the per-user copies and InspireTemplate. */
:root {
    --area1: #0f9b9b;
    --area2: #c58a00;
    --area3: #7b52e0;
}
html.dark {
    --area1: #3cc7c7;
    --area2: #e7b23c;
    --area3: #a98bff;
}

/* Header: title and the way back, then one button per section */
.settings-head { align-items: center; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; margin-bottom: 8px; }
.settings-head h1 { font-size: 1.4rem; margin: 0; }
.settings .hint { margin: 0 0 10px; }
.section-buttons { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.section-buttons input[type=submit] { min-width: 0; text-align: left; white-space: normal; }

/* Areas: a coloured dot for each, carried onto the sections that are saved per area */
.area-picks { gap: 8px; }
.area-pick { align-items: center; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; gap: 6px; padding: 4px 12px 4px 10px; }
.area-pick::before { background: var(--brand); border-radius: 50%; content: ""; height: 10px; width: 10px; }
.area-pick-1::before { background: var(--area1); }
.area-pick-2::before { background: var(--area2); }
.area-pick-3::before { background: var(--area3); }
.area-pick:has(input:checked) { background: var(--brand-soft); border-color: var(--brand); font-weight: 600; }
/* The pill shows the choice, so the radio circle itself is hidden but still works with the keyboard */
.area-pick input[type=radio] { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.area-pick { cursor: pointer; position: relative; }
.area-pick:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-soft); }

.area-card, .area-btn { border-left-color: var(--brand) !important; border-left-width: 4px !important; }
.area-1 .area-card, .area-1 .area-btn { border-left-color: var(--area1) !important; }
.area-2 .area-card, .area-2 .area-btn { border-left-color: var(--area2) !important; }
.area-3 .area-card, .area-3 .area-btn { border-left-color: var(--area3) !important; }
.area-btn { border-left-style: solid !important; }

/* Rows: a gap where the +/- buttons sit on neighbouring rows, so the boxes line up */
.settings .row .steps-gap { width: 74px; }
.settings .cols.two .row input[type=text]:not(.name) { width: 96px; }
.lines.narrow { max-width: 520px; }
.settings .row input.name { flex: 1 1 0; min-width: 0; }
.contact .row > span:first-child { flex: 0 0 44%; }
.settings .actions { margin-top: 14px; }
.settings .sub-box .row { min-height: 40px; }
.settings .sub-box .row > :first-child { flex: 0 0 auto; min-width: 200px; }
.settings .sub-box input[type=password] { flex: 1 1 0; min-width: 0; }

/* Tables */
.fee-table input.name { width: 200px; }
.fee-table input[type=text]:not(.name) { width: 80px; }
.fee-table td { white-space: nowrap; }
.mi-table th, .mi-table td { padding: 4px 2px; text-align: center; white-space: nowrap; }
.mi-table th { font-size: .72rem; letter-spacing: 0; }
.mi-table th.group { border-bottom: 0; color: var(--ink); }
.mi-table input[type=text] { padding: 5px 2px; text-align: center; width: 54px; }
.ratio-table { max-width: 520px; }

/* Picture and logo */
.photo img { background: #fff; border: 1px solid var(--line); border-radius: 8px; display: block; height: 110px; margin-bottom: 10px; max-width: 100%; object-fit: contain; padding: 4px; width: 160px; }
.photo img.headshot-pv { object-fit: cover; padding: 0; width: 88px; }   /* my picture: a 4:5 headshot */
.photo input[type=file] { color: var(--muted); display: block; font: inherit; font-size: .85rem; max-width: 100%; }
.photo input[type=file]::file-selector-button {
    background: var(--brand-soft); border: 0; border-radius: 8px; color: var(--brand-dark); cursor: pointer; font: inherit; font-weight: 500; margin-right: 10px; padding: 7px 12px;
}

/* Long text */
.settings textarea { min-height: 130px; }

@media (max-width: 480px) {
    .settings-head input[type=submit] { width: 100%; }
    .section-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact .row { align-items: stretch; flex-direction: column; gap: 2px; padding: 6px 0; }
    .contact .row > span:first-child { flex: none; }
    .settings .row .steps-gap { display: none; }
    .settings .sub-box .row { align-items: stretch; flex-direction: column; }
}

/* Branch settings (a team's template): Apply to everyone */
.settings .apply { margin: 14px 0 18px; }
.settings .apply h3 { color: var(--ink); font-size: 1rem; margin: 2px 0 6px; }
.apply-list { border-collapse: collapse; margin: 6px 0 4px; width: 100%; }
.apply-list td { padding: 4px 12px 4px 0; vertical-align: top; width: 50%; }
.apply-list label { font-size: .92rem; }
.apply-msg { display: block; font-weight: 600; margin-top: 10px; }
.apply-msg:empty { display: none; }
.apply-msg.good { color: #1a7f45; }
.apply-msg.bad { color: var(--alert); }
html.dark .apply-msg.good { color: #6fdc9b; }
@media (max-width: 600px) { .apply-list td { display: block; width: auto; } }