/*
    Supplements assets/css/styles.css.

    styles.css is a pre-built Metronic/Tailwind bundle and there is no Tailwind
    build step in this solution, so a responsive utility that the bundle was not
    compiled with simply does not exist - the class renders with no effect. The
    rules below back the breakpoint utilities that views already reference but
    the bundle never shipped.

    Load this AFTER styles.css. Only genuinely missing utilities belong here:
    redefining one the bundle already ships would let a small-breakpoint rule
    here outrank a large-breakpoint rule there and break mobile-first order.

    Breakpoints and the 0.25rem spacing step match Tailwind v4 / styles.css.
*/

/* sm: >= 640px */
@media (min-width: 40rem) {
    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* md: >= 768px */
@media (min-width: 48rem) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .md\:col-span-1 {
        grid-column: span 1 / span 1;
    }
}

/* lg: >= 1024px */
@media (min-width: 64rem) {
    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:col-span-12 {
        grid-column: span 12 / span 12;
    }

    .lg\:gap-5\.5 {
        gap: 1.375rem;
    }

    .lg\:mr-10 {
        margin-right: 2.5rem;
    }

    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/*
    Below lg the layout shows a fixed 60px mobile header (_Layout.cshtml) which
    stacks above the client window's sticky summary card - z-10 against the
    card's z-index 1. Sticking the card at top: 0 therefore parks it underneath
    that bar and clips its first line. Offset it by the bar's height instead.
    The 60px matches the header element's own h-[60px]; above lg the header is
    hidden and the card's default top: 0 is correct.
*/
@supports (height: 100dvh) {
    #sidebar {
        height: 100dvh;
    }
}

@media (max-width: 1023.98px) {
    #client_sticky_header {
        top: 60px;
    }

    #sidebar .small-logo {
        display: none;
    }

    #sidebar #sidebar_content {
        flex-shrink: 1;
        min-height: 0;
    }

    #sidebar #sidebar_scrollable {
        height: auto !important;
        overflow-y: auto;
    }

    .mobile-header-user {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        margin-inline-start: auto;
        padding-inline-start: 0.75rem;
    }

    .mobile-header-avatar {
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
        border-radius: 9999px;
        object-fit: cover;
        font-size: 0.75rem;
    }

    .mobile-header-user-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        overflow-wrap: break-word;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.2;
        color: var(--color-foreground, #111827);
    }

    [id$="_columnListDropdown"] {
        width: 11rem;
        max-height: min(320px, 60vh) !important;
    }

    [id$="_columnListDropdown"] > div:first-child {
        padding: 0.5rem 0.75rem 0.375rem;
    }

    [id$="_columnListDropdown"] h6 {
        font-size: 0.75rem;
    }

    .grid-column-chooser-container {
        gap: 0.125rem;
        padding: 0.375rem 0.75rem 0.5rem;
    }

    .grid-column-chooser-container label {
        gap: 0.5rem;
    }

    .grid-column-chooser-container .text-sm {
        font-size: 0.75rem;
        line-height: 1.2;
    }

    .grid-column-chooser-container .kt-checkbox {
        width: 0.875rem;
        height: 0.875rem;
    }
}

@media (max-width: 639.98px) {
    main#content {
        padding-top: 0;
    }

    #sidebar .kt-menu-title.text-sm {
        font-size: 0.8125rem;
    }

    #sidebar .kt-menu-title.text-2sm {
        font-size: 0.75rem;
    }

    #sidebar .sidebar-user-row .font-semibold {
        font-size: 0.875rem;
    }

    #sidebar .sidebar-user-row .text-sm {
        font-size: 0.75rem;
    }
}

/*
    Arbitrary-value utilities the bundle was never compiled with. Without
    mt-[60px] the content area sat underneath that fixed mobile header rather
    than below it, and h-[25px] left the header's logo unconstrained, so the bar
    was not reliably the 60px the rule above depends on.
*/
.mt-\[60px\] {
    margin-top: 60px;
}

.h-\[40px\] {
    height: 40px;
}

.h-\[25px\] {
    height: 25px;
}

.bg-\[\#f4f4f5\] {
    background-color: #f4f4f5;
}

.grid-cols-\[160px_1fr\] {
    grid-template-columns: 160px 1fr;
}

.grid-cols-\[220px_1fr_36px\] {
    grid-template-columns: 220px 1fr 36px;
}

/*
    Re-stated after .mt-[60px] above so the lg override still wins at lg and up.
    styles.css ships it with the same value, so this changes nothing else.
*/
@media (min-width: 64rem) {
    .lg\:mt-0 {
        margin-top: 0;
    }
}

@media (min-width: 64rem) {
    .demo1.kt-sidebar-collapse .kt-sidebar:hover:not(.animating) {
        width: var(--sidebar-width);
    }

    .demo1.kt-sidebar-collapse .kt-sidebar:hover .default-logo {
        display: none;
    }

    .demo1.kt-sidebar-collapse .kt-sidebar:hover .small-logo {
        display: flex;
    }

    .demo1.kt-sidebar-collapse .kt-sidebar:hover .kt-menu > .kt-menu-item > .kt-menu-link .kt-menu-title,
    .demo1.kt-sidebar-collapse .kt-sidebar:hover .kt-menu > .kt-menu-item > .kt-menu-link .kt-menu-arrow,
    .demo1.kt-sidebar-collapse .kt-sidebar:hover .kt-menu > .kt-menu-item > .kt-menu-link .kt-menu-badge,
    .demo1.kt-sidebar-collapse .kt-sidebar:hover .kt-menu > .kt-menu-item > .kt-menu-accordion {
        display: none;
    }
}

body.kt-sidebar-collapse #sidebar:hover .kt-sidebar-footer:last-child .flex-col,
body.kt-sidebar-collapse #sidebar:hover .kt-sidebar-footer:last-child .kt-btn,
body.kt-sidebar-collapse #sidebar:hover .kt-sidebar-footer:last-child a:not(img) {
    display: none;
}