/* =========================================================
   RAK PREMIUM LAYOUT THEME
   ========================================================= */

:root {
    --rak-background: #f5f8fb;
    --rak-surface: #ffffff;

    --rak-black: #050505;
    --rak-primary: #0795cf;
    --rak-primary-dark: #087eb5;
    --rak-secondary: #00b98a;
    --rak-secondary-dark: #078568;

    --rak-text: #243449;
    --rak-text-muted: #718096;
    --rak-border: #e5edf3;

    --rak-shadow:
            0 2px 12px rgba(20, 42, 65, 0.035);
}


/* =========================================================
   APP CONTAINER
   ========================================================= */

.rak-app {
    margin-left: 260px;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    background: var(--rak-background);
    color: var(--rak-text);
}


/* =========================================================
   TOP HEADER
   ========================================================= */

.rak-header {
    position: sticky;
    top: 0;
    z-index: 900;

    min-height: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
    padding: 0 30px;

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--rak-border);

    box-shadow: 0 2px 8px rgba(20, 42, 65, 0.025);
    box-sizing: border-box;
}

.rak-header-left {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 18px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.rak-breadcrumb {
    min-width: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    font-size: 12px;
}

.rak-breadcrumb-section {
    color: #8999aa;
    font-weight: 400;
}

.rak-breadcrumb-current {
    color: var(--rak-text);
    font-weight: 600;
}

.rak-breadcrumb i {
    color: #b5c1cc;
    font-size: 9px;
}


/* =========================================================
   HEADER RIGHT
   ========================================================= */

.rak-header-right {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    gap: 18px;
}


/* =========================================================
   HEADER ICON BUTTONS
   ========================================================= */

.rak-header-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid transparent;
    border-radius: 10px;

    background: transparent;
    color: #71849a;

    cursor: pointer;

    transition:
            background-color 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
}

.rak-header-icon:hover {
    background: #edf8fc;
    border-color: #d8eef7;
    color: var(--rak-primary-dark);
}

.rak-header-icon:focus-visible {
    outline: 2px solid var(--rak-primary);
    outline-offset: 2px;
}


/* =========================================================
   HEADER USER
   ========================================================= */

.rak-header-user {
    display: flex;
    align-items: center;
    gap: 11px;

    padding-left: 17px;
    border-left: 1px solid var(--rak-border);
}

.rak-header-avatar {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #c9f1e4;
    border-radius: 11px;

    background: linear-gradient(
            135deg,
            #e3fbf2,
            #e7f6fc
    );

    color: #078568;

    font-size: 11px;
    font-weight: 700;
}

.rak-header-user-name {
    color: var(--rak-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.rak-header-user-role {
    margin-top: 3px;

    color: #8a9aab;
    font-size: 10px;
    line-height: 1.4;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.rak-content {
    flex: 1;
    min-width: 0;

    padding: 30px 32px;

    background:
            radial-gradient(
                    circle at 100% 0%,
                    rgba(7, 149, 207, 0.045),
                    transparent 30%
            ),
            var(--rak-background);

    box-sizing: border-box;
}


/* =========================================================
   FOOTER
   ========================================================= */

.rak-footer {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px;
    padding: 12px 32px;

    background: #ffffff;
    border-top: 1px solid var(--rak-border);

    color: #8999aa;
    font-size: 10px;

    box-sizing: border-box;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.rak-mobile-menu {
    flex-shrink: 0;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid #dce6ee;
    border-radius: 9px;

    background: #ffffff;
    color: #52677d;

    font-size: 15px;
    cursor: pointer;

    transition: all 0.2s ease;
}

.rak-mobile-menu:hover {
    border-color: var(--rak-primary);
    background: #edf8fc;
    color: var(--rak-primary-dark);
}

.rak-mobile-menu:focus-visible {
    outline: 2px solid var(--rak-primary);
    outline-offset: 2px;
}


/* =========================================================
   RESPONSIVE LAYOUT
   ========================================================= */

@media (max-width: 1100px) {
    .rak-header {
        padding: 0 22px;
    }

    .rak-content {
        padding: 24px;
    }

    .rak-footer {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
    .rak-app {
        margin-left: 0;
    }

    .rak-header {
        min-height: 62px;
        height: 62px;
        padding: 0 16px;
        gap: 12px;
    }

    .rak-header-left {
        gap: 12px;
    }

    .rak-header-right {
        gap: 8px;
    }

    .rak-header-user {
        gap: 8px;
        padding-left: 10px;
    }

    .rak-header-user-role {
        display: none;
    }

    .rak-content {
        padding: 20px 16px;
    }

    .rak-footer {
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .rak-header {
        padding: 0 12px;
    }

    .rak-header-user-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rak-breadcrumb {
        gap: 6px;
        font-size: 11px;
    }

    .rak-content {
        padding: 16px 12px;
    }
}