/* /Layout/MainLayout.razor.rz.scp.css */
/* Scoped styles for CaptureTech Layout */
.app-wrapper[b-zvjm05fzl2] {
    background: #f7f9fb;
    position: relative;
}

/* Sidebar */
.sidebar[b-zvjm05fzl2] {
    width: 240px;
    height: 100vh;
    background: linear-gradient(180deg, #00baff 0%, #0064cd 100%);
    color: white;
    display: flex;
    flex-direction: column;
    transition: width 0.25s ease;
    z-index: 1050;
    pointer-events: auto;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
}

    .sidebar .brand[b-zvjm05fzl2] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .sidebar .logo[b-zvjm05fzl2] {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        border-radius: 8px;
    }

    .sidebar .brand-text[b-zvjm05fzl2],
    .sidebar .brand-text *[b-zvjm05fzl2] {
        color: #ffffff !important;
    }

    .sidebar[b-zvjm05fzl2]  a.nav-link,
    .sidebar[b-zvjm05fzl2]  .nav-link,
    .sidebar[b-zvjm05fzl2]  .nav-link *,
    .sidebar[b-zvjm05fzl2]  .nav-link i {
        color: #ffffff !important;
        text-decoration: none;
    }

        .sidebar[b-zvjm05fzl2]  .nav-link i {
            font-size: 1.1rem;
            min-width: 24px;
            text-align: center;
            color: #ffffff !important;
        }

    .sidebar[b-zvjm05fzl2]  .nav {
        margin-top: 16px;
    }

    .sidebar[b-zvjm05fzl2]  .nav-link {
        padding: 10px 12px;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .sidebar[b-zvjm05fzl2]  .nav-link:hover {
            background: rgba(255, 255, 255, 0.06);
        }

        .sidebar[b-zvjm05fzl2]  .nav-link.active {
            background: rgba(255, 255, 255, 0.15);
            box-shadow: inset 3px 0 0 #f03c5a;
        }

    .sidebar .sidebar-footer[b-zvjm05fzl2] {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

        .sidebar .sidebar-footer .btn[b-zvjm05fzl2] {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #ffffff !important;
            border-color: rgba(255, 255, 255, 0.25) !important;
            background: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }

            .sidebar .sidebar-footer .btn:hover[b-zvjm05fzl2] {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.35) !important;
            }

            .sidebar .sidebar-footer .btn i[b-zvjm05fzl2] {
                color: #ffffff !important;
            }

    .sidebar[b-zvjm05fzl2]  .nav-text,
    .sidebar .btn-text[b-zvjm05fzl2] {
        color: #ffffff !important;
    }

    /* Collapsed state */
    .sidebar.collapsed[b-zvjm05fzl2] {
        width: 64px;
    }

        .sidebar.collapsed .brand[b-zvjm05fzl2] {
            justify-content: center;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

            .sidebar.collapsed .brand .logo[b-zvjm05fzl2] {
                margin-right: 0 !important;
                margin-left: 0 !important;
            }

        .sidebar.collapsed[b-zvjm05fzl2]  .nav {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .sidebar.collapsed[b-zvjm05fzl2]  .nav-link {
            justify-content: center;
            align-items: center;
            padding: 12px 0;
            text-align: center;
            margin-left: 0;
            margin-right: 0;
        }

            .sidebar.collapsed[b-zvjm05fzl2]  .nav-link i {
                margin: 0 !important;
                font-size: 1.25rem;
                width: 100%;
                text-align: center;
            }

        .sidebar.collapsed[b-zvjm05fzl2]  .nav-text,
        .sidebar.collapsed .btn-text[b-zvjm05fzl2] {
            display: none;
        }

/* Main area */
.main[b-zvjm05fzl2] {
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 240px;
    transition: margin-left 0.25s ease;
    min-width: 0;
    max-width: calc(100vw - 240px);
    overflow-x: hidden;
}

.sidebar.collapsed ~ .main[b-zvjm05fzl2] {
    margin-left: 64px;
    max-width: calc(100vw - 64px);
}

.header[b-zvjm05fzl2] {
    height: 64px;
    background: #ffffff;
    border-bottom: 1px solid #e9eef3;
    align-items: center;
    flex-shrink: 0;
}

/* Avatar */
.avatar[b-zvjm05fzl2] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00baff, #0064cd);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Content area */
.content[b-zvjm05fzl2] {
    background: transparent;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    max-width: 100%;
}

/* Page container for skeleton overlay */
.page-container[b-zvjm05fzl2] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
}

/* Skeleton loader overlay */
.skeleton-loader[b-zvjm05fzl2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    z-index: 100;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.skeleton-loader.visible[b-zvjm05fzl2] {
    opacity: 1;
    visibility: visible;
}

.skeleton-loader.hidden[b-zvjm05fzl2] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Page content */
.page-content[b-zvjm05fzl2] {
    position: relative;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease-in;
}

.page-content.loading[b-zvjm05fzl2] {
    opacity: 0;
    visibility: hidden;
}

.page-content.loaded[b-zvjm05fzl2] {
    opacity: 1;
    visibility: visible;
}

/* Sidebar footer copyright text - matching reference */
.sidebar-footer-copyright[b-zvjm05fzl2] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.sidebar-footer-copyright small[b-zvjm05fzl2] {
    color: rgba(255, 255, 255, 0.4) !important;
}

.sidebar-footer-copyright .version-text[b-zvjm05fzl2] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3) !important;
    margin-bottom: 2px;
}

/* Responsive */
@media (max-width: 767.98px) {
    .sidebar[b-zvjm05fzl2] {
        left: -240px;
    }

        .sidebar.collapsed[b-zvjm05fzl2] {
            left: 0;
            width: 64px;
        }

    .main[b-zvjm05fzl2] {
        margin-left: 0;
        max-width: 100vw;
    }
}