/* =========================================================
   VISIBILITY PLATFORM — ENTERPRISE UI REVAMP
   Tanamera Enterprise Style
========================================================= */

/* =========================================================
   1. BASE
========================================================= */

body {

    margin: 0;
    padding: 0;

    font-size: 14px !important;
    line-height: 1.5 !important;

    background: #f5f7fa !important;

    color: #2b2b2b !important;

    font-family: "Inter", "Segoe UI", sans-serif !important;
}

/* =========================================================
   2. MAIN CONTENT
========================================================= */

#main {

    padding: 0 1.5rem 1.5rem 1.5rem !important;
}

#main > .inner {

    padding-top: 0 !important;
}

section {

    padding-top: 0 !important;

    margin-top: 0 !important;
}

/* =========================================================
   3. HEADER + DUAL LOGO
========================================================= */

#header {

    padding: 0.5rem 0 0.8rem 0 !important;

    margin-bottom: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    justify-content: space-between !important;

    align-items: center !important;

    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box !important;

    padding-right: 0 !important;

    border-bottom: 3px solid #ff0016 !important;
}

/* remove theme pseudo elements */
#header::after,
#header::before {

    display: none !important;
}

/* hide theme title */
#header h1,
#header h1 * {

    display: none !important;

    visibility: hidden !important;

    width: 0 !important;

    height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    position: absolute !important;
}

/* hide unused theme elements */
#header a.logo:not(.logo-left):not(.logo-right),
#header .social {

    display: none !important;
}

#header a {

    border: none !important;
}

/* =========================================================
   4. LEFT LOGO (VISIBILITY)
========================================================= */

.logo-left {

    display: flex !important;

    align-items: center !important;

    flex-shrink: 0 !important;
}

.logo-left img {

    display: block;

    max-height: 55px;

    width: auto;
}

/* =========================================================
   5. RIGHT LOGO (TANAMERA)
========================================================= */

.logo-right {

    margin-left: auto !important;

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    flex-shrink: 0 !important;

    padding: 0 !important;

    margin-right: 0 !important;

    width: auto !important;
}

.logo-right img {

    display: block;

    max-height: 40px;

    width: auto;

    margin: 0 !important;
}

/* =========================================================
   6. PAGE TITLE
========================================================= */

header.main {

    margin-top: 0.8rem !important;

    padding-top: 0 !important;

    margin-bottom: 1rem !important;
}

#main h1 {

    font-size: 1.8em !important;

    margin-top: 0 !important;

    margin-bottom: 10px !important;

    line-height: 1.2 !important;

    color: #222 !important;

    font-weight: 700 !important;

    letter-spacing: -0.5px;
}

#main h2 {

    font-size: 1.25em !important;

    margin: 0 0 0.6em 0 !important;

    color: #333 !important;

    font-weight: 600 !important;
}

#main h3 {

    font-size: 1em !important;

    margin: 0 0 0.5em 0 !important;
}

/* =========================================================
   7. SIDEBAR
========================================================= */

#sidebar {

    background: #ffffff !important;

    border-right: 1px solid #ececec !important;
}

#sidebar nav ul {

    list-style: none !important;

    padding-left: 0 !important;

    margin: 0 !important;

    display: block !important;
}

#sidebar nav ul ul {

    display: none !important;
}

#sidebar nav details[open] > ul {

    display: block !important;
}

/* =========================================================
   8. SIDEBAR SPACING
========================================================= */

details {

    margin-bottom: 4px;
}

summary {

    cursor: pointer;

    list-style: none;

    outline: none;

    display: block;

    padding: 8px 12px;

    position: relative;

    transition: all 0.2s ease;

    border-radius: 8px;
}

summary::-webkit-details-marker {

    display: none;
}

/* =========================================================
   9. PLUS MINUS
========================================================= */

summary::before {

    content: '+';

    color: #d63b3b;

    font-weight: bold;

    margin-right: 10px;

    display: inline-block;

    width: 12px;
}

details[open] > summary::before {

    content: '-';
}

/* =========================================================
   10. MENU TYPOGRAPHY
========================================================= */

.level-1-title,
.level-1-link {

    font-size: 1.05em !important;

    font-weight: 700 !important;

    color: #222 !important;
}

#sidebar nav ul li summary,
#sidebar nav ul li a {

    text-transform: capitalize !important;

    color: #444 !important;

    text-decoration: none;

    display: block;

    padding: 8px 12px;

    border-left: 3px solid transparent;

    border-radius: 8px;

    transition: all 0.2s ease;
}

/* =========================================================
   11. NESTED MENU
========================================================= */

#sidebar nav ul ul {

    padding-left: 14px !important;

    border-left: 1px solid #efefef;

    margin-left: 12px !important;
}

#sidebar nav > ul > li > details > ul > li > summary,
#sidebar nav > ul > li > details > ul > li > a {

    font-size: 0.97em !important;

    font-weight: 600 !important;
}

#sidebar nav ul ul ul li a {

    font-size: 0.88em !important;

    font-weight: 400 !important;
}

/* =========================================================
   12. ACTIVE MENU
========================================================= */

#sidebar nav li {

    background: none !important;

    border: none !important;

    padding: 0 !important;
}

#sidebar nav a.active,
#sidebar nav summary.active {

    background: rgba(214, 59, 59, 0.10) !important;

    border-left: 3px solid #d63b3b !important;

    color: #d63b3b !important;

    font-weight: 700 !important;

    border-radius: 8px;
}

/* =========================================================
   13. HOVER EFFECT
========================================================= */

summary:hover,
#sidebar nav a:hover {

    color: #d63b3b !important;

    background: rgba(214, 59, 59, 0.05) !important;

    padding-left: 16px;
}

/* =========================================================
   14. CARD / PANEL
========================================================= */

.box,
.panel,
.card,
section {

    border-radius: 14px !important;

    background: #ffffff !important;

    box-shadow:
        0 4px 20px rgba(0,0,0,0.04) !important;

    border: 1px solid #f0f0f0 !important;
}

/* =========================================================
   15. SUCCESS ALERT
========================================================= */

.box.success {

    border-left: 4px solid #38b000 !important;

    background: #f3fff3 !important;
}

/* =========================================================
   16. TABLE
========================================================= */

table {

    border-radius: 12px !important;

    overflow: hidden !important;
}

table thead {

    background: #fafafa !important;
}

table th {

    font-weight: 700 !important;

    color: #333 !important;
}

/* =========================================================
   17. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 8px;
}

::-webkit-scrollbar-thumb {

    background: rgba(0,0,0,0.15);

    border-radius: 20px;
}

/* =========================================================
   18. RESPONSIVE
========================================================= */

@media screen and (max-width: 980px) {

    #main {

        padding: 0 1rem 1rem 1rem !important;
    }

    .logo-left img {

        max-height: 44px;
    }

    .logo-right img {

        max-height: 28px;
    }

}