/* =========================================================
   DUNEHOST — LOGGED-IN CLIENT DASHBOARD
   ========================================================= */

body.dh-client-dashboard-body {
    margin: 0;

    background:
        #050605 !important;

    color:
        #f5f2eb;
}


/* ---------------------------------------------------------
   REMOVE LEGACY WHMCS CHROME
   --------------------------------------------------------- */

body.dh-client-dashboard-body #header,
body.dh-client-dashboard-body #nav,

body.dh-client-dashboard-body
#main-body
.sidebar,

body.dh-client-dashboard-body
#main-body
.header-lined,

body.dh-client-dashboard-body
#main-body
.breadcrumb {
    display:
        none !important;
}


body.dh-client-dashboard-body
#main-body {
    margin: 0 !important;

    padding: 0 !important;

    min-height:
        calc(100vh - 46px);

    background:
        #050605 !important;
}


body.dh-client-dashboard-body
#main-body > .container {
    width: 100% !important;

    max-width:
        none !important;

    margin: 0 !important;

    padding: 0 !important;
}


body.dh-client-dashboard-body
#main-body > .container > .row {
    margin: 0 !important;
}


body.dh-client-dashboard-body
.main-content {
    float: none !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


/* ---------------------------------------------------------
   TOP BAR
   --------------------------------------------------------- */

.dh-client-topbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    height:
        88px;

    padding:
        10px
        max(32px, calc((100vw - 1440px) / 2));

    box-sizing:
        border-box;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    background:
        #050605;
}


.dh-client-logo img {
    display:
        block;

    width:
        auto;

    height:
        62px;
}


.dh-client-top-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        24px;
}


.dh-client-top-actions a {
    color:
        rgba(255,255,255,.55);

    font-size:
        .82rem;

    text-decoration:
        none;
}


.dh-client-top-actions a:hover {
    color:
        #e5a02a;
}


.dh-client-top-actions
.dh-client-logout-top {
    padding:
        10px
        16px;

    border:
        1px solid
        rgba(229,160,42,.48);

    border-radius:
        4px;

    color:
        #e5a02a;
}


/* ---------------------------------------------------------
   APP LAYOUT
   --------------------------------------------------------- */

.dh-client-layout {
    display:
        grid;

    grid-template-columns:
        230px
        minmax(0, 1fr);

    width:
        min(1440px, 100%);

    min-height:
        calc(100vh - 134px);

    margin:
        0
        auto;
}


/* ---------------------------------------------------------
   SIDEBAR
   --------------------------------------------------------- */

.dh-client-sidebar {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-height:
        calc(100vh - 134px);

    padding:
        34px
        18px
        24px;

    box-sizing:
        border-box;

    border-right:
        1px solid
        rgba(255,255,255,.07);

    background:
        #080908;
}


.dh-client-sidebar-label {
    margin:
        0
        11px
        19px;

    color:
        rgba(255,255,255,.28);

    font-size:
        .67rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.dh-client-nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;
}


.dh-client-nav a,

.dh-client-nav-secondary a {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    min-height:
        44px;

    padding:
        0
        12px;

    border:
        1px solid
        transparent;

    border-radius:
        4px;

    color:
        rgba(255,255,255,.53);

    font-size:
        .84rem;

    text-decoration:
        none;

    transition:
        .16s ease;
}


.dh-client-nav a i,

.dh-client-nav-secondary a i {
    width:
        18px;

    color:
        rgba(229,160,42,.60);

    text-align:
        center;
}


.dh-client-nav a:hover,

.dh-client-nav-secondary a:hover {
    border-color:
        rgba(229,160,42,.16);

    background:
        rgba(229,160,42,.035);

    color:
        #f5f2eb;
}


.dh-client-nav a.active {
    border-color:
        rgba(229,160,42,.32);

    background:
        rgba(229,160,42,.075);

    color:
        #f5f2eb;
}


.dh-client-nav a.active i {
    color:
        #e5a02a;
}


.dh-client-nav-secondary {
    margin-top:
        auto;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.06);
}


/* ---------------------------------------------------------
   MAIN AREA
   --------------------------------------------------------- */

.dh-client-main {
    min-width: 0;

    padding:
        38px
        42px
        60px;

    box-sizing:
        border-box;

    background:
        radial-gradient(
            circle at 65% -25%,
            rgba(229,160,42,.055),
            transparent 38%
        ),
        #050605;
}


/* ---------------------------------------------------------
   WELCOME
   --------------------------------------------------------- */

.dh-client-welcome {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        28px;
}


.dh-client-eyebrow {
    display:
        block;

    margin-bottom:
        8px;

    color:
        #e5a02a;

    font-size:
        .67rem;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


.dh-client-welcome h1 {
    margin:
        0
        0
        6px;

    color:
        #f7f4ed;

    font-size:
        clamp(1.8rem, 3vw, 2.55rem);

    font-weight:
        600;
}


.dh-client-welcome p {
    margin: 0;

    color:
        rgba(255,255,255,.42);

    font-size:
        .87rem;
}


.dh-client-site-link {
    flex:
        0
        0
        auto;

    color:
        rgba(255,255,255,.43);

    font-size:
        .78rem;

    text-decoration:
        none;
}


.dh-client-site-link:hover {
    color:
        #e5a02a;
}


/* ---------------------------------------------------------
   DASHBOARD STATS
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.tiles {
    margin:
        0
        0
        26px;
}


body.dh-client-dashboard-body
.tiles > .row {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap:
        14px;

    margin: 0 !important;
}


body.dh-client-dashboard-body
.tiles .tile {
    float:
        none !important;

    width:
        auto !important;

    min-height:
        122px;

    padding: 0 !important;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        5px;

    overflow:
        hidden;

    background:
        rgba(11,12,11,.82);

    transition:
        border-color .16s ease,
        transform .16s ease;
}


body.dh-client-dashboard-body
.tiles .tile:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(229,160,42,.40);
}


body.dh-client-dashboard-body
.tiles .tile > a {
    position:
        relative;

    display:
        block;

    min-height:
        122px;

    padding:
        20px
        20px;

    box-sizing:
        border-box;

    color:
        #f5f2eb !important;

    text-decoration:
        none;
}


body.dh-client-dashboard-body
.tiles .tile .icon {
    position:
        absolute;

    top:
        20px;

    right:
        20px;

    color:
        rgba(229,160,42,.54) !important;

    font-size:
        1.75rem;

    opacity:
        1 !important;
}


body.dh-client-dashboard-body
.tiles .tile .stat {
    margin-top:
        8px;

    color:
        #e5a02a !important;

    font-size:
        2rem;

    line-height:
        1;
}


body.dh-client-dashboard-body
.tiles .tile .title {
    margin-top:
        11px;

    color:
        rgba(255,255,255,.48) !important;

    font-size:
        .72rem;

    font-weight:
        600;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


body.dh-client-dashboard-body
.tiles .tile .highlight {
    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px !important;

    background:
        rgba(229,160,42,.55) !important;
}


/* ---------------------------------------------------------
   REMOVE KB SEARCH
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.home-kb-search,

body.dh-client-dashboard-body
form[action*="kbsearch"] {
    display:
        none !important;
}


/* ---------------------------------------------------------
   HOME PANELS GRID
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.client-home-panels {
    margin-top:
        4px;
}


body.dh-client-dashboard-body
.client-home-panels > .row {
    margin:
        0
        -7px !important;
}


body.dh-client-dashboard-body
.client-home-panels
[class*="col-sm-"] {
    padding:
        0
        7px !important;
}


/* ---------------------------------------------------------
   PANELS
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.client-home-panels
.panel {
    margin-bottom:
        14px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius:
        5px;

    background:
        rgba(11,12,11,.82) !important;

    color:
        rgba(255,255,255,.60);

    box-shadow:
        none !important;
}


body.dh-client-dashboard-body
.client-home-panels
.panel-heading {
    min-height:
        48px;

    padding:
        14px
        16px !important;

    border:
        0 !important;

    border-bottom:
        1px solid
        rgba(229,160,42,.24) !important;

    background:
        rgba(229,160,42,.035) !important;

    color:
        #f5f2eb !important;
}


body.dh-client-dashboard-body
.client-home-panels
.panel-title {
    color:
        #f5f2eb !important;

    font-size:
        .91rem;

    font-weight:
        600;
}


body.dh-client-dashboard-body
.client-home-panels
.panel-title i {
    color:
        rgba(229,160,42,.68);
}


body.dh-client-dashboard-body
.client-home-panels
.panel-body {
    padding:
        16px !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        rgba(255,255,255,.53) !important;
}


body.dh-client-dashboard-body
.client-home-panels
.panel-footer {
    min-height:
        0;

    padding:
        8px
        16px !important;

    border:
        0 !important;

    border-top:
        1px solid
        rgba(255,255,255,.055) !important;

    background:
        rgba(255,255,255,.012) !important;

    color:
        rgba(255,255,255,.34);
}


/* ---------------------------------------------------------
   LIST ITEMS
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.client-home-panels
.list-group-item {
    border:
        0 !important;

    border-bottom:
        1px solid
        rgba(255,255,255,.055) !important;

    background:
        transparent !important;

    color:
        rgba(255,255,255,.56) !important;
}


body.dh-client-dashboard-body
.client-home-panels
a.list-group-item:hover {
    background:
        rgba(229,160,42,.035) !important;

    color:
        #e5a02a !important;
}


/* ---------------------------------------------------------
   PANEL BUTTONS
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.client-home-panels
.btn,

body.dh-client-dashboard-body
.client-home-panels
.btn-default,

body.dh-client-dashboard-body
.client-home-panels
.btn-success,

body.dh-client-dashboard-body
.client-home-panels
.btn-info,

body.dh-client-dashboard-body
.client-home-panels
.btn-warning {
    border:
        1px solid
        rgba(229,160,42,.42) !important;

    border-radius:
        3px;

    background:
        transparent !important;

    color:
        #e5a02a !important;

    box-shadow:
        none !important;
}


body.dh-client-dashboard-body
.client-home-panels
.btn:hover {
    border-color:
        #e5a02a !important;

    background:
        rgba(229,160,42,.07) !important;
}


/* ---------------------------------------------------------
   REGISTER DOMAIN FORM
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.client-home-panels
.form-control {
    border:
        1px solid
        rgba(255,255,255,.14) !important;

    border-radius:
        3px;

    background:
        #0b0c0b !important;

    color:
        #f5f2eb !important;

    box-shadow:
        none !important;
}


body.dh-client-dashboard-body
.client-home-panels
.form-control:focus {
    border-color:
        rgba(229,160,42,.58) !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   LINKS
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.client-home-panels a {
    color:
        rgba(229,160,42,.78);
}


body.dh-client-dashboard-body
.client-home-panels a:hover {
    color:
        #e5a02a;
}


/* ---------------------------------------------------------
   BADGES
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.badge {
    background:
        rgba(229,160,42,.12) !important;

    color:
        #e5a02a !important;
}


/* ---------------------------------------------------------
   HIDE RECENT NEWS
   --------------------------------------------------------- */

body.dh-client-dashboard-body
[menuItemName="Recent News"] {
    display:
        none !important;
}


/* ---------------------------------------------------------
   FLASH MESSAGES
   --------------------------------------------------------- */

body.dh-client-dashboard-body
.alert {
    border-radius:
        4px;

    box-shadow:
        none;
}


body.dh-client-dashboard-body
.alert-success {
    border:
        1px solid
        rgba(229,160,42,.32);

    background:
        rgba(229,160,42,.06) !important;

    color:
        #f5f2eb !important;
}


body.dh-client-dashboard-body
.alert-danger {
    border:
        1px solid
        rgba(190,68,68,.45);

    background:
        rgba(112,31,31,.22) !important;

    color:
        #f4dddd !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

body.dh-client-dashboard-body
#footer {
    min-height:
        46px;

    margin: 0 !important;

    padding: 0 !important;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        #050605 !important;
}


/* No CAPTCHA flow on the logged-in dashboard */
body.dh-client-dashboard-body
.dh-recaptcha-notice {
    display:
        none !important;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 960px) {

    .dh-client-layout {
        grid-template-columns:
            190px
            minmax(0, 1fr);
    }

    .dh-client-main {
        padding:
            30px
            24px
            50px;
    }

    body.dh-client-dashboard-body
    .tiles > .row {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .dh-client-topbar {
        height:
            72px;

        padding:
            8px
            16px;
    }

    .dh-client-logo img {
        height:
            48px;
    }

    .dh-client-top-actions
    > a:first-child {
        display:
            none;
    }

    .dh-client-layout {
        display:
            block;

        min-height:
            auto;
    }

    .dh-client-sidebar {
        min-height:
            0;

        padding:
            10px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.07);
    }

    .dh-client-sidebar-label,
    .dh-client-nav-secondary {
        display:
            none;
    }

    .dh-client-nav {
        display:
            grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap:
            5px;
    }

    .dh-client-nav a {
        justify-content:
            center;

        padding:
            8px
            5px;

        font-size:
            .72rem;
    }

    .dh-client-nav a i {
        display:
            none;
    }

    .dh-client-main {
        padding:
            26px
            16px
            42px;
    }

    .dh-client-welcome {
        display:
            block;
    }

    .dh-client-site-link {
        display:
            inline-block;

        margin-top:
            12px;
    }

    body.dh-client-dashboard-body
    .tiles > .row {
        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            9px;
    }

    body.dh-client-dashboard-body
    .client-home-panels
    .col-sm-6 {
        width:
            100% !important;
    }

}


/* =========================================================
   DUNEHOST DASHBOARD — LAYOUT POLISH
   ========================================================= */

/* Push Account / Logout properly to the right */
body.dh-client-dashboard-body
.dh-client-topbar {
    width: 100% !important;
    max-width: none !important;
}

body.dh-client-dashboard-body
.dh-client-top-actions {
    margin-left: auto !important;
    flex-shrink: 0;
}

body.dh-client-dashboard-body
.dh-client-top-actions a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

body.dh-client-dashboard-body
.dh-client-logout-top {
    min-width: 82px;
}


/* Force all four overview cards onto one clean row */
body.dh-client-dashboard-body
.tiles > .row {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 14px !important;

    width: 100% !important;

    margin: 0 !important;
}

body.dh-client-dashboard-body
.tiles > .row > .tile {
    float: none !important;
    clear: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
}


/* Tablet: 2 × 2 */
@media (max-width: 960px) {

    body.dh-client-dashboard-body
    .tiles > .row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* Mobile remains 2 × 2 */
@media (max-width: 680px) {

    body.dh-client-dashboard-body
    .tiles > .row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   DUNEHOST — KILL BOOTSTRAP ROW CLEARFIX GRID GHOST 😂
   ========================================================= */

body.dh-client-dashboard-body
.tiles > .row::before,

body.dh-client-dashboard-body
.tiles > .row::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   DUNEHOST CLIENT AREA — DUNES INSIDE APP VIEWPORT
   ========================================================= */


/*
 * Remove the previous footer dunes.
 * They were adding another 250px AFTER the already
 * full-height client application, forcing a scroll.
 */
body.dh-client-dashboard-body
#footer::before {
    display: none !important;
    content: none !important;
}


/*
 * The main client pane becomes the dune canvas.
 */
body.dh-client-dashboard-body
.dh-client-main {
    position: relative !important;
    isolation: isolate;

    /*
     * Reserve room for dunes when a page eventually
     * contains enough content to reach the bottom.
     *
     * On short pages this does NOT add scroll because
     * the client layout already fills the viewport.
     */
    padding-bottom: 245px !important;
}


/*
 * Keep all actual page content above the dunes.
 */
body.dh-client-dashboard-body
.dh-client-main > * {
    position: relative;
    z-index: 2;
}


/*
 * Dunes sit at the bottom of the existing client pane,
 * rather than underneath it.
 */
body.dh-client-dashboard-body
.dh-client-main::after {
    content: "";

    position: absolute;

    z-index: 1;

    left: 0;
    right: 0;
    bottom: 0;

    height: 230px;

    background:
        url("/templates/dunehost/img/dunehost/dunehost-dunes.webp")
        center bottom / cover
        no-repeat;

    filter:
        brightness(1.25)
        saturate(1.06)
        contrast(1.03);

    pointer-events: none;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.20) 9%,
            rgba(0,0,0,.70) 27%,
            #000 48%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.20) 9%,
            rgba(0,0,0,.70) 27%,
            #000 48%,
            #000 100%
        );
}


/*
 * Footer now goes immediately underneath the client app.
 */
body.dh-client-dashboard-body
#footer {
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        #050605 !important;
}


/* Mobile */
@media (max-width: 680px) {

    body.dh-client-dashboard-body
    .dh-client-main {
        padding-bottom: 200px !important;
    }

    body.dh-client-dashboard-body
    .dh-client-main::after {
        height: 190px;

        background-size:
            auto 190px;
    }

}


/* =========================================================
   DUNEHOST CLIENT AREA — CENTER FOOTER COPYRIGHT
   ========================================================= */

body.dh-client-dashboard-body
#footer {
    text-align: center !important;
}

body.dh-client-dashboard-body
#footer .container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;

    text-align: center !important;
}

body.dh-client-dashboard-body
#footer .row {
    display: flex !important;

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

    margin: 0 !important;

    text-align: center !important;
}

body.dh-client-dashboard-body
#footer [class*="col-"] {
    float: none !important;

    width: 100% !important;

    text-align: center !important;
}

body.dh-client-dashboard-body
#footer p,
body.dh-client-dashboard-body
#footer .copyright {
    float: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}