/* ============================================================
   ET.RFGateWay Admin — Application shell (layout.css)
   Collapsible sidebar, topbar, page canvas, responsive behavior.
   ============================================================ */

.admin-shell {
    display: flex;
    min-height: 100vh;
    background: var(--rg-bg);
}

/* ---------------- Sidebar ---------------- */

.sidebar {
    width: var(--rg-sidebar-width);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: var(--rg-z-sidebar);
    color: var(--rg-sidebar-text);
    border-right: 1px solid var(--rg-sidebar-border);
    background:
        radial-gradient(130% 55% at 0% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 56%),
        linear-gradient(180deg, var(--rg-sidebar-accent) 0%, var(--rg-sidebar-bg) 36%);
    transition: width var(--rg-slow), transform var(--rg-slow), box-shadow var(--rg-slow);
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--rg-space-4) var(--rg-space-4) var(--rg-space-3);
    min-height: var(--rg-topbar-height);
    border-bottom: 1px solid var(--rg-sidebar-border);
    gap: var(--rg-space-2);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
    text-decoration: none;
    min-width: 0;
}

.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--rg-brand-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px -6px rgba(99, 102, 241, 0.6);
    flex-shrink: 0;
    user-select: none;
}

.brand-info {
    min-width: 0;
    transition: opacity var(--rg-fast);
}

.brand-name {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: var(--rg-font-size-md);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--rg-sidebar-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-collapse-btn {
    width: 30px;
    height: 30px;
    border-radius: var(--rg-radius-sm);
    color: var(--rg-sidebar-text);
    background: rgba(148, 163, 199, 0.08);
    border: 1px solid var(--rg-sidebar-border);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--rg-fast);
}

.sidebar-collapse-btn:hover {
    color: #fff;
    background: rgba(148, 163, 199, 0.18);
    border-color: rgba(148, 163, 199, 0.28);
}

.nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--rg-space-3) var(--rg-space-3) var(--rg-space-5);
}

.nav-group + .nav-group {
    margin-top: var(--rg-space-5);
}

.nav-group-label {
    padding: 0 var(--rg-space-3) var(--rg-space-2);
    font-size: 0.6563rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--rg-sidebar-text);
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px var(--rg-space-3);
    margin-bottom: 2px;
    border-radius: var(--rg-radius-sm);
    color: var(--rg-sidebar-text);
    font-size: var(--rg-font-size-base);
    font-weight: 500;
    transition: background var(--rg-fast), color var(--rg-fast);
    white-space: nowrap;
    text-decoration: none;
}

.nav-item:hover {
    background: var(--rg-sidebar-hover);
    color: var(--rg-sidebar-text-active);
    text-decoration: none;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.30), rgba(99, 102, 241, 0.07));
    color: var(--rg-sidebar-text-active);
    font-weight: 600;
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 22%;
    width: 3px;
    height: 56%;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #818cf8, #6366f1);
}

.nav-icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    opacity: 0.95;
    flex-shrink: 0;
}

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

.tenant-picker {
    margin: var(--rg-space-2) var(--rg-space-1) var(--rg-space-4);
    padding: var(--rg-space-3);
    border-radius: var(--rg-radius-md);
    border: 1px solid var(--rg-sidebar-border);
    background: rgba(148, 163, 199, 0.07);
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: all var(--rg-fast);
}

.tenant-picker-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6563rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--rg-sidebar-text);
}

.tenant-picker select {
    min-height: 34px;
    padding: 6px 30px 6px 10px;
    font-size: var(--rg-font-size-sm);
    background-color: rgba(10, 17, 34, 0.55);
    border-color: var(--rg-sidebar-border);
    color: var(--rg-sidebar-text-active);
    border-radius: var(--rg-radius-sm);
}

.tenant-picker select option {
    background: #0d1526;
    color: #e6ebf7;
}

.sidebar-foot {
    padding: var(--rg-space-4) var(--rg-space-4);
    border-top: 1px solid var(--rg-sidebar-border);
    font-size: var(--rg-font-size-xs);
    color: var(--rg-sidebar-text);
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
    min-height: var(--rg-topbar-height);
}

.sidebar-foot-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-chip {
    margin-inline-start: auto;
    border: 1px solid var(--rg-sidebar-border);
    border-radius: var(--rg-radius-pill);
    padding: 2px 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--rg-sidebar-text-active);
    background: rgba(148, 163, 199, 0.08);
    white-space: nowrap;
}

/* ---------------- Collapsed sidebar mode ---------------- */

.admin-shell.sidebar-collapsed .sidebar {
    width: var(--rg-sidebar-collapsed-width);
}

.admin-shell.sidebar-collapsed .sidebar-head {
    justify-content: center;
    padding: var(--rg-space-3) 0;
}

.admin-shell.sidebar-collapsed .brand {
    justify-content: center;
    padding: 0;
}

.admin-shell.sidebar-collapsed .brand-info,
.admin-shell.sidebar-collapsed .sidebar-collapse-btn {
    display: none;
}

.admin-shell.sidebar-collapsed .nav-scroll {
    padding: var(--rg-space-3) var(--rg-space-2);
}

.admin-shell.sidebar-collapsed .nav-group-label {
    display: none;
}

.admin-shell.sidebar-collapsed .nav-group + .nav-group {
    margin-top: var(--rg-space-3);
    padding-top: var(--rg-space-3);
    border-top: 1px solid var(--rg-sidebar-border);
}

.admin-shell.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
    border-radius: var(--rg-radius-md);
}

.admin-shell.sidebar-collapsed .nav-text {
    display: none;
}

.admin-shell.sidebar-collapsed .nav-item.active::before {
    left: 0;
    top: 18%;
    height: 64%;
}

.admin-shell.sidebar-collapsed .tenant-picker {
    margin: var(--rg-space-2) auto var(--rg-space-3);
    padding: var(--rg-space-2) 0;
    width: 48px;
    align-items: center;
    justify-content: center;
}

.admin-shell.sidebar-collapsed .tenant-picker-label .nav-text {
    display: none;
}

.admin-shell.sidebar-collapsed .tenant-picker select {
    max-width: 42px;
    min-height: 26px;
    padding: 3px;
    font-size: 0.65rem;
    text-align: center;
}

.admin-shell.sidebar-collapsed .sidebar-foot {
    justify-content: center;
    padding: var(--rg-space-3) 0;
}

.admin-shell.sidebar-collapsed .sidebar-foot-text,
.admin-shell.sidebar-collapsed .version-chip {
    display: none;
}

/* ---------------- Main pane / topbar ---------------- */

.main-pane {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: margin var(--rg-slow);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--rg-z-topbar);
    min-height: var(--rg-topbar-height);
    display: flex;
    align-items: center;
    gap: var(--rg-space-4);
    padding: 0 var(--rg-space-6);
    border-bottom: 1px solid var(--rg-border);
    background: color-mix(in srgb, var(--rg-surface) 84%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.topbar-title-block {
    min-width: 0;
}

.topbar-title {
    font-size: var(--rg-font-size-md);
    font-weight: 650;
    color: var(--rg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-context {
    margin-top: 1px;
    font-size: 0.6875rem;
    color: var(--rg-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-right {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
}

.env-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 280px;
    padding: 5px 12px;
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-pill);
    background: var(--rg-surface-muted);
    color: var(--rg-text-muted);
    font-size: var(--rg-font-size-xs);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.env-badge .dot {
    flex-shrink: 0;
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 5px;
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-pill);
    background: var(--rg-surface);
    box-shadow: var(--rg-shadow-sm);
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rg-brand-gradient);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.user-meta {
    line-height: 1.2;
    min-width: 0;
}

.user-name {
    font-size: var(--rg-font-size-sm);
    font-weight: 600;
    color: var(--rg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.6875rem;
    color: var(--rg-text-muted);
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--rg-radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--rg-text-muted);
    cursor: pointer;
    transition: all var(--rg-fast);
}

.icon-btn:hover {
    background: var(--rg-neutral-soft);
    color: var(--rg-text);
}

.icon-btn.danger:hover {
    background: var(--rg-danger-soft);
    color: var(--rg-danger);
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: grid;
}

.scrim {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(7, 12, 23, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
    z-index: calc(var(--rg-z-sidebar) - 1);
}

/* ---------------- Page canvas ---------------- */

.page-body {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--rg-content-max);
    margin: 0 auto;
    padding: var(--rg-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-5);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1024px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--rg-sidebar-width) !important;
        transform: translateX(-102%);
        transition: transform var(--rg-slow), box-shadow var(--rg-slow);
    }

    .admin-shell.sidebar-collapsed .sidebar {
        width: var(--rg-sidebar-width) !important;
    }

    .admin-shell.sidebar-collapsed .brand-info,
    .admin-shell.sidebar-collapsed .nav-text,
    .admin-shell.sidebar-collapsed .nav-group-label,
    .admin-shell.sidebar-collapsed .sidebar-foot-text,
    .admin-shell.sidebar-collapsed .version-chip {
        display: block !important;
    }

    .admin-shell.sidebar-collapsed .brand {
        justify-content: flex-start !important;
    }

    .admin-shell.sidebar-collapsed .nav-item {
        justify-content: flex-start !important;
        padding: 9px var(--rg-space-3) !important;
        gap: 11px !important;
    }

    .admin-shell.sidebar-collapsed .tenant-picker {
        width: auto !important;
        margin: var(--rg-space-2) var(--rg-space-1) var(--rg-space-4) !important;
        padding: var(--rg-space-3) !important;
        align-items: stretch !important;
    }

    .admin-shell.sidebar-collapsed .tenant-picker-label .nav-text {
        display: inline !important;
    }

    .admin-shell.sidebar-collapsed .tenant-picker select {
        max-width: none !important;
        min-height: 34px !important;
        padding: 6px 30px 6px 10px !important;
        font-size: var(--rg-font-size-sm) !important;
    }

    .admin-shell.sidebar-collapsed .sidebar-foot {
        justify-content: flex-start !important;
        padding: var(--rg-space-4) var(--rg-space-4) !important;
    }

    .admin-shell.nav-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--rg-shadow-overlay);
    }

    .mobile-only {
        display: grid !important;
    }

    .desktop-only {
        display: none !important;
    }

    .env-badge {
        display: none;
    }
}

@media (max-width: 640px) {
    .page-body {
        padding: var(--rg-space-4);
        gap: var(--rg-space-4);
    }

    .topbar {
        padding: 0 var(--rg-space-4);
    }

    .user-meta {
        display: none;
    }

    .user-chip {
        padding: 4px 8px 4px 5px;
    }

    .topbar-title {
        font-size: var(--rg-font-size-base);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}