/* ---------------------------------------------------------------------------
   The public tax lookup: holding tax, business tax and the house owner's
   business tax.

   The union collects three taxes and a citizen holds a notice for exactly one
   of them, so the page asks which before it answers — one tab per tax, each
   its own URL, so a result can be bookmarked and the QR on a receipt can open
   the right one. Everything reads off tokens.css, which is the last word on
   the site's palette; nothing here invents a colour.
--------------------------------------------------------------------------- */

.ts {
    --ts-ok: #0f7a43;
    --ts-ok-soft: #e8f6ee;
    --ts-due: #8a5a00;
    --ts-due-soft: #fdf4e3;

    padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 clamp(2rem, 1.5rem + 3vw, 3.5rem);
    background: var(--ud-tint-steel);
    color: var(--ud-ink);
}

.ts__inner {
    max-width: 1000px;
    margin: 0 auto;
    padding-inline: 16px;
}

.ts-card {
    background: var(--ud-surface);
    border: 1px solid var(--ud-line);
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(18, 75, 101, .06);
}

/* ---- page head ---------------------------------------------------------- */

.ts-head {
    text-align: center;
    margin-bottom: clamp(1rem, .8rem + 1vw, 1.75rem);
}

.ts-head h1 {
    font-size: var(--ud-text-2xl);
    font-weight: 700;
    color: var(--ud-primary);
    margin: 0 0 .4rem;
    line-height: var(--ud-leading-tight);
}

.ts-head p {
    margin: 0 auto;
    max-width: 62ch;
    color: var(--ud-ink-muted);
    font-size: var(--ud-text-base);
}

/* ---- the three taxes ---------------------------------------------------- */

.ts-tabs__label {
    display: block;
    text-align: center;
    font-size: var(--ud-text-sm);
    color: var(--ud-ink-muted);
    margin-bottom: .6rem;
}

.ts-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .6rem;
    margin-bottom: 1rem;
}

/*
 * A tab is a link, not a script: each tax has its own URL so a result can be
 * shared, reloaded and reached by the QR on a receipt.
 */
.ts-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-height: var(--ud-tap);
    padding: .7rem .85rem;
    border: 1px solid var(--ud-line);
    border-radius: 14px;
    background: var(--ud-surface);
    color: var(--ud-ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.ts-tab:hover,
.ts-tab:focus-visible {
    border-color: var(--ud-accent);
    color: var(--ud-primary);
    box-shadow: 0 2px 8px rgba(18, 75, 101, .1);
}

.ts-tab b {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: var(--ud-text-base);
    font-weight: 700;
    line-height: 1.3;
}

.ts-tab small {
    color: var(--ud-ink-muted);
    font-size: var(--ud-text-xs);
    line-height: 1.35;
}

.ts-tab.is-active {
    background: var(--ud-primary);
    border-color: var(--ud-primary);
    color: #ffffff;
}

.ts-tab.is-active small {
    color: rgba(255, 255, 255, .82);
}

/* How many records the other two taxes hold for the same holding number —
   without it a visitor on the wrong tab concludes there is nothing at all. */
.ts-tab__count {
    position: absolute;
    top: .5rem;
    inset-inline-end: .5rem;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--ud-green);
    color: #ffffff;
    font-size: var(--ud-text-xs);
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

.ts-tab.is-active .ts-tab__count {
    background: #ffffff;
    color: var(--ud-primary);
}

/* ---- the search panel --------------------------------------------------- */

.ts-search {
    padding: clamp(1rem, .85rem + .8vw, 1.5rem);
}

.ts-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.2fr) auto;
    gap: .6rem;
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ts-field label {
    font-size: var(--ud-text-sm);
    font-weight: 600;
    color: var(--ud-ink-muted);
}

.ts-form .form-select,
.ts-form .form-control {
    min-height: var(--ud-tap);
    border-radius: 10px;
    border-color: var(--ud-line);
    font-size: 16px;
}

.ts-form .form-select:focus,
.ts-form .form-control:focus {
    border-color: var(--ud-accent);
    box-shadow: 0 0 0 .2rem rgba(51, 154, 211, .25);
}

.ts-submit {
    display: flex;
    align-items: flex-end;
}

.ts-submit .btn {
    min-height: var(--ud-tap);
    border-radius: 10px;
    padding-inline: 1.6rem;
    background: var(--ud-primary);
    border-color: var(--ud-primary);
    color: #ffffff;
    font-weight: 700;
    white-space: nowrap;
}

.ts-submit .btn:hover,
.ts-submit .btn:focus-visible {
    background: var(--ud-primary-dark);
    border-color: var(--ud-primary-dark);
    color: #ffffff;
}

.ts-hint {
    margin: .8rem 0 0;
    font-size: var(--ud-text-sm);
    color: var(--ud-ink-muted);
}

.ts-hint i {
    color: var(--ud-accent);
}

/* ---- one taxpayer's record ---------------------------------------------- */

.ts-result {
    margin-top: 1.1rem;
    overflow: hidden;
}

.ts-result__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--ud-line);
}

.ts-type {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--ud-tint-green);
    color: var(--ud-green);
    font-size: var(--ud-text-xs);
    font-weight: 700;
}

.ts-name {
    margin: .4rem 0 0;
    font-size: var(--ud-text-lg);
    font-weight: 700;
}

.ts-meta {
    color: var(--ud-ink-muted);
    font-size: var(--ud-text-sm);
}

.ts-figs {
    display: flex;
    gap: 1.5rem;
    text-align: end;
}

.ts-figs strong {
    display: block;
    font-size: var(--ud-text-lg);
}

.ts-figs span {
    color: var(--ud-ink-muted);
    font-size: var(--ud-text-xs);
}

.ts-due {
    color: var(--ts-due);
}

.ts-clear {
    color: var(--ts-ok);
}

/* ---- year by year ------------------------------------------------------- */

.ts-years {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    padding: 1.1rem 1.25rem;
}

.ts-year {
    padding: .7rem .85rem;
    border-radius: 12px;
    border: 1px solid var(--ud-line);
    font-size: var(--ud-text-sm);
}

.ts-year b {
    display: block;
    font-size: var(--ud-text-base);
}

.ts-year small {
    font-weight: 700;
}

.ts-year.is-paid {
    background: var(--ts-ok-soft);
    border-color: #b7e4c7;
}

.ts-year.is-paid small {
    color: var(--ts-ok);
}

.ts-year.is-due {
    background: var(--ts-due-soft);
    border-color: #f0d9a8;
}

.ts-year.is-due small {
    color: var(--ts-due);
}

.ts-note {
    padding: .8rem 1.25rem;
    background: var(--ts-due-soft);
    color: var(--ts-due);
    font-size: var(--ud-text-sm);
}

/* ---- nothing to show ---------------------------------------------------- */

.ts-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--ud-ink-muted);
    font-size: var(--ud-text-base);
}

.ts-empty i {
    display: block;
    margin-bottom: .6rem;
    font-size: 2.2rem;
    color: #b9c6bf;
}

.ts-empty a {
    color: var(--ud-primary);
    font-weight: 700;
}

.ts-foot {
    margin: 1.1rem 0 0;
    text-align: center;
    font-size: var(--ud-text-xs);
    color: var(--ud-ink-muted);
}

/* ---- phones ------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .ts-tabs {
        grid-template-columns: 1fr;
    }

    .ts-tab {
        flex-direction: row;
        align-items: center;
        gap: .6rem;
        padding-inline-end: 3rem;
    }

    .ts-tab b {
        flex: 0 0 auto;
    }

    .ts-tab small {
        display: none;
    }

    .ts-form {
        grid-template-columns: 1fr;
    }

    .ts-submit .btn {
        width: 100%;
    }

    .ts-figs {
        width: 100%;
        justify-content: space-between;
        text-align: start;
    }
}