/**
 * One Legacy — Internal Ops Shell
 * App-specific nav, sidebar, and layout styles.
 * Imports shared components upstream.
 */

@import url("../../repo/css/components.css");

body:not(.auth-ready) { visibility: hidden; }

.admin-shell {
 display: flex;
 min-height: 100vh;
}

/* Sidebar shell — aligned with apps/internal-dashboard/src/ops-shell.css (#ops-nav) */
#admin-nav {
 width: var(--nav-w);
 min-height: 100vh;
 background: var(--color-bg);
 border-right: 1px solid var(--color-border);
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 display: flex;
 flex-direction: column;
 padding: 0 0 16px;
 overflow-y: auto;
 z-index: 2;
}

.nav-body {
 flex: 1;
 overflow-y: auto;
 min-height: 0;
}

.nav-section {
 padding: var(--space-md) 0 0;
}

.nav-label {
 font-family: var(--font-body);
 font-size: var(--font-size-label);
 font-weight: 300;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--color-text-muted);
 padding: 0 16px 8px;
}

#admin-nav a.nav-item {
 display: flex;
 align-items: center;
 gap: var(--space-sm);
 padding: var(--space-sm) 16px;
 color: var(--color-text-muted);
 font-size: var(--font-size-body);
 font-weight: 350;
 letter-spacing: 0.05em;
 text-decoration: none;
 transition: color var(--transition-base), background var(--transition-base);
 border-left: 2px solid transparent;
}

#admin-nav a.nav-item:hover {
 color: var(--color-text-secondary);
 background: var(--color-surface-muted);
}

#admin-nav a.nav-item.active {
 color: var(--color-text);
 background: var(--color-brand-dim);
 border-left-color: var(--color-brand);
 box-shadow: none;
}

#admin-nav a.nav-item svg {
 width: 15px;
 height: 15px;
 flex-shrink: 0;
}

.sidebar-footer {
 margin-top: auto;
 padding: var(--space-md) 16px;
 border-top: 1px solid var(--color-border);
 display: flex;
 align-items: center;
 gap: var(--space-sm);
}

.sidebar-footer .avatar {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: var(--color-surface-muted);
 border: 1px solid var(--color-border-strong);
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-data);
 font-weight: 700;
 font-size: 10px;
 color: var(--color-text);
 flex-shrink: 0;
}

.sidebar-footer .user-info {
 flex: 1;
 min-width: 0;
}

.sidebar-footer .user-name {
 font-size: 12px;
 font-weight: 600;
 color: var(--color-text);
}

.sidebar-footer .user-role {
 font-size: 10px;
 color: var(--color-text-muted);
}

.nav-user-role-ellipsis {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.nav-signout-btn {
 margin-left: auto;
 flex-shrink: 0;
 background: none;
 border: none;
 cursor: pointer;
 color: var(--color-text-muted);
 padding: 4px;
 border-radius: var(--radius-sm);
 display: flex;
 align-items: center;
 transition: color 0.18s;
}

.nav-signout-btn:hover {
 color: var(--color-brand);
}

.access-denied-wrap {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 box-sizing: border-box;
}

.access-denied-card {
 max-width: 28rem;
 text-align: center;
}

.access-denied-title {
 margin: 0 0 12px;
 font-weight: 600;
}

.access-denied-copy {
 margin: 0 0 16px;
 font-size: 13px;
 line-height: 1.5;
}

.u-hidden {
 display: none;
}

/* .field sets display:flex later in this file; without this, .field.u-hidden stays visible */
.field.u-hidden {
 display: none !important;
}

.nav-logo-wrap {
 padding: 18px 16px 12px;
 border-bottom: 1px solid var(--color-border);
}

.nav-logo-wrap .ol-nav-logo {
 width: 100%;
}

/* Chakra Petch label band — aligns with .nav-item horizontal padding (16px) */
.nav-kicker {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 min-height: 48px;
 padding: var(--space-md) 16px;
 font-family: var(--font-data);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: none;
 text-align: left;
 line-height: 1.25;
 color: var(--color-brand);
 border-bottom: 1px solid var(--color-border);
}

.admin-main {
 margin-left: var(--nav-w);
 flex: 1;
 padding: 32px 36px;
 max-width: 1200px;
}

.page-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 24px;
 flex-wrap: wrap;
 gap: 12px;
}

.page-title {
 font-family: var(--font-brand);
 font-size: var(--font-size-title);
 font-weight: 400;
 letter-spacing: 0.11em;
 text-transform: uppercase;
 line-height: 1.0;
 color: var(--color-brand);
}

.page-title span {
 color: inherit;
}