/* ---------------------------------------------------------------------------
   Panel shell. Layered on top of Bootstrap 5 so both light and dark themes
   (spec 112) work without a second stylesheet.
   ------------------------------------------------------------------------ */

:root {
    --sidebar-width: 248px;
    --topbar-height: 60px;
    --app-radius: 12px;

    /* The sidebar is deliberately dark in BOTH themes, so it cannot inherit the
       Bootstrap theme variables - those flip to dark text under the light theme
       and would leave the navigation unreadable. Its foreground colours are
       therefore defined here as white at varying opacity, which keeps them
       correct against any dark --sidebar-bg.

       Change --sidebar-bg alone to restyle the whole sidebar. */
    --sidebar-bg: #141b2d;
    --sidebar-border: rgba(255, 255, 255, 0.09);
    --sidebar-text: rgba(255, 255, 255, 0.72);
    --sidebar-text-strong: #fff;
    --sidebar-muted: rgba(255, 255, 255, 0.45);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
}

body {
    background-color: var(--bs-body-bg);
    font-size: 0.925rem;
}

/* ------------------------------------------------------------------ shell */

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

.app-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1030;
}

.sidebar-brand {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--sidebar-border);
    color: var(--sidebar-text-strong);
}

.sidebar-brand i {
    color: var(--bs-primary);
    font-size: 1.15rem;
}

.sidebar-nav {
    padding: 0.75rem 0.6rem;
    overflow-y: auto;
    flex: 1;
}

.sidebar-section {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sidebar-muted);
    padding: 0.9rem 0.75rem 0.35rem;
    font-weight: 600;
}

.sidebar-section:first-child {
    padding-top: 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-text-strong);
}

.sidebar-link.active {
    background: var(--bs-primary);
    color: #fff;
}

.sidebar-footer {
    padding: 0.75rem 1.1rem;
    border-top: 1px solid var(--sidebar-border);
}

/* Bootstrap's .text-muted resolves to a dark grey under the light theme, which
   is invisible on the dark sidebar. Scope an override to the sidebar only. */
.app-sidebar .text-muted {
    color: var(--sidebar-muted) !important;
}

/* Default scrollbar chrome is light-on-light and shows as a bright bar against
   the dark panel once the nav overflows. */
.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    background: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.topbar-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-content {
    padding: 1.1rem;
    flex: 1;
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------ components */

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.avatar-lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
    display: flex;
}

.card {
    border-radius: var(--app-radius);
    border-color: var(--bs-border-color);
}

.card-header {
    font-weight: 600;
    font-size: 0.9rem;
    background: transparent;
}

.stat-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-left-width: 4px;
    border-radius: var(--app-radius);
    padding: 0.9rem 1rem;
    height: 100%;
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-secondary-color);
}

.stat-value {
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.25;
}

.stat-hint {
    font-size: 0.72rem;
    color: var(--bs-secondary-color);
}

.border-start-primary   { border-left-color: var(--bs-primary); }
.border-start-success   { border-left-color: var(--bs-success); }
.border-start-warning   { border-left-color: var(--bs-warning); }
.border-start-danger    { border-left-color: var(--bs-danger); }
.border-start-info      { border-left-color: var(--bs-info); }
.border-start-secondary { border-left-color: var(--bs-secondary); }

.permission-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    height: 100%;
}

.permission-check {
    padding: 0.45rem 0.6rem 0.45rem 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    height: 100%;
}

.otp-input {
    letter-spacing: 0.6em;
    font-weight: 600;
}

/* ------------------------------------------------------------------ tree */

.tree, .tree-children {
    list-style: none;
    padding-left: 1.1rem;
    margin: 0;
}

.tree > .tree-node {
    padding-left: 0;
}

.tree-node {
    position: relative;
    padding: 0.15rem 0;
}

.tree-children > .tree-node::before {
    content: "";
    position: absolute;
    left: -0.7rem;
    top: 1rem;
    width: 0.6rem;
    border-top: 1px solid var(--bs-border-color);
}

.tree-children {
    border-left: 1px solid var(--bs-border-color);
    margin-left: 0.35rem;
}

.tree-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
}

.tree-item:hover {
    background: var(--bs-secondary-bg);
}

.tree-root {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
}

/* ------------------------------------------------------------------- auth */

.auth-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--bs-tertiary-bg);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.auth-brand i {
    font-size: 2rem;
    color: var(--bs-primary);
}

.auth-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
}

.auth-brand-tag {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.auth-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.auth-subtitle {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1.25rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: 0.78rem;
    margin: 1.25rem 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--bs-border-color);
}

.auth-divider span {
    padding: 0 0.75rem;
}

.auth-footer {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* ----------------------------------------------------------------- errors */

.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    gap: 0.5rem;
}

.error-code {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--bs-primary);
    line-height: 1;
}

.error-trace {
    margin-top: 1.5rem;
    max-width: 960px;
    width: 100%;
    text-align: left;
    font-size: 0.72rem;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 1rem;
    overflow: auto;
    max-height: 320px;
}

/* -------------------------------------------- select with per-option logos */

.logo-select {
    position: relative;
}

/* The real <select> stays in the DOM and keeps its size, only invisible and
   click-through. It is NOT display:none, because a hidden control cannot be
   focused and the browser then refuses to submit the form at all, reporting
   "an invalid form control is not focusable" instead of showing the required
   message next to the field. */
.logo-select.is-enhanced > select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.logo-select-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
}

.logo-select-toggle.is-placeholder .logo-select-label {
    color: var(--bs-secondary-color);
}

.logo-select-img {
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    flex-shrink: 0;
}

.logo-select-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
}

.logo-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-select-menu {
    display: none;
    position: absolute;
    z-index: 1055;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--app-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.logo-select.is-open .logo-select-menu {
    display: block;
}

.logo-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.logo-select-option:hover,
.logo-select-option.is-active {
    background: var(--bs-tertiary-bg);
}

.logo-select-option[aria-selected="true"] {
    font-weight: 600;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }

    .app-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    }

    .app-content {
        padding: 0.85rem;
    }
}