/* Small brand-level overrides on top of Pico.css's own CSS variables.
   Keep this file thin: prefer overriding --pico-* variables here over
   writing new component CSS, so future re-theming stays a find-and-replace
   of variable values rather than a markup rewrite. */

main.container {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* App-shell layout: header and footer stay pinned to the top/bottom of the
   viewport at all times. The middle row (.dash-shell) splits into two
   independently-scrolling panes -- .dash-sidebar and .dash-content (see
   further down) -- rather than scrolling as one block, specifically so the
   sidebar never moves: before this, the sidebar scrolled along with
   whatever page was loaded (or shifted horizontally on a page with a wide
   table, since a shared scroll container scrolls on both axes together).
   Giving the sidebar its own pane means only .dash-content scrolls, on
   either axis, and the sidebar simply never has anything to scroll.

   Grid, not nested flex, for the header/middle/footer split -- a first
   attempt used flex-direction:column on body with flex:1 1 auto on the
   middle row, which left a visible gap under the sidebar on short pages
   (its "fill remaining height" never fully resolved through the nested
   flex contexts in every browser). A 3-row grid (auto / 1fr / auto) gives
   the middle row a genuinely definite height directly from the grid
   algorithm, which .dash-sidebar/.dash-content's own stretch/scroll rules
   below can then rely on without that ambiguity. */
html, body {
    height: 100%;
}

body {
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.dash-shell {
    /* Grid items have the same "auto minimum size = content size" quirk as
       flex items -- min-height:0 is what actually lets this row shrink to
       (not grow past) the 1fr track's computed height instead of stretching
       the whole grid taller than the viewport to fit its content. */
    min-height: 0;
    /* Belt-and-suspenders alongside grid's own stretch alignment: an
       explicit height:100% (of the 1fr row's own resolved, definite size)
       ties this element's height to a plain percentage calculation instead
       of relying solely on align-items:stretch to propagate it -- two
       independent sizing mechanisms agreeing, rather than one. */
    height: 100%;
}

/* Public pages (.dash-shell--public) have no sidebar/content split to keep
   independent -- just let the one pane scroll as a whole, same as before. */
.dash-shell--public {
    overflow-y: auto;
}

/* Dashboard header: a distinct band (gradient, not Pico's default plain
   background) so a logged-in seller/staff view is visually unmistakable
   from the public marketing pages, which keep Pico's default nav. Public
   pages never get the .dash-header class (see base.html -- it's only added
   when tenant_name is set), so this has zero effect on landing/login/register. */
.dash-header {
    background: linear-gradient(100deg, #1e1b4b 0%, #3730a3 55%, #4f46e5 100%);
    padding: 0.85rem 1.5rem;
    margin-bottom: 0;
    box-shadow: 0 2px 12px rgba(30, 27, 75, 0.35);
}

.dash-header .dash-header-brand,
.dash-header .dash-header-shop {
    color: #f8fafc;
}

.dash-header .dash-header-brand:hover,
.dash-header .dash-header-shop:hover {
    color: #ffffff;
}

.dash-header-shop {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-header-logo {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.35rem;
    object-fit: cover;
    background: #ffffff;
    vertical-align: middle;
}

.dash-header-name {
    text-decoration: none;
}

.dash-header-name:hover {
    text-decoration: underline;
}

/* Vertical divider + the staff name/role pairing, sitting between the shop
   name and the Log out button -- see base.html. */
.dash-header-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    margin-left: 0.25rem;
    border-left: 1px solid rgba(248, 250, 252, 0.25);
}

.dash-header-name {
    color: #e0e7ff;
    font-size: 0.92rem;
    white-space: nowrap;
}

/* One color per role so the badge is legible/recognizable at a glance
   without reading the text -- matches the same three tiers used throughout
   the dashboard (see web/deps.py's require_roles, staff.html). "staff" is
   the retired pre-tiers value (see UserRole's docstring); kept here only so
   an old row never renders with no badge style at all. */
.dash-role-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.dash-role-badge--owner {
    background: #fde68a;
    color: #78350f;
}

.dash-role-badge--manager {
    background: #bae6fd;
    color: #0c4a6e;
}

.dash-role-badge--fulfillment {
    background: #99f6e4;
    color: #134e4a;
}

.dash-role-badge--staff {
    background: #e2e8f0;
    color: #1e293b;
}

.dash-header-logout {
    --pico-color: #f8fafc;
    color: #f8fafc;
    border-color: rgba(248, 250, 252, 0.55);
}

.dash-header-logout:hover {
    --pico-color: #ffffff;
    background: rgba(248, 250, 252, 0.12);
    border-color: #ffffff;
}

@media (max-width: 640px) {
    .dash-header-user {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
}

/* Footer: same dark family as the header (see .dash-header above) so the
   dashboard shell reads as one deliberate band of color at the top and
   bottom, with the page body in between -- rather than a colored header
   over an otherwise unbounded page. Pinned to the body grid's last row
   (see the app-shell rules above, grid-template-rows: auto 1fr auto) --
   no margin-top push needed, since it's a real grid row, not something
   pushed down by document flow. */
.dash-footer {
    background: #1e1b4b;
    color: #c7d2fe;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 -2px 12px rgba(30, 27, 75, 0.35);
}

.dash-footer-inner {
    max-width: 1800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.dash-footer-shop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f8fafc;
}

.dash-footer-logo {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.3rem;
    object-fit: cover;
    background: #ffffff;
}

.dash-footer-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
}

.dash-footer-details span:not(:last-child)::after {
    content: "•";
    margin-left: 0.6rem;
    color: #6366f1;
}

.flash-error {
    color: var(--pico-del-color);
    font-weight: 600;
}

/* Seller dashboard shell: persistent sidebar + content pane (see base.html
   and static/dashboard.js). Public pages (landing/login/register) get
   .dash-shell--public instead, which just falls back to Pico's normal
   centered .container behavior -- same visual result as before this existed. */
.dash-shell {
    display: flex;
    flex-wrap: nowrap;
    /* stretch (not flex-start) -- both panes fill the shell's full height,
       which is what lets each one become an independent scroll container
       below instead of just being sized to its own content. */
    align-items: stretch;
    /* No gap -- the sidebar's own background (see .dash-sidebar) is what
       visually separates it from the content pane now, so a gap would just
       leak the page background through as an odd stripe between them. */
    gap: 0;
    /* Full width, no max-width/auto-margin centering -- a previous version
       capped this at 1800px and centered it, which on any screen wider than
       that left equal empty margins on the LEFT and right of the whole
       shell. The header/footer above and below were never capped the same
       way (they span edge to edge), so that empty left margin showed up as
       a stray strip of the page's white background squeezed between the
       viewport's actual left edge and the sidebar -- exactly the "gap on
       the sidebar's left" this was reported as. Sidebar now always starts
       at x=0, flush with the header/footer above and below it. */
    width: 100%;
}

.dash-shell--public {
    display: block;
    padding: 0;
}

/* A full-height colored lane, matching the header/footer's palette (see
   .dash-header/.dash-footer above) -- ties the three chrome pieces together
   into one deliberate frame around the (light) content pane. Deliberately
   NOT position:sticky anymore: now that it's a true independent flex pane
   (see .dash-shell's align-items:stretch) it simply never moves, rather
   than moving-then-catching-up the way sticky positioning did. */
.dash-sidebar {
    flex: 0 0 220px;
    /* Same belt-and-suspenders reasoning as .dash-shell above -- height:100%
       (of .dash-shell, which itself now has an explicit height) as a second,
       independent guarantee alongside align-items:stretch that this reaches
       the full height of the row instead of just its own content's height. */
    height: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #241f5e 0%, #1e1b4b 100%);
    padding: 1.75rem 1.25rem;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(30, 27, 75, 0.25);
}

/* Pico.css sets `nav ul { display: flex }` globally (its default navbar
   behavior, meant for horizontal top-nav menus) -- without this override
   it also flattens the sidebar's vertical link list into a squeezed
   horizontal row, since .dash-sidebar's nav/ul is a real <nav>/<ul> too. */
.dash-sidebar nav ul {
    display: block;
}

.dash-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dash-sidebar li {
    margin-bottom: 0.15rem;
}

.dash-nav-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 0.35rem;
    /* Light lavender on the sidebar's dark background -- var(--pico-color)
       (this file's previous choice) assumes a light background, which the
       sidebar no longer has. */
    color: #e0e7ff;
    text-decoration: none;
}

.dash-nav-link:hover {
    background: rgba(248, 250, 252, 0.12);
}

.dash-nav-link.active {
    background: #4f46e5;
    color: #ffffff;
}

.dash-content {
    flex: 1;
    min-width: 0;
}

/* Only the dashboard variant (not public's .container) gets its own
   independent scroll pane + padding -- see .dash-shell's comment above for
   why this, not the sidebar, is now the thing that scrolls (vertically AND
   horizontally, so a wide table can't shift the sidebar either). */
.dash-content:not(.container) {
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: auto;
    padding: 2rem 2rem 4rem;
}

/* Pico's .grid always splits into exactly N equal columns (N = number of
   direct children), which looked fine at full container width but turns
   into cramped, unreadable slivers now that the sidebar eats ~250px off
   the available width (settings.html has 5 cards). auto-fit + minmax wraps
   to fewer, wider columns instead of forcing all of them into one row. */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    /* stretch (grid's own default -- listed explicitly since it's easy to
       assume otherwise) makes every card in the same row match the tallest
       one, instead of each shrinking to just its own content height, which
       is what made 5 cards of very different content lengths look like a
       mismatched row of small/large boxes. */
    align-items: stretch;
}

.settings-grid > article {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    /* Narrow screens: sidebar and content stack instead of sitting
       side-by-side, so the two-independent-panes trick above no longer
       applies -- revert to the whole shell scrolling as one column, same
       as before this feature, with the sidebar's nav becoming a wrapped
       row of pills at the top instead of a tall side panel. */
    .dash-shell {
        flex-direction: column;
        gap: 1rem;
        overflow-y: auto;
    }
    .dash-sidebar {
        flex: 0 0 auto;
        width: 100%;
        overflow-y: visible;
        box-shadow: none;
    }
    .dash-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .dash-content:not(.container) {
        overflow-y: visible;
    }
}