/* =========================================================
   KOOTELA DASHBOARD VISUAL THEME
   ---------------------------------------------------------
   IMPORTANT:
   This section ONLY changes appearance.
   Existing Aero layout, dimensions and positioning remain.
   ========================================================= */

:root {
    --ktla-teal: #173537;
    --ktla-teal-dark: #013b3f;
    --ktla-teal-soft: #eaf2f2;

    --ktla-gold: #db9034;
    --ktla-dark: #393939;

    --ktla-white: #ffffff;
    --ktla-bg: #f2f5f5;
    --ktla-border: #e2e8e8;
    --ktla-muted: #718082;
}


/* =========================================================
   APPLICATION BACKGROUND
   ========================================================= */

html,
body {
    background: var(--ktla-teal) !important;
    color: var(--ktla-dark) !important;
}

body.theme-blush {
    background: var(--ktla-teal) !important;
}


/* =========================================================
   MAIN TEAL APPLICATION SHELL
   ========================================================= */

body.theme-blush::before {
    background: var(--ktla-teal) !important;
}


/* =========================================================
   TOP NAVIGATION
   ---------------------------------------------------------
   Keep its existing height / position.
   Only change visual appearance.
   ========================================================= */

.navbar-right {
    background: var(--ktla-teal) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.navbar-right .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.navbar-right .navbar-nav > li > a:hover {
    color: var(--ktla-gold) !important;
    background: rgba(255, 255, 255, 0.07) !important;
}


/* =========================================================
   LEFT SIDEBAR
   ---------------------------------------------------------
   Keep original width / position / menu behavior.
   ========================================================= */

#leftsidebar,
#leftsidebar.sidebar {
    background: var(--ktla-teal) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}


/* =========================================================
   SIDEBAR BRAND
   ========================================================= */

#leftsidebar .navbar-brand {
    background: var(--ktla-teal) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#leftsidebar .navbar-brand a,
#leftsidebar .navbar-brand span {
    color: #ffffff !important;
}

#leftsidebar .navbar-brand .btn-menu {
    color: #ffffff !important;
}


/* =========================================================
   SIDEBAR USER INFORMATION
   ========================================================= */

#leftsidebar .user-info {
    background: var(--ktla-teal) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

#leftsidebar .user-info .detail h4 {
    color: #ffffff !important;
}

#leftsidebar .user-info .detail small {
    color: rgba(255, 255, 255, 0.62) !important;
}

/*#leftsidebar .user-info .image {*/
/*    background: rgba(255, 255, 255, 0.12) !important;*/
/*    border-color: rgba(219, 144, 52, 0.45) !important;*/
/*}*/


/* =========================================================
   SIDEBAR MENU
   ---------------------------------------------------------
   Same menu positioning.
   Only colors / appearance.
   ========================================================= */

#leftsidebar .menu {
    background: var(--ktla-teal) !important;
}

#leftsidebar .menu .list > li > a {
    color: rgba(255, 255, 255, 0.72) !important;
}

#leftsidebar .menu .list > li > a > i {
    color: rgba(255, 255, 255, 0.62) !important;
}


/* Menu hover */

#leftsidebar .menu .list > li > a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

#leftsidebar .menu .list > li > a:hover > i {
    color: var(--ktla-gold) !important;
}


/* =========================================================
   ACTIVE MENU
   ========================================================= */

#leftsidebar .menu .list > li.active > a,
#leftsidebar .menu .list > li.active.open > a {
    color: #ffffff !important;

    background: rgba(219, 144, 52, 0.14) !important;

    border-left-color: var(--ktla-gold) !important;
}

#leftsidebar .menu .list > li.active > a > i,
#leftsidebar .menu .list > li.active.open > a > i {
    color: var(--ktla-gold) !important;
}


/* =========================================================
   SUBMENU
   ========================================================= */

#leftsidebar .menu .list .ml-menu {
    background: #074247 !important;
}

#leftsidebar .menu .list .ml-menu li a {
    color: rgba(255, 255, 255, 0.62) !important;
}

#leftsidebar .menu .list .ml-menu li a:hover {
    color: var(--ktla-gold) !important;
}


/* =========================================================
   MAIN CONTENT AREA
   ---------------------------------------------------------
   THIS is the "inner container" effect.
   We keep the existing dimensions and positioning.
   ========================================================= */

section.content {
    background: var(--ktla-bg) !important;
    border-radius: 22px !important;

    box-shadow:
        -8px 0 30px rgba(0, 0, 0, 0.08) !important;
}


/* =========================================================
   SUBTLE INNER BACKGROUND CIRCLES
   ---------------------------------------------------------
   Decorative only — no layout changes.
   ========================================================= */

section.content::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -180px;
    top: 70px;

    border: 1px solid rgba(2, 71, 76, 0.045);

    border-radius: 50%;

    pointer-events: none;
}

section.content::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    left: -190px;
    bottom: -120px;

    border: 1px solid rgba(219, 144, 52, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

section.content .block-header h2 {
    color: var(--ktla-dark) !important;
}


/* Gold breadcrumb home icon */

section.content .breadcrumb-item a {
    color: var(--ktla-gold) !important;
}

section.content .breadcrumb-item a i {
    color: var(--ktla-gold) !important;
}

section.content .breadcrumb-item.active {
    color: var(--ktla-muted) !important;
}


/* =========================================================
   PRIMARY BUTTONS
   ---------------------------------------------------------
   Existing dimensions remain untouched.
   ========================================================= */

.btn-primary,
.theme-blush .btn-primary {
    background: var(--ktla-teal) !important;
    border-color: var(--ktla-teal) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.theme-blush .btn-primary:hover,
.theme-blush .btn-primary:focus {
    background: var(--ktla-gold) !important;
    border-color: var(--ktla-gold) !important;
    color: #ffffff !important;
}


/* =========================================================
   CARDS
   ---------------------------------------------------------
   Existing card positions and sizes are preserved.
   ========================================================= */

section.content .card {
    background: #ffffff !important;

    border-color: var(--ktla-border) !important;

    box-shadow:
        0 5px 20px rgba(57, 57, 57, 0.055) !important;
}


/* =========================================================
   CARD HEADINGS
   ========================================================= */

section.content .card h1,
section.content .card h2,
section.content .card h3,
section.content .card h4,
section.content .card h5,
section.content .card h6 {
    color: var(--ktla-dark) !important;
}


/* =========================================================
   GOLD TEXT HIGHLIGHTS
   ========================================================= */

section.content .text-primary,
section.content .text-warning {
    color: var(--ktla-gold) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

section.content a {
    color: var(--ktla-teal);
}

section.content a:hover {
    color: var(--ktla-gold);
}


/* =========================================================
   PROGRESS BARS
   ========================================================= */

.progress-bar-warning,
.progress-bar {
    background: var(--ktla-gold) !important;
}


/* Keep primary progress teal */

.progress-primary .progress-bar {
    background: var(--ktla-teal) !important;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.form-control:focus {
    border-color: var(--ktla-gold) !important;

    box-shadow:
        0 0 0 2px rgba(219, 144, 52, 0.10) !important;
}


/* =========================================================
   RIGHT SIDEBAR
   ========================================================= */

#rightsidebar {
    background: #ffffff !important;

    border-color: var(--ktla-border) !important;
}

#rightsidebar .nav-tabs .nav-link {
    color: var(--ktla-muted) !important;
}

#rightsidebar .nav-tabs .nav-link.active {
    color: var(--ktla-teal) !important;

    border-bottom-color: var(--ktla-gold) !important;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.navbar-right .dropdown-menu {
    border-color: var(--ktla-border) !important;

    box-shadow:
        0 15px 35px rgba(57, 57, 57, 0.13) !important;
}

.navbar-right .dropdown-menu .header {
    color: var(--ktla-dark) !important;
}

.navbar-right .dropdown-menu .footer a {
    color: var(--ktla-teal) !important;
}


/* =========================================================
   NOTIFICATION INDICATORS
   ========================================================= */

.navbar-right .notify .point {
    background: var(--ktla-gold) !important;
}

.navbar-right .notify .heartbit {
    border-color: var(--ktla-gold) !important;
}


/* =========================================================
   APP SHORTCUT ICONS
   ---------------------------------------------------------
   Neutralize old Aero rainbow colors.
   ========================================================= */

.bg-blue,
.bg-amber,
.bg-green,
.bg-purple,
.bg-red,
.bg-grey,
.bg-light-blue {
    background: rgba(2, 71, 76, 0.09) !important;

    color: var(--ktla-teal) !important;
}


/* =========================================================
   CHECKBOX / RADIO ACCENTS
   ========================================================= */

.checkbox label:before,
.radio label:before {
    border-color: #b9c4c5 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#leftsidebar .menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18) !important;
}

#leftsidebar .menu::-webkit-scrollbar-track {
    background: transparent !important;
}


/* =========================================================
   MOBILE
   ---------------------------------------------------------
   NO layout modification.
   Existing Aero responsive behavior remains.
   ========================================================= */

@media (max-width: 991px) {

    #leftsidebar,
    #leftsidebar.sidebar {
        background: var(--ktla-teal) !important;
    }

    section.content {
        background: var(--ktla-bg) !important;
    }
}