/* =========================================================
   HORIZON BEE AFRICA — FORAGERS
   1. The Foragers tab on the dashboard (js/foragers.js)
   2. The admin page /account/foragers (account/foragers-admin.js)
   Uses the colours of account.css.
   ========================================================= */


/* ---------------------------------------------------------
   1. DASHBOARD TAB
   --------------------------------------------------------- */

/* The tab stays hidden until the database says this account is a forager */
.area-tab[hidden] {
    display: none !important;
}

/* Foragers view: the News and Shop parts step aside */
body.area-foragers [data-area-only="news"],
body.area-foragers [data-area-only="shop"],
body:not(.area-foragers) [data-area-only="foragers"] {
    display: none !important;
}

/* A new invitation: small dot on the tab */
.area-tab.has-news {
    position: relative;
}

.area-tab.has-news::after {
    content: "";

    position: absolute;
    top: 6px;
    right: 8px;

    width: 8px;
    height: 8px;

    background: var(--gold);
    border: 2px solid #efebe2;
    border-radius: 50%;
}

.forager-area {
    display: grid;
    gap: 12px;
}

.forager-card {
    padding: 22px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.forager-card-invite {
    border-color: var(--gold);
    background: linear-gradient(180deg, var(--gold-soft) 0%, var(--white) 70%);
}

.forager-card h2 {
    color: var(--text);

    font-size: clamp(19px, 2.4vw, 23px);
    line-height: 1.25;
}

.forager-card p {
    margin-top: 10px;

    color: var(--text-soft);

    font-size: 14px;
    line-height: 1.6;
}

.forager-points {
    display: grid;
    gap: 8px;

    margin: 14px 0 0;
    padding: 0;

    list-style: none;
}

.forager-points li {
    display: flex;
    gap: 10px;

    color: var(--text);

    font-size: 13.5px;
    line-height: 1.5;
}

.forager-points li i {
    flex: 0 0 auto;

    margin-top: 3px;

    color: var(--gold-dark);
}

.forager-note {
    margin-top: 14px !important;
    padding: 10px 12px;

    background: #f6f4ef;
    border-radius: 6px;

    font-size: 13px !important;
}

.forager-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}

.forager-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px;
    padding: 0 22px;

    background: var(--brown);
    border: 1px solid var(--brown);
    border-radius: 999px;

    color: #ffffff;

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.forager-button:hover {
    background: var(--brown-dark);
}

.forager-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.forager-button-light {
    background: transparent;
    border-color: var(--line);

    color: var(--text);
}

.forager-button-light:hover {
    background: #f4f2ed;
    border-color: #d9d6cf;
}

.forager-message {
    margin-top: 12px;

    font-size: 13.5px;
    font-weight: 600;
}

.forager-message.is-error {
    color: var(--red);
}

.forager-message.is-ok {
    color: var(--green);
}


/* Details form */
.forager-form {
    display: grid;
    gap: 14px;

    margin-top: 16px;
}

.forager-field label {
    display: block;

    margin-bottom: 6px;

    color: var(--text);

    font-size: 13px;
    font-weight: 700;
}

.forager-field input,
.forager-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;

    background: var(--white);
    border: 1px solid #d9d6cf;
    border-radius: 6px;

    color: var(--text);

    font: inherit;
    font-size: 15px;
}

.forager-field input:focus,
.forager-field select:focus {
    border-color: var(--gold);
    outline: 2px solid rgba(216, 155, 0, 0.18);
}

.forager-field.has-error input,
.forager-field.has-error select {
    border-color: var(--red);
}

.forager-help {
    margin-top: 5px;

    color: var(--muted);

    font-size: 12px;
}

.forager-field-error {
    margin-top: 5px;

    color: var(--red);

    font-size: 12.5px;
    font-weight: 600;
}


/* Active forager: one slim bar, details in a drop-down */
.forager-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.forager-head {
    padding: 12px 14px 12px 18px;
}

.forager-head .forager-welcome {
    flex-wrap: nowrap;
    gap: 10px;
}

.forager-welcome-text {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;

    min-width: 0;

    cursor: pointer;
}

.forager-head h2 {
    min-width: 0;
    overflow: hidden;

    font-size: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.forager-head-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;

    color: var(--text);

    font-size: 13px;

    cursor: pointer;

    transition: background 0.2s ease;
}

.forager-head-toggle:hover {
    background: #f4f2ed;
}

.forager-head-toggle i {
    transition: transform 0.2s ease;
}

.forager-head.is-open .forager-head-toggle i {
    transform: rotate(90deg);
}

.forager-head-more {
    margin-top: 12px;
    padding-top: 12px;

    border-top: 1px solid var(--line);
}

.forager-head-more[hidden] {
    display: none;
}

.forager-head .forager-details {
    margin-top: 0;
    gap: 8px;
}

.forager-head .forager-detail {
    padding: 9px 11px;
}

.forager-head .forager-actions {
    margin-top: 10px;
}

.forager-head .forager-button {
    min-height: 36px;
    padding: 0 16px;

    font-size: 13px;
}

.forager-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 12px;

    background: #e8f4ec;
    border-radius: 999px;

    color: var(--green);

    font-size: 12px;
    font-weight: 700;
}

.forager-badge.is-paused {
    background: #fdf1e7;
    color: #9a4b00;
}

.forager-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;

    margin-top: 16px;
}

.forager-detail {
    padding: 12px;

    background: #f8f7f4;
    border-radius: 6px;
}

.forager-detail span {
    display: block;

    color: var(--muted);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.forager-detail strong {
    display: block;

    margin-top: 4px;

    color: var(--text);

    font-size: 14.5px;
    word-break: break-word;
}

.forager-soon {
    border-style: dashed;

    text-align: center;
}

.forager-soon i {
    color: var(--gold-dark);

    font-size: 22px;
}

.forager-loading {
    padding: 28px;

    color: var(--muted);

    text-align: center;
}


/* ---------------------------------------------------------
   1b. THE FORAGER'S TOOLS (Phase 2, js/forager-tools.js)
   --------------------------------------------------------- */

.forager-tools-box {
    min-width: 0;
}

.ftools {
    display: grid;
    gap: 10px;
}

/* The tabs on the left, the $ button on the far right */
.ftools-bar {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.ftools-bar .ftools-tabs {
    flex: 0 1 auto;
    min-width: 0;
}

.ftools-money-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    margin-left: auto;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 50%;

    color: var(--brown);

    font-size: 15px;

    cursor: pointer;

    transition: background 0.2s ease, color 0.2s ease;
}

.ftools-money-btn:hover {
    background: #f4f2ed;
}

.ftools-money-btn.is-open {
    background: var(--brown);
    border-color: var(--brown);

    color: #ffffff;
}

.ftools-tiles[hidden] {
    display: none;
}

.ftools .visually-hidden,
.fgr-visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;
    overflow: hidden;

    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The money: one strip with three parts */
.ftools-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    overflow: hidden;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.ftools-tile {
    min-width: 0;
    padding: 12px 16px;
}

.ftools-tile + .ftools-tile {
    border-left: 1px solid var(--line);
}

.ftools-tile span {
    display: block;

    color: var(--muted);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ftools-tile strong {
    display: block;

    margin-top: 4px;

    color: var(--text);

    font-size: clamp(18px, 2.6vw, 24px);
    line-height: 1.2;
}

.ftools-tile small {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 12px;
}

.ftools-tile.is-balance {
    background: var(--gold-soft);
}

.ftools-tabs {
    justify-self: start;
    max-width: 100%;
    margin-bottom: 0;
    overflow-x: auto;
}

.ftools-tabs .fgr-tab i {
    margin-right: 6px;
}

.ftools-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.ftools-card {
    padding: 16px;
}

.ftools-card h3 {
    color: var(--text);

    font-size: 16px;
}

.ftools-card > p {
    margin-top: 6px;
}

.ftools-form {
    margin-top: 12px;
}

.ftools-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ftools-form-row input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;

    background: var(--white);
    border: 1px solid #d9d6cf;
    border-radius: 6px;

    color: var(--text);

    font: inherit;
    font-size: 15px;
}

.ftools-form-row input:focus {
    border-color: var(--gold);
    outline: 2px solid rgba(216, 155, 0, 0.18);
}

.ftools-form-row .forager-button {
    flex: 0 0 auto;
}

.ftools-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;

    margin-top: 10px;
}

.ftools-link {
    color: var(--brown);

    font-weight: 600;
    overflow-wrap: anywhere;
}

.ftools-declined {
    color: var(--red) !important;
}

.ftools-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ftools-counter {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 36px;
    padding: 0 14px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--text-soft);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.ftools-counter strong {
    color: var(--text);
}

.ftools-counter i {
    color: var(--green);
}

.ftools-counter.is-active {
    background: var(--brown);
    border-color: var(--brown);

    color: #ffffff;
}

.ftools-counter.is-active strong,
.ftools-counter.is-active i {
    color: #ffffff;
}

.ftools-customer.is-locked td {
    color: var(--muted);
}

.ftools-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 0;

    background: none;
    border: 0;

    color: var(--brown);

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.ftools-open i {
    width: 10px;

    font-size: 11px;
}

.ftools-commission {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;

    font-size: 12.5px;
}

.ftools-detail-row > td {
    padding: 4px 10px 14px 34px !important;

    background: #fcfbf8;
}

.ftools-note {
    margin: 4px 0 8px;

    color: var(--muted);

    font-size: 12.5px;
}

.ftools-products {
    width: 100%;

    border-collapse: collapse;

    font-size: 13px;
}

.ftools-products th {
    padding: 6px 8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.ftools-products td {
    padding: 6px 8px;

    border-top: 1px solid var(--line-soft, #efefec);
}

.ftools-products tr.is-zero td {
    color: var(--muted);
}

.ftools code {
    font-size: 13px;
    font-weight: 700;
}

/* Very narrow phones: the tab icons step aside so the $ still fits */
@media (max-width: 400px) {
    .ftools-bar .fgr-tab i {
        display: none;
    }
}

@media (max-width: 760px) {
    /* App-like on phones: tighter cards and spacing */
    .forager-area {
        gap: 10px;
    }

    .forager-card {
        padding: 14px;
    }

    .forager-head {
        padding: 10px 10px 10px 14px;
    }

    .forager-head h2 {
        font-size: 16px;
    }

    .forager-head .forager-badge {
        padding: 3px 9px;

        font-size: 11px;
    }

    .forager-head .forager-details {
        grid-template-columns: 1fr 1fr;
    }

    .forager-head .forager-detail strong {
        font-size: 13.5px;
    }

    .ftools {
        gap: 8px;
    }

    .ftools-card {
        padding: 14px;
    }

    .ftools-bar .fgr-tab {
        min-height: 32px;
        padding: 0 12px;

        font-size: 13px;
    }

    .ftools-money-btn {
        width: 38px;
        height: 38px;
    }

    .ftools-tile {
        padding: 10px;
    }

    .ftools-tile span {
        font-size: 10.5px;
    }

    .ftools-tile strong {
        font-size: 15px;
    }

    .ftools-tile small {
        display: none;
    }

    .ftools-form-row .forager-button {
        flex: 1 1 100%;
    }

    .ftools-detail-row {
        padding: 6px 10px !important;
    }

    .ftools-detail-row > td {
        display: block !important;
        padding: 0 !important;

        background: transparent;
    }

    .ftools-products thead {
        display: none;
    }

    .ftools-products tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;

        padding: 8px 0;

        border-top: 1px solid var(--line-soft, #efefec);
    }

    .ftools-products td {
        display: block;

        padding: 0;

        border: 0;
    }

    .ftools-products td[data-label]::before {
        content: attr(data-label) ": ";

        color: var(--muted);

        font-size: 11px;
        font-weight: 700;
    }

    .ftools-products td[data-label="Product"] {
        grid-column: 1 / -1;

        font-weight: 700;
    }

    .ftools-products td[data-label="Product"]::before {
        content: "";
    }

    /* The products table sits inside the customers table: undo the card look */
    .fgr-table .ftools-products tr {
        position: static;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 10px;

        padding: 8px 0;

        margin: 0;

        background: transparent;
        border: 0;
        border-top: 1px solid var(--line-soft, #efefec);
        border-radius: 0;
    }

    .fgr-table .ftools-products td {
        display: block;
        width: auto;
        padding: 0;
    }

    .fgr-table .ftools-products td[data-label]::before {
        content: attr(data-label) ": ";
        flex: none;

        font-size: 11px;
        text-transform: none;
    }

    .fgr-table .ftools-products tr.is-zero {
        grid-template-columns: 1fr auto;

        padding: 6px 0;
    }

    .fgr-table .ftools-products td[data-label="Product"]::before,
    .fgr-table .ftools-products tr.is-zero td[data-label="Quantity"]::before {
        content: "";
    }

    /* Nothing yet: one short line (product and 0) */
    .ftools-products tr.is-zero {
        grid-template-columns: 1fr auto;
        padding: 5px 0;
    }

    .ftools-products tr.is-zero td[data-label="Product"] {
        grid-column: auto;

        font-weight: 400;
    }

    .ftools-products tr.is-zero td[data-label="Waiting"],
    .ftools-products tr.is-zero td[data-label="Balance"],
    .ftools-products tr.is-zero td[data-label="Paid"] {
        display: none;
    }

    .ftools-products tr.is-zero td[data-label="Quantity"]::before {
        content: "";
    }
}


/* ---------------------------------------------------------
   2. ADMIN PAGE (fix2: tables, side panel, ⋯ menu)
   --------------------------------------------------------- */

.fgr-tabs {
    display: inline-flex;
    gap: 4px;

    margin-bottom: 14px;
    padding: 4px;

    background: #efebe2;
    border-radius: 999px;
}

.fgr-tab {
    min-height: 34px;
    padding: 0 16px;

    background: transparent;
    border: 0;
    border-radius: 999px;

    color: var(--text-soft);

    font: inherit;
    font-size: 13.5px;
    font-weight: 600;

    cursor: pointer;
}

.fgr-tab.is-active {
    background: var(--brown);
    color: #ffffff;
}

.fgr-tab .fgr-count {
    margin-left: 6px;

    opacity: 0.75;
}

.fgr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-bottom: 10px;
}

.fgr-toolbar .admin-search {
    flex: 1 1 220px;
    min-height: 38px;
}

.fgr-toolbar .admin-btn {
    min-height: 38px;
    padding: 0 14px;

    font-size: 13px;
    font-weight: 700;
}

.fgr-page-message {
    margin: 0 0 12px;
    padding: 9px 14px;

    background: #f6f4ef;
    border-radius: 6px;

    font-size: 13.5px;
    font-weight: 600;
}

.fgr-page-message.success { background: #e8f4ec; }
.fgr-page-message.error { background: #fbeceb; }


/* The table */
.fgr-table-wrap {
    overflow-x: auto;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.fgr-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 13.5px;
}

.fgr-table th {
    position: sticky;
    top: 0;
    z-index: 1;

    padding: 9px 10px;

    background: #f8f7f4;
    border-bottom: 1px solid var(--line);

    color: var(--muted);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.fgr-table td {
    padding: 8px 10px;

    border-bottom: 1px solid var(--line-soft, #efefec);

    color: var(--text);

    vertical-align: middle;
}

.fgr-table tbody tr:last-child td {
    border-bottom: 0;
}

.fgr-table tbody tr:hover {
    background: #fcfbf8;
}

.fgr-table tbody tr.is-selected {
    background: var(--gold-soft);
}

.fgr-table .fgr-col-check {
    width: 36px;
    padding-right: 0;
}

.fgr-table input[type="checkbox"] {
    width: 17px;
    height: 17px;

    accent-color: var(--brown);
    vertical-align: middle;
}

.fgr-table .fgr-col-actions {
    width: 1%;

    text-align: right;
    white-space: nowrap;
}

.fgr-name {
    font-weight: 700;
}

.fgr-sub {
    display: block;

    margin-top: 2px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;
}

.fgr-nowrap {
    white-space: nowrap;
}

.fgr-muted {
    color: var(--muted);
}

.fgr-table a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #d0ccc3;
}

.fgr-link-button {
    padding: 0;

    background: none;
    border: 0;

    color: var(--brown);

    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #d0ccc3;

    cursor: pointer;
}

.fgr-small-btn {
    min-height: 30px;
    padding: 0 12px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--text);

    font: inherit;
    font-size: 12.5px;
    font-weight: 700;

    cursor: pointer;
}

.fgr-small-btn:hover {
    background: #f4f2ed;
}

.fgr-chip {
    display: inline-flex;
    align-items: center;

    padding: 2px 9px;

    background: #f1efe9;
    border-radius: 999px;

    color: var(--text-soft);

    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.fgr-chip.is-good { background: #e8f4ec; color: var(--green); }
.fgr-chip.is-wait { background: #fdf6e3; color: var(--gold-dark); }
.fgr-chip.is-bad  { background: #fbeceb; color: var(--red); }

.fgr-empty {
    padding: 30px 16px;

    background: var(--white);
    border: 1px dashed var(--line);
    border-radius: var(--radius);

    color: var(--muted);

    text-align: center;
}

.fgr-empty strong {
    display: block;

    margin-bottom: 4px;

    color: var(--text);
}


/* The ⋯ menu */
.fgr-menu {
    position: relative;

    display: inline-block;
}

.fgr-menu-button {
    width: 32px;
    height: 32px;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;

    color: var(--text-soft);

    font-size: 16px;

    cursor: pointer;
}

.fgr-menu-button:hover,
.fgr-menu-button[aria-expanded="true"] {
    background: #f4f2ed;
    border-color: var(--line);
}

/* Placed by the script (fixed, so the table never cuts it off) */
.fgr-menu-list {
    position: fixed;
    z-index: 900;

    min-width: 180px;
    padding: 6px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(31, 28, 22, 0.12);

    text-align: left;
}

.fgr-menu-list[hidden] {
    display: none;
}

.fgr-menu-list button {
    display: block;

    width: 100%;
    padding: 8px 10px;

    background: none;
    border: 0;
    border-radius: 6px;

    color: var(--text);

    font: inherit;
    font-size: 13.5px;
    text-align: left;

    cursor: pointer;
}

.fgr-menu-list button:hover,
.fgr-menu-list button:focus-visible {
    background: #f4f2ed;
    outline: none;
}

.fgr-menu-list button.is-danger {
    color: var(--red);
}

/* Decline / cancel with ready-made reasons (no typing) */
.fgr-menu-title {
    display: block;

    padding: 6px 10px 4px;

    color: var(--text-soft);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fgr-reason-menu > .admin-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15);
}


/* The side panel (an application's answers) */
.fgr-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    background: rgba(31, 28, 22, 0.35);
}

.fgr-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;

    display: flex;
    flex-direction: column;

    width: min(480px, 100%);

    background: var(--white);
    box-shadow: -12px 0 40px rgba(31, 28, 22, 0.15);
}

.fgr-drawer[hidden],
.fgr-drawer-backdrop[hidden] {
    display: none;
}

.fgr-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;

    padding: 18px 20px 14px;

    border-bottom: 1px solid var(--line);
}

.fgr-drawer-head h2 {
    color: var(--text);

    font-size: 19px;
    line-height: 1.3;
}

.fgr-drawer-close {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    background: #f4f2ed;
    border: 0;
    border-radius: 50%;

    color: var(--text);

    font-size: 16px;

    cursor: pointer;
}

.fgr-drawer-body {
    flex: 1 1 auto;

    padding: 16px 20px;

    overflow-y: auto;
}

.fgr-drawer-contact {
    display: grid;
    gap: 4px;

    color: var(--text-soft);

    font-size: 13.5px;
}

.fgr-drawer-contact a {
    color: inherit;
}

.fgr-drawer .fgr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 10px;
}

.fgr-drawer dl {
    display: grid;
    gap: 12px;

    margin-top: 16px;
}

.fgr-drawer dt {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.fgr-drawer dd {
    margin: 3px 0 0;

    color: var(--text);

    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.fgr-drawer-cv {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 16px;
}

.fgr-drawer-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding: 14px 20px;

    border-top: 1px solid var(--line);
}

.fgr-drawer-foot .admin-btn {
    flex: 1 1 auto;
    min-height: 40px;
}

body.fgr-drawer-open {
    overflow: hidden;
}


/* Phase 2 admin tabs (foragers-money-admin.js) */
.fgr-tabs {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.fgr-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}

.fgr-help {
    margin: 0 0 12px;

    color: var(--text-soft);

    font-size: 13.5px;
    line-height: 1.5;
}

.fgr-section-title {
    margin: 22px 0 10px;

    color: var(--text);

    font-size: 16px;
}

.fgr-section-title:first-child {
    margin-top: 0;
}

.fgr-subtabs {
    display: inline-flex;
    gap: 6px;

    margin-bottom: 12px;
}

.fgr-subtab {
    min-height: 32px;
    padding: 0 14px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--text-soft);

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

.fgr-subtab.is-active {
    background: var(--brown);
    border-color: var(--brown);

    color: #ffffff;
}

.fgr-input {
    min-height: 36px;
    min-width: 0;
    padding: 0 10px;

    background: var(--white);
    border: 1px solid #d9d6cf;
    border-radius: 6px;

    color: var(--text);

    font: inherit;
    font-size: 14px;
}

.fgr-input:focus {
    border-color: var(--gold);
    outline: 2px solid rgba(216, 155, 0, 0.18);
}

.fgr-input-small {
    width: 120px;
}

.fgr-input-code {
    width: 140px;

    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fgr-actions-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.fgr-actions-inline .admin-btn,
.fgr-inline-form .admin-btn {
    min-height: 34px;
    padding: 0 12px;

    font-size: 13px;
    font-weight: 700;
}

.fgr-panel-card {
    display: grid;
    gap: 10px;

    padding: 14px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.fgr-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fgr-inline-form .fgr-input:not(.fgr-input-small) {
    flex: 1 1 200px;
}

.fgr-record-form {
    display: grid;
    gap: 8px;

    padding-top: 6px;

    border-top: 1px solid var(--line-soft, #efefec);
}

.fgr-record-head strong {
    margin-right: 8px;
}

.fgr-total {
    margin: 0 0 10px;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}

.fgr-check-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    color: var(--text-soft);

    font-size: 12.5px;
    white-space: nowrap;
}

.fgr-limit-label {
    flex: 1 1 260px;

    color: var(--text);

    font-size: 13.5px;
}

.fgr-out {
    color: var(--brown);

    font-weight: 600;
    overflow-wrap: anywhere;
}

.fgr-table tbody tr.is-down {
    background: #fbeceb;
}

.fgr-table th .fgr-col-check input,
.fgr-table th input[type="checkbox"] {
    width: 17px;
    height: 17px;

    accent-color: var(--brown);
}

.fgr-table .fgr-sub a {
    font-weight: 600;
}

/* Phones: each row becomes a small card, labels on the left */
@media (max-width: 760px) {

    .forager-card { padding: 18px; }
    .forager-actions .forager-button { flex: 1 1 auto; }
    .fgr-toolbar .admin-btn { flex: 1 1 auto; }
    .fgr-toolbar .fgr-reason-menu { display: flex; flex: 1 1 auto; }
    .fgr-toolbar .fgr-reason-menu .admin-btn { width: 100%; }

    .fgr-table-wrap {
        overflow: visible;

        background: transparent;
        border: 0;
    }

    .fgr-table thead {
        display: none;
    }

    .fgr-table,
    .fgr-table tbody,
    .fgr-table tr,
    .fgr-table td {
        display: block;
        width: 100%;
    }

    .fgr-table tr {
        position: relative;

        margin-bottom: 8px;
        padding: 10px 12px;

        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .fgr-table td {
        display: flex;
        gap: 10px;

        padding: 3px 0;

        border: 0;
    }

    .fgr-table td > * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .fgr-table td[data-label]::before {
        content: attr(data-label);

        flex: 0 0 92px;

        color: var(--muted);

        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .fgr-table td.fgr-col-check {
        position: absolute;
        top: 10px;
        right: 12px;

        width: auto;
        padding: 0;
    }

    .fgr-table td.fgr-col-main {
        padding-right: 36px;
    }

    .fgr-table td.fgr-col-actions {
        justify-content: flex-end;

        width: 100%;
        margin-top: 4px;
    }

    .fgr-table tbody tr:hover {
        background: var(--white);
    }

    .fgr-table tbody tr.is-selected {
        background: var(--gold-soft);
        border-color: var(--gold);
    }

    .fgr-drawer-foot .admin-btn {
        flex: 1 1 100%;
    }
}


/* ---------------------------------------------------------
   The forager's link list on phones: app-like rows
   (the link on top; date, status and amount on one line)
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .ftools-links-list .fgr-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;

        margin-bottom: 6px;
        padding: 10px 12px;
    }

    .ftools-links-list .fgr-table td {
        width: auto;
        padding: 0;
    }

    .ftools-links-list .fgr-table td[data-label]::before {
        display: none;
    }

    .ftools-links-list .fgr-table td[data-label="Link"] {
        order: -1;

        width: 100%;
        min-width: 0;
        max-width: 100%;

        font-size: 13.5px;
    }

    .ftools-links-list .fgr-table td[data-label="Link"] a {
        display: block;
        overflow: hidden;

        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .ftools-links-list .fgr-table td[data-label="Date"] {
        color: var(--muted);

        font-size: 12px;
    }

    .ftools-links-list .fgr-table td[data-label="Amount"] {
        margin-left: auto;

        font-size: 13px;
        text-align: right;
    }

    .ftools-links-list .fgr-table td[data-label="Amount"] > *,
    .ftools-links-list .fgr-table td[data-label="Amount"] .fgr-sub {
        display: inline;
    }

    .ftools-links-list .fgr-table td[data-label="Amount"] .fgr-sub {
        margin-left: 5px;
    }

    .ftools-links-list .fgr-table td[data-label="Status"] .fgr-sub {
        margin-top: 2px;
    }
}

@media (max-width: 760px) {
    /* The link counters stay on one line (swipe if needed) */
    .ftools-counters {
        flex-wrap: nowrap;
        gap: 6px;

        overflow-x: auto;
        scrollbar-width: none;
    }

    .ftools-counter {
        flex: 0 0 auto;

        padding: 5px 11px;

        font-size: 12.5px;
    }
}

/* Grid children never grow wider than the screen (long links) */
.forager-area > *,
.ftools > *,
.ftools-panel > * {
    min-width: 0;
}


/* ---------------------------------------------------------
   Drop-downs float over the page (nothing below moves):
   the details under the › arrow, the money under the $
   --------------------------------------------------------- */

.forager-head,
.ftools-bar {
    position: relative;
}

.ftools-bar {
    z-index: 20;
}

/* Open details sit above the tabs bar too */
.forager-head.is-open {
    z-index: 40;
}

.forager-head-more,
.ftools-tiles {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;

    width: min(440px, 100%);

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(31, 28, 22, 0.16);

    animation: fgr-drop 0.15s ease-out;
}

.forager-head-more {
    margin: 0;
    padding: 12px;
}

.forager-head .forager-details {
    grid-template-columns: 1fr 1fr;
}

.ftools-tiles {
    width: min(520px, 100%);
}

.ftools-tiles .ftools-tile strong {
    font-size: 20px;
    white-space: nowrap;
}

@keyframes fgr-drop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .forager-head-more,
    .ftools-tiles {
        animation: none;
    }
}

@media (max-width: 760px) {
    .forager-head-more,
    .ftools-tiles {
        width: 100%;
    }
}

/* ---------------------------------------------------------
   Admin: an accepted customer's products with a quick "Add"
   --------------------------------------------------------- */

.fgr-add-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.fgr-add-item .fgr-input-small {
    width: 110px;
}

.fgr-add-item .admin-btn {
    min-height: 34px;
    padding: 0 12px;

    font-size: 13px;
    font-weight: 700;
}

.fgr-products-admin tr.is-zero td[data-label="Add"],
.fgr-products-admin tr.is-zero td[data-label="Per unit"] {
    color: var(--text);
}

.fgr-customer-row .ftools-open {
    font-weight: 700;
}

@media (max-width: 760px) {
    .fgr-table .fgr-products-admin tr,
    .fgr-table .fgr-products-admin tr.is-zero {
        grid-template-columns: 1fr 1fr;
        padding: 8px 0;
    }

    .fgr-table .fgr-products-admin td[data-label="Add"] {
        grid-column: 1 / -1;
    }

    .fgr-table .fgr-products-admin td[data-label="Add"]::before {
        content: "";
    }

    .fgr-table .fgr-products-admin tr.is-zero td[data-label="Waiting"],
    .fgr-table .fgr-products-admin tr.is-zero td[data-label="Balance"],
    .fgr-table .fgr-products-admin tr.is-zero td[data-label="Paid"] {
        display: none;
    }

    .fgr-table .fgr-products-admin tr.is-zero td[data-label="Quantity"]::before {
        content: attr(data-label) ": ";
    }

    .fgr-add-item .fgr-input-small {
        flex: 1 1 110px;
    }
}


/* ---------------------------------------------------------
   ONE FORAGER (admin: foragers-detail-admin.js) and corrections
   --------------------------------------------------------- */

.fgr-name-link {
    padding: 0;

    background: none;
    border: 0;

    color: var(--text);

    font: inherit;
    font-weight: 700;
    text-align: left;

    cursor: pointer;
}

.fgr-name-link:hover,
.fgr-name-link:focus-visible {
    color: var(--gold-dark);
    text-decoration: underline;
}

.fgr-back {
    margin: 0 0 10px;
    padding: 0;

    background: none;
    border: 0;

    color: var(--gold-dark);

    font: inherit;
    font-size: 13.5px;
    font-weight: 700;

    cursor: pointer;
}

.fgr-detail-head {
    margin-bottom: 12px;
}

.fgr-detail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fgr-detail-title h2 {
    margin: 0;

    font-size: clamp(19px, 2.6vw, 24px);
}

.fgr-detail-contacts {
    margin: 4px 0 0;

    color: var(--muted);

    font-size: 13px;
    overflow-wrap: anywhere;
}

.fgr-detail-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-bottom: 14px;
    overflow: hidden;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.fgr-detail-tile {
    min-width: 0;
    padding: 10px 14px;
}

.fgr-detail-tile + .fgr-detail-tile {
    border-left: 1px solid var(--line);
}

.fgr-detail-tile span {
    display: block;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fgr-detail-tile strong {
    display: block;

    margin-top: 2px;

    font-size: clamp(16px, 2.4vw, 21px);
    white-space: nowrap;
}

.fgr-detail-tile small {
    display: block;

    color: var(--muted);

    font-size: 11.5px;
}

.fgr-detail-tile.is-balance {
    background: var(--gold-soft);
}

.fgr-detail-tile.is-negative strong,
.ftools-tile.is-negative strong,
.fgr-minus,
.ftools-minus {
    color: var(--red);
}

.fgr-detail-tabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;

    scrollbar-width: none;
}

.fgr-detail-tabs::-webkit-scrollbar {
    display: none;
}

.fgr-detail-tabs .fgr-subtab {
    flex: 0 0 auto;
}

.fgr-detail-list {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;

    margin: 0;

    font-size: 14px;
}

.fgr-detail-list dt {
    color: var(--muted);

    font-weight: 600;
}

.fgr-detail-list dd {
    min-width: 0;
    margin: 0;

    overflow-wrap: anywhere;
}

.admin-btn.fgr-btn-small,
.fgr-actions-inline .admin-btn.fgr-btn-small {
    min-height: 30px;
    padding: 0 10px;

    font-size: 12.5px;
}

.fgr-items-admin td:last-child {
    text-align: right;
}

/* The forager's dashboard: a corrected sale under a customer */
.ftools-correction {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;

    margin: 8px 0 0;

    color: var(--text-soft);

    font-size: 13px;
}

@media (max-width: 760px) {
    .fgr-detail-tile {
        padding: 8px 10px;
    }

    .fgr-detail-tile small {
        display: none;
    }

    .fgr-items-admin td:last-child {
        text-align: left;
    }
}


/* ---------------------------------------------------------
   THE BELL (notifications) AND WITHDRAW (in the $ drop-down)
   --------------------------------------------------------- */

.ftools-bar-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;

    margin-left: auto;
}

.ftools-bar-actions .ftools-money-btn {
    margin-left: 0;
}

.ftools-bell-btn {
    position: relative;

    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 50%;

    color: var(--text);

    font-size: 15px;

    cursor: pointer;
}

.ftools-bell-btn:hover {
    background: #f4f2ed;
}

.ftools-bell-btn.is-open {
    background: var(--brown);
    border-color: var(--brown);

    color: #ffffff;
}

.ftools-badge {
    position: absolute;
    top: -4px;
    right: -4px;

    min-width: 18px;
    height: 18px;
    padding: 0 5px;

    background: var(--red);
    border: 2px solid var(--white);
    border-radius: 999px;

    color: #ffffff;

    font-size: 10.5px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.ftools-badge[hidden],
.ftools-notes[hidden] {
    display: none;
}

/* The money drop-down: the amounts, then withdraw */
.ftools-tiles {
    display: block;
    overflow: hidden;
}

.ftools-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    border-bottom: 1px solid var(--line);
}

.ftools-withdraw {
    display: grid;
    gap: 8px;

    padding: 12px 14px 14px;
}

.ftools-withdraw-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ftools-withdraw-head span {
    color: var(--muted);

    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ftools-withdraw-head strong {
    font-size: 17px;
    white-space: nowrap;
}

.ftools-withdraw-form {
    display: flex;
    gap: 8px;
}

.ftools-withdraw-form input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;

    background: var(--white);
    border: 1px solid #d9d6cf;
    border-radius: 999px;

    color: var(--text);

    font: inherit;
    font-size: 15px;
}

.ftools-withdraw-form input:focus {
    border-color: var(--gold);
    outline: 2px solid rgba(216, 155, 0, 0.18);
}

.ftools-withdraw-form .forager-button,
.ftools-withdraw-cancel {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 18px;
}

.ftools-withdraw-form :disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.ftools-withdraw-note {
    margin: 0;

    color: var(--muted);

    font-size: 12.5px;
}

.ftools-withdraw-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 12px;

    background: var(--gold-soft);
    border-radius: var(--radius);
}

.ftools-withdraw-open div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ftools-withdraw-open span {
    color: var(--text-soft);

    font-size: 12.5px;
}

.ftools-withdraw .forager-message:empty {
    display: none;
}

.ftools-withdraw .forager-message {
    margin: 0;
}

/* The notifications drop-down */
.ftools-notes {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;

    display: flex;
    flex-direction: column;

    width: min(400px, 100%);
    max-height: min(70vh, 520px);
    overflow: hidden;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(31, 28, 22, 0.16);

    animation: fgr-drop 0.15s ease-out;
}

.ftools-notes-head {
    padding: 12px 14px;

    border-bottom: 1px solid var(--line);

    font-size: 14.5px;
}

.ftools-notes-list {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ftools-notes-empty {
    margin: 0;
    padding: 18px 14px;

    color: var(--muted);

    font-size: 13.5px;
}

.ftools-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    width: 100%;
    padding: 11px 14px;

    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);

    color: var(--text);

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.ftools-note:last-child {
    border-bottom: 0;
}

.ftools-note:hover,
.ftools-note:focus-visible {
    background: #faf8f3;
}

.ftools-note.is-unread {
    background: var(--gold-soft);
}

.ftools-note-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    background: #e8f4ec;
    border-radius: 50%;

    color: var(--green);

    font-size: 13px;
}

.ftools-note.is-bad .ftools-note-icon {
    background: #fbeceb;
    color: var(--red);
}

.ftools-note.is-announcement .ftools-note-icon {
    background: #fdf6e3;
    color: var(--gold-dark);
}

.ftools-note-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.ftools-note-text strong {
    font-size: 13.5px;
}

.ftools-note-text span {
    color: var(--text-soft);

    font-size: 13px;
    overflow-wrap: anywhere;
}

.ftools-note-text small {
    color: var(--muted);

    font-size: 11.5px;
}

.ftools-section-title {
    margin: 4px 0 -2px;

    font-size: 15px;
}

@media (max-width: 760px) {
    .ftools-bell-btn {
        width: 38px;
        height: 38px;
    }

    /* Phones: the drop-downs use the whole width */
    .ftools-tiles,
    .ftools-notes {
        width: 100%;
    }

    .ftools-withdraw {
        padding: 10px 12px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ftools-notes {
        animation: none;
    }
}

/* Admin: messages, paying days, the forager view's message button */
.fgr-message-form {
    max-width: 640px;
}

.fgr-textarea {
    min-height: 84px;
    padding: 8px 10px;

    resize: vertical;
}

.fgr-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.fgr-day {
    font-size: 13.5px;
}

.fgr-detail-message {
    margin-left: auto;
}

@media (max-width: 760px) {
    .fgr-detail-message {
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    .ftools-tiles .ftools-tile strong {
        font-size: 16.5px;
    }
}


/* ---------------------------------------------------------
   THE NETWORK TAB (forager)
   --------------------------------------------------------- */

.ftools-agreement {
    border-color: var(--gold);
    background: var(--gold-soft);
}

.ftools-agree-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.ftools-agree-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 14px;
}

.ftools-agree-form .forager-message {
    flex-basis: 100%;
    margin: 0;
}

.ftools-agree-form .forager-message:empty,
.ftools-link-card .forager-message:empty,
.ftools-kin-form .forager-message:empty {
    display: none;
}

.ftools-progress {
    overflow: hidden;

    height: 10px;
    margin-top: 6px;

    background: #efece5;
    border-radius: 999px;
}

.ftools-progress span {
    display: block;

    height: 100%;

    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    border-radius: 999px;
}

.ftools-progress-text {
    margin: 6px 0 0;

    font-size: 13.5px;
    font-weight: 700;
}

.ftools-link-row {
    display: flex;
    gap: 8px;
}

.ftools-link-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 14px;

    background: #faf8f3;
    border: 1px solid #d9d6cf;
    border-radius: 999px;

    color: var(--text);

    font: inherit;
    font-size: 14px;
}

.ftools-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 10px;
}

.ftools-share .forager-button {
    min-height: 38px;
    padding: 0 16px;

    font-size: 13.5px;
    text-decoration: none;
}

.ftools-warning {
    padding: 8px 10px;

    background: #fbeceb;
    border-radius: 8px;

    color: var(--red);
}

.forager-detail.is-held strong {
    color: var(--red);
}

.ftools-rates {
    margin: 4px 0 0;
    padding-left: 18px;

    color: var(--text-soft);

    font-size: 13px;
}

.ftools-kin-row {
    flex-wrap: wrap;
}

.ftools-kin-row input,
.ftools-kin-row select {
    flex: 1 1 160px;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;

    background: var(--white);
    border: 1px solid #d9d6cf;
    border-radius: 999px;

    color: var(--text);

    font: inherit;
    font-size: 14px;
}

@media (max-width: 760px) {
    .ftools-link-row {
        flex-direction: column;
    }

    .ftools-kin-row .forager-button {
        width: 100%;
    }

    /* Four tabs + bell + $ on a phone: the tabs scroll sideways */
    .ftools-bar .ftools-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;

        scrollbar-width: none;
    }

    .ftools-bar .ftools-tabs::-webkit-scrollbar {
        display: none;
    }

    .ftools-bar .ftools-tabs .fgr-tab {
        flex: 0 0 auto;
    }
}

/* Admin: the network in the forager view */
.fgr-actions-left {
    justify-content: flex-start;
}

.fgr-net-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fgr-log {
    margin: 0;
    padding-left: 18px;

    color: var(--text-soft);

    font-size: 13px;
}

@media (max-width: 760px) {
    .fgr-net-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fgr-net-tiles .fgr-detail-tile:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .fgr-net-tiles .fgr-detail-tile:nth-child(4) {
        border-top: 1px solid var(--line);
    }
}


/* ---------------------------------------------------------
   MY NETWORK (drop-down), LEAVE FORAGERS, CLOSING WARNING
   --------------------------------------------------------- */

.ftools-network-card {
    position: relative;
    z-index: 15;

    padding: 0;
    overflow: visible;
}

.ftools-network-card.is-open {
    z-index: 35;
}

.ftools-network-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: 100%;
    padding: 14px 18px;

    background: none;
    border: 0;

    color: var(--text);

    font: inherit;
    text-align: left;

    cursor: pointer;
}

.ftools-network-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.ftools-network-label strong {
    font-size: 16px;
}

.ftools-network-count {
    padding: 2px 10px;

    background: #f4f2ed;
    border-radius: 999px;

    color: var(--text-soft);

    font-size: 12.5px;
    font-weight: 700;
}

.ftools-network-toggle .fa-chevron-down {
    transition: transform 0.15s ease;
}

.ftools-network-card.is-open .ftools-network-toggle .fa-chevron-down {
    transform: rotate(180deg);
}

.ftools-network-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;

    max-height: min(70vh, 440px);      /* about 10 people, then it scrolls */
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(31, 28, 22, 0.16);

    animation: fgr-drop 0.15s ease-out;
}

.ftools-network-drop[hidden] {
    display: none;
}

.ftools-network-drop .fgr-table-wrap {
    overflow: visible;
}

.ftools-network-drop thead th {
    position: sticky;
    top: -12px;
    z-index: 1;

    background: #f7f5f0;
}

.ftools-network-levels {
    margin-top: 10px;
}

/* Leave Foragers: red, the dialog over the page */
.forager-button-danger {
    background: var(--red);
    border-color: var(--red);

    color: #ffffff;
}

.forager-button-danger:hover {
    background: #8f1c13;
    border-color: #8f1c13;
}

.forager-button-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.forager-head-more .forager-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.forager-modal-open {
    overflow: hidden;
}

.forager-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px;

    background: rgba(20, 16, 8, 0.55);
}

.forager-modal {
    width: min(520px, 100%);
    max-height: calc(100vh - 32px);
    padding: 22px;
    overflow-y: auto;

    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.forager-modal h2 {
    margin: 0 0 12px;

    color: var(--red);

    font-size: 20px;
}

.forager-danger-box {
    padding: 12px 14px;

    background: #fbeceb;
    border: 1px solid #f1c4c0;
    border-radius: 10px;

    color: #5a1510;

    font-size: 14px;
}

.forager-danger-box ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.forager-danger-box li + li {
    margin-top: 4px;
}

.forager-leave-form {
    display: grid;
    gap: 8px;

    margin-top: 14px;
}

.forager-leave-form label {
    font-size: 14px;
    font-weight: 700;
}

.forager-leave-form input {
    min-height: 42px;
    padding: 0 14px;

    border: 1px solid #d9d6cf;
    border-radius: 999px;

    font: inherit;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.forager-leave-form .forager-message:empty {
    display: none;
}

.forager-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 6px;
}

/* No activity for a long time: a red strip above the content */
.ftools-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-bottom: 10px;
    padding: 10px 14px;

    background: #fbeceb;
    border: 1px solid #f1c4c0;
    border-radius: var(--radius);

    color: var(--red);

    font-size: 13.5px;
    font-weight: 600;
}

.ftools-alert-box:empty {
    display: none;
}

@media (max-width: 760px) {
    .ftools-network-toggle {
        padding: 12px 14px;
    }

    .ftools-network-drop {
        max-height: 65vh;
        padding: 10px;
    }

    .forager-modal-actions .forager-button {
        flex: 1 1 auto;
    }
}


/* ------------------------------------------------------
   "Become a Forager" (everyone who is not a forager yet)
   ------------------------------------------------------ */

.forager-card-become {
    border-color: var(--gold);
    background: linear-gradient(160deg, var(--gold-soft) 0%, var(--white) 65%);
}

.forager-card-become h2 {
    font-size: clamp(22px, 3vw, 28px);
}

.forager-card .forager-become-lead {
    max-width: 62ch;

    color: var(--text);

    font-size: 15px;
}

.forager-become-things {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 16px 0 0;
    padding: 0;

    list-style: none;
}

.forager-become-things li {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 6px 12px;

    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--text);

    font-size: 13px;
    font-weight: 600;
}

.forager-become-things li i {
    color: var(--gold-dark);
}

.forager-card-become .forager-actions {
    margin-top: 18px;
}

.forager-card-become .forager-badge {
    margin-top: 16px;
}

.forager-badge.is-received {
    background: var(--gold-soft);
    color: var(--gold-dark);
}