/* ================================================================
   BEEQ GLOBAL ORANGE THEME OVERRIDE
================================================================ */
/*====================================================
 MODERN TOGGLE SWITCH
====================================================*/
/*====================================================
    MODERN TOGGLE SWITCH
====================================================*/

.sims-switch,
.form-switch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .sims-switch .form-check-input,
    .form-switch .form-check-input {
        width: 46px !important;
        height: 24px !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 999px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background: #d1d5db !important;
        position: relative;
        cursor: pointer;
        transition: all .25s ease;
        box-shadow: inset 0 0 0 2px rgba(20,184,181,.15);
    }

        /* ON */

        .sims-switch .form-check-input:checked,
        .form-switch .form-check-input:checked {
            background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
        }

        /* White Circle */

        .sims-switch .form-check-input::before,
        .form-switch .form-check-input::before {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: #ffffff;
            border-radius: 50%;
            transition: .25s ease;
            box-shadow: 0 2px 6px rgba(0,0,0,.25);
        }

        /* Move Circle */

        .sims-switch .form-check-input:checked::before,
        .form-switch .form-check-input:checked::before {
            transform: translateX(22px);
        }

        /* Focus */

        .sims-switch .form-check-input:focus,
        .form-switch .form-check-input:focus {
            box-shadow: 0 0 0 .20rem rgba(20,184,181,.20) !important;
        }

/* Dark Mode OFF */

body.dark-theme .form-switch .form-check-input:not(:checked),
body.dark-theme .sims-switch .form-check-input:not(:checked) {
    background: #475569 !important;
}

/* Light Mode OFF */

body.light-theme .form-switch .form-check-input:not(:checked),
body.light-theme .sims-switch .form-check-input:not(:checked) {
    background: #cbd5e1 !important;
}


/*====================================================
    STATUS COLUMN ALIGNMENT
====================================================*/

.beeq-table td:nth-child(6),
.beeq-table th:nth-child(6) {
    text-align: center !important;
    vertical-align: middle !important;
}

    .beeq-table td:nth-child(6) .form-switch,
    .beeq-table td:nth-child(6) .sims-switch {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        width: fit-content !important;
    }
/* ==========================================================
   FINAL TEAL ICON OVERRIDE
   KEEP THIS AT THE VERY BOTTOM OF orange.css
========================================================== */

/* Number Badge */
body.dark-theme .beeq-index,
html.dark .beeq-index {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.25) !important;
    color: #5eead4 !important;
}

/* Organization / Branch / Service Icons */
body.dark-theme .beeq-org-icon,
html.dark .beeq-org-icon {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.25) !important;
    color: #5eead4 !important;
}

    body.dark-theme .beeq-org-icon i,
    html.dark .beeq-org-icon i {
        color: #5eead4 !important;
    }

/* Contact Icons */
body.dark-theme .beeq-contact i,
html.dark .beeq-contact i {
    color: #5eead4 !important;
}

/* Location Icons */
body.dark-theme .beeq-location i,
html.dark .beeq-location i {
    color: #5eead4 !important;
}

/* Action Button */
body.dark-theme .beeq-action-btn,
html.dark .beeq-action-btn {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.25) !important;
}

    body.dark-theme .beeq-action-btn i,
    html.dark .beeq-action-btn i {
        color: #5eead4 !important;
    }

    body.dark-theme .beeq-action-btn:hover,
    html.dark .beeq-action-btn:hover {
        background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
        border-color: #14b8b5 !important;
    }

        body.dark-theme .beeq-action-btn:hover i,
        html.dark .beeq-action-btn:hover i {
            color: #ffffff !important;
        }
/* ================================================================
   1. THEME VARIABLES
================================================================ */

:root {
    --beeq-primary: #14b8b5;
    --beeq-primary-dark: #0891b2;
    --beeq-primary-deep: #0f766e;
    --beeq-primary-light: #ecfeff;
    --beeq-primary-soft: rgba(20,184,181,.12);
    --beeq-primary-border: rgba(20,184,181,.28);
    --beeq-primary-shadow: rgba(20,184,181,.25);
}

/* ================================================================
   2. PAGE HEADER ICON
================================================================ */

#content .beeq-page-header .beeq-page-icon,
.beeq-page-header .beeq-page-icon {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(20,184,181,.25) !important;
}

    #content .beeq-page-header .beeq-page-icon i,
    .beeq-page-header .beeq-page-icon i {
        color: #ffffff !important;
    }


/* ================================================================
   3. PAGE HEADER
================================================================ */

#content .beeq-page-header {
    transition: border-color .25s ease, box-shadow .25s ease !important;
}


/* ================================================================
   4. SEARCH BOX
================================================================ */

#content .beeq-search-box:focus-within,
.beeq-search-box:focus-within {
    border-color: rgba(20,184,181,.55) !important;
    box-shadow: 0 0 0 3px rgba(20,184,181,.10) !important;
}

    #content .beeq-search-box:focus-within > i,
    .beeq-search-box:focus-within > i {
        color: #0891b2 !important;
    }
    /* Search icon */

    #content .beeq-search-box > i,
    .beeq-search-box > i {
        transition: color .2s ease !important;
    }

#content .beeq-search-box:focus-within > i,
.beeq-search-box:focus-within > i {
    color: #0891b2 !important;
}


    /* Input */

    #content .beeq-search-box input:focus,
    .beeq-search-box input:focus {
        outline: none !important;
        box-shadow: none !important;
    }


/* ================================================================
   5. SEARCH BUTTON
================================================================ */

#content .beeq-search-btn,
.beeq-search-btn {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 5px 14px rgba(20,184,181,.20) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

#content .beeq-search-btn:hover,
.beeq-search-btn:hover {
    background: linear-gradient(135deg,#0891b2,#0f766e) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(20,184,181,.30) !important;
}

    #content .beeq-search-btn:active,
    .beeq-search-btn:active {
        transform: translateY(0) !important;
    }


/* ================================================================
   6. PRIMARY BUTTON
   Add Organization
   Add Branch
   Add Service
   Save
   Update etc.
================================================================ */

#content .beeq-btn-primary,
.beeq-btn-primary {
    background: linear-gradient(135deg,#0891b2,#0f766e) !important;
    box-shadow: 0 10px 24px rgba(20,184,181,.32) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
   
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}


    /* Icons */

    #content .beeq-btn-primary i,
    .beeq-btn-primary i {
        color: #ffffff !important;
    }


    /* Text */

    #content .beeq-btn-primary span,
    .beeq-btn-primary span {
        color: #ffffff !important;
    }


    /* Hover */

    #content .beeq-btn-primary:hover,
    .beeq-btn-primary:hover {
        background: linear-gradient(135deg,#0891b2,#0f766e) !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 24px rgba(20,184,181,.32) !important;
    }


    /* Disabled */

    #content .beeq-btn-primary:disabled,
    .beeq-btn-primary:disabled {
        opacity: .60 !important;
        transform: none !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
    }


/* ================================================================
   7. TABLE CARD
================================================================ */

#content .beeq-table-card,
.beeq-table-card {
    transition: border-color .25s ease, box-shadow .25s ease !important;
}


/* ================================================================
   8. TABLE ROW HOVER
================================================================ */

#content .beeq-table tbody tr.desktop-row,
.beeq-table tbody tr.desktop-row {
    transition: background-color .20s ease !important;
}

    #content .beeq-table tbody tr.desktop-row:hover,
    .beeq-table tbody tr.desktop-row:hover {
        background: rgba(20,184,181,.05) !important;
    }


/* ================================================================
   9. INDEX / SERIAL NUMBER
================================================================ */

#content .beeq-index,
.beeq-index {
    color: #0891b2;
    background: #ecfeff;
    border: 1px solid rgba(20,184,181,.20) !important;
    box-shadow: none !important;
}


/* ================================================================
   10. ORGANIZATION / BRANCH / SERVICE ROW ICON
================================================================ */

#content .beeq-org-icon,
.beeq-org-icon {
    background: #ecfeff !important;
    border: 1px solid rgba(20,184,181,.20) !important;
    color: #0891b2 !important;
    transition: background .2s ease, transform .2s ease !important;
}

    #content .beeq-org-icon i,
    .beeq-org-icon i {
        color: #0891b2 !important;
    }


/* Row hover */

#content .beeq-table tbody tr:hover .beeq-org-icon,
.beeq-table tbody tr:hover .beeq-org-icon {
    background: rgba(20,184,181,.12) !important;
}


/* ================================================================
   11. CONTACT ICONS
================================================================ */

#content .beeq-contact i,
.beeq-contact i {
    color: #0891b2 !important;
}


/* ================================================================
   12. LOCATION ICON
================================================================ */

#content .beeq-location i,
.beeq-location i {
    color: #0891b2 !important;
}


/* ================================================================
   13. BOOTSTRAP SWITCH
================================================================ */



/* OFF State */
#content .sims-switch .form-check-input,
.sims-switch .form-check-input {
    background: #e5e7eb !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
}

    /* ON State */
    #content .sims-switch .form-check-input:checked,
    .sims-switch .form-check-input:checked {
        background: #14b8b5 !important;
        border-color: #14b8b5 !important;
    }

    /* Focus */
    #content .sims-switch .form-check-input:focus,
    .sims-switch .form-check-input:focus {
        border-color: #14b8b5 !important;
        box-shadow: 0 0 0 .20rem rgba(20,184,181,.15) !important;
    }

    /* Switch Circle */
    #content .sims-switch .form-check-input::before,
    .sims-switch .form-check-input::before {
        background: #ffffff !important;
    }
/* ================================================================
   14. ACTION / EDIT BUTTON
================================================================ */

/*#content button.beeq-action-btn:hover,
button.beeq-action-btn:hover,
#content .beeq-action-btn:hover,
.beeq-action-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    border-color: #14b8b5 !important;
    box-shadow: 0 6px 14px rgba(20,184,181,.22) !important;
    transform: translateY(-1px) !important;
}*/

    /* Edit icon */

    /*#content button.beeq-action-btn i,
    button.beeq-action-btn i,
    #content .beeq-action-btn i,
    .beeq-action-btn i {
        color: #0891b2 !important;
    }*/


    /* Hover */

#content button.beeq-action-btn:hover,
button.beeq-action-btn:hover,
#content .beeq-action-btn:hover,
.beeq-action-btn:hover {
    background: linear-gradient(135deg, #14b8b5, #0891b2) !important;
    color: #ffffff !important;
    border-color: #14b8b5 !important;
    box-shadow: 0 6px 14px rgba(20,184,181,.22) !important;
    transform: translateY(-1px) !important;
}

    #content button.beeq-action-btn:hover i,
    button.beeq-action-btn:hover i,
    #content .beeq-action-btn:hover i,
    .beeq-action-btn:hover i {
        color: #ffffff !important;
    }


/* ================================================================
   15. PAGINATION INFO ICON
================================================================ */

#content .beeq-page-count i,
.beeq-page-count i {
    color: #0891b2 !important;
}


/* ================================================================
   16. PAGINATION ACTIVE BUTTON
================================================================ */

#content .beeq-pagination .beeq-page-btn.active,
.beeq-pagination .beeq-page-btn.active,
#content button.beeq-page-btn.active,
button.beeq-page-btn.active {
   
    color: #ffffff !important;
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    border-color: #14b8b5 !important;
    box-shadow: 0 6px 15px rgba(20,184,181,.25) !important;
}


/* Active icon */

#content .beeq-page-btn.active i,
.beeq-page-btn.active i {
    color: #ffffff !important;
}


/* ================================================================
   17. PAGINATION NORMAL BUTTON HOVER
================================================================ */

#content .beeq-page-btn:not(.active):not(:disabled):hover,
.beeq-page-btn:not(.active):not(:disabled):hover {
    color: #0891b2 !important;
    border-color: rgba(20,184,181,.35) !important;
    background: rgba(20,184,181,.10) !important;
}


/* ================================================================
   18. REFRESH / LIGHT BUTTON
================================================================ */

#content .beeq-btn-light,
.beeq-btn-light {
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease !important;
}

    #content .beeq-btn-light:hover,
    .beeq-btn-light:hover {
        background: rgba(20,184,181,.10) !important;
        color: #0891b2 !important;
        border-color: rgba(20,184,181,.25) !important;
        transform: translateY(-1px) !important;
    }

        #content .beeq-btn-light:hover i,
        .beeq-btn-light:hover i {
            color: #0891b2 !important;
        }


/* ================================================================
   19. EMPTY STATE
================================================================ */

#content .beeq-empty i,
.beeq-empty i {
    color: rgba(20,184,181,.65) !important;
}


/* ================================================================
   20. MOBILE CARD ICONS
================================================================ */

#content .beeq-mobile-card i,
.beeq-mobile-card i {
    transition: color .2s ease !important;
}

#content .beeq-mobile-body i,
.beeq-mobile-body i {
    color: #0891b2 !important;
}


/* ================================================================
   21. MODAL HEADER ORANGE ICON
================================================================ */

/*
   Your Razor currently has Bootstrap:
   text-primary

   on the modal title icon.
*/

#content .modal-header .text-primary,
.modal-header .text-primary {
    color: #0891b2 !important;
}


/* ================================================================
   22. MODAL INPUT FOCUS
================================================================ */

#content .modal .beeq-input:focus,
.modal .beeq-input:focus,
#content .modal .form-control:focus,
.modal .form-control:focus,
#content .modal .form-select:focus,
.modal .form-select:focus {
    border-color: rgba(20,184,181,.70) !important;
    box-shadow: 0 0 0 .20rem rgba(20,184,181,.12) !important;
    outline: none !important;
}


/* ================================================================
   23. MODAL CLOSE BUTTON
================================================================ */
#content .beeq-close-btn:hover,
.beeq-close-btn:hover {
    background: rgba(20,184,181,.11) !important;
    color: #14b8b5 !important;
    border-color: rgba(20,184,181,.20) !important;
    box-shadow: 0 4px 12px rgba(20,184,181,.20) !important;
}

    #content .beeq-close-btn:hover i,
    .beeq-close-btn:hover i {
        color: #14b8b5 !important;
    }

/* ================================================================
   24. DARK MODE
================================================================ */

/*
   Keep orange strong in dark mode.
   Don't make the whole UI orange.
*/

html.dark #content .beeq-index,
html.dark .beeq-index,
body.dark-theme .beeq-index {
    background: rgba(20,184,181,.12) !important;
    color: #5eead4 !important;
    border: 1px solid rgba(20,184,181,.25) !important;
}

/*html.dark #content .beeq-org-icon,*/
/*html.dark .beeq-org-icon {
    background: rgba(245, 158, 11, .12) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, .18) !important;
}


    html.dark #content .beeq-org-icon i,
    html.dark .beeq-org-icon i,*/
/*    html.dark #content .beeq-contact i,*/
    /*html.dark .beeq-contact i,*/
/*    html.dark #content .beeq-location i,*/
    /*html.dark .beeq-location i {
        color: #fbbf24 !important;
    }*/


/*html.dark #content .beeq-action-btn,*/
/*html.dark .beeq-action-btn {
    background: rgba(245, 158, 11, .10) !important;
    border-color: rgba(245, 158, 11, .18) !important;
    color: #fbbf24 !important;
}


    html.dark #content .beeq-action-btn i,
    html.dark .beeq-action-btn i {
        color: #fbbf24 !important;
    }


    html.dark #content .beeq-action-btn:hover,
    html.dark .beeq-action-btn:hover {
        background: linear-gradient( 135deg, #f59e0b, #f97316 ) !important;
        color: #ffffff !important;
        border-color: #f59e0b !important;
    }


        html.dark #content .beeq-action-btn:hover i,
        html.dark .beeq-action-btn:hover i {
            color: #ffffff !important;
        }*/


/* ================================================================
   25. LIGHT MODE
================================================================ */
html.light #content .beeq-index,
html.light .beeq-index {
    ...
}

html.light #content .beeq-org-icon,
html.light .beeq-org-icon {
    ...
}

html.light #content .beeq-action-btn,
html.light .beeq-action-btn {
  
}


/* ================================================================
   26. FORCE BOOTSTRAP PRIMARY ACCENTS INSIDE BEEQ CONTENT
================================================================ */

/*
   This handles a few remaining Bootstrap blue elements.
   Scoped to #content so navbar/sidebar are NOT affected.
*/
#content .text-primary {
    color: #14b8b5 !important;
}

/* ================================================================
   27. ACCESSIBILITY / FOCUS
================================================================ */

#content .beeq-btn-primary:focus-visible,
#content .beeq-search-btn:focus-visible,
#content .beeq-action-btn:focus-visible,
#content .beeq-page-btn:focus-visible,
#content .beeq-btn-light:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .25) !important;
    outline-offset: 2px !important;
}


/* ================================================================
   BEEQ LIGHT MODE - ORANGE NAVBAR + SIDEBAR
   KEEP THIS AT THE VERY BOTTOM OF master.css
================================================================ */


/* ================================================================
   1. LIGHT MODE NAVBAR
================================================================ */

html.light .top-row,
html.light .top-navbar,
html.light .navbar,
html.light header,
html.light .header {
    background: linear-gradient( 90deg, #14b8b5, #0891b2, #0f766e) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 4px 18px rgba(249, 115, 22, .22) !important;
}


    /* Navbar text */

    html.light .top-row *,
    html.light .top-navbar *,
    html.light .navbar * {
        --bs-navbar-color: #ffffff;
    }


    /* Brand */

    html.light .navbar-brand,
    html.light .top-row .navbar-brand,
    html.light .top-navbar .navbar-brand {
        color: #ffffff !important;
    }


        /* BeeQ Management yellow word can remain yellow */

        html.light .navbar-brand .text-warning {
            color: #fde047 !important;
        }


    /* Navbar icons */

    html.light .top-row i,
    html.light .top-navbar i,
    html.light .navbar i {
        color: #ffffff !important;
    }


    /* ================================================================
   2. NAVBAR BUTTON
================================================================ */

    html.light .top-row button,
    html.light .top-navbar button,
    html.light .navbar button {
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }


        html.light .top-row button:hover,
        html.light .top-navbar button:hover,
        html.light .navbar button:hover {
            background: rgba(255,255,255,.18) !important;
            border-color: rgba(255,255,255,.45) !important;
        }


/* ================================================================
   3. LIGHT SIDEBAR
================================================================ */

html.light #sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 4px 0 20px rgba(15,23,42,.04) !important;
}


    /* ================================================================
   4. NORMAL SIDEBAR ITEM
================================================================ */

    html.light #sidebar .sidebar-menu .nav-link {
        color: #334155 !important;
    }


        html.light #sidebar .sidebar-menu .nav-link i {
            color: #64748b !important;
        }


    /* ================================================================
   5. PARENT MENU HOVER
================================================================ */

    html.light #sidebar .sidebar-menu > .nav-item > .nav-link:hover,
    html.light #sidebar .sidebar-menu .has-submenu:hover {
        background: rgba(20,184,181,.08) !important;
        color: #0891b2 !important;
        box-shadow: none !important;
    }


        html.light #sidebar .sidebar-menu > .nav-item > .nav-link:hover i,
        html.light #sidebar .sidebar-menu .has-submenu:hover i {
            color: #0891b2 !important;
        }


    /* ================================================================
   6. SUBMENU
================================================================ */

    html.light #sidebar .submenu {
        border-left: none !important;
    }


        html.light #sidebar .submenu .nav-link {
            background: transparent !important;
            color: #334155 !important;
            box-shadow: none !important;
        }

/* ================================================================
   7. SUBMENU HOVER
================================================================ */

            html.light #sidebar .submenu .nav-link:hover {
                background: rgba(20,184,181,.10) !important;
                color: #0891b2 !important;
                transform: translateX(3px) !important;
                box-shadow: none !important;
            }

/* ================================================================
   8. ACTIVE SUBMENU
   THIS CHANGES YOUR BLUE "Organizations" TO ORANGE
================================================================ */

            html.light #sidebar .submenu .nav-link.active,
            html.light #sidebar .submenu a.nav-link.active,
            html.light #sidebar .submenu .active {
                background: linear-gradient(90deg,#14b8b5,#0891b2) !important;
                color: #ffffff !important;
                border: none !important;
                box-shadow: 0 8px 18px rgba(20,184,181,.28) !important;
            }
                /* Active submenu icon */

                html.light #sidebar .submenu .nav-link.active i {
                    color: #ffffff !important;
                }


                /* Active submenu hover */

                html.light #sidebar .submenu .nav-link.active:hover {
                    background: linear-gradient(90deg, #14b8b5, #0891b2) !important;
                    color: #ffffff !important;
                }


    /* ================================================================
   9. REMOVE OLD BLUE ACTIVE COLORS
================================================================ */

    html.light #sidebar .nav-link.active {
        background: linear-gradient(90deg,#14b8b5,#0891b2) !important;
        box-shadow: 0 8px 18px rgba(20,184,181,.25) !important;
        color: #ffffff !important;
        border-color: transparent !important;
       
    }


        html.light #sidebar .nav-link.active i {
            color: #ffffff !important;
        }


/* ================================================================
   10. ACTIVE LEFT INDICATOR
================================================================ */

        html.light #sidebar .nav-link.active::before,
        html.light #sidebar .nav-link:hover::before {
            background: #14b8b5 !important; 
        }


    /* Don't show indicator inside submenu */

    html.light #sidebar .submenu .nav-link::before {
        display: none !important;
    }


/* ================================================================
   11. ARROW / CHEVRON
================================================================ */

    html.light #sidebar .nav-link .bi-chevron-right,
    html.light #sidebar .nav-link .bi-chevron-down {
        color: inherit !important;
    }


    /* ================================================================
   12. REMOVE BLUE FOCUS EFFECT
================================================================ */

    html.light #sidebar .nav-link:focus,
    html.light #sidebar .nav-link:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
    }


/* ================================================================
   13. DARK MODE
   KEEP YOUR CURRENT DARK MODE NAVBAR BLUE
================================================================ */

html.dark .top-row,
html.dark .top-navbar,
html.dark .navbar,
html.dark header,
html.dark .header {
    background: linear-gradient( 90deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100% ) !important;
    color: #ffffff !important;
}


/* ================================================================
   14. DARK MODE SIDEBAR ACTIVE
   ORANGE STILL WORKS WELL AGAINST NAVY
================================================================ */
html.dark #sidebar .submenu .nav-link.active,
html.dark #sidebar .nav-link.active {
    background: linear-gradient(90deg, #14b8b5, #0891b2) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(20,184,181,.30) !important;
    border-color: transparent !important;
}

    html.dark #sidebar .nav-link.active i,
    html.dark #sidebar .submenu .nav-link.active i {
        color: #ffffff !important;
    }

/* ================================================================
   BEEQ THEME OVERRIDE
   IMPORTANT: KEEP THIS AT THE END OF master.css
================================================================ */


/* ================================================================
   LIGHT MODE - ORANGE NAVBAR
================================================================ */
body.light-theme .top-row,
body.light-theme .top-navbar,
body.light-theme .navbar,
body.light-theme header,
body.light-theme .header {
    background: linear-gradient( 90deg, #14b8b5 0%, #0891b2 45%, #0f766e 100% ) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 5px 20px rgba(20,184,181,.22) !important;
    transition: all .3s ease !important;
}
/* Navbar text */

body.light-theme .top-row,
body.light-theme .top-navbar,
body.light-theme .navbar {
    color: #ffffff !important;
}


    /* Navbar brand */

    body.light-theme .navbar-brand,
    body.light-theme .top-row .navbar-brand,
    body.light-theme .top-navbar .navbar-brand {
        color: #ffffff !important;
    }


    /* Navbar icons */

    body.light-theme .top-row i,
    body.light-theme .top-navbar i,
    body.light-theme .navbar i {
        color: #ffffff !important;
    }


    /* Navbar buttons */

    body.light-theme .top-row button,
    body.light-theme .top-navbar button,
    body.light-theme .navbar button {
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.30) !important;
        color: #ffffff !important;
    }


        body.light-theme .top-row button:hover,
        body.light-theme .top-navbar button:hover,
        body.light-theme .navbar button:hover {
            background: rgba(255,255,255,.20) !important;
            border-color: rgba(255,255,255,.50) !important;
        }


/* ================================================================
   LIGHT MODE SIDEBAR
================================================================ */

body.light-theme #sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    box-shadow: 4px 0 20px rgba(15,23,42,.04) !important;
}


    /* Normal sidebar links */

    body.light-theme #sidebar .sidebar-menu .nav-link {
        color: #334155 !important;
    }


        body.light-theme #sidebar .sidebar-menu .nav-link i {
            color: #64748b !important;
        }


        /* ================================================================
   LIGHT MODE SIDEBAR HOVER
================================================================ */

        body.light-theme #sidebar .sidebar-menu .nav-link:hover {
            background: rgba(20,184,181,.08) !important;
            color: #0891b2 !important;  
            box-shadow: none !important;
        }


            body.light-theme #sidebar .sidebar-menu .nav-link:hover i {
                color: #0891b2; !important;
            }


        /* ================================================================
   LIGHT MODE ACTIVE MENU
   BLUE -> ORANGE
================================================================ */

        body.light-theme #sidebar .sidebar-menu .nav-link.active {
            background: linear-gradient(90deg, #14b8b5 0%, #0891b2 100%) !important;
            color: #ffffff !important;
            box-shadow: 0 8px 20px rgba(20,184,181,.28) !important;
        }

            body.light-theme #sidebar .sidebar-menu .nav-link.active i {
                color: #ffffff !important;
            }

    /* ================================================================
   LIGHT MODE SUBMENU
================================================================ */

    body.light-theme #sidebar .submenu {
        border-left: none !important;
    }


        body.light-theme #sidebar .submenu .nav-link {
            background: transparent !important;
            color: #334155 !important;
            box-shadow: none !important;
        }


            /* Submenu hover */

            body.light-theme #sidebar .submenu .nav-link:hover {
                background: rgba(20,184,181,.10) !important;
                color: #0891b2 !important;
                transform: translateX(3px);
            }


            /* ================================================================
   ACTIVE SUBMENU
   Organizations / Services / etc.
================================================================ */

            body.light-theme #sidebar .submenu .nav-link.active {
                background: linear-gradient( 90deg, #14b8b5, #0891b2) !important;
                color: #ffffff !important;
                box-shadow: 0 8px 20px rgba(20,184,181,.30) !important;
            }


                body.light-theme #sidebar .submenu .nav-link.active:hover {
                    background: linear-gradient(90deg, #14b8b5 0%, #0891b2 45%, #0f766e 100%) !important;
                    color: #ffffff !important;
                }


            /* Remove submenu indicator */

            body.light-theme #sidebar .submenu .nav-link::before {
                display: none !important;
            }


/* ================================================================
   DARK MODE NAVBAR
   KEEP BLUE
================================================================ */

body.dark-theme .top-row,
body.dark-theme .top-navbar,
body.dark-theme .navbar,
body.dark-theme header,
body.dark-theme .header {
    background: linear-gradient( 90deg, #14b8b5, #0891b2, #0f766e ) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 5px 20px rgba(30,58,138,.22) !important;
}


/* ================================================================
   DARK MODE SIDEBAR ACTIVE
================================================================ */
body.dark-theme #sidebar .sidebar-menu .nav-link.active,
body.dark-theme #sidebar .submenu .nav-link.active {
    background: linear-gradient(90deg,#14b8b5,#0891b2) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(20,184,181,.30) !important;
}

    body.dark-theme #sidebar .sidebar-menu .nav-link.active i,
    body.dark-theme #sidebar .submenu .nav-link.active i {
        color: #fff !important;
    }


/* ================================================================
   DARK MODE SUBMENU
================================================================ */

body.dark-theme #sidebar .submenu {
    border-left: none !important;
}


/* ================================================================
   REMOVE OLD ACTIVE BLUE LEFT INDICATOR
================================================================ */

body.light-theme #sidebar .nav-link.active::before,
body.light-theme #sidebar .nav-link:hover::before {
    background: #14b8b5; !important;
}


body.dark-theme #sidebar .nav-link.active::before,
body.dark-theme #sidebar .nav-link:hover::before {
    background: #14b8b5 !important;
}

/* ================================================================
   BEEQ NAVBAR
   SAME ORANGE THEME FOR LIGHT + DARK MODE
   KEEP AT VERY BOTTOM OF master.css
================================================================ */

/* NAVBAR BACKGROUND - BOTH THEMES */
/* NAVBAR - LIGHT MODE ONLY */

body.light-theme .top-row,
body.light-theme .top-navbar,
body.light-theme .navbar,
body.light-theme header,
body.light-theme .header {
    background: linear-gradient(90deg, #14b8b5 0%, #0891b2 50%, #0f766e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: 0 5px 20px rgba(20, 184, 181, .22) !important;
    transition: all .3s ease !important;
}
/* NAVBAR - DARK MODE */

body.dark-theme .top-row,
body.dark-theme .top-navbar,
body.dark-theme .navbar,
body.dark-theme header,
body.dark-theme .header {
    background: linear-gradient(90deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%) !important;
    color: #ffffff !important;
}


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

    body.light-theme .navbar-brand,
    body.light-theme .top-row .navbar-brand,
    body.light-theme .top-navbar .navbar-brand,
    body.dark-theme .navbar-brand,
    body.dark-theme .top-row .navbar-brand,
    body.dark-theme .top-navbar .navbar-brand {
        color: #ffffff !important;
        font-weight: 700;
        letter-spacing: .3px;
    }


        /* Brand hover */

        body.light-theme .navbar-brand:hover,
        body.dark-theme .navbar-brand:hover {
            color: #fff7ed !important;
        }


    /* ================================================================
   NAVBAR ICONS
================================================================ */

    body.light-theme .top-row i,
    body.light-theme .top-navbar i,
    body.light-theme .navbar i,
    body.dark-theme .top-row i,
    body.dark-theme .top-navbar i,
    body.dark-theme .navbar i {
        color: #ffffff !important;
    }


    /* ================================================================
   NAVBAR BUTTONS
================================================================ */

    body.light-theme .top-row button,
    body.light-theme .top-navbar button,
    body.light-theme .navbar button,
    body.dark-theme .top-row button,
    body.dark-theme .top-navbar button,
    body.dark-theme .navbar button {
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        transition: all .25s ease !important;
    }


        /* Button hover */

        body.light-theme .top-row button:hover,
        body.light-theme .top-navbar button:hover,
        body.light-theme .navbar button:hover,
        body.dark-theme .top-row button:hover,
        body.dark-theme .top-navbar button:hover,
        body.dark-theme .navbar button:hover {
            background: rgba(255,255,255,.20) !important;
            border-color: rgba(255,255,255,.55) !important;
            transform: translateY(-1px);
        }


    /* ================================================================
   PROFILE / SUPER ADMIN
================================================================ */

    body.light-theme .top-row .profile,
    body.light-theme .top-navbar .profile,
    body.light-theme .user-profile,
    body.dark-theme .top-row .profile,
    body.dark-theme .top-navbar .profile,
    body.dark-theme .user-profile {
        color: #ffffff !important;
        border-radius: 30px;
        transition: all .25s ease;
    }


        body.light-theme .top-row .profile:hover,
        body.light-theme .top-navbar .profile:hover,
        body.light-theme .user-profile:hover,
        body.dark-theme .top-row .profile:hover,
        body.dark-theme .top-navbar .profile:hover,
        body.dark-theme .user-profile:hover {
            background: rgba(255,255,255,.12) !important;
        }


/* ================================================================
   REMOVE OLD BLUE NAVBAR COLORS
================================================================ */

body.dark-theme .top-row,
body.dark-theme .top-navbar,
body.dark-theme .navbar {
    background: linear-gradient(90deg, #14b8b5 0%, #0891b2 45%, #0f766e 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: 0 5px 20px rgba(20,184,181,.22) !important;
}

/* 1. Your existing navbar CSS */
/* 2. Your existing sidebar CSS */
/* 3. Other master CSS */


/* =========================================
   PROFILE DROPDOWN ICON FIX
   KEEP THIS AT THE VERY BOTTOM
========================================= */

body.light-theme .dropdown-menu i,
body.light-theme .dropdown-menu .bi {
    color: #475569 !important;
}

body.light-theme .dropdown-menu a,
body.light-theme .dropdown-menu .dropdown-item {
    color: #334155 !important;
}

    body.light-theme .dropdown-menu .dropdown-item:hover {
        background: rgba(20,184,181,.10) !important;
        color: #14b8b5 !important;
    }

        body.light-theme .dropdown-menu .dropdown-item:hover i,
        body.light-theme .dropdown-menu .dropdown-item:hover .bi {
            color: #14b8b5 !important;
        }


/* DARK MODE */

body.dark-theme .dropdown-menu i,
body.dark-theme .dropdown-menu .bi {
    color: #e2e8f0 !important;
}

body.dark-theme .dropdown-menu a,
body.dark-theme .dropdown-menu .dropdown-item {
    color: #f1f5f9 !important;
}

    body.dark-theme .dropdown-menu .dropdown-item:hover {
        background: rgba(20,184,181,.12) !important;
        color: #14b8b5 !important;
    }

        body.dark-theme .dropdown-menu .dropdown-item:hover i,
        body.dark-theme .dropdown-menu .dropdown-item:hover .bi {
            color: #14b8b5 !important;
        }


/* =========================================================
   MODERN BEEQ NAVBAR
   Dark premium navbar + orange brand accent
========================================================= */

/*body.dark-theme .top-row,
body.dark-theme .top-navbar,
body.dark-theme .navbar,
body.dark-theme header,
body.dark-theme .header {
    background: linear-gradient(
        90deg,
        #14b8b5,
        #0891b2,
        #0f766e
    ) !important;
}
    color: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid rgba(249, 115, 22, .28) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .03) !important;
}*/


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

    /*body.light-theme .navbar-brand,
    body.dark-theme .navbar-brand,
    body.light-theme .top-row .navbar-brand,
    body.dark-theme .top-row .navbar-brand {
        color: #ffffff !important;
        font-weight: 700 !important;
    }*/


        /* Keep "Management" orange/gold if it has its own span */

        /*body.light-theme .navbar-brand span,
        body.dark-theme .navbar-brand span {
            color: #fbbf24 !important;
        }*/


    /* =========================================================
   NAVBAR ICONS
========================================================= */

    /*body.light-theme .top-row > i,
    body.light-theme .top-navbar > i,
    body.dark-theme .top-row > i,
    body.dark-theme .top-navbar > i {
        color: #ffffff !important;
    }*/


    /* =========================================================
   HAMBURGER BUTTON
========================================================= */

    /*body.light-theme .top-row button,
    body.light-theme .top-navbar button,
    body.dark-theme .top-row button,
    body.dark-theme .top-navbar button {
        background: rgba(255,255,255,.06) !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
    }


        body.light-theme .top-row button:hover,
        body.light-theme .top-navbar button:hover,
        body.dark-theme .top-row button:hover,
        body.dark-theme .top-navbar button:hover {
            background: rgba(249,115,22,.14) !important;
            border-color: rgba(249,115,22,.55) !important;
            transform: translateY(-1px);
        }*/


/* =========================================================
   PROFILE AREA
========================================================= */

/*body.light-theme .user-profile,
body.dark-theme .user-profile,
body.light-theme .profile,
body.dark-theme .profile {
    background: transparent !important;
    border-radius: 30px !important;
    padding: 4px 8px !important;
    transition: all .2s ease !important;
}


    body.light-theme .user-profile:hover,
    body.dark-theme .user-profile:hover,
    body.light-theme .profile:hover,
    body.dark-theme .profile:hover {
        background: rgba(255,255,255,.06) !important;
    }*/


    /* =========================================================
   PROFILE IMAGE
========================================================= */

    /*body.light-theme .user-profile img,
    body.dark-theme .user-profile img,
    body.light-theme .profile img,
    body.dark-theme .profile img {
        border: 2px solid #f59e0b !important;
        border-radius: 50% !important;
        box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important;
    }*/


/* =========================================================
   NAVBAR TEXT / USER NAME
========================================================= */

/*body.light-theme .user-profile,
body.dark-theme .user-profile {
    color: #f8fafc !important;
}

    body.light-theme .user-profile span,
    body.dark-theme .user-profile span {
        color: #f8fafc !important;
    }*/


/* =========================================================
   NOTIFICATION BELL HOVER
========================================================= */

/*body.light-theme .top-row .bi-bell:hover,
body.dark-theme .top-row .bi-bell:hover,
body.light-theme .top-navbar .bi-bell:hover,
body.dark-theme .top-navbar .bi-bell:hover {
    color: #fbbf24 !important;
    transform: scale(1.08);
}*/
/* ================================================================
   BEEQ DARK THEME TEAL OVERRIDE
   PLACE AT THE VERY BOTTOM OF master.css
================================================================ */

/* Navbar */

body.dark-theme .top-row,
body.dark-theme .top-navbar,
body.dark-theme .navbar,
body.dark-theme header,
body.dark-theme .header {
    background: linear-gradient(90deg,#172033,#1e293b,#172033) !important;
    border-bottom: 1px solid rgba(20,184,181,.20) !important;
}

/* Sidebar */

body.dark-theme #sidebar {
    background: #111827 !important;
}

    body.dark-theme #sidebar .nav-link {
        color: #cbd5e1 !important;
    }

        body.dark-theme #sidebar .nav-link i {
            color: #94a3b8 !important;
        }

        /* Parent Hover */

        body.dark-theme #sidebar .nav-link:hover {
            background: rgba(20,184,181,.10) !important;
            color: #14b8b5 !important;
        }

            body.dark-theme #sidebar .nav-link:hover i {
                color: #14b8b5 !important;
            }

        /* Parent Active */

        body.dark-theme #sidebar .nav-link.active {
            background: linear-gradient(90deg,#14b8b5,#0891b2) !important;
            color: #ffffff !important;
            box-shadow: 0 8px 18px rgba(20,184,181,.30) !important;
        }

            body.dark-theme #sidebar .nav-link.active i {
                color: #ffffff !important;
            }

    /* Submenu */

    body.dark-theme #sidebar .submenu .nav-link {
        color: #cbd5e1 !important;
    }

        body.dark-theme #sidebar .submenu .nav-link:hover {
            background: rgba(20,184,181,.10) !important;
            color: #14b8b5 !important;
        }

        body.dark-theme #sidebar .submenu .nav-link.active {
            background: linear-gradient(90deg,#14b8b5,#0891b2) !important;
            color: #ffffff !important;
        }

            body.dark-theme #sidebar .submenu .nav-link.active i {
                color: #ffffff !important;
            }

/* Page Icon */

body.dark-theme .beeq-page-icon {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    color: #ffffff !important;
}

/* Search */

body.dark-theme .beeq-search-btn {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
}

    body.dark-theme .beeq-search-btn:hover {
        background: linear-gradient(135deg,#0891b2,#0f766e) !important;
    }

/* Primary Button */

body.dark-theme .beeq-btn-primary {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
}

    body.dark-theme .beeq-btn-primary:hover {
        background: linear-gradient(135deg,#0891b2,#0f766e) !important;
    }

/* Table Hover */

body.dark-theme .beeq-table tbody tr:hover {
    background: rgba(20,184,181,.05) !important;
}

/* Index */

body.dark-theme .beeq-index {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.20) !important;
    color: #5eead4 !important;
}

/* Icons */

body.dark-theme .beeq-org-icon {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.20) !important;
}

    body.dark-theme .beeq-org-icon i {
        color: #5eead4 !important;
    }
/* ===== FINAL ICON FIX ===== */

body.dark-theme .beeq-org-icon {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.25) !important;
}

    body.dark-theme .beeq-org-icon i,
    body.dark-theme .beeq-contact i,
    body.dark-theme .beeq-location i,
    body.dark-theme .beeq-action-btn i,
    body.dark-theme .beeq-mobile-card i,
    body.dark-theme .beeq-mobile-body i,
    body.dark-theme .beeq-table i[class^="bi-"],
    body.dark-theme .beeq-table i[class*=" bi-"] {
        color: #14b8b5 !important;
    }

body.dark-theme .beeq-action-btn {
    background: rgba(20,184,181,.10) !important;
    border: 1px solid rgba(20,184,181,.25) !important;
}

    body.dark-theme .beeq-action-btn:hover {
        background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    }

        body.dark-theme .beeq-action-btn:hover i {
            color: #fff !important;
        }

/*body.dark-theme .beeq-contact i,*/
/*body.dark-theme .beeq-location i {*/
/*    color: #5eead4 !important;
}*/

/* Edit Button */

/*body.dark-theme .beeq-action-btn {
    background: rgba(20,184,181,.10) !important;
.    border: 1px solid rgba(20,184,181,.20) !important;
}

    body.dark-theme .beeq-action-btn i {
        color: #5eead4 !important;
    }

    body.dark-theme .beeq-action-btn:hover {
        background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    }

        body.dark-theme .beeq-action-btn:hover i {
            color: #ffffff !important;
        }
*/
/*=========================================================
FINAL ICON OVERRIDE
KEEP THIS AS THE LAST CSS IN orange.css
=========================================================*/

body.dark-theme .beeq-org-icon {
    background: rgba(20,184,181,.12) !important;
    border: 1px solid rgba(20,184,181,.30) !important;
}

    body.dark-theme .beeq-org-icon i,
    body.dark-theme .beeq-contact i,
    body.dark-theme .beeq-location i,
    body.dark-theme .beeq-action-btn i,
    body.dark-theme .beeq-mobile-body i,
    body.dark-theme .beeq-mobile-card i {
        color: #14b8b5 !important;
    }

bodydark-theme .beeq-action-btn {
    border: 1px solid rgba(20,184,181,.30) !important;
    background: rgba(20,184,181,.10) !important;
}

    body.dark-theme .beeq-action-btn:hover {
        background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    }

        body.dark-theme .beeq-action-btn:hover i {
            color: #fff !important;
        }
/* Status */

body.dark-theme .form-check-input:checked {
    background: #14b8b5 !important;
    border-color: #14b8b5 !important;
}

/* Pagination */

body.dark-theme .beeq-page-btn.active {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    border-color: #14b8b5 !important;
}

body.dark-theme .beeq-page-btn:not(.active):hover {
    background: rgba(20,184,181,.10) !important;
    color: #14b8b5 !important;
}

/* Refresh */

body.dark-theme .beeq-btn-light:hover {
    background: rgba(20,184,181,.10) !important;
    color: #14b8b5 !important;
}

/* Inputs */

body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus {
    border-color: #14b8b5 !important;
    box-shadow: 0 0 0 .2rem rgba(20,184,181,.15) !important;
}
/* =========================================================
FINAL TEAL THEME OVERRIDE
=========================================================*/

/* Navbar */
body.light-theme .top-row,
body.light-theme .top-navbar,
body.light-theme .navbar,
body.light-theme header,
body.light-theme .header,
body.dark-theme .top-row,
body.dark-theme .top-navbar,
body.dark-theme .navbar,
body.dark-theme header,
body.dark-theme .header {
    background: linear-gradient(90deg,#14b8b5,#0891b2,#0f766e) !important;
    color: #fff !important;
    border: none !important;
    border-bottom: none !important;
}

/* Sidebar */
body.light-theme #sidebar .nav-link.active,
body.light-theme #sidebar .submenu .nav-link.active,
body.dark-theme #sidebar .nav-link.active,
body.dark-theme #sidebar .submenu .nav-link.active {
    background: linear-gradient(90deg,#14b8b5,#0891b2) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(20,184,181,.30) !important;
}

    body.light-theme #sidebar .nav-link.active i,
    body.light-theme #sidebar .submenu .nav-link.active i,
    body.dark-theme #sidebar .nav-link.active i,
    body.dark-theme #sidebar .submenu .nav-link.active i {
        color: #fff !important;
    }

/* Hover */
body.light-theme #sidebar .nav-link:hover,
body.dark-theme #sidebar .nav-link:hover {
    background: rgba(20,184,181,.10) !important;
    color: #14b8b5 !important;
}

    body.light-theme #sidebar .nav-link:hover i,
    body.dark-theme #sidebar .nav-link:hover i {
        color: #14b8b5 !important;
    }
/* ==============================
   SERVICE CODE BADGE
============================== */

.badge.bg-light.text-dark.border.rounded-pill {
    min-width: 70px;
    height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14b8b5, #0891b2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(20,184,181,.25) !important;
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(20,184,181,.20);
}

    /* Hover */
    .badge.bg-light.text-dark.border.rounded-pill:hover {
        background: linear-gradient(135deg, #0891b2, #0f766e) !important;
        color: #ffffff !important;
    }

/* Dark Mode */
body.dark-theme .badge.bg-light.text-dark.border.rounded-pill {
    background: linear-gradient(135deg, #14b8b5, #0891b2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(20,184,181,.35) !important;
}

/* Light Mode */
body.light-theme .badge.bg-light.text-dark.border.rounded-pill {
    background: linear-gradient(135deg, #14b8b5, #0891b2) !important;
    color: #ffffff !important;
}
/*====================================================
    PREFIX BADGE - LIGHT & DARK MODE
====================================================*/

.badge.bg-secondary.rounded-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    height: 36px;
    padding: 0 16px !important;
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(20,184,181,.25) !important;
    border-radius: 999px !important;
    font-weight: 700;
    letter-spacing: .4px;
    box-shadow: 0 4px 12px rgba(20,184,181,.22);
    transition: all .25s ease;
}

    .badge.bg-secondary.rounded-pill:hover {
        background: linear-gradient(135deg,#0891b2,#0f766e) !important;
        color: #ffffff !important;
    }

/* Light Mode */
body.light-theme .badge.bg-secondary.rounded-pill {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    color: #ffffff !important;
}

/* Dark Mode */
body.dark-theme .badge.bg-secondary.rounded-pill {
    background: linear-gradient(135deg,#14b8b5,#0891b2) !important;
    color: #ffffff !important;
    border-color: rgba(20,184,181,.35) !important;
}