/* =========================================================================
 * App-shell — persistent navigation chrome (PR #2 of the redesign).
 *
 * Loaded ONLY by templates that extend _shell.html, so existing (not-yet-
 * reskinned) pages are completely unaffected. Layout is a fixed sidebar (web,
 * >=900px) / bottom tab bar (mobile, <900px) with an internally-scrolling
 * content area — the "app" layout from the ayana-app-web/operations look.
 *
 * Ported from the design prototype; prototype token names mapped to ours:
 *   --bronze   -> --primary        --ink     -> --bodytext-primary
 *   --bronze-d -> --primary-dark   --ink-2   -> --bodytext-secondary
 *   --bronze-l -> --primary-light  --muted   -> --bodytext-secondary
 *   --cream    -> --background-section   --faint -> --bodytext-placeholder
 *   --cream-2  -> --background-soft  --line   -> --line-default
 *   --paper    -> --background-paper --err    -> --error   --sh -> --shadow
 * ========================================================================= */

/* The `hidden` attribute must always win. Several shell controls set an author
   `display:flex` (e.g. .sb-assign, .bn-fab, .pm-item) which would otherwise
   override the UA `[hidden]{display:none}` rule (author origin beats UA), so
   [data-admin-only][hidden] controls would render for non-admins / flash before
   nav.js runs. This forces the hidden state to hold until nav.js reveals it. */
[hidden] { display: none !important; }

/* Only shell pages get the fixed-height app layout (no document scroll); the
   .scroll region scrolls internally. Scoped to .shell-body so plain pages keep
   normal document flow. */
.shell-body {
    margin: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--background-section);
}

.app-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.viewport { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scroll {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 14px 14px 26px;
    scrollbar-width: none;  /* Firefox — match the prototype's hidden scrollbar */
}
.scroll::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit / Blink */

/* ---- desktop sidebar (hidden until >=900px) ---- */
.sidebar { display: none; }
/* Brand is a link home (clickable on web; the header eye covers mobile). */
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; text-decoration: none; }
.sb-brand svg { color: var(--primary); flex: none; }
.sb-brand-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sb-brand-tx b { font-size: 0.92rem; font-weight: 700; color: var(--bodytext-primary); }
.sb-brand-tx span { font-size: 0.72rem; color: var(--bodytext-secondary); }
.sb-assign {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--primary); color: #fff; border: none; border-radius: 11px;
    padding: 12px; font-weight: 600; font-size: 0.88rem; cursor: pointer;
    margin-bottom: 10px; transition: background 0.13s; text-decoration: none;
}
.sb-assign:hover { background: var(--primary-dark); }
.sb-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sb-item {
    display: flex; align-items: center; gap: 11px; background: none; border: none;
    cursor: pointer; text-align: left; padding: 11px 12px; border-radius: 11px;
    color: var(--bodytext-secondary); font-weight: 600; font-size: 0.9rem;
    transition: background 0.13s, color 0.13s; position: relative;
    font-family: inherit; text-decoration: none;
}
.sb-item:hover { background: var(--background-section); }
.sb-item.on { background: hsl(var(--primary-hsl) / 0.1); color: var(--primary); }
.sb-badge {
    margin-left: auto; background: var(--error); color: #fff; border-radius: 99px;
    font-size: 0.68rem; font-weight: 700; padding: 1px 7px; min-width: 18px; text-align: center;
}
.sb-user {
    display: flex; align-items: center; gap: 10px; background: none; border: none;
    border-top: 1px solid var(--line-default); cursor: pointer; text-align: left;
    padding: 12px 6px 2px; margin-top: 6px; width: 100%; font-family: inherit; transition: 0.13s;
}
.sb-user:hover .sb-user-tx b { color: var(--primary); }
.sb-ava {
    width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700;
    font-size: 0.78rem; flex: none;
}
.sb-user-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sb-user-tx b { font-size: 0.84rem; font-weight: 700; color: var(--bodytext-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-tx span { font-size: 0.72rem; color: var(--bodytext-secondary); }
.sb-user-chev { color: var(--bodytext-placeholder); flex: none; }

/* ---- top header ---- */
.apphdr {
    display: flex; align-items: center; gap: 11px; padding: 14px 14px 12px;
    background: hsl(var(--background-section-hsl) / 0.9);
    backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px);
    position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line-default);
}
.hdr-back, .hdr-mark {
    width: 40px; height: 40px; flex: none; display: flex; align-items: center;
    justify-content: center; border-radius: 10px; text-decoration: none;
    color: var(--bodytext-primary);
}
.hdr-back { border: 1px solid var(--line-default); background: var(--background-paper); }
.hdr-back:hover { border-color: var(--primary-light); color: var(--primary); }
.hdr-mark { border: none; background: hsl(var(--primary-hsl) / 0.08); cursor: pointer; color: var(--primary); }
.hdr-mark:hover { background: hsl(var(--primary-hsl) / 0.16); }
.hdr-titles { flex: 1; min-width: 0; }
.hdr-title { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.01em; line-height: 1.1; color: var(--bodytext-primary); }
.hdr-sub { font-size: 0.74rem; color: var(--bodytext-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-right { flex: none; display: flex; align-items: center; gap: 8px; }

/* ---- profile / settings menu ---- */
.pm-overlay { position: fixed; inset: 0; z-index: 1200; background: var(--scrim); animation: shellfade 0.15s ease; }
.pm-overlay[hidden] { display: none; }
.pm {
    position: absolute; bottom: 84px; right: 12px; width: 236px;
    background: var(--background-paper); border: 1px solid var(--line-default);
    border-radius: 15px; box-shadow: 0 18px 40px -16px hsl(var(--bodytext-primary-hsl) / 0.5);
    padding: 8px; animation: shellpop 0.16s ease;
}
.pm-head { display: flex; align-items: center; gap: 11px; padding: 9px 10px 12px; border-bottom: 1px solid var(--line-default); margin-bottom: 5px; }
.pm-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.86rem; flex: none; }
.pm-id { min-width: 0; }
.pm-nm { font-weight: 600; font-size: 0.9rem; line-height: 1.15; color: var(--bodytext-primary); }
.pm-ro { font-size: 0.72rem; color: var(--bodytext-secondary); font-weight: 600; }
.pm-item {
    display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
    background: none; border: none; cursor: pointer; padding: 11px 10px; border-radius: 9px;
    font-weight: 600; font-size: 0.86rem; color: var(--bodytext-primary); font-family: inherit;
    text-decoration: none;
}
.pm-item:hover { background: var(--background-soft); }
.pm-item svg { color: var(--primary); flex: none; }
.pm-item.danger { color: var(--error); }
.pm-item.danger svg { color: var(--error); }
.pm-sep { height: 1px; background: var(--line-default); margin: 6px 4px; }

/* ---- bottom nav (mobile) ---- */
.botnav {
    flex: none; display: flex; align-items: center; background: var(--background-paper);
    border-top: 1px solid var(--line-default);
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0)); position: relative;
}
.bn-group { flex: 1; display: flex; justify-content: space-around; }
.bn-item {
    flex: 1; background: none; border: none; cursor: pointer; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 4px; min-height: var(--tap-min);
    border-radius: 12px; color: var(--bodytext-secondary); font-weight: 600;
    font-size: 0.66rem; font-family: inherit; text-decoration: none; position: relative;
}
.bn-item.on { color: var(--primary); background: hsl(var(--primary-hsl) / 0.08); }
.bn-item:hover:not(.on) { color: var(--bodytext-primary); }
.bn-badge {
    position: absolute; top: 3px; right: calc(50% - 22px); background: var(--error);
    color: #fff; border-radius: 99px; font-size: 0.6rem; font-weight: 700;
    padding: 0 5px; min-width: 15px; text-align: center;
}
.bn-fab {
    flex: none; width: 58px; height: 58px; margin: -26px 10px 0; border-radius: 50%;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 22px -6px hsl(var(--primary-hsl) / 0.55);
    transition: background 0.13s, transform 0.13s; text-decoration: none;
}
.bn-fab:hover { background: var(--primary-dark); transform: translateY(-2px); }
.bn-fab:active { transform: translateY(0); }
.bn-even { flex: 1; display: flex; justify-content: space-around; }

@keyframes shellfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shellpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- web layout: sidebar in, bottom nav out ---- */
@media (min-width: 900px) {
    .app-shell.with-side { flex-direction: row; }
    .sidebar {
        display: flex; flex-direction: column; width: 252px; flex: none;
        background: var(--background-paper); border-right: 1px solid var(--line-default); padding: 18px 14px;
    }
    .botnav { display: none; }
    .viewport { flex: 1; min-width: 0; }
    .apphdr { padding-left: 36px; padding-right: 36px; }
    .hdr-mark { display: none; }
    .scroll { max-width: 1000px; margin: 0 auto; width: 100%; padding: 26px 36px 52px; }
    .pm { bottom: 70px; left: 260px; right: auto; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-overlay, .pm { animation: none; }
}