/* =====================================================================
   Yak Home Inventory — green palette on the shared yw-theme.css system
   ---------------------------------------------------------------------
   Load order: yakware-style.css → yw-theme.css → THIS. yw-theme.css carries
   the whole design-language re-skin + neutral light/dark token blocks; this
   file only sets Home Inventory's GREEN accent (matching the mobile app,
   seed #2E7D32) + its app-specific components (toolbars, cards, shopping
   list, stat chips, household). Light-first (server stamps html.yw-light).
   ===================================================================== */

/* —— accents: LIGHT —— */
html.yw-light {
    --accent:          #2e7d32;   /* deep green fill (mobile kPrimaryGreen) */
    --accent-strong:   #1b5e20;
    --accent-soft:     #66bb6a;
    --accent-contrast: #ffffff;   /* white reads on the deep-green fill */
    --accent-tint:     rgba(46,125,50,0.12);
    --accent-ink:      #1b5e20;   /* green AS TEXT on white */
}
/* —— accents: DARK (green brightens; the fill takes dark ink) —— */
html.yw-dark {
    --accent:          #4caf50;
    --accent-strong:   #66bb6a;
    --accent-soft:     #388e3c;
    --accent-contrast: #06230b;   /* dark ink on the bright-green fill */
    --accent-tint:     rgba(76,175,80,0.16);
    --accent-ink:      #81c784;   /* light green AS TEXT on dark */
}
/* footer is a dark anchor in both themes → a bright green link-hover */
:root { --footer-accent: #81c784; }

/* status colors reused across pages */
:root {
    --hi-low:      #c62828;   /* running low / out of stock */
    --hi-low-tint: rgba(198,40,40,0.12);
    --hi-priority: #b8860b;   /* priority amber */
    --hi-priority-tint: rgba(184,134,11,0.14);
}
html.yw-dark {
    --hi-low:      #ef5350;
    --hi-low-tint: rgba(239,83,80,0.18);
    --hi-priority: #e0b34a;
    --hi-priority-tint: rgba(224,179,74,0.18);
}

/* ===================================================================
   Page scaffold — every authed page wraps its body in .hi-page
   =================================================================== */
.hi-page {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}
.hi-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1rem;
}
.hi-page__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.hi-page__sub {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0.15rem 0 0;
}

/* Toolbar (Add / Export / search) */
.hi-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 1rem;
}
.hi-toolbar .Wt-btn,
.hi-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: inherit;
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-contrast);
    cursor: pointer;
    line-height: 1.1;
}
.hi-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.hi-btn--ghost {
    background: transparent;
    color: var(--accent-ink);
    border-color: var(--line);
}
.hi-btn--ghost:hover { background: var(--accent-tint); border-color: var(--accent); }
.hi-btn--sm { padding: 0.25rem 0.55rem; font-size: 0.85rem; border-radius: 0.4rem; }
.hi-btn--danger { background: transparent; color: var(--hi-low); border-color: var(--hi-low); }
.hi-btn--danger:hover { background: var(--hi-low-tint); }

/* ===================================================================
   Cards + responsive tables
   =================================================================== */
.hi-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    padding: 1rem;
}
/* Make Wt tables fluid + horizontally scrollable on narrow screens */
.hi-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hi-tablewrap .Wt-itemview { width: 100% !important; border-radius: 0.5rem; }
.hi-tablewrap .Wt-itemview .Wt-headerdiv { font-weight: 600; }

/* Empty states */
.hi-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}
.hi-empty__icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; color: var(--accent-soft); }
.hi-empty__title { font-size: 1.15rem; font-weight: 600; color: var(--text); margin: 0 0 0.25rem; }

/* ===================================================================
   Low-stock summary strip (on the Items page header)
   =================================================================== */
.hi-lowstrip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--hi-low-tint);
    color: var(--hi-low);
    border: 1px solid var(--hi-low);
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.hi-lowstrip--ok {
    background: var(--accent-tint);
    color: var(--accent-ink);
    border-color: var(--accent);
}

/* ===================================================================
   Shopping list
   =================================================================== */
.hi-shop__banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--accent);
    color: var(--accent-contrast);
    border-radius: 0.75rem;
    padding: 0.85rem 1.1rem;
    margin: 0 0 1rem;
}
.hi-shop__banner b { font-size: 1.1rem; }
.hi-shop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.hi-shop__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0.6rem 0.8rem;
}
.hi-shop__row--priority { border-color: var(--hi-priority); box-shadow: inset 3px 0 0 var(--hi-priority); }
.hi-shop__row--done { opacity: 0.55; }
.hi-shop__need {
    flex: 0 0 auto;
    min-width: 3rem;
    text-align: center;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: 0.5rem;
    padding: 0.3rem 0.4rem;
    font-weight: 700;
    line-height: 1.05;
}
.hi-shop__need small { display: block; font-size: 0.65rem; font-weight: 500; opacity: 0.8; }
.hi-shop__need--priority { background: var(--hi-priority-tint); color: var(--hi-priority); border-color: var(--hi-priority); }
.hi-shop__main { flex: 1 1 auto; min-width: 0; }
.hi-shop__name { font-weight: 600; color: var(--text); }
.hi-shop__meta { font-size: 0.8rem; color: var(--text-muted); }
.hi-star { color: var(--hi-priority); }

/* Items rows: running-low highlight + inline action cluster */
.hi-row--low { border-color: var(--hi-low); box-shadow: inset 3px 0 0 var(--hi-low); }
.hi-row__actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
@media (max-width: 40rem) {
    .hi-row__actions { width: 100%; }
}

/* stat chips (have / ideal / low-at) */
.hi-stats { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.hi-stat {
    flex: 1 1 0;
    text-align: center;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--line);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.hi-stat b { display: block; font-size: 0.95rem; color: var(--text); }
.hi-stat--low b { color: var(--hi-low); }

/* ===================================================================
   Household / members
   =================================================================== */
.hi-members { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.hi-member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 0.6rem;
    padding: 0.6rem 0.8rem;
}
.hi-member__avatar {
    flex: 0 0 auto;
    width: 2.25rem; height: 2.25rem;
    border-radius: 999px;
    display: grid; place-items: center;
    background: var(--accent-tint);
    color: var(--accent-ink);
    font-weight: 700;
}
.hi-member__name { font-weight: 600; color: var(--text); }
.hi-member__role { font-size: 0.8rem; color: var(--text-muted); }
.hi-member__badge {
    margin-left: auto;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}
.hi-invite--pending { opacity: 0.85; border-style: dashed; }

/* ===================================================================
   Modals (on top of CloseableModal / Wt dialog)
   =================================================================== */
.hi-form { display: flex; flex-direction: column; gap: 0.75rem; }
.hi-form label { font-weight: 600; font-size: 0.85rem; color: var(--text); display: block; margin-bottom: 0.2rem; }
.hi-form input[type=text],
.hi-form input[type=number],
.hi-form textarea,
.hi-form select,
.hi-form .Wt-selection {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--input-bg, var(--card));
    color: var(--text);
    font: inherit;
}
.hi-form__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hi-form__row > * { flex: 1 1 8rem; }
.hi-form__hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }

/* small screens */
@media (max-width: 40rem) {
    .hi-page { padding: 1rem 0.75rem 2.5rem; }
    .hi-page__title { font-size: 1.3rem; }
    .hi-shop__banner { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}