@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    background: #e7e7e7;
}

@media (max-width: 430px) {
    .main {
        margin-top: 75px !important;
    }
}

/* ===================== Collapsible filter / search =====================
   Injected by header.js around every .search-container: a small pill button
   (right-aligned) reveals the filter bar, which is hidden by default.
   Centralised, so every page that uses .search-container gets it. */
.filter-toggle-row {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 0;
}
.filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
/* Left group gathers the Filters pill + "Show entries" so they stay together
   on the left while action buttons stay right (bar is space-between). */
.filter-left-group {
    min-width: 0;
}
/* When the pill sits inside the unified white controls bar, drop its own
   white fill (the bar is already white) and give it breathing room. */
.secondary-container .filter-toggle {
    background: #f9fafb;
}
.secondary-container .filter-toggle:hover {
    background: #f3f4f6;
}
.secondary-container .filter-toggle[aria-expanded="true"] {
    background: var(--brand-primary, #1d62f0);
}
.filter-toggle:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
.filter-toggle i.bx-filter-alt {
    font-size: 1.7rem;
    color: var(--brand-primary, #1d62f0);
}
.filter-toggle .filter-chevron {
    font-size: 1.6rem;
    transition: transform .2s ease;
}
.filter-toggle[aria-expanded="true"] {
    background: var(--brand-primary, #1d62f0);
    border-color: var(--brand-primary, #1d62f0);
    color: #fff;
}
.filter-toggle[aria-expanded="true"] i { color: #fff; }
.filter-toggle[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }

/* The collapsible body. Collapsed = 0 height + clipped; open = content height. */
.filter-collapse {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease;
}
.filter-collapse.open {
    max-height: 600px;
    opacity: 1;
}
/* Snug spacing when the filter bar reveals under the controls row. */
.filter-collapse > .search-container {
    margin-top: 4px;
    margin-bottom: 4px;
}

/* ---- Mobile: stack the controls bar cleanly ----
   On phones the controls bar gets cramped (Filters + Show entries + mode +
   action buttons all on one line). Stack it vertically; keep the Filters pill
   and "Show entries" together on the first line; action buttons full-width
   below. */
@media (max-width: 768px) {
    .secondary-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    /* The wrapper that holds the Filters pill + "Show entries" (and, on
       item-management, the mode toggle). It spans the row; pill + Show entries
       stay inline, and the mode toggle wraps to its own line below them. */
    /* The left wrapper (Filters pill + Show entries [+ mode toggle]) spans the
       row. It must wrap so a mode toggle can drop to its own line, but the
       Filters pill and Show entries must stay together — achieved by making
       both unshrinkable/unwrappable and letting only the mode toggle take a
       full-width basis. */
    .secondary-container > .filter-left-group,
    .secondary-container > .d-flex:not(.action-bar) {
        width: 100%;
        align-items: center;
        column-gap: 12px;
        row-gap: 10px;
        flex-wrap: wrap;
    }
    .filter-toggle { flex: 0 0 auto; white-space: nowrap; }
    /* "Show entries" hugs its content and stays beside the Filters pill. */
    .secondary-container .entries-container {
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
    }
    /* The mode toggle (item-management) takes a full-width line of its own. */
    .secondary-container .mode-toggle { flex: 1 0 100%; }

    /* Mode toggle (Stock / Manage): own full-width line, evenly split. */
    .secondary-container .mode-toggle {
        display: flex;
        flex: 1 1 100%;
    }
    .secondary-container .mode-toggle .mode-option {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Action buttons: full-width row, evenly split, WITH their labels. */
    .secondary-container .action-bar {
        width: 100%;
        justify-content: stretch;
        gap: 10px;
    }
    .secondary-container .action-bar > .btn-action,
    .secondary-container .action-bar > .btn-add {
        flex: 1 1 0;
        justify-content: center;
    }
    /* Re-show the button + mode labels that item-management.css hides on small
       screens, so the full-width controls read clearly. */
    .secondary-container .action-bar .btn-action span,
    .secondary-container .mode-option span {
        display: inline !important;
    }
}