/* V-Hub workspace foundations, with V-System's red product accent. */
#portal-view .page:not(.active) { display:none!important; }
#portal-view[data-workspace=profile] .profile-tabs,
#portal-view[data-workspace=admin] .admin-navigation { display:none; }
#portal-view[data-workspace=admin] .admin-layout { grid-template-columns:minmax(0,1fr); }
#portal-view:not([data-workspace=workbench]) .dashboard-relay-status { display:none; }
#portal-view .workspace-label { margin:8px 12px 18px; font-size:12px; color:var(--navi-muted); }
#portal-view :is(#page-profileTheme,#page-profilePet) > .profile-card { max-width:800px; }
html:not([data-theme=dark]):has(#portal-view:not(.hidden)) {
  --navi-canvas:#f4f6fa; --navi-surface:#fff; --navi-ink:#243247; --navi-muted:#66758a;
  --navi-line:#dce3ec; --navi-shadow:0 4px 18px #25375608;
  --navi-accent:#d9322b; --navi-soft:#fcecea; --appearance-raised:#f0f5f8;
  --system-backdrop:linear-gradient(#f4f6fa,#f4f6fa);
}
body:has(#portal-view:not(.hidden))::after { display:none; }
html[data-theme=dark]:has(#portal-view:not(.hidden)) { --system-backdrop:linear-gradient(#111822,#111822); }
#portal-view .nav-group-title { display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; font:inherit; }
#portal-view .nav-chevron { width:14px; height:14px; margin-left:auto; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; transform:rotate(-90deg); transition:transform .18s ease; }
#portal-view .nav-group-title[aria-expanded=true] .nav-chevron { transform:rotate(0); }
#portal-view .nav-submenu[hidden] { display:none; }
#portal-view .nav-group-title:focus-visible { outline:2px solid var(--navi-accent); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { #portal-view .nav-chevron { transition:none; } }
html:not([data-theme=dark]) #portal-view :is(.sidebar,.topbar,.panel,.metric-card,.quick-action,.quality-metric-card,.quality-filter-panel,.overview-metric,.profile-card,.password-page-card,.upload-panel,.table-panel,.account-dropdown,.notification-panel,.connection-panel,.dashboard-relay-status) {
  background:var(--navi-surface); border-color:var(--navi-line);
}
#portal-view :is(.panel,.metric-card,.quality-metric-card,.overview-metric,.profile-card) { border-radius:14px; box-shadow:var(--navi-shadow); }
#portal-view .topbar { height:64px; min-height:64px; padding-block:0; }
#portal-view .sidebar-brand { min-height:64px; height:64px; padding:10px 16px; gap:10px; }
#portal-view .workspace-home { width:100%; text-decoration:none; cursor:pointer; }
#portal-view .workspace-home:hover { background:var(--navi-soft); }
#portal-view .workspace-home:focus-visible { outline:2px solid var(--navi-accent); outline-offset:-3px; }
#portal-view .sidebar-brand .brand-mark { width:42px; height:42px; flex:0 0 42px; }
#portal-view .content { max-width:none; padding:32px; }
#portal-view .page-heading { margin-bottom:22px; }
#portal-view .page-heading h1 { font-size:28px; line-height:1.3; margin-block:6px; }
#portal-view .page-heading p { font-size:13px; line-height:1.6; color:var(--navi-muted); }
#portal-view .eyebrow { font-size:10px; letter-spacing:.12em; color:var(--navi-accent); }
#portal-view .metric-grid { gap:14px; margin-bottom:14px; }
#portal-view .metric-card { padding:18px; min-height:82px; gap:14px; }
#portal-view .metric-card strong { font-size:24px; }
#portal-view .metric-icon { width:38px; height:38px; flex:0 0 38px; border-radius:9px; }
#portal-view .panel-title { padding:20px 18px; border-color:var(--navi-line); }
#portal-view .panel-title h2 { font-size:16px; }
#portal-view :is(.secondary-button,.data-refresh-button,.portal-language,.notification-button,.account-menu-button) { border-radius:9px; border-color:var(--navi-line); }
html:not([data-theme=dark]) #portal-view :is(.secondary-button,.data-refresh-button,.portal-language,.notification-button,.account-menu-button) { background:#fff; color:var(--navi-ink); }
html:not([data-theme=dark]) #portal-view th { background:#f0f5f8; color:#52657b; }
#portal-view :is(td,th) { border-color:var(--navi-line); }
#portal-view .sidebar nav { padding:12px; }
#portal-view .nav-group { margin-top:16px; }
#portal-view .nav-group-title { padding:12px; border:1px solid var(--navi-line); border-radius:10px; color:var(--navi-ink); margin-bottom:8px; }
html:not([data-theme=dark]) #portal-view .nav-group-title { background:#f3f6fb; }
#portal-view .nav-sub-item { margin-left:20px; width:calc(100% - 20px); border-left:1px solid var(--navi-line); padding:10px 12px; border-radius:0 9px 9px 0; color:var(--navi-muted); }
#portal-view :is(.nav-item,.nav-group-title,.nav-sub-item) { font-size:14px; font-weight:600; line-height:1.5; }
#portal-view .nav-sub-item { min-height:42px; }
#portal-view .sub-nav-icon { width:18px; height:18px; flex:0 0 18px; }
html:not([data-theme=dark]) #portal-view :is(.nav-item.active,.nav-sub-item.active) { background:var(--navi-soft); color:var(--navi-accent); }
html:not([data-theme=dark]) #portal-view :is(.nav-item:hover,.nav-sub-item:hover,.quick-action:hover,tr:hover td) { background:#fff5f3; }
@media(min-width:1101px) { #portal-view .sidebar { width:246px; } #portal-view .portal-main { margin-left:246px; width:calc(100% - 246px); } }
@media(max-width:900px) { #portal-view .content { padding:24px; } }
@media(max-width:600px) { #portal-view .content { padding:20px 14px; } #portal-view .page-heading h1 { font-size:24px; } }

/* Occasional display preferences live with account settings, away from primary actions. */
.account-preferences { margin-top:6px; padding:8px 10px 2px; border-top:1px solid var(--navi-line); }
.account-preference-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; color:var(--navi-muted); font-size:12px; }
.account-preference-row .theme-selector { min-width:110px; max-width:140px; font-size:12px; }
.account-preference-row .portal-language { min-width:64px; width:auto; padding:0 12px; height:34px; }
.account-dropdown { max-width:calc(100vw - 24px); max-height:calc(100dvh - 84px); overflow-y:auto; }

.profile-menu-group summary { padding:12px; border-radius:10px; color:var(--navi-ink); }
.profile-menu-group summary::marker { color:var(--navi-muted); }
.profile-menu-group summary::after { content:'›'; margin-left:auto; transform:rotate(0); }
.profile-menu-group[open] summary::after { transform:rotate(90deg); }
.pet-introduction { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.pet-introduction img { flex:0 0 80px; object-fit:contain; }
.pet-introduction h4 { margin:0 0 8px; }
.pet-introduction p { margin:0; max-width:560px; line-height:1.7; color:var(--navi-muted); }