/*
|--------------------------------------------------------------------------
| Polygon Framework - Admin Theme
|--------------------------------------------------------------------------
| File:
| public/assets/css/admin-theme.css
|
| Version:
| 1.1
|
| Purpose:
| - Admin dashboard shell
| - Sidebar
| - Navbar
| - Responsive desktop/tablet/mobile
| - Sidebar submenu
| - Cards
| - Dashboard content
| - Footer
| - Mobile drawer
| - Overlay
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   01. ROOT VARIABLES
   ========================================================================== */

:root {

    --poly-admin-primary: #2563eb;
    --poly-admin-secondary: #475569;
    --poly-admin-accent: #6366f1;

    --poly-admin-background: #f1f5f9;
    --poly-admin-surface: #ffffff;

    --poly-admin-sidebar: #0f172a;
    --poly-admin-sidebar-text: #cbd5e1;
    --poly-admin-sidebar-muted: #94a3b8;
    --poly-admin-sidebar-hover: #1e293b;
    --poly-admin-sidebar-active: #2563eb;

    --poly-admin-navbar: #ffffff;
    --poly-admin-text: #0f172a;
    --poly-admin-muted: #64748b;
    --poly-admin-border: #e2e8f0;

    --poly-admin-success: #10b981;
    --poly-admin-warning: #f59e0b;
    --poly-admin-danger: #ef4444;
    --poly-admin-info: #3b82f6;

    --poly-admin-sidebar-width: 260px;
    --poly-admin-navbar-height: 68px;

    --poly-admin-radius: 12px;
    --poly-admin-radius-sm: 8px;

    --poly-admin-shadow:
        0 1px 3px rgba(15, 23, 42, 0.05);

    --poly-admin-shadow-md:
        0 8px 25px rgba(15, 23, 42, 0.08);

    --poly-admin-shadow-lg:
        0 18px 45px rgba(15, 23, 42, 0.12);

    --poly-admin-font:
        "Plus Jakarta Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --poly-admin-heading-font:
        "Outfit",
        "Plus Jakarta Sans",
        sans-serif;

}


/* ==========================================================================
   02. RESET
   ========================================================================== */

html.poly-admin-html {

    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 0;

    font-size: 16px;

    background: var(--poly-admin-background);

    scroll-behavior: smooth;

}


html.poly-admin-html *,
html.poly-admin-html *::before,
html.poly-admin-html *::after {

    box-sizing: border-box;

}


body.poly-admin-body {

    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 0;
    min-height: 100vh;

    overflow-x: hidden;

    background: var(--poly-admin-background);

    color: var(--poly-admin-text);

    font-family: var(--poly-admin-font);

    font-size: 13px;

    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}


body.poly-admin-body button,
body.poly-admin-body input,
body.poly-admin-body select,
body.poly-admin-body textarea {

    font-family: inherit;

}


body.poly-admin-body a {

    color: inherit;

}


body.poly-admin-body img {

    max-width: 100%;

}


/* ==========================================================================
   03. ADMIN APP
   ========================================================================== */

#admin-app.poly-admin {

    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 100vh;

}


.poly-admin {

    width: 100%;
    min-height: 100vh;

}


/* ==========================================================================
   04. SIDEBAR
   ========================================================================== */

#admin-sidebar.poly-admin-sidebar {

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;

    z-index: 2000;

    width: var(--poly-admin-sidebar-width);
    min-width: var(--poly-admin-sidebar-width);
    max-width: var(--poly-admin-sidebar-width);

    height: 100vh;

    margin: 0;
    padding: 0;

    background: var(--poly-admin-sidebar);

    color: var(--poly-admin-sidebar-text);

    overflow: hidden;

    transform: translateX(0);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.03);

}


#admin-sidebar.poly-admin-sidebar::-webkit-scrollbar {

    width: 0;

}


#admin-sidebar.poly-admin-sidebar {

    scrollbar-width: none;

}


/* ==========================================================================
   05. SIDEBAR INNER
   ========================================================================== */

.poly-sidebar-inner {

    width: 100%;
    height: 100%;
    min-height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

}


/* ==========================================================================
   06. SIDEBAR BRAND
   ========================================================================== */

.poly-sidebar-brand {

    width: 100%;
    height: 68px;
    min-height: 68px;

    padding: 0 15px;

    display: flex;
    align-items: center;

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

}


.poly-sidebar-logo {

    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    text-decoration: none;

    color: #ffffff;

}


.poly-sidebar-logo-icon {

    width: 32px;
    height: 32px;
    min-width: 32px;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #ffffff;

    font-size: 13px;

    box-shadow:
        0 5px 15px rgba(37, 99, 235, 0.25);

}


.poly-sidebar-logo-text {

    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.1;

}


.poly-sidebar-logo-text strong {

    font-family: var(--poly-admin-heading-font);

    font-size: 14px;
    font-weight: 800;

    color: #ffffff;

}


.poly-sidebar-logo-text small {

    margin-top: 3px;

    font-size: 7px;
    font-weight: 500;

    color: #94a3b8;

}


/* ==========================================================================
   07. SIDEBAR NAV
   ========================================================================== */

.poly-sidebar-nav {

    flex: 1 1 auto;

    width: 100%;

    min-width: 0;

    padding: 12px 8px 20px;

    overflow-x: hidden;
    overflow-y: auto;

}


.poly-sidebar-nav::-webkit-scrollbar {

    width: 5px;

}


.poly-sidebar-nav::-webkit-scrollbar-track {

    background: transparent;

}


.poly-sidebar-nav::-webkit-scrollbar-thumb {

    background:
        rgba(148, 163, 184, 0.25);

    border-radius: 20px;

}


.poly-sidebar-nav {

    scrollbar-width: thin;

    scrollbar-color:
        rgba(148, 163, 184, 0.25)
        transparent;

}


/* ==========================================================================
   08. SIDEBAR SECTION
   ========================================================================== */

.poly-sidebar-section {

    margin: 8px 6px 6px;

    padding: 0;

    color: #64748b;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;

}


.poly-sidebar-section:first-child {

    margin-top: 2px;

}


/* ==========================================================================
   09. SIDEBAR MENU
   ========================================================================== */

.poly-sidebar-menu {

    position: relative;

    width: 100%;
    min-width: 0;

    margin: 2px 0;

}


/* ==========================================================================
   10. SIDEBAR PARENT
   ========================================================================== */

.poly-sidebar-link {

    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 38px;

    padding: 0 9px;

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

    border: 0;
    border-radius: 8px;

    outline: none;

    background: transparent;

    color: var(--poly-admin-sidebar-text);

    font-size: 10px;
    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease;

}


.poly-sidebar-link:hover {

    background:
        rgba(255, 255, 255, 0.06);

    color: #ffffff;

}


.poly-sidebar-link:focus-visible {

    outline:
        2px solid rgba(96, 165, 250, 0.75);

    outline-offset: -2px;

}


.poly-sidebar-link-left {

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;

}


.poly-sidebar-link-left > i {

    width: 15px;
    min-width: 15px;

    text-align: center;

    color: #94a3b8;

    font-size: 10px;

    transition: color 0.18s ease;

}


.poly-sidebar-link:hover
.poly-sidebar-link-left > i {

    color: #ffffff;

}


.poly-sidebar-link-left > span {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* ==========================================================================
   11. SIDEBAR ARROW
   ========================================================================== */

.poly-sidebar-arrow {

    width: 14px;
    min-width: 14px;

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

    color: #64748b;

    font-size: 8px;

    transition:
        transform 0.2s ease,
        color 0.2s ease;

}


.poly-sidebar-menu.is-open
.poly-sidebar-arrow {

    transform: rotate(180deg);

    color: #cbd5e1;

}


/* ==========================================================================
   12. SIDEBAR OPEN STATE
   ========================================================================== */

.poly-sidebar-menu.is-open
> .poly-sidebar-parent {

    background:
        rgba(255, 255, 255, 0.07);

    color: #ffffff;

}


.poly-sidebar-menu.is-open
> .poly-sidebar-parent
.poly-sidebar-link-left > i {

    color: #60a5fa;

}


/* ==========================================================================
   13. SUBMENU
   ========================================================================== */

.poly-sidebar-submenu {

    width: 100%;

    margin: 0;

    padding:
        3px 0 5px 20px;

    overflow: hidden;

}


.poly-sidebar-sublink {

    position: relative;

    width: 100%;
    min-width: 0;

    min-height: 31px;

    padding: 0 9px;

    display: flex;
    align-items: center;

    gap: 8px;

    border-radius: 6px;

    color: #94a3b8;

    font-size: 9px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background 0.18s ease,
        color 0.18s ease;

}


.poly-sidebar-sublink::before {

    content: "";

    position: absolute;

    left: -8px;

    width: 2px;
    height: 14px;

    border-radius: 2px;

    background: transparent;

}


.poly-sidebar-sublink:hover {

    background:
        rgba(255, 255, 255, 0.055);

    color: #ffffff;

}


.poly-sidebar-sublink:hover::before {

    background: #475569;

}


.poly-sidebar-sublink.is-active {

    background:
        rgba(37, 99, 235, 0.16);

    color: #60a5fa;

}


.poly-sidebar-sublink.is-active::before {

    background: #3b82f6;

}


.poly-sidebar-sublink i {

    width: 13px;
    min-width: 13px;

    text-align: center;

    font-size: 8px;

}


.poly-sidebar-sublink span {

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* ==========================================================================
   14. SIDEBAR FOOTER
   ========================================================================== */

.poly-sidebar-footer {

    width: 100%;
    min-height: 38px;

    padding: 0 10px;

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

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

    color: #64748b;

    font-size: 7px;

}


.poly-sidebar-status {

    display: flex;
    align-items: center;

    gap: 5px;

}


.poly-sidebar-status-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #10b981;

    box-shadow:
        0 0 0 2px rgba(16, 185, 129, 0.1);

}


.poly-sidebar-version {

    font-size: 7px;

}


/* ==========================================================================
   15. MAIN AREA
   ========================================================================== */

#admin-main.poly-admin-main {

    width: calc(
        100% - var(--poly-admin-sidebar-width)
    );

    min-width: 0;
    min-height: 100vh;

    margin-left:
        var(--poly-admin-sidebar-width);

    display: flex;
    flex-direction: column;

    background:
        var(--poly-admin-background);

}


/* ==========================================================================
   16. NAVBAR
   ========================================================================== */

#admin-navbar.poly-admin-navbar {

    position: sticky;

    top: 0;

    z-index: 1500;

    width: 100%;

    height: var(--poly-admin-navbar-height);
    min-height: var(--poly-admin-navbar-height);

    margin: 0;
    padding: 0;

    background:
        var(--poly-admin-navbar);

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

    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.025);

}


.poly-navbar-inner {

    width: 100%;
    height: 100%;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 12px;

}


/* ==========================================================================
   17. NAVBAR LEFT
   ========================================================================== */

.poly-navbar-left {

    flex: 0 0 auto;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: 6px;

}


.poly-navbar-menu-button {

    width: 36px;
    height: 36px;
    min-width: 36px;

    padding: 0;

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

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #334155;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease;

}


.poly-navbar-menu-button:hover {

    background: #f1f5f9;

    color: #0f172a;

}


.poly-navbar-menu-button:focus-visible {

    outline:
        2px solid rgba(37, 99, 235, 0.35);

    outline-offset: 1px;

}


.poly-navbar-title {

    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.15;

}


.poly-navbar-title strong {

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #0f172a;

    font-family: var(--poly-admin-heading-font);

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

}


.poly-navbar-title small {

    margin-top: 2px;

    color: #94a3b8;

    font-size: 7px;

}


/* ==========================================================================
   18. NAVBAR SEARCH
   ========================================================================== */

.poly-navbar-search {

    flex: 1 1 auto;

    min-width: 80px;

}


.poly-navbar-search-box {

    width: min(
        420px,
        100%
    );

    height: 36px;

    margin: 0 auto;

    padding: 0 10px;

    display: flex;
    align-items: center;

    gap: 7px;

    border:
        1px solid #dbe3ee;

    border-radius: 7px;

    background: #f8fafc;

    color: #64748b;

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

}


.poly-navbar-search-box:focus-within {

    border-color:
        rgba(37, 99, 235, 0.4);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.08);

}


.poly-navbar-search-box > i {

    flex: 0 0 auto;

    font-size: 10px;

    color: #64748b;

}


.poly-navbar-search-box input {

    width: 100%;
    min-width: 0;

    height: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #0f172a;

    font-size: 10px;

}


.poly-navbar-search-box input::placeholder {

    color: #94a3b8;

}


.poly-navbar-search-box kbd {

    flex: 0 0 auto;

    padding: 2px 5px;

    border:
        1px solid #dbe3ee;

    border-radius: 4px;

    background: #ffffff;

    color: #94a3b8;

    font-size: 7px;

}


/* ==========================================================================
   19. NAVBAR RIGHT
   ========================================================================== */

.poly-navbar-right {

    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 2px;

}


.poly-navbar-icon {

    position: relative;

    width: 36px;
    height: 36px;
    min-width: 36px;

    padding: 0;

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

    border: 0;
    border-radius: 7px;

    background: transparent;

    color: #475569;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease;

}


.poly-navbar-icon:hover {

    background: #f1f5f9;

    color: #0f172a;

}


.poly-navbar-icon:focus-visible {

    outline:
        2px solid rgba(37, 99, 235, 0.3);

    outline-offset: 1px;

}


.poly-navbar-notification-dot {

    position: absolute;

    top: 8px;
    right: 8px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #2563eb;

    border:
        1px solid #ffffff;

}


/* ==========================================================================
   20. NAVBAR USER
   ========================================================================== */

.poly-navbar-user {

    position: relative;

    min-width: 0;

}


.poly-navbar-user-button {

    min-height: 40px;

    padding: 3px 6px 3px 3px;

    display: flex;
    align-items: center;

    gap: 7px;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #334155;

    cursor: pointer;

}


.poly-navbar-user-button:hover {

    background: #f8fafc;

}


.poly-navbar-avatar {

    width: 30px;
    height: 30px;
    min-width: 30px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: #ffffff;

    font-size: 10px;

}


.poly-navbar-user-text {

    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    line-height: 1.1;

}


.poly-navbar-user-text strong {

    max-width: 100px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: #0f172a;

    font-size: 9px;
    font-weight: 700;

}


.poly-navbar-user-text small {

    margin-top: 2px;

    color: #94a3b8;

    font-size: 7px;

}


/* ==========================================================================
   21. CONTENT
   ========================================================================== */

#admin-content.poly-admin-content {

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;

    padding: 20px;

}


.poly-admin-container {

    width: 100%;
    min-width: 0;

    margin: 0 auto;

}


/* ==========================================================================
   22. GENERIC DASHBOARD HEADER
   ========================================================================== */

.poly-admin-container h1,
.poly-admin-container h2,
.poly-admin-container h3,
.poly-admin-container h4 {

    color: #0f172a;

}


.poly-admin-container h1 {

    margin: 0;

    font-family: var(--poly-admin-heading-font);

    font-size: 25px;
    font-weight: 800;

    letter-spacing: -0.025em;

}


.poly-admin-container h2 {

    font-family: var(--poly-admin-heading-font);

}


/* ==========================================================================
   23. GENERIC CARDS
   ========================================================================== */

.poly-admin-container .card,
.poly-admin-container .admin-card,
.poly-admin-container .dashboard-card {

    background: #ffffff;

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

    border-radius:
        var(--poly-admin-radius);

    box-shadow:
        var(--poly-admin-shadow);

}


/* ==========================================================================
   24. DASHBOARD GRID SUPPORT
   ========================================================================== */

.poly-admin-container
.grid {

    min-width: 0;

}


.poly-admin-container
[class*="grid-cols"] {

    min-width: 0;

}


.poly-admin-container
[class*="grid-cols"]
> * {

    min-width: 0;

}


/* ==========================================================================
   25. TABLES
   ========================================================================== */

.poly-admin-container table {

    width: 100%;

    border-collapse: collapse;

}


.poly-admin-container th {

    color: #64748b;

    font-size: 10px;
    font-weight: 700;

    text-align: left;

    background: #f8fafc;

}


.poly-admin-container td,
.poly-admin-container th {

    padding: 10px 12px;

    border-bottom:
        1px solid #e2e8f0;

}


.poly-admin-container tr:last-child td {

    border-bottom: 0;

}


/* ==========================================================================
   26. FORM ELEMENTS
   ========================================================================== */

.poly-admin-container input,
.poly-admin-container select,
.poly-admin-container textarea {

    max-width: 100%;

    border:
        1px solid #dbe3ee;

    border-radius: 7px;

    background: #ffffff;

    color: #0f172a;

    outline: none;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;

}


.poly-admin-container input:focus,
.poly-admin-container select:focus,
.poly-admin-container textarea:focus {

    border-color:
        rgba(37, 99, 235, 0.55);

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.08);

}


/* ==========================================================================
   27. BUTTONS
   ========================================================================== */

.poly-admin-container button {

    font-family: inherit;

}


.poly-admin-container
.btn-primary {

    border: 0;

    border-radius: 7px;

    background: #2563eb;

    color: #ffffff;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;

}


.poly-admin-container
.btn-primary:hover {

    background: #1d4ed8;

}


.poly-admin-container
.btn-primary:active {

    transform: translateY(1px);

}


/* ==========================================================================
   28. FOOTER
   ========================================================================== */

#admin-footer.poly-admin-footer {

    width: 100%;

    min-height: 40px;

    flex: 0 0 auto;

    background: #ffffff;

    border-top:
        1px solid var(--poly-admin-border);

}


.poly-admin-footer {

    color: #64748b;

}


/* ==========================================================================
   29. MOBILE OVERLAY
   ========================================================================== */

#admin-mobile-overlay.poly-admin-overlay {

    position: fixed;

    inset: 0;

    z-index: 1900;

    display: none;

    background:
        rgba(15, 23, 42, 0.58);

    backdrop-filter:
        blur(1px);

    -webkit-backdrop-filter:
        blur(1px);

}


#admin-mobile-overlay.is-visible {

    display: block;

}


/* ==========================================================================
   30. DESKTOP BEHAVIOUR
   ========================================================================== */

@media (min-width: 901px) {

    #admin-sidebar-toggle {

        display: flex !important;

    }


    #admin-sidebar {

        transform: translateX(0) !important;

    }


    #admin-mobile-overlay {

        display: none !important;

    }


    body.admin-sidebar-open {

        overflow-x: hidden;

    }

}


/* ==========================================================================
   31. TABLET
   ========================================================================== */

@media (max-width: 1200px) {

    :root {

        --poly-admin-sidebar-width: 240px;

    }


    #admin-sidebar.poly-admin-sidebar {

        width: 240px;
        min-width: 240px;
        max-width: 240px;

    }


    #admin-main.poly-admin-main {

        width:
            calc(100% - 240px);

        margin-left: 240px;

    }


    #admin-content.poly-admin-content {

        padding: 18px;

    }

}


@media (max-width: 900px) {

    :root {

        --poly-admin-sidebar-width: 280px;

    }


    /*
    |--------------------------------------------------------------------------
    | Mobile drawer
    |--------------------------------------------------------------------------
    */

    #admin-sidebar.poly-admin-sidebar {

        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;

        transform:
            translateX(-100%) !important;

        box-shadow:
            12px 0 35px
            rgba(15, 23, 42, 0.2);

    }


    #admin-sidebar.poly-admin-sidebar.is-open {

        transform:
            translateX(0) !important;

    }


    #admin-sidebar .poly-sidebar-inner {

        width: 100%;

    }


    #admin-main.poly-admin-main {

        width: 100% !important;

        min-width: 0;

        margin-left: 0 !important;

    }


    #admin-navbar.poly-admin-navbar {

        width: 100%;

    }


    #admin-content.poly-admin-content {

        width: 100%;

        padding: 16px;

    }


    .poly-navbar-menu-button {

        display: flex;

    }


    #admin-mobile-overlay.is-visible {

        display: block !important;

    }


    body.admin-sidebar-open {

        overflow: hidden !important;

    }

}


/* ==========================================================================
   32. TABLET DASHBOARD
   ========================================================================== */

@media (min-width: 601px) and (max-width: 900px) {

    #admin-content.poly-admin-content {

        padding: 16px;

    }


    .poly-navbar-title small {

        display: none;

    }


    .poly-navbar-search-box {

        width: min(
            360px,
            100%
        );

    }

}


/* ==========================================================================
   33. MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    body.poly-admin-body {

        font-size: 12px;

    }


    #admin-navbar.poly-admin-navbar {

        height: 60px;

        min-height: 60px;

    }


    .poly-navbar-inner {

        height: 60px;

        padding:
            0 7px;

        gap: 4px;

    }


    .poly-navbar-title {

        display: none;

    }


    .poly-navbar-search {

        min-width: 50px;

    }


    .poly-navbar-search-box {

        width: 100%;

        height: 34px;

        margin: 0;

        padding:
            0 8px;

    }


    .poly-navbar-search-box kbd {

        display: none;

    }


    .poly-navbar-right {

        gap: 0;

    }


    .poly-navbar-icon {

        width: 32px;
        height: 32px;
        min-width: 32px;

    }


    .poly-navbar-user-text {

        display: none;

    }


    .poly-navbar-user-button {

        padding-right: 2px;

    }


    .poly-navbar-avatar {

        width: 29px;
        height: 29px;
        min-width: 29px;

    }


    #admin-content.poly-admin-content {

        padding: 12px;

    }


    .poly-admin-container {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;

    }


    .poly-admin-container h1 {

        font-size: 21px;

    }


    .poly-admin-container h2 {

        font-size: 18px;

    }


    .poly-admin-container h3 {

        font-size: 15px;

    }

}


/* ==========================================================================
   34. SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    #admin-sidebar.poly-admin-sidebar {

        width: 275px !important;
        min-width: 275px !important;
        max-width: 275px !important;

    }


    #admin-content.poly-admin-content {

        padding: 10px;

    }


    .poly-navbar-menu-button {

        width: 32px;
        height: 32px;
        min-width: 32px;

    }


    .poly-navbar-search-box {

        height: 32px;

    }


    .poly-navbar-icon {

        width: 30px;
        height: 30px;
        min-width: 30px;

    }

}


/* ==========================================================================
   35. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 350px) {

    .poly-navbar-right
    .poly-navbar-icon:first-child {

        display: none;

    }


    .poly-navbar-search-box > i {

        display: none;

    }


    .poly-navbar-search-box {

        padding: 0 7px;

    }

}


/* ==========================================================================
   36. SIDEBAR MOBILE LINK SIZE
   ========================================================================== */

@media (max-width: 900px) {

    .poly-sidebar-link {

        min-height: 42px;

        font-size: 11px;

    }


    .poly-sidebar-sublink {

        min-height: 36px;

        font-size: 10px;

    }


    .poly-sidebar-section {

        font-size: 8px;

    }

}


/* ==========================================================================
   37. SCROLLBAR
   ========================================================================== */

.poly-admin ::-webkit-scrollbar {

    width: 7px;
    height: 7px;

}


.poly-admin ::-webkit-scrollbar-track {

    background: transparent;

}


.poly-admin ::-webkit-scrollbar-thumb {

    background:
        #cbd5e1;

    border-radius: 20px;

}


.poly-admin ::-webkit-scrollbar-thumb:hover {

    background:
        #94a3b8;

}


/* ==========================================================================
   38. SELECTION
   ========================================================================== */

.poly-admin ::selection {

    background:
        rgba(37, 99, 235, 0.16);

    color: #0f172a;

}


/* ==========================================================================
   39. UTILITY
   ========================================================================== */

.poly-admin .hidden {

    display: none !important;

}


.poly-admin .text-success {

    color: var(--poly-admin-success) !important;

}


.poly-admin .text-danger {

    color: var(--poly-admin-danger) !important;

}


.poly-admin .text-warning {

    color: var(--poly-admin-warning) !important;

}


.poly-admin .text-muted {

    color: var(--poly-admin-muted) !important;

}


/* ==========================================================================
   40. ACCESSIBILITY
   ========================================================================== */

.poly-admin button:focus-visible,
.poly-admin a:focus-visible,
.poly-admin input:focus-visible,
.poly-admin select:focus-visible,
.poly-admin textarea:focus-visible {

    outline:
        2px solid rgba(37, 99, 235, 0.45);

    outline-offset: 2px;

}


/* ==========================================================================
   41. PRINT
   ========================================================================== */

@media print {

    #admin-sidebar,
    #admin-navbar,
    #admin-mobile-overlay {

        display: none !important;

    }


    #admin-main.poly-admin-main {

        width: 100% !important;

        margin-left: 0 !important;

    }


    #admin-content.poly-admin-content {

        padding: 0 !important;

    }


    #admin-footer {

        display: none !important;

    }

}



/* ==========================================================================
   41A. SIDEBAR SUBMENU FINAL FIX
   --------------------------------------------------------------------------
   The JavaScript toggles .is-open on .poly-sidebar-menu.
   Keep the submenu hidden by default and force it visible when opened.
   This applies to desktop, tablet and mobile.
   ========================================================================== */

.poly-sidebar-menu > .poly-sidebar-submenu,
.poly-sidebar-menu > [data-sidebar-submenu] {
    display: none;
    width: 100%;
    height: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.poly-sidebar-menu.is-open > .poly-sidebar-submenu,
.poly-sidebar-menu.is-open > [data-sidebar-submenu] {
    display: block !important;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Support buttons using aria-expanded as well */
.poly-sidebar-menu > .poly-sidebar-parent[aria-expanded="true"] + .poly-sidebar-submenu,
.poly-sidebar-menu > .poly-sidebar-parent[aria-expanded="true"] + [data-sidebar-submenu] {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep submenu links clickable and visible */
.poly-sidebar-menu.is-open .poly-sidebar-sublink,
.poly-sidebar-menu > .poly-sidebar-parent[aria-expanded="true"] ~ .poly-sidebar-submenu .poly-sidebar-sublink {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure the sidebar navigation itself can scroll */
.poly-sidebar-nav {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Open-state arrow */
.poly-sidebar-menu.is-open > .poly-sidebar-parent .poly-sidebar-arrow {
    transform: rotate(180deg);
}

/* ==========================================================================
   42. FINAL SHELL OVERRIDES
   ==========================================================================
   These rules intentionally come last.
   They prevent older theme rules from breaking the shell.
   ========================================================================== */

html.poly-admin-html,
html.poly-admin-html body,
body.poly-admin-body {

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow-x: hidden !important;

}


#admin-app.poly-admin {

    width: 100% !important;

    min-width: 0 !important;

    max-width: 100% !important;

}


#admin-sidebar.poly-admin-sidebar {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    z-index: 2000 !important;

    margin: 0 !important;

    overflow: hidden !important;

}


#admin-main.poly-admin-main {

    min-width: 0 !important;

    float: none !important;

}


#admin-navbar.poly-admin-navbar {

    float: none !important;

    min-width: 0 !important;

}


#admin-content.poly-admin-content {

    min-width: 0 !important;

}


#admin-content .poly-admin-container {

    min-width: 0 !important;

    max-width: 100% !important;

}


@media (max-width: 900px) {

    #admin-sidebar.poly-admin-sidebar {

        transform:
            translateX(-100%) !important;

    }


    #admin-sidebar.poly-admin-sidebar.is-open {

        transform:
            translateX(0) !important;

    }


    #admin-main.poly-admin-main {

        width: 100% !important;

        margin-left: 0 !important;

    }

}


/* ==========================================================================
   END
   ========================================================================== */