/* ==========================================================================
   App skeleton — "Console"
   One full-width top bar carries the logo, page title and account controls;
   the menu sits flat on the canvas underneath it. Content is left-aligned on
   the same edge as the page title and may grow to 1680px, so wide screens
   are used for wide tables. A thin white strip closes the page.

   Loaded after custom.css and the inline <style> in layouts/app.blade.php,
   so it overrides both without touching them. Menu item styling lives in
   the menu layer, not here.
   ========================================================================== */

:root {
    --sk-aside-w: 248px;
    --sk-aside-w-min: 76px;
    --sk-aside-pad-x: 25px;        /* menu items' inner left edge; the logo lines up with it */
    --sk-header-h: 60px;
    --sk-header-h-mobile: 56px;
    --sk-content-max: 1680px;

    /* Design tokens. Every refreshed part of the app reads these instead of
       hard-coding colours, so surfaces, accents and lines stay in step. */
    --sk-canvas: #f1f3f6;          /* page background behind menu and cards */
    --sk-bar: #ffffff;             /* top bar and footer strip */
    --sk-card: #ffffff;            /* cards and panels */
    --sk-sunken: #f5f7fa;          /* recessed areas inside cards: table heads, filled inputs */
    --sk-line: #dfe3e9;            /* hairlines between chrome and canvas, card edges */
    --sk-line-soft: #eceff3;       /* dividers inside cards */
    --sk-text: #1f2733;
    --sk-text-muted: #6b7585;
    --sk-accent: #009ef7;          /* primary actions, links, focus */
    --sk-accent-hover: #008bd9;
    --sk-accent-soft: #e3f2fd;     /* tinted backgrounds for accent */
    --sk-primary: var(--sk-accent);             /* filled primary buttons */
    --sk-primary-hover: var(--sk-accent-hover);
    --sk-selected: #22588c;        /* the current item in a list (menu, tabs) */
    --sk-focus: rgba(0, 158, 247, .6);
    --sk-radius: 10px;             /* controls and pills */
    --sk-radius-card: 12px;
}

body#kt_body {
    background-color: var(--sk-canvas);
}

/* --- Neutralise custom.css "boxed at >=1600px" mode ---------------------- */
#kt_body .main-content {
    width: auto;
    margin: 0;
}

#kt_body .full-content-container {
    min-height: 0;
}

#kt_body .full-content-container .padding-256 {
    padding-left: 0;
}

/* A few pages (VPS, Hosting, Storage, IP range, service management) put their
   .container straight in the page root instead of the usual .content wrapper,
   so their first row sat flush under the top bar. Same top gap as .content. */
#kt_body .full-content-container .padding-256 > .container:first-child,
#kt_body .full-content-container .padding-256 > div > .container:first-child {
    padding-top: 15px;
}

#kt_body .no-footer {
    display: block;
}

#kt_body .show-footer {
    display: none;
}

/* --- Stacking --------------------------------------------------------------
   The bar used z-index 2, so paginators and focused inputs (z-index 2-3)
   scrolled over it. Bar 100; the sidebar holder above it, because the logo
   block is drawn into the bar; the mobile drawer's overlay (sidebar - 1)
   then sits between the two. */
#kt_body #kt_header {
    z-index: 100 !important;
}

#kt_wrapper > .d-flex > .position-fixed.top-0,
#kt_body #kt_aside {
    z-index: 106 !important;
}

/* --- Top bar --------------------------------------------------------------- */
#kt_body #kt_header {
    height: var(--sk-header-h-mobile);
    min-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: var(--sk-bar);
    border-bottom: 1px solid var(--sk-line);
    box-shadow: none !important;
}

#kt_body #kt_header .header-content {
    width: 100%;
}

#kt_body #kt_header .inner-header-content {
    min-width: 0;
    margin-left: 0;
}

#kt_body #kt_header_user_menu_toggle {
    display: flex;
}

#kt_body .user-dropdown-new {
    top: calc(100% - 4px);
}

/* Page title: one line; long titles and subtitles truncate instead of
   wrapping out of the bar. Buttons never shrink. */
#kt_body #kt_header_nav {
    flex: 0 1 auto;
    min-width: 0;
}

#kt_body #kt_header .page-title {
    flex-wrap: nowrap !important;
    min-width: 0;
}

#kt_body #kt_header .page-title > h1,
#kt_body #kt_header .page-title > h3 {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#kt_body #kt_header .page-title > h1 {
    font-size: 1.35rem;
}

#kt_body #kt_header .page-title > span,
#kt_body #kt_header .page-title > div {
    flex-shrink: 0;
}

/* --- Footer: a thin status strip along the bottom of the content --------- */
#kt_body .footer {
    background-color: var(--sk-bar);
    border-top: 1px solid var(--sk-line);
    box-shadow: none !important;
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
}

#kt_body .footer .menu {
    align-items: center;
}

#kt_body .no-footer .wrapper {
    padding-top: 0;
}

/* --- Sidebar --------------------------------------------------------------- */
#kt_aside {
    box-shadow: none;
}

#kt_aside .aside-menu {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* The menu used a PHP-computed max-height that cut items off; let it fill the
   space down to the help button and scroll on its own instead. */
#kt_aside #kt_aside_menu_wrapper {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 1rem 0 .75rem;
}

#kt_aside #kt_aside_footer {
    flex: none;
    margin-bottom: 0 !important;
    padding: .75rem 1rem 1rem !important;
}

/* ========================================================================== */
@media (min-width: 992px) {
    #kt_body #kt_wrapper {
        padding-top: var(--sk-header-h);
    }

    #kt_body .wrapper {
        padding-left: var(--sk-aside-w);
        transition: padding-left .3s ease;
    }

    #kt_body[data-kt-aside-minimize=on] .wrapper {
        padding-left: var(--sk-aside-w-min);
    }

    /* Full-width bar; its left padding reserves the logo slot and puts the
       page title on the same edge as the content below (container padding
       30px, minus the title's own .25rem margin). */
    #kt_body #kt_header {
        left: 0 !important;
        right: 0;
        width: auto;
        height: var(--sk-header-h);
    }

    #kt_body #kt_header .header-content {
        padding-left: calc(var(--sk-aside-w) + 30px - .25rem);
        padding-right: 22px;
        transition: padding-left .3s ease;
    }

    #kt_body[data-kt-aside-minimize=on] #kt_header .header-content {
        padding-left: calc(var(--sk-aside-w-min) + 30px - .25rem);
    }

    #kt_aside {
        position: fixed;
        top: var(--sk-header-h);
        bottom: 0;
        left: 0;
        width: var(--sk-aside-w);
        background-color: transparent;
        transition: width .3s ease;
    }

    #kt_body[data-kt-aside-minimize=on] #kt_aside {
        width: var(--sk-aside-w-min);
    }

    #kt_aside .aside-menu {
        width: var(--sk-aside-w);
    }

    /* The logo block lives in the sidebar markup but is pinned into the bar. */
    #kt_aside .aside-logo {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sk-aside-w);
        height: var(--sk-header-h);
        padding: 0 14px 0 var(--sk-aside-pad-x);
        transition: width .3s ease;
    }

    #kt_body[data-kt-aside-minimize=on] #kt_aside .aside-logo {
        width: var(--sk-aside-w-min);
        padding: 0;
    }

    #kt_aside .aside-logo .logo {
        height: 30px !important;
    }

    #kt_body #kt_aside #kt_aside_toggle {
        display: flex;
    }

    #kt_body[data-kt-aside-minimize=on] #kt_aside #kt_aside_footer {
        width: var(--sk-aside-w-min);
    }

    #kt_body .full-content-container .padding-256 > .container:first-child,
    #kt_body .full-content-container .padding-256 > div > .container:first-child {
        padding-top: 30px;
    }

    /* Wide, left-aligned content column. */
    #kt_body .full-content-container .container-xxl,
    #kt_body .full-content-container .container {
        max-width: var(--sk-content-max);
        margin-left: 0;
    }

    #kt_body .footer .container-fluid {
        max-width: var(--sk-content-max);
        margin-left: 0;
    }

    /* ### App refresh: the bar stays full width, but its contents end where the page
       content ends (the content column's 30px padding), like the footer - on wide
       screens the account menu no longer sits far out on its own. */
    #kt_body #kt_header .header-content {
        max-width: calc(var(--sk-aside-w) + var(--sk-content-max));
        margin-left: 0;
        padding-right: 30px;
    }

    #kt_body[data-kt-aside-minimize=on] #kt_header .header-content {
        max-width: calc(var(--sk-aside-w-min) + var(--sk-content-max));
    }
}

@media (prefers-reduced-motion: reduce) {
    #kt_body .wrapper,
    #kt_body #kt_header .header-content,
    #kt_aside,
    #kt_aside .aside-logo {
        transition: none;
    }
}