/*
 * Native shell (PanteonApp, contract v2). Everything here is scoped to html.in-shell, which public/script/shell.js
 * sets only when window.panteonShell exists, so outside the shell nothing changes.
 *
 * The shell sets on <html>: --shell-inset-top/bottom/right, --shell-full-bleed-gap, --shell-overlap.
 * Pages pad their outer edge with them so the content ends where the system controls begin.
 */

html.in-shell { color-scheme: dark; }

/* navigation lives in the native controls: no top bar of our own (the logo on single-card pages is not navigation) */
.in-shell .inst-shell:not(.dl-shell) .topbar,
.in-shell .adm-bar { display: none; }
.in-shell .adm-tabs { margin-top: 0; }

/* outer edges follow the shell's insets */
.in-shell .inst-shell,
.in-shell .adm-shell {
    padding-top: calc(max(var(--shell-inset-top, 0px), env(safe-area-inset-top, 0px)) + 12px);
    padding-right: calc(max(var(--shell-inset-right, 0px), env(safe-area-inset-right, 0px)) + 6px);
    padding-bottom: calc(max(var(--shell-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)) + 32px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 14px);
}
.in-shell .login-shell {
    padding-top: calc(max(var(--shell-inset-top, 0px), env(safe-area-inset-top, 0px)) + 24px);
    padding-right: calc(max(var(--shell-inset-right, 0px), env(safe-area-inset-right, 0px)) + 6px);
    padding-bottom: calc(max(var(--shell-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)) + 24px);
    padding-left: calc(env(safe-area-inset-left, 0px) + 14px);
}

/* iOS zooms the page when a field under 16px gets focus (page rules are scoped to body.inst / body.adm, hence the !important) */
html.in-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.in-shell textarea,
html.in-shell select,
html.in-shell .bootstrap-select > .dropdown-toggle,
html.in-shell .bootstrap-select .bs-searchbox input { font-size: 16px !important; }

/* the menu drawer (opened by the native "menu" button) */
.shell-menu { position: fixed; inset: 0; z-index: 3000; }
.shell-menu[hidden] { display: none; }
.shell-menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.shell-menu-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(340px, calc(100vw - var(--shell-inset-right, 0px) - var(--shell-full-bleed-gap, 0px) - 12px));
    box-sizing: border-box;
    overflow-y: auto;
    padding: calc(max(var(--shell-inset-top, 0px), env(safe-area-inset-top, 0px)) + 14px) 12px calc(max(var(--shell-inset-bottom, 0px), env(safe-area-inset-bottom, 0px)) + 16px);
    background: var(--panel, #18191d);
    border-right: 1px solid var(--line, #2a2d33);
    color: var(--text, #eceef1);
    font-family: var(--font-ui, system-ui, sans-serif);
}
.shell-menu-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line, #2a2d33); }
.shell-menu-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--raised, #23252a); font-weight: 700; }
.shell-menu-who { min-width: 0; line-height: 1.3; }
.shell-menu-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-menu-org { color: var(--muted, #8d939d); font-size: 13px; }
.shell-menu-label { padding: 14px 10px 6px; color: var(--muted, #8d939d); font-size: 12.5px; font-weight: 600; }
.shell-menu-sep { height: 1px; margin: 10px 4px; background: var(--line, #2a2d33); }
.shell-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px; border-radius: 10px; color: var(--text, #eceef1); font-size: 16px; text-decoration: none; }
.shell-menu-link:hover, .shell-menu-link.active { background: rgba(255, 255, 255, 0.07); color: var(--text, #eceef1); text-decoration: none; }
.shell-menu-link.active { font-weight: 600; }
.shell-menu-count { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent, #00c850); color: var(--accent-ink, #04210f); font-size: 12.5px; font-weight: 700; line-height: 22px; text-align: center; }
.shell-menu-close { position: absolute; top: calc(max(var(--shell-inset-top, 0px), env(safe-area-inset-top, 0px)) + 12px); right: 12px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted, #8d939d); cursor: pointer; }
.shell-menu-close:hover { background: rgba(255, 255, 255, 0.07); color: var(--text, #eceef1); }
.shell-menu-close svg { width: 18px; height: 18px; }
.shell-menu-panel { padding-top: calc(max(var(--shell-inset-top, 0px), env(safe-area-inset-top, 0px)) + 14px); }
.shell-menu-head { padding-right: 44px; }