/*
|--------------------------------------------------------------------------
| CYBROXA HOSTING - GLOBAL LAYOUT
|--------------------------------------------------------------------------
|
| Contains:
| - Dark Mode
| - Light Mode
| - Top Bar
| - Logo + Site Name
| - Theme Button
| - Profile Button
| - Dropdown Menu
| - Wallet
| - Menu Links
| - Mobile Responsive Design
|
*/


/* =========================================================
   DARK MODE - DEFAULT
========================================================= */

:root {

    color-scheme: dark;

    --bg: #080a0f;

    --navbar: #0e1118;

    --card: #11151d;

    --dropdown: #131720;

    --hover: #1e2330;

    --input: #090d14;

    --text: #ffffff;

    --text-secondary: #d9dce4;

    --muted: #8d94a3;

    --border: #292e39;

    --border-light: #343a49;

    --primary: #6366f1;

    --primary-hover: #7477ff;

    --primary-soft:
        rgba(
            99,
            102,
            241,
            .12
        );

    --danger: #ff7b88;

    --success: #79e19d;

    --shadow:
        rgba(
            0,
            0,
            0,
            .50
        );

}


/* =========================================================
   LIGHT MODE
========================================================= */

html[data-theme="light"] {

    color-scheme: light;

    --bg: #f4f6fb;

    --navbar: #ffffff;

    --card: #ffffff;

    --dropdown: #ffffff;

    --hover: #f1f3f8;

    --input: #f7f8fb;

    --text: #171a22;

    --text-secondary: #4f5868;

    --muted: #747e90;

    --border: #dfe3eb;

    --border-light: #d2d7e1;

    --primary: #595cf3;

    --primary-hover: #484be4;

    --primary-soft:
        rgba(
            89,
            92,
            243,
            .10
        );

    --danger: #d94051;

    --success: #18884d;

    --shadow:
        rgba(
            25,
            35,
            55,
            .12
        );

}


/* =========================================================
   RESET
========================================================= */

* {

    box-sizing: border-box;

}


html {

    margin: 0;

    padding: 0;

    background:
        var(--bg);

}


body {

    margin: 0;

    min-height: 100vh;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =========================================================
   TOP BAR
========================================================= */

.site-topbar {

    width: 100%;

    height: 76px;

    padding:
        0 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        var(--navbar);

    border-bottom:
        1px solid
        var(--border);

    position: relative;

    z-index: 1000;

}


/* =========================================================
   LOGO + SERVER NAME
========================================================= */

.site-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        var(--text);

    text-decoration: none;

}


.site-logo {

    width: 45px;

    height: 45px;

    object-fit: contain;

    flex-shrink: 0;

}


.site-name {

    color:
        var(--text);

    font-size: 20px;

    font-weight: 700;

    white-space: nowrap;

}


/* =========================================================
   TOPBAR RIGHT
========================================================= */

.topbar-right {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* =========================================================
   DARK / LIGHT BUTTON
========================================================= */

.theme-toggle {

    width: 44px;

    height: 44px;

    min-width: 44px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        var(--card);

    color:
        var(--text);

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 5px 18px
        var(--shadow);

    transition:
        background .2s,
        border-color .2s,
        transform .2s;

}


.theme-toggle:hover {

    background:
        var(--hover);

    border-color:
        var(--primary);

    transform:
        translateY(-1px);

}


/* =========================================================
   PROFILE
========================================================= */

.profile-wrapper {

    position: relative;

}


.profile-button {

    width: 48px;

    height: 48px;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    border: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #5368f5,
            #7954ff
        );

    color: #ffffff;

    font-size: 19px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 18px
        rgba(
            91,
            91,
            255,
            .25
        );

}


.profile-button img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   PROFILE DROPDOWN
========================================================= */

.profile-menu {

    position: absolute;

    top: 59px;

    right: 0;

    width: 285px;

    max-height:
        calc(
            100vh - 95px
        );

    padding: 10px;

    overflow-y: auto;

    display: none;

    background:
        var(--dropdown);

    border:
        1px solid
        var(--border);

    border-radius: 15px;

    box-shadow:
        0 20px 55px
        var(--shadow);

}


.profile-menu.active {

    display: block;

}


/* =========================================================
   PROFILE INFO
========================================================= */

.profile-info {

    padding:
        14px 13px;

}


.profile-name {

    margin-bottom: 6px;

    color:
        var(--text);

    font-size: 17px;

    font-weight: 700;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.profile-email {

    color:
        var(--muted);

    font-size: 12px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* =========================================================
   DIVIDER
========================================================= */

.menu-divider {

    height: 1px;

    margin: 7px;

    background:
        var(--border);

}


/* =========================================================
   WALLET
========================================================= */

.wallet-box {

    margin:
        10px 5px;

    padding: 15px;

    background:
        linear-gradient(
            135deg,
            var(--primary-soft),
            var(--card)
        );

    border:
        1px solid
        var(--border);

    border-radius: 11px;

}


.wallet-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}


.wallet-label {

    margin-bottom: 5px;

    color:
        var(--muted);

    font-size: 12px;

}


.wallet-balance {

    color:
        var(--text);

    font-size: 20px;

    font-weight: 700;

}


.add-cash-btn {

    min-height: 37px;

    padding:
        0 12px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #5368f5,
            #7954ff
        );

    border-radius: 8px;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 700;

}


/* =========================================================
   MENU LINKS
========================================================= */

.menu-link {

    width: 100%;

    padding:
        12px 13px;

    display: flex;

    align-items: center;

    border-radius: 8px;

    color:
        var(--text-secondary);

    text-decoration: none;

    font-size: 14px;

    transition:
        background .2s,
        color .2s;

}


.menu-link:hover {

    background:
        var(--hover);

    color:
        var(--text);

}


.admin-link {

    color:
        var(--primary);

    background:
        var(--primary-soft);

}


.admin-link:hover {

    background:
        var(--primary-soft);

    color:
        var(--primary);

}


.logout-link {

    color:
        var(--danger);

}


/* =========================================================
   GLOBAL PAGE AREA
========================================================= */

.page-container {

    width: 100%;

    max-width: 1200px;

    margin:
        0 auto;

    padding:
        50px 6%;

}


/* =========================================================
   REUSABLE CARD
========================================================= */

.site-card {

    background:
        var(--card);

    color:
        var(--text);

    border:
        1px solid
        var(--border);

    border-radius: 16px;

}


.muted-text {

    color:
        var(--muted);

}


/* =========================================================
   INPUTS
========================================================= */

.site-input,
.site-select,
.site-textarea {

    width: 100%;

    background:
        var(--input);

    color:
        var(--text);

    border:
        1px solid
        var(--border);

    border-radius: 9px;

    outline: none;

}


.site-input:focus,
.site-select:focus,
.site-textarea:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        var(--primary-soft);

}


/* =========================================================
   THEME TRANSITIONS
========================================================= */

body,
.site-topbar,
.theme-toggle,
.profile-menu,
.wallet-box,
.site-card,
.menu-link {

    transition:
        background-color .20s ease,
        background .20s ease,
        border-color .20s ease,
        color .20s ease,
        box-shadow .20s ease;

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width: 700px
) {

    .site-topbar {

        padding:
            0 20px;

    }


    .site-brand {

        gap: 9px;

    }


    .site-logo {

        width: 42px;

        height: 42px;

    }


    .site-name {

        font-size: 18px;

    }


    .topbar-right {

        gap: 8px;

    }


    .theme-toggle {

        width: 42px;

        height: 42px;

        min-width: 42px;

    }


    .profile-button {

        width: 46px;

        height: 46px;

    }


    .page-container {

        padding:
            40px 20px;

    }

}


@media (
    max-width: 430px
) {

    .site-topbar {

        padding:
            0 14px;

    }


    .site-logo {

        width: 38px;

        height: 38px;

    }


    .site-name {

        font-size: 16px;

    }


    .theme-toggle {

        width: 39px;

        height: 39px;

        min-width: 39px;

        font-size: 16px;

    }


    .profile-button {

        width: 42px;

        height: 42px;

    }


    .profile-menu {

        width:
            min(
                285px,
                calc(
                    100vw - 28px
                )
            );

    }

}

@media (
    max-width: 350px
) {

    .site-name {

        font-size: 14px;

    }


    .site-brand {

        gap: 5px;

    }


    .topbar-right {

        gap: 5px;

    }

}