/* Back-office layout only. Components (buttons, fields, chips, table, states, dialog, drawer, toast, top bar, side nav) come from app.css. */
.admin .app-main{width:100%;max-width:var(--content-max);box-sizing:border-box;outline:none}
.admin-menu-button{display:none}
/* [2026-11-10 gotcha]: app.css wraps .topbar under 768 px for LIFF's topbar-nav row; the admin bar has no nav row, and a wrapped bar leaves the fixed sidenav and scrim (top: --topbar-h) misplaced */
.admin .topbar{flex-wrap:nowrap}
.admin-scrim{display:none}
.admin-env-short{display:none}
@media(max-width:899px){.admin-env-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.admin-env-short{display:inline}}
.admin-signout{margin-top:var(--space-md)}

/* A2 white header (03-design.md): admin top bar only; the LIFF top bar stays navy */
.admin .topbar{background:var(--color-surface);color:var(--color-text);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.admin .topbar a,.admin .topbar .brand{color:var(--color-heading)}
.admin .topbar :focus-visible{outline-color:var(--color-focus)}
.admin .topbar .brand-sub{color:var(--color-text-muted)}
.admin .topbar .lang-switch{background:var(--color-secondary-bg)}
.admin .topbar .lang-switch a{color:var(--color-text)}
.admin .topbar .lang-switch a[aria-current=true]{background:var(--color-heading);color:var(--color-surface)}
.admin .topbar .avatar{background:var(--color-secondary-bg);color:var(--color-heading)}
.admin .topbar-user small{color:var(--color-text-muted)}
.admin .admin-menu-button{color:var(--color-heading);border-color:var(--color-border)}
.admin .admin-menu-button:hover{background:var(--color-secondary-bg)}
.admin-crumbs{min-width:0;padding-left:var(--space-md);border-left:1px solid var(--color-border)}
.admin-crumbs:empty{display:none}
.admin-crumbs .breadcrumb{margin:0;padding:0;flex-wrap:nowrap;white-space:nowrap}
.admin-crumbs [aria-current=page]{color:var(--color-heading);font-weight:600}
@media(max-width:899px){.admin-crumbs{display:none}}

body.is-signed-out .sidenav,body.is-signed-out .admin-menu-button,body.is-signed-out .admin-scrim{display:none}
body.is-signed-out .app-shell{grid-template-columns:minmax(0,1fr)}
.admin-login{max-width:440px;margin:var(--space-xl) auto}
.admin-login .brand{color:var(--color-heading);margin-bottom:var(--space-lg)}
/* A2 sign-in (03-design.md): photo under the navy scrim, the form card centred on it; only while the form is shown, not on the denied state */
.app-shell:has(.admin-login){min-height:calc(100dvh - var(--topbar-h));background:var(--hero-scrim),var(--hero-photo) center/cover no-repeat,var(--gradient-hero)}
.app-shell:has(.admin-login) .app-main{display:grid;place-items:center;max-width:none;padding:var(--space-xl) var(--space-md)}
.app-shell .admin-login{width:100%;margin:0;border:0;box-shadow:var(--shadow-lg)}
.admin-login h1{font-size:clamp(22px,6vw,30px);text-wrap:balance}
.admin-login-note{display:flex;gap:var(--space-xs);align-items:flex-start;margin:var(--space-md) 0 0;padding-top:var(--space-md);border-top:1px solid var(--color-border);font-size:13px;color:var(--color-text-muted)}
.admin-login-note svg{flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-top:2px}
@media(min-width:769px){.app-shell:has(.admin-login){background:var(--hero-scrim-wide),var(--hero-photo) center/cover no-repeat,var(--gradient-hero)}.app-shell:has(.admin-login) .app-main{justify-items:start;padding-left:clamp(var(--space-xl),8vw,120px)}}

@media(min-width:900px){.admin .sidenav{min-height:0}.admin-signout{margin-top:auto}}
@media(max-width:899px){
 .admin-menu-button{display:inline-flex}
 .admin .sidenav{position:fixed;top:var(--topbar-h);left:0;bottom:0;z-index:25;width:min(var(--sidenav-w),85vw);flex-direction:column;overflow-x:hidden;overflow-y:auto;padding:var(--space-md) var(--space-sm);transform:translateX(-100%);visibility:hidden;transition:transform .2s ease-out,visibility .2s}
 .admin .sidenav.is-open{transform:none;visibility:visible}
 .admin .sidenav .sidenav-section{display:block}
 .admin-scrim:not([hidden]){display:block;position:fixed;inset:var(--topbar-h) 0 0 0;z-index:20;background:var(--color-overlay)}
}

.admin-id{display:flex;align-items:center;gap:var(--space-xs)}
.admin-skeleton{display:grid;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.admin-skeleton-row{display:flex;align-items:center;gap:var(--space-md)}
.admin-skeleton-row .skeleton-line{flex:1;margin:0}

.admin-role-list{border:0;padding:0;margin:var(--space-sm) 0 0;display:grid;gap:var(--space-xs)}
.admin-role-option{min-height:44px;align-items:center;padding:0 var(--space-xs);border-radius:var(--radius-md);cursor:pointer}
.admin-role-option:hover{background:var(--color-hover)}
.admin-drawer-status,.admin-drawer-access{margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--color-border-table)}
.admin-access-action{display:grid;justify-items:start;gap:var(--space-xs);margin-top:var(--space-md)}
.admin-access-action .field-hint{margin:0}
.admin-code{margin:0 0 var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);background:var(--color-secondary-bg);color:var(--color-heading);font-size:24px;font-weight:700;letter-spacing:.08em;text-align:center;user-select:all;outline:none}
.admin-dialog-title{flex:1;min-width:0}
.admin-diff{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-sm)}

.admin-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-lg);align-items:start;margin-top:var(--space-md)}
@media(max-width:899px){.admin-split{grid-template-columns:minmax(0,1fr);gap:0}}
.admin-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1024px){.admin-status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.admin-status-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--space-sm);margin:0}
.admin-status-grid+.field-hint{margin-top:var(--space-sm)}

.admin-flex-bubble{display:grid;gap:var(--space-sm);max-width:300px;padding:var(--space-md);border-radius:var(--radius-lg);background:var(--color-bg);border:1px solid var(--color-border)}
.admin-flex-bubble strong{color:var(--color-heading);font-size:18px}
.admin-flex-bubble p{margin:0}
.admin-flex-action{display:block;text-align:center;padding:var(--space-sm);border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-on-primary);font-weight:600}
#flex-preview details{margin-top:var(--space-md)}
@media(prefers-reduced-motion:reduce){.admin .sidenav{transition:none}}